[lexical-table][lexical-clipboard] Bug Fix: Race condition in table CUT_COMMAND (#6550)

Author: etrepum

packages/lexical-clipboard/src/clipboard.ts

@@ -12,6 +12,7 @@ import {objectKlassEquals} from '@lexical/utils';
 import {
   $cloneWithProperties,
   $createTabNode,
+  $getEditor,
   $getRoot,
   $getSelection,
   $isElementNode,
@@ -34,18 +35,26 @@ import invariant from 'shared/invariant';
 const getDOMSelection = (targetWindow: Window | null): Selection | null =>
   CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
 
+export interface LexicalClipboardData {
+  'text/html'?: string | undefined;
+  'application/x-lexical-editor'?: string | undefined;
+  'text/plain': string;
+}
+
 /**
  * Returns the *currently selected* Lexical content as an HTML string, relying on the
  * logic defined in the exportDOM methods on the LexicalNode classes. Note that
  * this will not return the HTML content of the entire editor (unless all the content is included
  * in the current selection).
  *
  * @param editor - LexicalEditor instance to get HTML content from
+ * @param selection - The selection to use (default is $getSelection())
  * @returns a string of HTML content
  */
-export function $getHtmlContent(editor: LexicalEditor): string {
-  const selection = $getSelection();
-
+export function $getHtmlContent(
+  editor: LexicalEditor,
+  selection = $getSelection(),
+): string {
   if (selection == null) {
     invariant(false, 'Expected valid LexicalSelection');
   }
@@ -68,11 +77,13 @@ export function $getHtmlContent(editor: LexicalEditor): string {
  * in the current selection).
  *
  * @param editor  - LexicalEditor instance to get the JSON content from
+ * @param selection - The selection to use (default is $getSelection())
  * @returns
  */
-export function $getLexicalContent(editor: LexicalEditor): null | string {
-  const selection = $getSelection();
-
+export function $getLexicalContent(
+  editor: LexicalEditor,
+  selection = $getSelection(),
+): null | string {
   if (selection == null) {
     invariant(false, 'Expected valid LexicalSelection');
   }
@@ -383,6 +394,7 @@ let clipboardEventTimeout: null | number = null;
 export async function copyToClipboard(
   editor: LexicalEditor,
   event: null | ClipboardEvent,
+  data?: LexicalClipboardData,
 ): Promise<boolean> {
   if (clipboardEventTimeout !== null) {
     // Prevent weird race conditions that can happen when this function is run multiple times
@@ -392,7 +404,7 @@ export async function copyToClipboard(
   if (event !== null) {
     return new Promise((resolve, reject) => {
       editor.update(() => {
-        resolve($copyToClipboardEvent(editor, event));
+        resolve($copyToClipboardEvent(editor, event, data));
       });
     });
   }
@@ -423,7 +435,9 @@ export async function copyToClipboard(
             window.clearTimeout(clipboardEventTimeout);
             clipboardEventTimeout = null;
           }
-          resolve($copyToClipboardEvent(editor, secondEvent as ClipboardEvent));
+          resolve(
+            $copyToClipboardEvent(editor, secondEvent as ClipboardEvent, data),
+          );
         }
         // Block the entire copy flow while we wait for the next ClipboardEvent
         return true;
@@ -446,38 +460,83 @@ export async function copyToClipboard(
 function $copyToClipboardEvent(
   editor: LexicalEditor,
   event: ClipboardEvent,
+  data?: LexicalClipboardData,
 ): boolean {
-  const domSelection = getDOMSelection(editor._window);
-  if (!domSelection) {
-    return false;
-  }
-  const anchorDOM = domSelection.anchorNode;
-  const focusDOM = domSelection.focusNode;
-  if (
-    anchorDOM !== null &&
-    focusDOM !== null &&
-    !isSelectionWithinEditor(editor, anchorDOM, focusDOM)
-  ) {
-    return false;
+  if (data === undefined) {
+    const domSelection = getDOMSelection(editor._window);
+    if (!domSelection) {
+      return false;
+    }
+    const anchorDOM = domSelection.anchorNode;
+    const focusDOM = domSelection.focusNode;
+    if (
+      anchorDOM !== null &&
+      focusDOM !== null &&
+      !isSelectionWithinEditor(editor, anchorDOM, focusDOM)
+    ) {
+      return false;
+    }
+    const selection = $getSelection();
+    if (selection === null) {
+      return false;
+    }
+    data = $getClipboardDataFromSelection(selection);
   }
   event.preventDefault();
   const clipboardData = event.clipboardData;
-  const selection = $getSelection();
-  if (clipboardData === null || selection === null) {
+  if (clipboardData === null) {
     return false;
   }
-  const htmlString = $getHtmlContent(editor);
-  const lexicalString = $getLexicalContent(editor);
-  let plainString = '';
-  if (selection !== null) {
-    plainString = selection.getTextContent();
-  }
-  if (htmlString !== null) {
-    clipboardData.setData('text/html', htmlString);
+  setLexicalClipboardDataTransfer(clipboardData, data);
+  return true;
+}
+
+const clipboardDataFunctions = [
+  ['text/html', $getHtmlContent],
+  ['application/x-lexical-editor', $getLexicalContent],
+] as const;
+
+/**
+ * Serialize the content of the current selection to strings in
+ * text/plain, text/html, and application/x-lexical-editor (Lexical JSON)
+ * formats (as available).
+ *
+ * @param selection the selection to serialize (defaults to $getSelection())
+ * @returns LexicalClipboardData
+ */
+export function $getClipboardDataFromSelection(
+  selection: BaseSelection | null = $getSelection(),
+): LexicalClipboardData {
+  const clipboardData: LexicalClipboardData = {
+    'text/plain': selection ? selection.getTextContent() : '',
+  };
+  if (selection) {
+    const editor = $getEditor();
+    for (const [mimeType, $editorFn] of clipboardDataFunctions) {
+      const v = $editorFn(editor, selection);
+      if (v !== null) {
+        clipboardData[mimeType] = v;
+      }
+    }
   }
-  if (lexicalString !== null) {
-    clipboardData.setData('application/x-lexical-editor', lexicalString);
+  return clipboardData;
+}
+
+/**
+ * Call setData on the given clipboardData for each MIME type present
+ * in the given data (from {@link $getClipboardDataFromSelection})
+ *
+ * @param clipboardData the event.clipboardData to populate from data
+ * @param data The lexical data
+ */
+export function setLexicalClipboardDataTransfer(
+  clipboardData: DataTransfer,
+  data: LexicalClipboardData,
+) {
+  for (const k in data) {
+    const v = data[k as keyof LexicalClipboardData];
+    if (v !== undefined) {
+      clipboardData.setData(k, v);
+    }
   }
-  clipboardData.setData('text/plain', plainString);
-  return true;
 }

packages/lexical-clipboard/src/index.ts

@@ -9,10 +9,13 @@
 export {
   $generateJSONFromSelectedNodes,
   $generateNodesFromSerializedNodes,
+  $getClipboardDataFromSelection,
   $getHtmlContent,
   $getLexicalContent,
   $insertDataTransferForPlainText,
   $insertDataTransferForRichText,
   $insertGeneratedNodes,
   copyToClipboard,
+  type LexicalClipboardData,
+  setLexicalClipboardDataTransfer,
 } from './clipboard';

packages/lexical-table/src/LexicalTableSelectionHelpers.ts

@@ -24,7 +24,10 @@ import type {
   TextFormatType,
 } from 'lexical';
 
-import {copyToClipboard} from '@lexical/clipboard';
+import {
+  $getClipboardDataFromSelection,
+  copyToClipboard,
+} from '@lexical/clipboard';
 import {$findMatchingParent, objectKlassEquals} from '@lexical/utils';
 import {
   $createParagraphNode,
@@ -35,7 +38,6 @@ import {
   $getSelection,
   $isDecoratorNode,
   $isElementNode,
-  $isNodeSelection,
   $isRangeSelection,
   $isRootOrShadowRoot,
   $isTextNode,
@@ -381,25 +383,23 @@ export function applyTableHandlers(
       (event) => {
         const selection = $getSelection();
         if (selection) {
-          if ($isNodeSelection(selection)) {
+          if (!($isTableSelection(selection) || $isRangeSelection(selection))) {
             return false;
           }
-
-          copyToClipboard(
+          // Copying to the clipboard is async so we must capture the data
+          // before we delete it
+          void copyToClipboard(
             editor,
             objectKlassEquals(event, ClipboardEvent)
               ? (event as ClipboardEvent)
               : null,
+            $getClipboardDataFromSelection(selection),
           );
-
-          if ($isTableSelection(selection)) {
-            $deleteCellHandler(event);
-            return true;
-          } else if ($isRangeSelection(selection)) {
-            $deleteCellHandler(event);
+          const intercepted = $deleteCellHandler(event);
+          if ($isRangeSelection(selection)) {
             selection.removeText();
-            return true;
           }
+          return intercepted;
         }
         return false;
       },