WIP getDOMSlot

facebook · Oct 24, 2024 · 6ce96d0 · 6ce96d0
1 parent 409c65e
commit 6ce96d0
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 112 deletions.
diff --git a/packages/lexical/src/LexicalMutations.ts b/packages/lexical/src/LexicalMutations.ts
@@ -6,8 +6,9 @@
  *
  */
 
-import type {TextNode} from '.';
+import type {LexicalNode, TextNode} from '.';
 import type {LexicalEditor} from './LexicalEditor';
+import type {LexicalPrivateDOM} from './LexicalNode';
 import type {BaseSelection} from './LexicalSelection';
 
 import {IS_FIREFOX} from 'shared/environment';
@@ -27,6 +28,7 @@ import {
   $getNodeFromDOMNode,
   $updateTextNodeFromDOMContent,
   getDOMSelection,
+  getNodeKeyFromDOMNode,
   getWindow,
   internalGetRoot,
   isFirefoxClipboardEvents,
@@ -53,14 +55,12 @@ function initTextEntryListener(editor: LexicalEditor): void {
 
 function isManagedLineBreak(
   dom: Node,
-  target: Node,
+  target: Node & LexicalPrivateDOM,
   editor: LexicalEditor,
 ): boolean {
   return (
-    // @ts-expect-error: internal field
     target.__lexicalLineBreak === dom ||
-    // @ts-ignore We intentionally add this to the Node.
-    dom[`__lexicalKey_${editor._key}`] !== undefined
+    getNodeKeyFromDOMNode(dom, editor) !== undefined
   );
 }
 
@@ -120,7 +120,7 @@ export function $flushMutations(
   try {
     updateEditor(editor, () => {
       const selection = $getSelection() || getLastSelection(editor);
-      const badDOMTargets = new Map();
+      const badDOMTargets = new Map<Node, LexicalNode | null>();
       const rootElement = editor.getRootElement();
       // We use the current editor state, as that reflects what is
       // actually "on screen".
@@ -230,7 +230,8 @@ export function $flushMutations(
         for (const [targetDOM, targetNode] of badDOMTargets) {
           if ($isElementNode(targetNode)) {
             const childKeys = targetNode.getChildrenKeys();
-            let currentDOM = targetDOM.firstChild;
+            const slot = targetNode.getDOMSlot(targetDOM as HTMLElement);
+            let currentDOM = slot.getFirstChild();
 
             for (let s = 0; s < childKeys.length; s++) {
               const key = childKeys[s];
@@ -241,10 +242,10 @@ export function $flushMutations(
               }
 
               if (currentDOM == null) {
-                targetDOM.appendChild(correctDOM);
+                slot.insertChild(correctDOM);
                 currentDOM = correctDOM;
               } else if (currentDOM !== correctDOM) {
-                targetDOM.replaceChild(correctDOM, currentDOM);
+                slot.replaceChild(correctDOM, currentDOM);
               }
 
               currentDOM = currentDOM.nextSibling;

diff --git a/packages/lexical/src/LexicalNode.ts b/packages/lexical/src/LexicalNode.ts
@@ -56,6 +56,14 @@ export type SerializedLexicalNode = {
   version: number;
 };
 
+/** @internal */
+export interface LexicalPrivateDOM {
+  __lexicalTextContent?: string | undefined | null;
+  __lexicalLineBreak?: HTMLBRElement | undefined | null;
+  __lexicalDirTextContent?: string | undefined | null;
+  __lexicalDir?: 'ltr' | 'rtl' | null | undefined;
+}
+
 export function $removeNode(
   nodeToRemove: LexicalNode,
   restoreSelection: boolean,