@haklex/rich-plugin-block-handle 0.0.108 → 0.0.110

package/dist/BlockHandlePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockHandlePlugin.d.ts","sourceRoot":"","sources":["../src/BlockHandlePlugin.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAgD,YAAY,EAAE,MAAM,OAAO,CAAC;AA+xBxF,wBAAgB,iBAAiB,IAAI,YAAY,CAGhD"}
+{"version":3,"file":"BlockHandlePlugin.d.ts","sourceRoot":"","sources":["../src/BlockHandlePlugin.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAgD,YAAY,EAAE,MAAM,OAAO,CAAC;AAgyBxF,wBAAgB,iBAAiB,IAAI,YAAY,CAGhD"}

package/dist/blockSelectionUtils.d.ts

@@ -1,4 +1,15 @@
 import { LexicalEditor, LexicalNode } from 'lexical';
+export declare function setBlockClipboardDataTransfer(dataTransfer: Pick<DataTransfer, 'setData'>, clipboardData: Record<string, string>): void;
+export declare function createDataTransferFromBlockClipboardData(clipboardData: Record<string, string>): DataTransfer;
+export declare function readNativeClipboardDataTransfer(): Promise<DataTransfer | null>;
+export declare function writeBlockClipboardDataToNativeClipboard(editor: LexicalEditor, clipboardData: Record<string, string>): boolean;
 export declare function buildBlockClipboardData(editor: LexicalEditor, nodes: readonly LexicalNode[]): Record<string, string>;
 export declare function removeTopLevelNodesAndRestoreSelection(nodes: readonly LexicalNode[]): void;
+export declare function removeTopLevelNodesAndCreatePasteTarget(nodes: readonly LexicalNode[]): void;
+export declare function getDataTransferFromPasteEvent(event: unknown): DataTransfer | null;
+export declare function hasPasteableClipboardData(clipboardData: DataTransfer): boolean;
+export declare function hasInsertableClipboardData(clipboardData: DataTransfer): boolean;
+export declare function isDataTransferOnlyPasteEvent(event: unknown): boolean;
+export declare function insertDataTransferForBlockSelectionPaste(editor: LexicalEditor, dataTransfer: DataTransfer): boolean;
+export declare function replaceTopLevelNodesWithDataTransfer(editor: LexicalEditor, nodes: readonly LexicalNode[], dataTransfer: DataTransfer): boolean;
 //# sourceMappingURL=blockSelectionUtils.d.ts.map

package/dist/blockSelectionUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blockSelectionUtils.d.ts","sourceRoot":"","sources":["../src/blockSelectionUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AA+BjB,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,SAAS,WAAW,EAAE,GAC5B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2CxB;AAED,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,CAkC1F"}
+{"version":3,"file":"blockSelectionUtils.d.ts","sourceRoot":"","sources":["../src/blockSelectionUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAUL,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AA+BjB,wBAAgB,6BAA6B,CAC3C,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACpC,IAAI,CAIN;AAED,wBAAgB,wCAAwC,CACtD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACpC,YAAY,CAad;AAED,wBAAsB,+BAA+B,IAAI,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAkCpF;AAED,wBAAgB,wCAAwC,CACtD,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACpC,OAAO,CAqBT;AAiBD,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,SAAS,WAAW,EAAE,GAC5B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgBxB;AAED,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,CAkC1F;AAED,wBAAgB,uCAAuC,CAAC,KAAK,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,CAW3F;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CASjF;AAED,wBAAgB,yBAAyB,CAAC,aAAa,EAAE,YAAY,GAAG,OAAO,CAI9E;AAED,wBAAgB,0BAA0B,CAAC,aAAa,EAAE,YAAY,GAAG,OAAO,CAE/E;AAED,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CASpE;AA8BD,wBAAgB,wCAAwC,CACtD,MAAM,EAAE,aAAa,EACrB,YAAY,EAAE,YAAY,GACzB,OAAO,CA2CT;AAED,wBAAgB,oCAAoC,CAClD,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,SAAS,WAAW,EAAE,EAC7B,YAAY,EAAE,YAAY,GACzB,OAAO,CAKT"}

package/dist/index.mjs

@@ -7,11 +7,11 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
 import { $createQuoteNode, $createHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
-import { $getRoot, $createParagraphNode, createEditor, $parseSerializedNode, $isElementNode, $createNodeSelection, $setSelection, $getSelection, $isNodeSelection, KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_ARROW_UP_COMMAND, SELECT_ALL_COMMAND, $isRangeSelection, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, COPY_COMMAND, CUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, REMOVE_TEXT_COMMAND, DELETE_CHARACTER_COMMAND, $getNearestNodeFromDOMNode, $getNodeByKey, DRAGOVER_COMMAND, DROP_COMMAND, DRAGSTART_COMMAND } from "lexical";
+import { $getRoot, $createParagraphNode, $getSelection, $parseSerializedNode, $isElementNode, $createNodeSelection, $setSelection, $isRangeSelection, $createTabNode, $isNodeSelection, PASTE_TAG, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, SELECT_ALL_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, COPY_COMMAND, CUT_COMMAND, PASTE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, REMOVE_TEXT_COMMAND, DELETE_CHARACTER_COMMAND, $getNearestNodeFromDOMNode, $getNodeByKey, DRAGOVER_COMMAND, DROP_COMMAND, DRAGSTART_COMMAND } from "lexical";
 import { Plus, GripVertical, Type, Heading1, Heading2, Heading3, List, ListOrdered, ListChecks, TextQuote, Minus, Code2, Copy, ArrowUp, ArrowDown, Trash2 } from "lucide-react";
 import { useRef, useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { $generateHtmlFromNodes } from "@lexical/html";
+import { $generateNodesFromDOM } from "@lexical/html";
 var handleContainer = "iihqkc0";
 var handleContainerVisible = "iihqkc1";
 var handleBtn = "iihqkc2";
@@ -21,6 +21,12 @@ var dropIndicator = "iihqkc5";
 var blockSelected = "iihqkc6";
 var dragCountBadge = "iihqkc7";
 var menuItemDestructive = "iihqkc8";
+const PASTEABLE_CLIPBOARD_TYPES = [
+  "application/x-lexical-editor",
+  "text/html",
+  "text/plain",
+  "text/uri-list"
+];
 function serializeNodeWithChildren(node) {
   const serialized = node.exportJSON();
   if ($isElementNode(node)) {
@@ -28,6 +34,76 @@ function serializeNodeWithChildren(node) {
   }
   return serialized;
 }
+function getHtmlFromTopLevelNodes(editor, nodes) {
+  return nodes.map((node) => editor.getElementByKey(node.getKey())?.outerHTML ?? "").filter(Boolean).join("\n");
+}
+function setBlockClipboardDataTransfer(dataTransfer, clipboardData) {
+  for (const [mimeType, value] of Object.entries(clipboardData)) {
+    dataTransfer.setData(mimeType, value);
+  }
+}
+function createDataTransferFromBlockClipboardData(clipboardData) {
+  return {
+    files: { length: 0 },
+    get types() {
+      return Object.keys(clipboardData);
+    },
+    getData(type) {
+      return clipboardData[type] ?? "";
+    },
+    setData(type, value) {
+      clipboardData[type] = value;
+    }
+  };
+}
+async function readNativeClipboardDataTransfer() {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (!clipboard) return null;
+  const clipboardData = {};
+  if (typeof clipboard.read === "function") {
+    try {
+      const items = await clipboard.read();
+      for (const item of items) {
+        for (const type of PASTEABLE_CLIPBOARD_TYPES) {
+          if (!item.types.includes(type)) continue;
+          const blob = await item.getType(type);
+          clipboardData[type] = await blob.text();
+        }
+      }
+    } catch {
+    }
+  }
+  if (!clipboardData["text/plain"] && typeof clipboard.readText === "function") {
+    try {
+      const text = await clipboard.readText();
+      if (text) {
+        clipboardData["text/plain"] = text;
+      }
+    } catch {
+    }
+  }
+  const dataTransfer = createDataTransferFromBlockClipboardData(clipboardData);
+  return hasInsertableClipboardData(dataTransfer) ? dataTransfer : null;
+}
+function writeBlockClipboardDataToNativeClipboard(editor, clipboardData) {
+  const rootElement = editor.getRootElement();
+  const ownerDocument = rootElement?.ownerDocument ?? globalThis.document;
+  if (!ownerDocument?.execCommand) return false;
+  let wrote = false;
+  const onCopy = (event) => {
+    if (!event.clipboardData) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    setBlockClipboardDataTransfer(event.clipboardData, clipboardData);
+    wrote = true;
+  };
+  ownerDocument.addEventListener("copy", onCopy, true);
+  try {
+    return ownerDocument.execCommand("copy") && wrote;
+  } finally {
+    ownerDocument.removeEventListener("copy", onCopy, true);
+  }
+}
 function selectTopLevelNode(node, placement) {
   if ($isElementNode(node)) {
     if (placement === "end") {
@@ -45,31 +121,7 @@ function buildBlockClipboardData(editor, nodes) {
   const lexicalEditor = editor;
   const namespace = lexicalEditor._config.namespace;
   const serializedNodes = nodes.map(serializeNodeWithChildren);
-  let html = "";
-  try {
-    const registeredNodeKlasses = [
-      ...new Set([...lexicalEditor._nodes.values()].map((entry) => entry.klass))
-    ];
-    const tempEditor = createEditor({
-      namespace: `${namespace}-block-selection-html`,
-      nodes: registeredNodeKlasses,
-      onError: (error) => {
-        throw error;
-      }
-    });
-    tempEditor.update(
-      () => {
-        const root = $getRoot();
-        for (const serializedNode of serializedNodes) {
-          root.append($parseSerializedNode(serializedNode));
-        }
-        html = $generateHtmlFromNodes(tempEditor, null);
-      },
-      { discrete: true }
-    );
-  } catch {
-    html = "";
-  }
+  const html = getHtmlFromTopLevelNodes(editor, nodes);
   return {
     "application/x-lexical-editor": JSON.stringify({
       namespace,
@@ -108,9 +160,102 @@ function removeTopLevelNodesAndRestoreSelection(nodes) {
     selectTopLevelNode(fallbackNode, "start");
   }
 }
+function removeTopLevelNodesAndCreatePasteTarget(nodes) {
+  if (nodes.length === 0) return;
+  const pasteTarget = $createParagraphNode();
+  nodes[0].insertBefore(pasteTarget);
+  for (const node of nodes) {
+    node.remove();
+  }
+  pasteTarget.selectStart();
+}
+function getDataTransferFromPasteEvent(event) {
+  if (!event || typeof event !== "object") return null;
+  const pasteEvent = event;
+  return pasteEvent.clipboardData ?? pasteEvent.dataTransfer ?? null;
+}
+function hasPasteableClipboardData(clipboardData) {
+  if (clipboardData.files.length > 0) return true;
+  return hasInsertableClipboardData(clipboardData);
+}
+function hasInsertableClipboardData(clipboardData) {
+  return PASTEABLE_CLIPBOARD_TYPES.some((type) => clipboardData.getData(type).length > 0);
+}
+function isDataTransferOnlyPasteEvent(event) {
+  if (!event || typeof event !== "object") return false;
+  const pasteEvent = event;
+  return !pasteEvent.clipboardData && Boolean(pasteEvent.dataTransfer);
+}
+function insertPlainText(text) {
+  const selection = $getSelection();
+  if (!selection) return false;
+  if (!$isRangeSelection(selection)) {
+    selection.insertRawText(text);
+    return true;
+  }
+  const parts = text.split(/(\r?\n|\t)/);
+  if (parts.at(-1) === "") parts.pop();
+  for (const part of parts) {
+    const currentSelection = $getSelection();
+    if (!$isRangeSelection(currentSelection)) continue;
+    if (part === "\n" || part === "\r\n") {
+      currentSelection.insertParagraph();
+    } else if (part === "	") {
+      currentSelection.insertNodes([$createTabNode()]);
+    } else {
+      currentSelection.insertText(part);
+    }
+  }
+  return true;
+}
+function insertDataTransferForBlockSelectionPaste(editor, dataTransfer) {
+  const lexicalString = dataTransfer.getData("application/x-lexical-editor");
+  if (lexicalString) {
+    try {
+      const payload = JSON.parse(lexicalString);
+      const lexicalEditor = editor;
+      if (payload.namespace === lexicalEditor._config.namespace && Array.isArray(payload.nodes)) {
+        const selection = $getSelection();
+        if (!selection) return false;
+        selection.insertNodes(payload.nodes.map($parseSerializedNode));
+        return true;
+      }
+    } catch {
+    }
+  }
+  const htmlString = dataTransfer.getData("text/html");
+  const plainString = dataTransfer.getData("text/plain");
+  if (htmlString && plainString !== htmlString) {
+    try {
+      const selection = $getSelection();
+      if (!selection) return false;
+      const dom = new DOMParser().parseFromString(htmlString, "text/html");
+      selection.insertNodes($generateNodesFromDOM(editor, dom));
+      return true;
+    } catch {
+    }
+  }
+  const text = plainString || dataTransfer.getData("text/uri-list");
+  return text ? insertPlainText(text) : false;
+}
+function replaceTopLevelNodesWithDataTransfer(editor, nodes, dataTransfer) {
+  if (nodes.length === 0 || !hasInsertableClipboardData(dataTransfer)) return false;
+  removeTopLevelNodesAndCreatePasteTarget(nodes);
+  return insertDataTransferForBlockSelectionPaste(editor, dataTransfer);
+}
+function isPasteBeforeInputEvent(event) {
+  return event.inputType === "insertFromPaste" || event.inputType === "insertFromPasteAsQuotation";
+}
 function $getTopLevelKeys() {
   return $getRoot().getChildren().map((c) => c.getKey());
 }
+function getTopLevelKey(node) {
+  let current = node;
+  while (current && current.getParent() && current.getParent() !== $getRoot()) {
+    current = current.getParent();
+  }
+  return current?.getParent() === $getRoot() ? current.getKey() : null;
+}
 function $selectBlockRange(anchorKey, focusKey) {
   const children = $getRoot().getChildren();
   const anchorIdx = children.findIndex((c) => c.getKey() === anchorKey);
@@ -128,6 +273,7 @@ function useBlockSelection(editor) {
   const anchorKeyRef = useRef(null);
   const focusKeyRef = useRef(null);
   const blockSelectionKeysRef = useRef(/* @__PURE__ */ new Set());
+  const latestBlockClipboardDataRef = useRef(null);
   const clearBlockSelectionState = useCallback(() => {
     blockSelectionKeysRef.current = /* @__PURE__ */ new Set();
     anchorKeyRef.current = null;
@@ -139,14 +285,54 @@ function useBlockSelection(editor) {
   }, []);
   const getOwnedSelectionNodes = useCallback(() => {
     const ownedKeys = blockSelectionKeysRef.current;
-    if (ownedKeys.size === 0) return [];
+    if (ownedKeys.size === 0) {
+      const selection2 = $getSelection();
+      if (!$isNodeSelection(selection2)) return [];
+      const selectedNodes = selection2.getNodes();
+      const topLevelFallbackNodes = selectedNodes.filter((node) => node.getParent() === $getRoot());
+      if (topLevelFallbackNodes.length > 1 && topLevelFallbackNodes.length === selectedNodes.length) {
+        return getTopLevelNodesByKeys(new Set(topLevelFallbackNodes.map((node) => node.getKey())));
+      }
+      return [];
+    }
     const selection = $getSelection();
-    if (!$isNodeSelection(selection)) return [];
-    const selectionKeys = new Set(selection.getNodes().map((node) => node.getKey()));
-    const isOwnedSelection = selectionKeys.size === ownedKeys.size && [...selectionKeys].every((key) => ownedKeys.has(key));
-    if (!isOwnedSelection) return [];
+    if (!$isNodeSelection(selection)) {
+      return getTopLevelNodesByKeys(ownedKeys);
+    }
     return getTopLevelNodesByKeys(ownedKeys);
   }, [getTopLevelNodesByKeys]);
+  const replaceBlockSelectionWithDataTransfer = useCallback(
+    (dataTransfer) => {
+      if (!hasInsertableClipboardData(dataTransfer)) {
+        return false;
+      }
+      let handled = false;
+      editor.update(
+        () => {
+          const nodes = getOwnedSelectionNodes();
+          if (nodes.length === 0) {
+            return;
+          }
+          handled = replaceTopLevelNodesWithDataTransfer(editor, nodes, dataTransfer);
+          if (handled) {
+            clearBlockSelectionState();
+          }
+        },
+        { discrete: true, tag: PASTE_TAG }
+      );
+      return handled;
+    },
+    [clearBlockSelectionState, editor, getOwnedSelectionNodes]
+  );
+  const getCurrentBlockClipboardData = useCallback(() => {
+    let clipboardData = null;
+    editor.getEditorState().read(() => {
+      const nodes = getOwnedSelectionNodes();
+      if (nodes.length === 0) return;
+      clipboardData = buildBlockClipboardData(editor, nodes);
+    });
+    return clipboardData;
+  }, [editor, getOwnedSelectionNodes]);
   const deleteBlocksByKeys = useCallback(
     (keys) => {
       editor.update(
@@ -168,6 +354,7 @@ function useBlockSelection(editor) {
       if (!rootEl) return;
       const nextKeys = /* @__PURE__ */ new Set();
       let isNodeSel = false;
+      const rangeTopLevelKeys = [];
       let topLevelKeys = [];
       editorState.read(() => {
         const sel = $getSelection();
@@ -176,12 +363,23 @@ function useBlockSelection(editor) {
           for (const node of sel.getNodes()) {
             nextKeys.add(node.getKey());
           }
+        } else if ($isRangeSelection(sel)) {
+          const anchorTopLevelKey = getTopLevelKey(sel.anchor.getNode());
+          const focusTopLevelKey = getTopLevelKey(sel.focus.getNode());
+          if (anchorTopLevelKey) rangeTopLevelKeys.push(anchorTopLevelKey);
+          if (focusTopLevelKey && focusTopLevelKey !== anchorTopLevelKey) {
+            rangeTopLevelKeys.push(focusTopLevelKey);
+          }
         }
         topLevelKeys = $getTopLevelKeys();
       });
       if (blockSelectionKeysRef.current.size > 0) {
         if (!isNodeSel) {
-          clearBlockSelectionState();
+          const owned = blockSelectionKeysRef.current;
+          const rangeStillInsideOwnedBlocks = rangeTopLevelKeys.length > 0 && rangeTopLevelKeys.every((key) => owned.has(key));
+          if (!rangeStillInsideOwnedBlocks) {
+            clearBlockSelectionState();
+          }
         } else {
           const owned = blockSelectionKeysRef.current;
           const stillOwned = nextKeys.size === owned.size && [...nextKeys].every((k) => owned.has(k));
@@ -199,7 +397,8 @@ function useBlockSelection(editor) {
           }
         }
       }
-      const highlightKeys = blockSelectionKeysRef.current.size > 0 ? nextKeys : /* @__PURE__ */ new Set();
+      const topLevelKeySet = new Set(topLevelKeys);
+      const highlightKeys = blockSelectionKeysRef.current.size > 0 ? new Set([...blockSelectionKeysRef.current].filter((key) => topLevelKeySet.has(key))) : /* @__PURE__ */ new Set();
       for (const key of prevKeys) {
         if (!highlightKeys.has(key)) {
           editor.getElementByKey(key)?.classList.remove(blockSelected);
@@ -219,6 +418,17 @@ function useBlockSelection(editor) {
       }
     };
   }, [clearBlockSelectionState, editor]);
+  useEffect(() => {
+    const rootEl = editor.getRootElement();
+    if (!rootEl) return;
+    const onPointerDown = (event) => {
+      if (blockSelectionKeysRef.current.size === 0) return;
+      if (!(event.target instanceof Node) || !rootEl.contains(event.target)) return;
+      clearBlockSelectionState();
+    };
+    rootEl.addEventListener("pointerdown", onPointerDown, true);
+    return () => rootEl.removeEventListener("pointerdown", onPointerDown, true);
+  }, [clearBlockSelectionState, editor]);
   useEffect(() => {
     const rootEl = editor.getRootElement();
     if (!rootEl) return;
@@ -241,6 +451,45 @@ function useBlockSelection(editor) {
     return () => rootEl.removeEventListener("focusin", onFocusIn);
   }, [clearBlockSelectionState, editor]);
   useEffect(() => {
+    const rootEl = editor.getRootElement();
+    if (!rootEl) return;
+    const onBeforeInput = (event) => {
+      if (!isPasteBeforeInputEvent(event)) return;
+      if (blockSelectionKeysRef.current.size === 0 || !event.dataTransfer) return;
+      const handled = replaceBlockSelectionWithDataTransfer(event.dataTransfer);
+      if (!handled) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    rootEl.addEventListener("beforeinput", onBeforeInput, true);
+    return () => rootEl.removeEventListener("beforeinput", onBeforeInput, true);
+  }, [editor, replaceBlockSelectionWithDataTransfer]);
+  useEffect(() => {
+    const unregKeyDown = editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const key = event.key.toLowerCase();
+        if (!event.metaKey && !event.ctrlKey && key !== "escape") return false;
+        if (!["a", "c", "v", "x", "escape"].includes(key)) return false;
+        if ((event.metaKey || event.ctrlKey) && key === "v" && blockSelectionKeysRef.current.size > 0) {
+          event.preventDefault();
+          const cachedClipboardData = latestBlockClipboardDataRef.current ? { ...latestBlockClipboardDataRef.current } : null;
+          void (async () => {
+            const dataTransfer = cachedClipboardData ? createDataTransferFromBlockClipboardData(cachedClipboardData) : await readNativeClipboardDataTransfer();
+            if (!dataTransfer) {
+              return;
+            }
+            if (blockSelectionKeysRef.current.size === 0) {
+              return;
+            }
+            replaceBlockSelectionWithDataTransfer(dataTransfer);
+          })();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
     const unregShiftDown = editor.registerCommand(
       KEY_ARROW_DOWN_COMMAND,
       (event) => {
@@ -357,43 +606,79 @@ function useBlockSelection(editor) {
     const unregCopy = editor.registerCommand(
       COPY_COMMAND,
       (event) => {
-        if (!event || !("clipboardData" in event) || !event.clipboardData) return false;
-        let handled = false;
-        editor.getEditorState().read(() => {
-          const nodes = getOwnedSelectionNodes();
-          if (nodes.length === 0) return;
+        const clipboardEvent = event && typeof event === "object" && "clipboardData" in event ? event : null;
+        const clipboardData = getCurrentBlockClipboardData();
+        if (!clipboardData) return false;
+        latestBlockClipboardDataRef.current = clipboardData;
+        if (clipboardEvent?.clipboardData) {
+          clipboardEvent.preventDefault();
+          setBlockClipboardDataTransfer(clipboardEvent.clipboardData, clipboardData);
+          return true;
+        }
+        if (event && typeof event === "object" && "preventDefault" in event && typeof event.preventDefault === "function") {
           event.preventDefault();
-          const clipboardData = buildBlockClipboardData(editor, nodes);
-          for (const [mimeType, value] of Object.entries(clipboardData)) {
-            event.clipboardData?.setData(mimeType, value);
-          }
-          handled = true;
-        });
-        return handled;
+        }
+        writeBlockClipboardDataToNativeClipboard(editor, clipboardData);
+        return true;
       },
       COMMAND_PRIORITY_CRITICAL
     );
     const unregCut = editor.registerCommand(
       CUT_COMMAND,
       (event) => {
-        if (!event || !("clipboardData" in event) || !event.clipboardData) return false;
+        const clipboardEvent = event && typeof event === "object" && "clipboardData" in event ? event : null;
         let keysToDelete = [];
+        let clipboardData = null;
         editor.getEditorState().read(() => {
           const nodes = getOwnedSelectionNodes();
           if (nodes.length === 0) return;
-          event.preventDefault();
-          const clipboardData = buildBlockClipboardData(editor, nodes);
-          for (const [mimeType, value] of Object.entries(clipboardData)) {
-            event.clipboardData?.setData(mimeType, value);
-          }
+          clipboardData = buildBlockClipboardData(editor, nodes);
           keysToDelete = nodes.map((node) => node.getKey());
         });
-        if (keysToDelete.length === 0) return false;
+        if (keysToDelete.length === 0 || !clipboardData) return false;
+        latestBlockClipboardDataRef.current = clipboardData;
+        if (clipboardEvent?.clipboardData) {
+          clipboardEvent.preventDefault();
+          setBlockClipboardDataTransfer(clipboardEvent.clipboardData, clipboardData);
+        } else {
+          if (event && typeof event === "object" && "preventDefault" in event && typeof event.preventDefault === "function") {
+            event.preventDefault();
+          }
+          writeBlockClipboardDataToNativeClipboard(editor, clipboardData);
+        }
         deleteBlocksByKeys(keysToDelete);
         return true;
       },
       COMMAND_PRIORITY_CRITICAL
     );
+    const unregPaste = editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        const clipboardData = getDataTransferFromPasteEvent(event);
+        if (!clipboardData) {
+          return false;
+        }
+        const dataTransferOnly = isDataTransferOnlyPasteEvent(event);
+        const hasPasteData = dataTransferOnly ? hasInsertableClipboardData(clipboardData) : hasPasteableClipboardData(clipboardData);
+        if (!hasPasteData) {
+          return false;
+        }
+        const nodes = getOwnedSelectionNodes();
+        if (nodes.length === 0) {
+          return false;
+        }
+        removeTopLevelNodesAndCreatePasteTarget(nodes);
+        clearBlockSelectionState();
+        if (dataTransferOnly) {
+          if (event && typeof event === "object" && "preventDefault" in event && typeof event.preventDefault === "function") {
+            event.preventDefault();
+          }
+          return insertDataTransferForBlockSelectionPaste(editor, clipboardData);
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
     const handleDeleteBlocks = (payload) => {
       let keysToDelete = [];
       editor.getEditorState().read(() => {
@@ -427,18 +712,27 @@ function useBlockSelection(editor) {
       COMMAND_PRIORITY_CRITICAL
     );
     return () => {
+      unregKeyDown();
       unregShiftDown();
       unregShiftUp();
       unregSelectAll();
       unregEscape();
       unregCopy();
       unregCut();
+      unregPaste();
       unregBackspace();
       unregDelete();
       unregRemoveText();
       unregDeleteCharacter();
     };
-  }, [clearBlockSelectionState, deleteBlocksByKeys, editor, getOwnedSelectionNodes]);
+  }, [
+    clearBlockSelectionState,
+    deleteBlocksByKeys,
+    editor,
+    getCurrentBlockClipboardData,
+    getOwnedSelectionNodes,
+    replaceBlockSelectionWithDataTransfer
+  ]);
   const selectBlock = useCallback(
     (nodeKey, shiftKey) => {
       editor.update(() => {
@@ -900,9 +1194,11 @@ function BlockHandleInner({ editor }) {
         return;
       }
       if (!handle.nodeKey) return;
-      selectBlock(handle.nodeKey, event.shiftKey);
+      const { nodeKey } = handle;
+      const { shiftKey } = event;
+      editor.focus(() => selectBlock(nodeKey, shiftKey));
     },
-    [handle.nodeKey, selectBlock]
+    [editor, handle.nodeKey, selectBlock]
   );
   const onGripContextMenu = useCallback(
     (event) => {
@@ -1050,8 +1346,7 @@ function BlockHandleInner({ editor }) {
       const nodeKey = getBlockKeyAtY(event.clientY);
       if (!nodeKey) return;
       event.preventDefault();
-      selectBlock(nodeKey, event.shiftKey);
-      editor.focus();
+      editor.focus(() => selectBlock(nodeKey, event.shiftKey));
       isDragging = true;
       lastKey = nodeKey;
     };

package/dist/useBlockSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBlockSelection.d.ts","sourceRoot":"","sources":["../src/useBlockSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAiBL,KAAK,aAAa,EAInB,MAAM,SAAS,CAAC;AA8BjB,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa;2BA4ZzC,MAAM,YAAY,OAAO;2BA6BG,MAAM,EAAE;kCAwB1C,OAAO;6CAZQ,MAAM,GAAG,IAAI;EAiBnC"}
+{"version":3,"file":"useBlockSelection.d.ts","sourceRoot":"","sources":["../src/useBlockSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAkBL,KAAK,aAAa,EAMnB,MAAM,SAAS,CAAC;AAsDjB,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa;2BAsnBzC,MAAM,YAAY,OAAO;2BA6BG,MAAM,EAAE;kCAwB1C,OAAO;6CAZQ,MAAM,GAAG,IAAI;EAiBnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-block-handle",
-  "version": "0.0.108",
+  "version": "0.0.110",
   "description": "Block handle plugin with add button and context menu",
   "repository": {
     "type": "git",
@@ -22,8 +22,8 @@
   ],
   "dependencies": {
     "@lexical/code-core": "^0.43.0",
-    "@haklex/rich-editor-ui": "0.0.108",
-    "@haklex/rich-style-token": "0.0.108"
+    "@haklex/rich-editor-ui": "0.0.110",
+    "@haklex/rich-style-token": "0.0.110"
   },
   "devDependencies": {
     "@lexical/html": "^0.43.0",