refactor: migrate legacy rich text copmonents after editing (#5275)

https://github.com/user-attachments/assets/1e6f936e-d60e-44cd-9a04-24201e7449e9

Author: TrySound

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<void>((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</$.Italic>
-        </$.Bold>
-        {"\n"}
-        <$.Span ws:id="spanId">and</$.Span>
-        {"\n"}
-        <$.RichTextLink ws:id="linkId">other realms</$.RichTextLink>
-      </$.Box>
-    ).instances
-  );
-});
-
 test("convert lexical to element instances updates", async () => {
   const refs: Refs = new Map();
   const editor = createHeadlessEditor({

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;
 };