Fix root cause by turning update into read

facebook · Nov 26, 2024 · fa2d701 · fa2d701
1 parent 8f98a2c
commit fa2d701
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 63 deletions.
diff --git a/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx
@@ -19,7 +19,6 @@ import {
   $getSelection,
   $isLineBreakNode,
   $isRangeSelection,
-  $setSelection,
   BaseSelection,
   CLICK_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
@@ -206,7 +205,6 @@ function FloatingLinkEditor({
     if (lastSelection !== null) {
       if (linkUrl !== '') {
         editor.update(() => {
-          $setSelection(lastSelection.clone());
           editor.dispatchCommand(
             TOGGLE_LINK_COMMAND,
             sanitizeUrl(editedLinkUrl),

diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -88,27 +88,27 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
 
   useEffect(() => {
     const onMouseMove = (event: MouseEvent) => {
-      setTimeout(() => {
-        const target = event.target;
-
-        if (draggingDirection) {
-          updateMouseCurrentPos({
-            x: event.clientX,
-            y: event.clientY,
-          });
-          return;
-        }
-        updateIsMouseDown(isMouseDownOnEvent(event));
-        if (resizerRef.current && resizerRef.current.contains(target as Node)) {
-          return;
-        }
+      const target = event.target;
 
-        if (targetRef.current !== target) {
-          targetRef.current = target as HTMLElement;
-          const cell = getDOMCellFromTarget(target as HTMLElement);
+      if (draggingDirection) {
+        updateMouseCurrentPos({
+          x: event.clientX,
+          y: event.clientY,
+        });
+        return;
+      }
+      updateIsMouseDown(isMouseDownOnEvent(event));
+      if (resizerRef.current && resizerRef.current.contains(target as Node)) {
+        return;
+      }
 
-          if (cell && activeCell !== cell) {
-            editor.update(() => {
+      if (targetRef.current !== target) {
+        targetRef.current = target as HTMLElement;
+        const cell = getDOMCellFromTarget(target as HTMLElement);
+
+        if (cell && activeCell !== cell) {
+          editor.getEditorState().read(
+            () => {
               const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
               if (!tableCellNode) {
                 throw new Error('TableCellResizer: Table cell node not found.');
@@ -128,24 +128,21 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
               targetRef.current = target as HTMLElement;
               tableRectRef.current = tableElement.getBoundingClientRect();
               updateActiveCell(cell);
-            });
-          } else if (cell == null) {
-            resetState();
-          }
+            },
+            {editor},
+          );
+        } else if (cell == null) {
+          resetState();
         }
-      }, 0);
+      }
     };
 
     const onMouseDown = (event: MouseEvent) => {
-      setTimeout(() => {
-        updateIsMouseDown(true);
-      }, 0);
+      updateIsMouseDown(true);
     };
 
     const onMouseUp = (event: MouseEvent) => {
-      setTimeout(() => {
-        updateIsMouseDown(false);
-      }, 0);
+      updateIsMouseDown(false);
     };
 
     const removeRootListener = editor.registerRootListener(

diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -66,40 +66,44 @@ function TableHoverActionsContainer({
       let hoveredColumnNode: TableCellNode | null = null;
       let tableDOMElement: HTMLElement | null = null;
 
-      editor.update(() => {
-        const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
-
-        if ($isTableCellNode(maybeTableCell)) {
-          const table = $findMatchingParent(maybeTableCell, (node) =>
-            $isTableNode(node),
-          );
-          if (!$isTableNode(table)) {
-            return;
-          }
-
-          tableDOMElement = getTableElement(
-            table,
-            editor.getElementByKey(table.getKey()),
-          );
-
-          if (tableDOMElement) {
-            const rowCount = table.getChildrenSize();
-            const colCount = (
-              (table as TableNode).getChildAtIndex(0) as TableRowNode
-            )?.getChildrenSize();
-
-            const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell);
-            const colIndex =
-              $getTableColumnIndexFromTableCellNode(maybeTableCell);
+      editor.getEditorState().read(
+        () => {
+          const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
+
+          if ($isTableCellNode(maybeTableCell)) {
+            const table = $findMatchingParent(maybeTableCell, (node) =>
+              $isTableNode(node),
+            );
+            if (!$isTableNode(table)) {
+              return;
+            }
 
-            if (rowIndex === rowCount - 1) {
-              hoveredRowNode = maybeTableCell;
-            } else if (colIndex === colCount - 1) {
-              hoveredColumnNode = maybeTableCell;
+            tableDOMElement = getTableElement(
+              table,
+              editor.getElementByKey(table.getKey()),
+            );
+
+            if (tableDOMElement) {
+              const rowCount = table.getChildrenSize();
+              const colCount = (
+                (table as TableNode).getChildAtIndex(0) as TableRowNode
+              )?.getChildrenSize();
+
+              const rowIndex =
+                $getTableRowIndexFromTableCellNode(maybeTableCell);
+              const colIndex =
+                $getTableColumnIndexFromTableCellNode(maybeTableCell);
+
+              if (rowIndex === rowCount - 1) {
+                hoveredRowNode = maybeTableCell;
+              } else if (colIndex === colCount - 1) {
+                hoveredColumnNode = maybeTableCell;
+              }
             }
           }
-        }
-      });
+        },
+        {editor},
+      );
 
       if (tableDOMElement) {
         const {