diff --git a/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx index 44078fd7840..39c9cb2d695 100644 --- 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 index 7f586262645..23f8d1935ab 100644 --- 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 index 92a26ff0015..2116d21179a 100644 --- 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 {