From e1ba10dde11c0f73524976fc110f9124d3cd1801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 2 Oct 2025 10:27:59 +0200 Subject: [PATCH 1/2] Upgrade @saleor/macaw-ui-next and improve EditorJS list conversion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Upgrade @saleor/macaw-ui-next from 1.1.19 to 1.3.5 - Add lucide-react dependency (required by macaw-ui-next) - Move convertEditorJSListBlocks call to save() method in ReactEditorJS - Simplify RichTextEditor and useRichText by removing redundant list conversion - Implement dangerouslyLowLevelInstance in ClientEditorCore (EditorCore interface requirement) This ensures list block conversion happens once at the save level rather than multiple times in consuming components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- package-lock.json | 44 ++++++++++++++----- package.json | 2 +- .../FilterPresetsSelect/FilterPresetItem.tsx | 1 + .../RichTextEditor/ReactEditorJS.tsx | 9 +++- .../RichTextEditor/RichTextEditor.tsx | 3 +- src/utils/richText/useRichText.ts | 5 +-- 6 files changed, 45 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 539cf94857d..8c4cf484740 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "@radix-ui/react-radio-group": "^1.2.3", "@reach/auto-id": "^0.16.0", "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4", - "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.1.19", + "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.3.5", "@saleor/sdk": "0.6.0", "@sentry/react": "^8.21.0", "@sentry/vite-plugin": "^2.21.1", @@ -7313,9 +7313,9 @@ }, "node_modules/@saleor/macaw-ui-next": { "name": "@saleor/macaw-ui", - "version": "1.1.19", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.1.19.tgz", - "integrity": "sha512-CkDVcBA5jLDzpB7o7cNcgFSiOQbsqiM6mZXIS1WRVsI/B+BWKIecOsMLzzacUk/yhpOY0nyBBQQ4TVuqu4HBTQ==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.3.5.tgz", + "integrity": "sha512-L/RgpFADADy51DW1LvBVWTjA60Eso/sxoXrn/6xYsgVKpZ4nM4gXYSJbCK3oVLq9k7WYyhjHhR11dyn/WXndDg==", "license": "CC-BY-4.0", "dependencies": { "@dessert-box/react": "^0.4.0", @@ -7331,17 +7331,24 @@ "@radix-ui/react-tooltip": "^1.0.6", "@vanilla-extract/css-utils": "^0.1.3", "@vanilla-extract/recipes": "^0.5.0", - "downshift": "^9.0.8" + "downshift": "^9.0.8", + "lucide-react": "^0.536.0" }, "engines": { - "node": "18 || 20", - "pnpm": ">=9" + "node": "20 || 22", + "pnpm": "10" }, "peerDependencies": { "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0", + "lucide-react": "^0.536.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "lucide-react": { + "optional": true + } } }, "node_modules/@saleor/macaw-ui-next/node_modules/compute-scroll-into-view": { @@ -17244,6 +17251,15 @@ "node": ">=10" } }, + "node_modules/lucide-react": { + "version": "0.536.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz", + "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -27036,9 +27052,9 @@ } }, "@saleor/macaw-ui-next": { - "version": "npm:@saleor/macaw-ui@1.1.19", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.1.19.tgz", - "integrity": "sha512-CkDVcBA5jLDzpB7o7cNcgFSiOQbsqiM6mZXIS1WRVsI/B+BWKIecOsMLzzacUk/yhpOY0nyBBQQ4TVuqu4HBTQ==", + "version": "npm:@saleor/macaw-ui@1.3.5", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.3.5.tgz", + "integrity": "sha512-L/RgpFADADy51DW1LvBVWTjA60Eso/sxoXrn/6xYsgVKpZ4nM4gXYSJbCK3oVLq9k7WYyhjHhR11dyn/WXndDg==", "requires": { "@dessert-box/react": "^0.4.0", "@floating-ui/react-dom": "^2.0.2", @@ -27053,7 +27069,8 @@ "@radix-ui/react-tooltip": "^1.0.6", "@vanilla-extract/css-utils": "^0.1.3", "@vanilla-extract/recipes": "^0.5.0", - "downshift": "^9.0.8" + "downshift": "^9.0.8", + "lucide-react": "^0.536.0" }, "dependencies": { "compute-scroll-into-view": { @@ -33894,6 +33911,11 @@ "yallist": "^4.0.0" } }, + "lucide-react": { + "version": "0.536.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz", + "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==" + }, "lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", diff --git a/package.json b/package.json index b6110d2cec7..ce73dcd7ab3 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@radix-ui/react-radio-group": "^1.2.3", "@reach/auto-id": "^0.16.0", "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4", - "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.1.19", + "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.3.5", "@saleor/sdk": "0.6.0", "@sentry/react": "^8.21.0", "@sentry/vite-plugin": "^2.21.1", diff --git a/src/components/FilterPresetsSelect/FilterPresetItem.tsx b/src/components/FilterPresetsSelect/FilterPresetItem.tsx index 5258fed06fb..7982635c8d2 100644 --- a/src/components/FilterPresetsSelect/FilterPresetItem.tsx +++ b/src/components/FilterPresetsSelect/FilterPresetItem.tsx @@ -49,6 +49,7 @@ export const FilterPresetItem = ({ > ; @@ -106,7 +105,7 @@ const RichTextEditor: React.FC = ({ setHasValue(editorJsValue.blocks.length > 0); - return onChange?.(convertEditorJSListBlocks(editorJsValue)); + return onChange?.(editorJsValue); }} {...props} > diff --git a/src/utils/richText/useRichText.ts b/src/utils/richText/useRichText.ts index 87e70fef7c0..30324f44ea2 100644 --- a/src/utils/richText/useRichText.ts +++ b/src/utils/richText/useRichText.ts @@ -1,4 +1,3 @@ -import { convertEditorJSListBlocks } from "@dashboard/components/RichTextEditor/utils"; import { OutputData } from "@editorjs/editorjs"; import { EditorCore } from "@react-editor-js/core"; import { MutableRefObject, useMemo, useRef, useState } from "react"; @@ -34,9 +33,7 @@ export function useRichText({ if (editorRef.current) { setIsDirty(false); - const convertedOutputData = convertEditorJSListBlocks(await editorRef.current.save()); - - return convertedOutputData; + return editorRef.current.save(); } else { throw new Error("Editor instance is not available"); } From af5277ed84611e79b8cc7428f723e76e016ae22a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 2 Oct 2025 10:38:47 +0200 Subject: [PATCH 2/2] Add detailed JSDoc comment for dangerouslyLowLevelInstance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Explains why this property is required by EditorCore interface and why it returns null (encapsulation and preventing unsafe access). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/RichTextEditor/ReactEditorJS.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/RichTextEditor/ReactEditorJS.tsx b/src/components/RichTextEditor/ReactEditorJS.tsx index 542843d94e9..0d9d3a5cb27 100644 --- a/src/components/RichTextEditor/ReactEditorJS.tsx +++ b/src/components/RichTextEditor/ReactEditorJS.tsx @@ -29,8 +29,13 @@ class ClientEditorCore implements EditorCore { }); } + /** + * This property is required by the EditorCore interface to optionally expose + * the underlying Editor.js instance for advanced use cases. In this implementation, + * we intentionally do not expose the low-level instance to maintain encapsulation + * and prevent unsafe direct access. Therefore, this always returns null. + */ get dangerouslyLowLevelInstance(): any | null { - // needs to be implemented via EditorCore interface return null; }