From b7050d16abe966237fcafaeebe99f5aa78d99b0f Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Thu, 12 Jun 2025 15:29:49 +0300 Subject: [PATCH] refactor: migrate legacy rich text copmonents after editing --- .../features/text-editor/interop.test.tsx | 36 ------ .../canvas/features/text-editor/interop.ts | 107 ++++++------------ 2 files changed, 33 insertions(+), 110 deletions(-) diff --git a/apps/builder/app/canvas/features/text-editor/interop.test.tsx b/apps/builder/app/canvas/features/text-editor/interop.test.tsx index 2e2fc5239c19..99ea83c941e6 100644 --- a/apps/builder/app/canvas/features/text-editor/interop.test.tsx +++ b/apps/builder/app/canvas/features/text-editor/interop.test.tsx @@ -136,42 +136,6 @@ test("convert element instances to lexical", async () => { ); }); -test("convert lexical to legacy instances updates", async () => { - const refs: Refs = new Map(); - const editor = createHeadlessEditor({ - nodes: [LinkNode], - }); - await new Promise((resolve) => { - editor.update( - () => { - $convertToLexical(instances, "textBoxId", refs); - }, - { onUpdate: resolve } - ); - }); - const treeRootInstance = instances.get("textBoxId"); - if (treeRootInstance === undefined) { - throw Error("Tree root instance should be in test data"); - } - const updates = editor.getEditorState().read(() => { - return $convertToUpdates(treeRootInstance, refs, new Map()); - }); - expect(updates).toEqual( - renderTemplate( - <$.Box ws:id="textBoxId"> - Hello{"\n"} - <$.Bold ws:id="boldId"> - <$.Italic ws:id="italicId">world - - {"\n"} - <$.Span ws:id="spanId">and - {"\n"} - <$.RichTextLink ws:id="linkId">other realms - - ).instances - ); -}); - test("convert lexical to element instances updates", async () => { const refs: Refs = new Map(); const editor = createHeadlessEditor({ diff --git a/apps/builder/app/canvas/features/text-editor/interop.ts b/apps/builder/app/canvas/features/text-editor/interop.ts index 5354e255a5eb..c4591877b79e 100644 --- a/apps/builder/app/canvas/features/text-editor/interop.ts +++ b/apps/builder/app/canvas/features/text-editor/interop.ts @@ -41,8 +41,7 @@ const $writeUpdates = ( instanceChildren: Instance["children"], instancesList: Instance[], refs: Refs, - newLinkKeyToInstanceId: Refs, - isElement: boolean + newLinkKeyToInstanceId: Refs ) => { const children = node.getChildren(); for (const child of children) { @@ -52,8 +51,7 @@ const $writeUpdates = ( instanceChildren, instancesList, refs, - newLinkKeyToInstanceId, - isElement + newLinkKeyToInstanceId ); } if ($isLineBreakNode(child)) { @@ -73,25 +71,15 @@ const $writeUpdates = ( childChildren, instancesList, refs, - newLinkKeyToInstanceId, - isElement + newLinkKeyToInstanceId ); - if (isElement) { - instancesList.push({ - type: "instance", - id, - component: elementComponent, - tag: "a", - children: childChildren, - }); - } else { - instancesList.push({ - type: "instance", - id, - component: "RichTextLink", - children: childChildren, - }); - } + instancesList.push({ + type: "instance", + id, + component: elementComponent, + tag: "a", + children: childChildren, + }); } if ($isTextNode(child)) { // support nesting bold into italic and vice versa @@ -105,60 +93,32 @@ const $writeUpdates = ( const id = refs.get(key) ?? nanoid(); refs.set(key, id); const childChildren: Instance["children"] = []; - if (isElement) { - instancesList.push({ - type: "instance", - id, - component: elementComponent, - tag: "span", - children: childChildren, - }); - } else { - instancesList.push({ - type: "instance", - id, - component: "Span", - children: childChildren, - }); - } + instancesList.push({ + type: "instance", + id, + component: elementComponent, + tag: "span", + children: childChildren, + }); parentUpdates.push({ type: "id", value: id }); parentUpdates = childChildren; } // convert all lexical formats - if (isElement) { - for (const [format, tag] of elementLexicalFormats) { - if (child.hasFormat(format)) { - const key = `${child.getKey()}:${format}`; - const id = refs.get(key) ?? nanoid(); - refs.set(key, id); - const childInstance: Instance = { - type: "instance", - id, - component: elementComponent, - tag, - children: [], - }; - instancesList.push(childInstance); - parentUpdates.push({ type: "id", value: id }); - parentUpdates = childInstance.children; - } - } - } else { - for (const [format, component] of legacyLexicalFormats) { - if (child.hasFormat(format)) { - const key = `${child.getKey()}:${format}`; - const id = refs.get(key) ?? nanoid(); - refs.set(key, id); - const childInstance: Instance = { - type: "instance", - id, - component, - children: [], - }; - instancesList.push(childInstance); - parentUpdates.push({ type: "id", value: id }); - parentUpdates = childInstance.children; - } + for (const [format, tag] of elementLexicalFormats) { + if (child.hasFormat(format)) { + const key = `${child.getKey()}:${format}`; + const id = refs.get(key) ?? nanoid(); + refs.set(key, id); + const childInstance: Instance = { + type: "instance", + id, + component: elementComponent, + tag, + children: [], + }; + instancesList.push(childInstance); + parentUpdates.push({ type: "id", value: id }); + parentUpdates = childInstance.children; } } parentUpdates.push({ type: "text", value: text }); @@ -184,8 +144,7 @@ export const $convertToUpdates = ( treeRootInstanceChildren, instancesList, refs, - newLinkKeyToInstanceId, - treeRootInstance.component === elementComponent + newLinkKeyToInstanceId ); return instancesList; };