@haklex/rich-plugin-block-handle 0.1.1 → 0.3.0

package/dist/index.mjs

@@ -1,1455 +1,1324 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "@haklex/rich-editor-ui";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@haklex/rich-editor-ui";
 import { usePortalTheme } from "@haklex/rich-style-token";
 import { $createCodeNode } from "@lexical/code-core";
 import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
-import { $createQuoteNode, $createHeadingNode } from "@lexical/rich-text";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
-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 { $createNodeSelection, $createParagraphNode, $createTabNode, $getNearestNodeFromDOMNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $parseSerializedNode, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COPY_COMMAND, CUT_COMMAND, DELETE_CHARACTER_COMMAND, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, PASTE_COMMAND, PASTE_TAG, REMOVE_TEXT_COMMAND, SELECT_ALL_COMMAND } from "lexical";
+import { ArrowDown, ArrowUp, Code2, Copy, GripVertical, Heading1, Heading2, Heading3, List, ListChecks, ListOrdered, Minus, Plus, TextQuote, Trash2, Type } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { $generateNodesFromDOM } from "@lexical/html";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/styles.css.ts
 var handleContainer = "iihqkc0";
 var handleContainerVisible = "iihqkc1";
 var handleBtn = "iihqkc2";
 var draggingBlock = "iihqkc3";
 var dragPreview = "iihqkc4";
-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"
+//#endregion
+//#region src/blockSelectionUtils.ts
+var PASTEABLE_CLIPBOARD_TYPES = [
+	"application/x-lexical-editor",
+	"text/html",
+	"text/plain",
+	"text/uri-list"
 ];
 function serializeNodeWithChildren(node) {
-  const serialized = node.exportJSON();
-  if ($isElementNode(node)) {
-    serialized.children = node.getChildren().map(serializeNodeWithChildren);
-  }
-  return serialized;
+	const serialized = node.exportJSON();
+	if ($isElementNode(node)) serialized.children = node.getChildren().map(serializeNodeWithChildren);
+	return serialized;
 }
 function getHtmlFromTopLevelNodes(editor, nodes) {
-  return nodes.map((node) => editor.getElementByKey(node.getKey())?.outerHTML ?? "").filter(Boolean).join("\n");
+	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);
-  }
+	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;
-    }
-  };
+	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;
+	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;
+			clipboardData[type] = await (await item.getType(type)).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);
-  }
+	const ownerDocument = editor.getRootElement()?.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") {
-      node.selectEnd();
-    } else {
-      node.selectStart();
-    }
-    return;
-  }
-  const selection = $createNodeSelection();
-  selection.add(node.getKey());
-  $setSelection(selection);
+	if ($isElementNode(node)) {
+		if (placement === "end") node.selectEnd();
+		else node.selectStart();
+		return;
+	}
+	const selection = $createNodeSelection();
+	selection.add(node.getKey());
+	$setSelection(selection);
 }
 function buildBlockClipboardData(editor, nodes) {
-  const lexicalEditor = editor;
-  const namespace = lexicalEditor._config.namespace;
-  const serializedNodes = nodes.map(serializeNodeWithChildren);
-  const html = getHtmlFromTopLevelNodes(editor, nodes);
-  return {
-    "application/x-lexical-editor": JSON.stringify({
-      namespace,
-      nodes: serializedNodes
-    }),
-    "text/html": html,
-    "text/plain": nodes.map((node) => node.getTextContent()).join("\n\n")
-  };
+	const namespace = editor._config.namespace;
+	const serializedNodes = nodes.map(serializeNodeWithChildren);
+	const html = getHtmlFromTopLevelNodes(editor, nodes);
+	return {
+		"application/x-lexical-editor": JSON.stringify({
+			namespace,
+			nodes: serializedNodes
+		}),
+		"text/html": html,
+		"text/plain": nodes.map((node) => node.getTextContent()).join("\n\n")
+	};
 }
 function removeTopLevelNodesAndRestoreSelection(nodes) {
-  if (nodes.length === 0) return;
-  const firstNode = nodes[0];
-  const lastNode = nodes.at(-1);
-  const previousSibling = firstNode.getPreviousSibling();
-  const nextSibling = lastNode.getNextSibling();
-  for (const node of nodes) {
-    node.remove();
-  }
-  const root = $getRoot();
-  if (root.getChildrenSize() === 0) {
-    const paragraph = $createParagraphNode();
-    root.append(paragraph);
-    paragraph.selectStart();
-    return;
-  }
-  if (nextSibling) {
-    selectTopLevelNode(nextSibling, "start");
-    return;
-  }
-  if (previousSibling) {
-    selectTopLevelNode(previousSibling, "end");
-    return;
-  }
-  const fallbackNode = root.getFirstChild();
-  if (fallbackNode) {
-    selectTopLevelNode(fallbackNode, "start");
-  }
+	if (nodes.length === 0) return;
+	const firstNode = nodes[0];
+	const lastNode = nodes.at(-1);
+	const previousSibling = firstNode.getPreviousSibling();
+	const nextSibling = lastNode.getNextSibling();
+	for (const node of nodes) node.remove();
+	const root = $getRoot();
+	if (root.getChildrenSize() === 0) {
+		const paragraph = $createParagraphNode();
+		root.append(paragraph);
+		paragraph.selectStart();
+		return;
+	}
+	if (nextSibling) {
+		selectTopLevelNode(nextSibling, "start");
+		return;
+	}
+	if (previousSibling) {
+		selectTopLevelNode(previousSibling, "end");
+		return;
+	}
+	const fallbackNode = root.getFirstChild();
+	if (fallbackNode) 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();
+	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;
+	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);
+	if (clipboardData.files.length > 0) return true;
+	return hasInsertableClipboardData(clipboardData);
 }
 function hasInsertableClipboardData(clipboardData) {
-  return PASTEABLE_CLIPBOARD_TYPES.some((type) => clipboardData.getData(type).length > 0);
+	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);
+	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;
+	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;
+	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);
+	if (nodes.length === 0 || !hasInsertableClipboardData(dataTransfer)) return false;
+	removeTopLevelNodesAndCreatePasteTarget(nodes);
+	return insertDataTransferForBlockSelectionPaste(editor, dataTransfer);
 }
+//#endregion
+//#region src/useBlockSelection.ts
 function isPasteBeforeInputEvent(event) {
-  return event.inputType === "insertFromPaste" || event.inputType === "insertFromPasteAsQuotation";
+	return event.inputType === "insertFromPaste" || event.inputType === "insertFromPasteAsQuotation";
 }
 function $getTopLevelKeys() {
-  return $getRoot().getChildren().map((c) => c.getKey());
+	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;
+	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);
-  const focusIdx = children.findIndex((c) => c.getKey() === focusKey);
-  if (anchorIdx === -1 || focusIdx === -1) return;
-  const start = Math.min(anchorIdx, focusIdx);
-  const end = Math.max(anchorIdx, focusIdx);
-  const sel = $createNodeSelection();
-  for (let i = start; i <= end; i++) {
-    sel.add(children[i].getKey());
-  }
-  $setSelection(sel);
+	const children = $getRoot().getChildren();
+	const anchorIdx = children.findIndex((c) => c.getKey() === anchorKey);
+	const focusIdx = children.findIndex((c) => c.getKey() === focusKey);
+	if (anchorIdx === -1 || focusIdx === -1) return;
+	const start = Math.min(anchorIdx, focusIdx);
+	const end = Math.max(anchorIdx, focusIdx);
+	const sel = $createNodeSelection();
+	for (let i = start; i <= end; i++) sel.add(children[i].getKey());
+	$setSelection(sel);
 }
 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;
-    focusKeyRef.current = null;
-  }, []);
-  const getTopLevelNodesByKeys = useCallback((keys) => {
-    if (keys.size === 0) return [];
-    return $getRoot().getChildren().filter((node) => keys.has(node.getKey()));
-  }, []);
-  const getOwnedSelectionNodes = useCallback(() => {
-    const ownedKeys = blockSelectionKeysRef.current;
-    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 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(
-        () => {
-          const nodes = getTopLevelNodesByKeys(new Set(keys));
-          if (nodes.length === 0) return;
-          removeTopLevelNodesAndRestoreSelection(nodes);
-          clearBlockSelectionState();
-        },
-        { discrete: true }
-      );
-    },
-    [clearBlockSelectionState, editor, getTopLevelNodesByKeys]
-  );
-  useEffect(() => {
-    let prevKeys = /* @__PURE__ */ new Set();
-    const unregister = editor.registerUpdateListener(({ editorState }) => {
-      const rootEl = editor.getRootElement();
-      if (!rootEl) return;
-      const nextKeys = /* @__PURE__ */ new Set();
-      let isNodeSel = false;
-      const rangeTopLevelKeys = [];
-      let topLevelKeys = [];
-      editorState.read(() => {
-        const sel = $getSelection();
-        if ($isNodeSelection(sel)) {
-          isNodeSel = true;
-          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) {
-          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));
-          if (!stillOwned) {
-            const topLevelSet = new Set(topLevelKeys);
-            const restoredTopLevel = [...nextKeys].filter((k) => topLevelSet.has(k));
-            if (restoredTopLevel.length > 1) {
-              const indices = restoredTopLevel.map((k) => topLevelKeys.indexOf(k)).sort((a, b) => a - b);
-              anchorKeyRef.current = topLevelKeys[indices[0]];
-              focusKeyRef.current = topLevelKeys[indices.at(-1)];
-              blockSelectionKeysRef.current = new Set(restoredTopLevel);
-            } else {
-              clearBlockSelectionState();
-            }
-          }
-        }
-      }
-      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);
-        }
-      }
-      for (const key of highlightKeys) {
-        if (!prevKeys.has(key)) {
-          editor.getElementByKey(key)?.classList.add(blockSelected);
-        }
-      }
-      prevKeys = highlightKeys;
-    });
-    return () => {
-      unregister();
-      for (const key of prevKeys) {
-        editor.getElementByKey(key)?.classList.remove(blockSelected);
-      }
-    };
-  }, [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;
-    const onFocusIn = (e) => {
-      if (blockSelectionKeysRef.current.size === 0) return;
-      const target = e.target;
-      if (!target) return;
-      const nestedEditable = target.closest('[contenteditable="true"]');
-      if (nestedEditable && nestedEditable !== rootEl) {
-        clearBlockSelectionState();
-        editor.update(() => {
-          const sel = $getSelection();
-          if ($isNodeSelection(sel)) {
-            $setSelection(null);
-          }
-        });
-      }
-    };
-    rootEl.addEventListener("focusin", onFocusIn);
-    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) => {
-        if (!event?.shiftKey) return false;
-        if (blockSelectionKeysRef.current.size === 0 || !focusKeyRef.current) return false;
-        const sel = $getSelection();
-        if (!$isNodeSelection(sel)) return false;
-        const children = $getRoot().getChildren();
-        const focusIdx = children.findIndex((c) => c.getKey() === focusKeyRef.current);
-        if (focusIdx === -1 || focusIdx >= children.length - 1) return false;
-        event.preventDefault();
-        focusKeyRef.current = children[focusIdx + 1].getKey();
-        $selectBlockRange(anchorKeyRef.current, focusKeyRef.current);
-        const start = Math.min(
-          children.findIndex((c) => c.getKey() === anchorKeyRef.current),
-          focusIdx + 1
-        );
-        const end = Math.max(
-          children.findIndex((c) => c.getKey() === anchorKeyRef.current),
-          focusIdx + 1
-        );
-        blockSelectionKeysRef.current = new Set(
-          children.slice(start, end + 1).map((c) => c.getKey())
-        );
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregShiftUp = editor.registerCommand(
-      KEY_ARROW_UP_COMMAND,
-      (event) => {
-        if (!event?.shiftKey) return false;
-        if (blockSelectionKeysRef.current.size === 0 || !focusKeyRef.current) return false;
-        const sel = $getSelection();
-        if (!$isNodeSelection(sel)) return false;
-        const children = $getRoot().getChildren();
-        const focusIdx = children.findIndex((c) => c.getKey() === focusKeyRef.current);
-        if (focusIdx === -1 || focusIdx <= 0) return false;
-        event.preventDefault();
-        focusKeyRef.current = children[focusIdx - 1].getKey();
-        $selectBlockRange(anchorKeyRef.current, focusKeyRef.current);
-        const anchorIdx = children.findIndex((c) => c.getKey() === anchorKeyRef.current);
-        const start = Math.min(anchorIdx, focusIdx - 1);
-        const end = Math.max(anchorIdx, focusIdx - 1);
-        blockSelectionKeysRef.current = new Set(
-          children.slice(start, end + 1).map((c) => c.getKey())
-        );
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregSelectAll = editor.registerCommand(
-      SELECT_ALL_COMMAND,
-      () => {
-        if (blockSelectionKeysRef.current.size > 0) {
-          const children = $getRoot().getChildren();
-          const allKeys = children.map((c) => c.getKey());
-          if (blockSelectionKeysRef.current.size >= allKeys.length) {
-            return true;
-          }
-          anchorKeyRef.current = allKeys[0];
-          focusKeyRef.current = allKeys.at(-1);
-          blockSelectionKeysRef.current = new Set(allKeys);
-          const nodeSel = $createNodeSelection();
-          for (const key of allKeys) nodeSel.add(key);
-          $setSelection(nodeSel);
-          return true;
-        }
-        const sel = $getSelection();
-        let topLevelKey = null;
-        if ($isRangeSelection(sel)) {
-          let node = sel.anchor.getNode();
-          while (node.getParent() && node.getParent() !== $getRoot()) {
-            node = node.getParent();
-          }
-          if (node.getParent() === $getRoot()) {
-            topLevelKey = node.getKey();
-          }
-        } else if ($isNodeSelection(sel)) {
-          const nodes = sel.getNodes();
-          if (nodes.length > 0) {
-            let node = nodes[0];
-            while (node.getParent() && node.getParent() !== $getRoot()) {
-              node = node.getParent();
-            }
-            if (node.getParent() === $getRoot()) {
-              topLevelKey = node.getKey();
-            }
-          }
-        }
-        if (topLevelKey) {
-          anchorKeyRef.current = topLevelKey;
-          focusKeyRef.current = topLevelKey;
-          blockSelectionKeysRef.current = /* @__PURE__ */ new Set([topLevelKey]);
-          const nodeSel = $createNodeSelection();
-          nodeSel.add(topLevelKey);
-          $setSelection(nodeSel);
-          return true;
-        }
-        return false;
-      },
-      COMMAND_PRIORITY_HIGH
-    );
-    const unregEscape = editor.registerCommand(
-      KEY_ESCAPE_COMMAND,
-      () => {
-        if (blockSelectionKeysRef.current.size === 0) return false;
-        clearBlockSelectionState();
-        $setSelection(null);
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH
-    );
-    const unregCopy = editor.registerCommand(
-      COPY_COMMAND,
-      (event) => {
-        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();
-        }
-        writeBlockClipboardDataToNativeClipboard(editor, clipboardData);
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregCut = editor.registerCommand(
-      CUT_COMMAND,
-      (event) => {
-        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;
-          clipboardData = buildBlockClipboardData(editor, nodes);
-          keysToDelete = nodes.map((node) => node.getKey());
-        });
-        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(() => {
-        keysToDelete = getOwnedSelectionNodes().map((node) => node.getKey());
-      });
-      if (keysToDelete.length === 0) return false;
-      if (payload && typeof payload !== "boolean" && "preventDefault" in payload && typeof payload.preventDefault === "function") {
-        payload.preventDefault();
-      }
-      deleteBlocksByKeys(keysToDelete);
-      return true;
-    };
-    const unregBackspace = editor.registerCommand(
-      KEY_BACKSPACE_COMMAND,
-      handleDeleteBlocks,
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregDelete = editor.registerCommand(
-      KEY_DELETE_COMMAND,
-      handleDeleteBlocks,
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregRemoveText = editor.registerCommand(
-      REMOVE_TEXT_COMMAND,
-      handleDeleteBlocks,
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregDeleteCharacter = editor.registerCommand(
-      DELETE_CHARACTER_COMMAND,
-      handleDeleteBlocks,
-      COMMAND_PRIORITY_CRITICAL
-    );
-    return () => {
-      unregKeyDown();
-      unregShiftDown();
-      unregShiftUp();
-      unregSelectAll();
-      unregEscape();
-      unregCopy();
-      unregCut();
-      unregPaste();
-      unregBackspace();
-      unregDelete();
-      unregRemoveText();
-      unregDeleteCharacter();
-    };
-  }, [
-    clearBlockSelectionState,
-    deleteBlocksByKeys,
-    editor,
-    getCurrentBlockClipboardData,
-    getOwnedSelectionNodes,
-    replaceBlockSelectionWithDataTransfer
-  ]);
-  const selectBlock = useCallback(
-    (nodeKey, shiftKey) => {
-      editor.update(() => {
-        if (shiftKey && anchorKeyRef.current) {
-          focusKeyRef.current = nodeKey;
-          $selectBlockRange(anchorKeyRef.current, nodeKey);
-          const children = $getRoot().getChildren();
-          const anchorIdx = children.findIndex((c) => c.getKey() === anchorKeyRef.current);
-          const focusIdx = children.findIndex((c) => c.getKey() === nodeKey);
-          if (anchorIdx !== -1 && focusIdx !== -1) {
-            const start = Math.min(anchorIdx, focusIdx);
-            const end = Math.max(anchorIdx, focusIdx);
-            blockSelectionKeysRef.current = new Set(
-              children.slice(start, end + 1).map((c) => c.getKey())
-            );
-          }
-        } else {
-          anchorKeyRef.current = nodeKey;
-          focusKeyRef.current = nodeKey;
-          blockSelectionKeysRef.current = /* @__PURE__ */ new Set([nodeKey]);
-          const sel = $createNodeSelection();
-          sel.add(nodeKey);
-          $setSelection(sel);
-        }
-      });
-    },
-    [editor]
-  );
-  const getSelectedKeys = useCallback(() => {
-    if (blockSelectionKeysRef.current.size === 0) return [];
-    let keys = [];
-    editor.getEditorState().read(() => {
-      keys = getTopLevelNodesByKeys(blockSelectionKeysRef.current).map((node) => node.getKey());
-    });
-    return keys;
-  }, [editor, getTopLevelNodesByKeys]);
-  const deleteSelectedBlocks = useCallback(
-    (fallbackNodeKey) => {
-      const selectedKeys = getSelectedKeys();
-      const keys = selectedKeys.length > 0 ? selectedKeys : fallbackNodeKey ? [fallbackNodeKey] : [];
-      if (keys.length === 0) return;
-      deleteBlocksByKeys(keys);
-    },
-    [deleteBlocksByKeys, getSelectedKeys]
-  );
-  const isBlockSelectionActive = useCallback(
-    () => blockSelectionKeysRef.current.size > 0,
-    []
-  );
-  return { selectBlock, getSelectedKeys, isBlockSelectionActive, deleteSelectedBlocks };
+	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;
+		focusKeyRef.current = null;
+	}, []);
+	const getTopLevelNodesByKeys = useCallback((keys) => {
+		if (keys.size === 0) return [];
+		return $getRoot().getChildren().filter((node) => keys.has(node.getKey()));
+	}, []);
+	const getOwnedSelectionNodes = useCallback(() => {
+		const ownedKeys = blockSelectionKeysRef.current;
+		if (ownedKeys.size === 0) {
+			const selection = $getSelection();
+			if (!$isNodeSelection(selection)) return [];
+			const selectedNodes = selection.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 [];
+		}
+		if (!$isNodeSelection($getSelection())) 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(() => {
+			const nodes = getTopLevelNodesByKeys(new Set(keys));
+			if (nodes.length === 0) return;
+			removeTopLevelNodesAndRestoreSelection(nodes);
+			clearBlockSelectionState();
+		}, { discrete: true });
+	}, [
+		clearBlockSelectionState,
+		editor,
+		getTopLevelNodesByKeys
+	]);
+	useEffect(() => {
+		let prevKeys = /* @__PURE__ */ new Set();
+		const unregister = editor.registerUpdateListener(({ editorState }) => {
+			if (!editor.getRootElement()) return;
+			const nextKeys = /* @__PURE__ */ new Set();
+			let isNodeSel = false;
+			const rangeTopLevelKeys = [];
+			let topLevelKeys = [];
+			editorState.read(() => {
+				const sel = $getSelection();
+				if ($isNodeSelection(sel)) {
+					isNodeSel = true;
+					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) {
+				const owned = blockSelectionKeysRef.current;
+				if (!(rangeTopLevelKeys.length > 0 && rangeTopLevelKeys.every((key) => owned.has(key)))) clearBlockSelectionState();
+			} else {
+				const owned = blockSelectionKeysRef.current;
+				if (!(nextKeys.size === owned.size && [...nextKeys].every((k) => owned.has(k)))) {
+					const topLevelSet = new Set(topLevelKeys);
+					const restoredTopLevel = [...nextKeys].filter((k) => topLevelSet.has(k));
+					if (restoredTopLevel.length > 1) {
+						const indices = restoredTopLevel.map((k) => topLevelKeys.indexOf(k)).sort((a, b) => a - b);
+						anchorKeyRef.current = topLevelKeys[indices[0]];
+						focusKeyRef.current = topLevelKeys[indices.at(-1)];
+						blockSelectionKeysRef.current = new Set(restoredTopLevel);
+					} else clearBlockSelectionState();
+				}
+			}
+			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);
+			for (const key of highlightKeys) if (!prevKeys.has(key)) editor.getElementByKey(key)?.classList.add(blockSelected);
+			prevKeys = highlightKeys;
+		});
+		return () => {
+			unregister();
+			for (const key of prevKeys) editor.getElementByKey(key)?.classList.remove(blockSelected);
+		};
+	}, [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;
+		const onFocusIn = (e) => {
+			if (blockSelectionKeysRef.current.size === 0) return;
+			const target = e.target;
+			if (!target) return;
+			const nestedEditable = target.closest("[contenteditable=\"true\"]");
+			if (nestedEditable && nestedEditable !== rootEl) {
+				clearBlockSelectionState();
+				editor.update(() => {
+					if ($isNodeSelection($getSelection())) $setSelection(null);
+				});
+			}
+		};
+		rootEl.addEventListener("focusin", onFocusIn);
+		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;
+			if (!replaceBlockSelectionWithDataTransfer(event.dataTransfer)) 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;
+				(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) => {
+			if (!event?.shiftKey) return false;
+			if (blockSelectionKeysRef.current.size === 0 || !focusKeyRef.current) return false;
+			if (!$isNodeSelection($getSelection())) return false;
+			const children = $getRoot().getChildren();
+			const focusIdx = children.findIndex((c) => c.getKey() === focusKeyRef.current);
+			if (focusIdx === -1 || focusIdx >= children.length - 1) return false;
+			event.preventDefault();
+			focusKeyRef.current = children[focusIdx + 1].getKey();
+			$selectBlockRange(anchorKeyRef.current, focusKeyRef.current);
+			const start = Math.min(children.findIndex((c) => c.getKey() === anchorKeyRef.current), focusIdx + 1);
+			const end = Math.max(children.findIndex((c) => c.getKey() === anchorKeyRef.current), focusIdx + 1);
+			blockSelectionKeysRef.current = new Set(children.slice(start, end + 1).map((c) => c.getKey()));
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL);
+		const unregShiftUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, (event) => {
+			if (!event?.shiftKey) return false;
+			if (blockSelectionKeysRef.current.size === 0 || !focusKeyRef.current) return false;
+			if (!$isNodeSelection($getSelection())) return false;
+			const children = $getRoot().getChildren();
+			const focusIdx = children.findIndex((c) => c.getKey() === focusKeyRef.current);
+			if (focusIdx === -1 || focusIdx <= 0) return false;
+			event.preventDefault();
+			focusKeyRef.current = children[focusIdx - 1].getKey();
+			$selectBlockRange(anchorKeyRef.current, focusKeyRef.current);
+			const anchorIdx = children.findIndex((c) => c.getKey() === anchorKeyRef.current);
+			const start = Math.min(anchorIdx, focusIdx - 1);
+			const end = Math.max(anchorIdx, focusIdx - 1);
+			blockSelectionKeysRef.current = new Set(children.slice(start, end + 1).map((c) => c.getKey()));
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL);
+		const unregSelectAll = editor.registerCommand(SELECT_ALL_COMMAND, () => {
+			if (blockSelectionKeysRef.current.size > 0) {
+				const allKeys = $getRoot().getChildren().map((c) => c.getKey());
+				if (blockSelectionKeysRef.current.size >= allKeys.length) return true;
+				anchorKeyRef.current = allKeys[0];
+				focusKeyRef.current = allKeys.at(-1);
+				blockSelectionKeysRef.current = new Set(allKeys);
+				const nodeSel = $createNodeSelection();
+				for (const key of allKeys) nodeSel.add(key);
+				$setSelection(nodeSel);
+				return true;
+			}
+			const sel = $getSelection();
+			let topLevelKey = null;
+			if ($isRangeSelection(sel)) {
+				let node = sel.anchor.getNode();
+				while (node.getParent() && node.getParent() !== $getRoot()) node = node.getParent();
+				if (node.getParent() === $getRoot()) topLevelKey = node.getKey();
+			} else if ($isNodeSelection(sel)) {
+				const nodes = sel.getNodes();
+				if (nodes.length > 0) {
+					let node = nodes[0];
+					while (node.getParent() && node.getParent() !== $getRoot()) node = node.getParent();
+					if (node.getParent() === $getRoot()) topLevelKey = node.getKey();
+				}
+			}
+			if (topLevelKey) {
+				anchorKeyRef.current = topLevelKey;
+				focusKeyRef.current = topLevelKey;
+				blockSelectionKeysRef.current = new Set([topLevelKey]);
+				const nodeSel = $createNodeSelection();
+				nodeSel.add(topLevelKey);
+				$setSelection(nodeSel);
+				return true;
+			}
+			return false;
+		}, COMMAND_PRIORITY_HIGH);
+		const unregEscape = editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+			if (blockSelectionKeysRef.current.size === 0) return false;
+			clearBlockSelectionState();
+			$setSelection(null);
+			return true;
+		}, COMMAND_PRIORITY_HIGH);
+		const unregCopy = editor.registerCommand(COPY_COMMAND, (event) => {
+			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();
+			writeBlockClipboardDataToNativeClipboard(editor, clipboardData);
+			return true;
+		}, COMMAND_PRIORITY_CRITICAL);
+		const unregCut = editor.registerCommand(CUT_COMMAND, (event) => {
+			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;
+				clipboardData = buildBlockClipboardData(editor, nodes);
+				keysToDelete = nodes.map((node) => node.getKey());
+			});
+			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);
+			if (!(dataTransferOnly ? hasInsertableClipboardData(clipboardData) : hasPasteableClipboardData(clipboardData))) 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(() => {
+				keysToDelete = getOwnedSelectionNodes().map((node) => node.getKey());
+			});
+			if (keysToDelete.length === 0) return false;
+			if (payload && typeof payload !== "boolean" && "preventDefault" in payload && typeof payload.preventDefault === "function") payload.preventDefault();
+			deleteBlocksByKeys(keysToDelete);
+			return true;
+		};
+		const unregBackspace = editor.registerCommand(KEY_BACKSPACE_COMMAND, handleDeleteBlocks, COMMAND_PRIORITY_CRITICAL);
+		const unregDelete = editor.registerCommand(KEY_DELETE_COMMAND, handleDeleteBlocks, COMMAND_PRIORITY_CRITICAL);
+		const unregRemoveText = editor.registerCommand(REMOVE_TEXT_COMMAND, handleDeleteBlocks, COMMAND_PRIORITY_CRITICAL);
+		const unregDeleteCharacter = editor.registerCommand(DELETE_CHARACTER_COMMAND, handleDeleteBlocks, COMMAND_PRIORITY_CRITICAL);
+		return () => {
+			unregKeyDown();
+			unregShiftDown();
+			unregShiftUp();
+			unregSelectAll();
+			unregEscape();
+			unregCopy();
+			unregCut();
+			unregPaste();
+			unregBackspace();
+			unregDelete();
+			unregRemoveText();
+			unregDeleteCharacter();
+		};
+	}, [
+		clearBlockSelectionState,
+		deleteBlocksByKeys,
+		editor,
+		getCurrentBlockClipboardData,
+		getOwnedSelectionNodes,
+		replaceBlockSelectionWithDataTransfer
+	]);
+	const selectBlock = useCallback((nodeKey, shiftKey) => {
+		editor.update(() => {
+			if (shiftKey && anchorKeyRef.current) {
+				focusKeyRef.current = nodeKey;
+				$selectBlockRange(anchorKeyRef.current, nodeKey);
+				const children = $getRoot().getChildren();
+				const anchorIdx = children.findIndex((c) => c.getKey() === anchorKeyRef.current);
+				const focusIdx = children.findIndex((c) => c.getKey() === nodeKey);
+				if (anchorIdx !== -1 && focusIdx !== -1) {
+					const start = Math.min(anchorIdx, focusIdx);
+					const end = Math.max(anchorIdx, focusIdx);
+					blockSelectionKeysRef.current = new Set(children.slice(start, end + 1).map((c) => c.getKey()));
+				}
+			} else {
+				anchorKeyRef.current = nodeKey;
+				focusKeyRef.current = nodeKey;
+				blockSelectionKeysRef.current = new Set([nodeKey]);
+				const sel = $createNodeSelection();
+				sel.add(nodeKey);
+				$setSelection(sel);
+			}
+		});
+	}, [editor]);
+	const getSelectedKeys = useCallback(() => {
+		if (blockSelectionKeysRef.current.size === 0) return [];
+		let keys = [];
+		editor.getEditorState().read(() => {
+			keys = getTopLevelNodesByKeys(blockSelectionKeysRef.current).map((node) => node.getKey());
+		});
+		return keys;
+	}, [editor, getTopLevelNodesByKeys]);
+	const deleteSelectedBlocks = useCallback((fallbackNodeKey) => {
+		const selectedKeys = getSelectedKeys();
+		const keys = selectedKeys.length > 0 ? selectedKeys : fallbackNodeKey ? [fallbackNodeKey] : [];
+		if (keys.length === 0) return;
+		deleteBlocksByKeys(keys);
+	}, [deleteBlocksByKeys, getSelectedKeys]);
+	return {
+		selectBlock,
+		getSelectedKeys,
+		isBlockSelectionActive: useCallback(() => blockSelectionKeysRef.current.size > 0, []),
+		deleteSelectedBlocks
+	};
 }
-const DRAG_DATA_KEY = "application/x-rich-editor-drag";
-const HIDE_DELAY = 300;
-const HANDLE_OFFSET = 52;
-const TURN_INTO_ITEMS = [
-  { key: "paragraph", label: "Text", icon: Type },
-  { key: "h1", label: "Heading 1", icon: Heading1 },
-  { key: "h2", label: "Heading 2", icon: Heading2 },
-  { key: "h3", label: "Heading 3", icon: Heading3 },
-  { key: "bullet", label: "Bullet List", icon: List },
-  { key: "numbered", label: "Numbered List", icon: ListOrdered },
-  { key: "todo", label: "To-do", icon: ListChecks },
-  { key: "quote", label: "Quote", icon: TextQuote },
-  { key: "divider", label: "Divider", icon: Minus },
-  { key: "code", label: "Code", icon: Code2 }
+//#endregion
+//#region src/BlockHandlePlugin.tsx
+var DRAG_DATA_KEY = "application/x-rich-editor-drag";
+var HIDE_DELAY = 300;
+var HANDLE_OFFSET = 52;
+var TURN_INTO_ITEMS = [
+	{
+		key: "paragraph",
+		label: "Text",
+		icon: Type
+	},
+	{
+		key: "h1",
+		label: "Heading 1",
+		icon: Heading1
+	},
+	{
+		key: "h2",
+		label: "Heading 2",
+		icon: Heading2
+	},
+	{
+		key: "h3",
+		label: "Heading 3",
+		icon: Heading3
+	},
+	{
+		key: "bullet",
+		label: "Bullet List",
+		icon: List
+	},
+	{
+		key: "numbered",
+		label: "Numbered List",
+		icon: ListOrdered
+	},
+	{
+		key: "todo",
+		label: "To-do",
+		icon: ListChecks
+	},
+	{
+		key: "quote",
+		label: "Quote",
+		icon: TextQuote
+	},
+	{
+		key: "divider",
+		label: "Divider",
+		icon: Minus
+	},
+	{
+		key: "code",
+		label: "Code",
+		icon: Code2
+	}
 ];
 function getBlockElement(editor, target) {
-  const rootElement = editor.getRootElement();
-  if (!rootElement) return null;
-  let current = target;
-  while (current && current !== rootElement) {
-    if (current.parentElement === rootElement) return current;
-    current = current.parentElement;
-  }
-  return null;
+	const rootElement = editor.getRootElement();
+	if (!rootElement) return null;
+	let current = target;
+	while (current && current !== rootElement) {
+		if (current.parentElement === rootElement) return current;
+		current = current.parentElement;
+	}
+	return null;
 }
 function getNearestBlockByY(rootElement, clientY) {
-  const blocks = [...rootElement.children].filter(
-    (child) => child instanceof HTMLElement
-  );
-  if (!blocks.length) return null;
-  let nearestBlock = null;
-  let nearestDistance = Number.POSITIVE_INFINITY;
-  for (const block of blocks) {
-    const rect = block.getBoundingClientRect();
-    if (rect.height <= 0) continue;
-    if (clientY >= rect.top && clientY <= rect.bottom) return block;
-    const distance = clientY < rect.top ? rect.top - clientY : clientY - rect.bottom;
-    if (distance < nearestDistance) {
-      nearestDistance = distance;
-      nearestBlock = block;
-    }
-  }
-  return nearestBlock;
+	const blocks = [...rootElement.children].filter((child) => child instanceof HTMLElement);
+	if (!blocks.length) return null;
+	let nearestBlock = null;
+	let nearestDistance = Number.POSITIVE_INFINITY;
+	for (const block of blocks) {
+		const rect = block.getBoundingClientRect();
+		if (rect.height <= 0) continue;
+		if (clientY >= rect.top && clientY <= rect.bottom) return block;
+		const distance = clientY < rect.top ? rect.top - clientY : clientY - rect.bottom;
+		if (distance < nearestDistance) {
+			nearestDistance = distance;
+			nearestBlock = block;
+		}
+	}
+	return nearestBlock;
 }
 function getDropTargetBlock(editor, rootElement, event) {
-  const rootRect = rootElement.getBoundingClientRect();
-  if (rootRect.width <= 0 || rootRect.height <= 0) return null;
-  if (event.clientY < rootRect.top || event.clientY > rootRect.bottom) {
-    return null;
-  }
-  const points = [{ x: event.clientX, y: event.clientY }];
-  const clampedX = Math.min(rootRect.right - 1, Math.max(rootRect.left + 1, event.clientX));
-  if (clampedX !== event.clientX) {
-    points.unshift({ x: clampedX, y: event.clientY });
-  }
-  for (const point of points) {
-    const element = document.elementFromPoint(point.x, point.y);
-    if (!(element instanceof HTMLElement)) continue;
-    const block = getBlockElement(editor, element);
-    if (block) return block;
-  }
-  const { target } = event;
-  if (target instanceof HTMLElement) {
-    const block = getBlockElement(editor, target);
-    if (block) return block;
-  }
-  return getNearestBlockByY(rootElement, event.clientY);
+	const rootRect = rootElement.getBoundingClientRect();
+	if (rootRect.width <= 0 || rootRect.height <= 0) return null;
+	if (event.clientY < rootRect.top || event.clientY > rootRect.bottom) return null;
+	const points = [{
+		x: event.clientX,
+		y: event.clientY
+	}];
+	const clampedX = Math.min(rootRect.right - 1, Math.max(rootRect.left + 1, event.clientX));
+	if (clampedX !== event.clientX) points.unshift({
+		x: clampedX,
+		y: event.clientY
+	});
+	for (const point of points) {
+		const element = document.elementFromPoint(point.x, point.y);
+		if (!(element instanceof HTMLElement)) continue;
+		const block = getBlockElement(editor, element);
+		if (block) return block;
+	}
+	const { target } = event;
+	if (target instanceof HTMLElement) {
+		const block = getBlockElement(editor, target);
+		if (block) return block;
+	}
+	return getNearestBlockByY(rootElement, event.clientY);
 }
 function toPagePosition(rect) {
-  return {
-    top: rect.top + window.scrollY,
-    left: rect.left + window.scrollX
-  };
+	return {
+		top: rect.top + window.scrollY,
+		left: rect.left + window.scrollX
+	};
 }
 function $cloneNode(node) {
-  const Klass = node.constructor;
-  const serialized = node.exportJSON();
-  const clone = Klass.importJSON(serialized);
-  if ($isElementNode(node) && $isElementNode(clone)) {
-    for (const child of node.getChildren()) {
-      clone.append($cloneNode(child));
-    }
-  }
-  return clone;
+	const Klass = node.constructor;
+	const serialized = node.exportJSON();
+	const clone = Klass.importJSON(serialized);
+	if ($isElementNode(node) && $isElementNode(clone)) for (const child of node.getChildren()) clone.append($cloneNode(child));
+	return clone;
 }
 function BlockHandleInner({ editor }) {
-  const { className: portalClassName, theme } = usePortalTheme();
-  const [handle, setHandle] = useState({
-    visible: false,
-    top: 0,
-    left: 0,
-    nodeKey: null
-  });
-  const [dropLine, setDropLine] = useState({
-    visible: false,
-    top: 0,
-    left: 0,
-    width: 0
-  });
-  const activeBlockRef = useRef(null);
-  const hideTimerRef = useRef(null);
-  const hoveringHandleRef = useRef(false);
-  const menuOpenCountRef = useRef(0);
-  const dragPreviewRef = useRef(null);
-  const draggingBlockRef = useRef(null);
-  const draggingBlockKeysRef = useRef(null);
-  const { selectBlock, getSelectedKeys, deleteSelectedBlocks } = useBlockSelection(editor);
-  const clearHideTimer = useCallback(() => {
-    if (hideTimerRef.current) {
-      clearTimeout(hideTimerRef.current);
-      hideTimerRef.current = null;
-    }
-  }, []);
-  const scheduleHide = useCallback(() => {
-    clearHideTimer();
-    hideTimerRef.current = setTimeout(() => {
-      if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) {
-        activeBlockRef.current = null;
-        setHandle((state) => ({ ...state, visible: false, nodeKey: null }));
-      }
-    }, HIDE_DELAY);
-  }, [clearHideTimer]);
-  const onHandleEnter = useCallback(() => {
-    hoveringHandleRef.current = true;
-    clearHideTimer();
-  }, [clearHideTimer]);
-  const onHandleLeave = useCallback(() => {
-    hoveringHandleRef.current = false;
-    scheduleHide();
-  }, [scheduleHide]);
-  const onMenuOpenChange = useCallback(
-    (open) => {
-      menuOpenCountRef.current += open ? 1 : -1;
-      if (!open) scheduleHide();
-      else clearHideTimer();
-    },
-    [clearHideTimer, scheduleHide]
-  );
-  const updatePositionFromBlock = useCallback(
-    (block) => {
-      if (block !== void 0) activeBlockRef.current = block;
-      const element = activeBlockRef.current;
-      if (!element || !element.isConnected) {
-        activeBlockRef.current = null;
-        setHandle((state) => state.visible ? { ...state, visible: false, nodeKey: null } : state);
-        return;
-      }
-      const rootElement = editor.getRootElement();
-      if (!rootElement) return;
-      const blockRect = element.getBoundingClientRect();
-      const rootRect = rootElement.getBoundingClientRect();
-      const page = toPagePosition(blockRect);
-      let nodeKey = null;
-      editor.read(() => {
-        const node = $getNearestNodeFromDOMNode(element);
-        if (node) nodeKey = node.getKey();
-      });
-      setHandle({
-        visible: true,
-        top: page.top,
-        left: toPagePosition(rootRect).left - HANDLE_OFFSET,
-        nodeKey
-      });
-    },
-    [editor]
-  );
-  useEffect(() => {
-    const rootElement = editor.getRootElement();
-    if (!rootElement) return;
-    let rafId = null;
-    const onMouseMove = (event) => {
-      if (rafId !== null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        const target = event.target;
-        const block = getBlockElement(editor, target);
-        if (block) {
-          clearHideTimer();
-          updatePositionFromBlock(block);
-        }
-      });
-    };
-    const onMouseLeave = () => {
-      if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) {
-        scheduleHide();
-      }
-    };
-    rootElement.addEventListener("mousemove", onMouseMove);
-    rootElement.addEventListener("mouseleave", onMouseLeave);
-    return () => {
-      if (rafId !== null) cancelAnimationFrame(rafId);
-      rootElement.removeEventListener("mousemove", onMouseMove);
-      rootElement.removeEventListener("mouseleave", onMouseLeave);
-      clearHideTimer();
-    };
-  }, [clearHideTimer, editor, scheduleHide, updatePositionFromBlock]);
-  useEffect(() => {
-    const update = () => updatePositionFromBlock();
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [updatePositionFromBlock]);
-  useEffect(
-    () => editor.registerUpdateListener(() => updatePositionFromBlock()),
-    [editor, updatePositionFromBlock]
-  );
-  const handleAddBlock = useCallback(() => {
-    if (!handle.nodeKey) return;
-    editor.update(() => {
-      const node = $getNodeByKey(handle.nodeKey);
-      if (!node) return;
-      const paragraph = $createParagraphNode();
-      node.insertAfter(paragraph);
-      paragraph.selectStart();
-    });
-  }, [editor, handle.nodeKey]);
-  const handleTurnInto = useCallback(
-    (type) => {
-      const { nodeKey } = handle;
-      if (!nodeKey) return;
-      if (["bullet", "numbered", "todo", "divider"].includes(type)) {
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey);
-          if (!node) return;
-          if ($isElementNode(node)) node.selectStart();
-        });
-        const commands = {
-          bullet: INSERT_UNORDERED_LIST_COMMAND,
-          numbered: INSERT_ORDERED_LIST_COMMAND,
-          todo: INSERT_CHECK_LIST_COMMAND,
-          divider: INSERT_HORIZONTAL_RULE_COMMAND
-        };
-        editor.dispatchCommand(commands[type], void 0);
-        return;
-      }
-      editor.update(() => {
-        const node = $getNodeByKey(nodeKey);
-        if (!node || !$isElementNode(node)) return;
-        node.selectStart();
-        const selection = $getSelection();
-        if (!$isRangeSelection(selection)) return;
-        const creators = {
-          paragraph: () => $createParagraphNode(),
-          h1: () => $createHeadingNode("h1"),
-          h2: () => $createHeadingNode("h2"),
-          h3: () => $createHeadingNode("h3"),
-          quote: () => $createQuoteNode(),
-          code: () => $createCodeNode()
-        };
-        const create = creators[type];
-        if (create) $setBlocksType(selection, create);
-      });
-    },
-    [editor, handle]
-  );
-  const handleDelete = useCallback(() => {
-    deleteSelectedBlocks(handle.nodeKey);
-    setHandle((state) => ({ ...state, visible: false, nodeKey: null }));
-  }, [deleteSelectedBlocks, handle.nodeKey]);
-  const handleDuplicate = useCallback(() => {
-    const selectedKeys = getSelectedKeys();
-    const keys = selectedKeys.length > 0 ? selectedKeys : handle.nodeKey ? [handle.nodeKey] : [];
-    if (!keys.length) return;
-    editor.update(() => {
-      const root = $getRoot();
-      const children = root.getChildren();
-      const keySet = new Set(keys);
-      const nodesToDuplicate = children.filter((child) => keySet.has(child.getKey()));
-      if (!nodesToDuplicate.length) return;
-      let insertAfter = nodesToDuplicate.at(-1);
-      for (const node of nodesToDuplicate) {
-        const clone = $cloneNode(node);
-        insertAfter.insertAfter(clone);
-        insertAfter = clone;
-      }
-    });
-  }, [editor, getSelectedKeys, handle.nodeKey]);
-  const handleMoveUp = useCallback(() => {
-    const selectedKeys = getSelectedKeys();
-    const keys = selectedKeys.length > 0 ? selectedKeys : handle.nodeKey ? [handle.nodeKey] : [];
-    if (!keys.length) return;
-    editor.update(() => {
-      const root = $getRoot();
-      const children = root.getChildren();
-      const keySet = new Set(keys);
-      const selectedNodes = children.filter((child) => keySet.has(child.getKey()));
-      if (!selectedNodes.length) return;
-      const firstSelected = selectedNodes[0];
-      const previousSibling = firstSelected.getPreviousSibling();
-      if (!previousSibling || keySet.has(previousSibling.getKey())) return;
-      const lastSelected = selectedNodes.at(-1);
-      previousSibling.remove();
-      lastSelected.insertAfter(previousSibling);
-    });
-  }, [editor, getSelectedKeys, handle.nodeKey]);
-  const handleMoveDown = useCallback(() => {
-    const selectedKeys = getSelectedKeys();
-    const keys = selectedKeys.length > 0 ? selectedKeys : handle.nodeKey ? [handle.nodeKey] : [];
-    if (!keys.length) return;
-    editor.update(() => {
-      const root = $getRoot();
-      const children = root.getChildren();
-      const keySet = new Set(keys);
-      const selectedNodes = children.filter((child) => keySet.has(child.getKey()));
-      if (!selectedNodes.length) return;
-      const lastSelected = selectedNodes.at(-1);
-      const nextSibling = lastSelected.getNextSibling();
-      if (!nextSibling || keySet.has(nextSibling.getKey())) return;
-      const firstSelected = selectedNodes[0];
-      nextSibling.remove();
-      firstSelected.insertBefore(nextSibling);
-    });
-  }, [editor, getSelectedKeys, handle.nodeKey]);
-  const [gripMenuOpen, setGripMenuOpen] = useState(false);
-  const dragStartedRef = useRef(false);
-  const clearDragVisualState = useCallback(() => {
-    const preview = dragPreviewRef.current;
-    if (preview) {
-      preview.remove();
-      dragPreviewRef.current = null;
-    }
-    const draggingBlock$1 = draggingBlockRef.current;
-    if (draggingBlock$1) {
-      draggingBlock$1.classList.remove(draggingBlock);
-      draggingBlockRef.current = null;
-    }
-    const draggingKeys = draggingBlockKeysRef.current;
-    if (draggingKeys) {
-      for (const key of draggingKeys) {
-        editor.getElementByKey(key)?.classList.remove(draggingBlock);
-      }
-      draggingBlockKeysRef.current = null;
-    }
-  }, [editor]);
-  const onGripDragStart = useCallback(
-    (event) => {
-      dragStartedRef.current = true;
-      if (!event.dataTransfer || !handle.nodeKey) return;
-      const selectedKeys = getSelectedKeys();
-      const dragKeys = selectedKeys.length > 0 && selectedKeys.includes(handle.nodeKey) ? selectedKeys : [handle.nodeKey];
-      event.dataTransfer.setData(DRAG_DATA_KEY, JSON.stringify(dragKeys));
-      event.dataTransfer.effectAllowed = "move";
-      const block = activeBlockRef.current;
-      if (!block) return;
-      clearDragVisualState();
-      const rect = block.getBoundingClientRect();
-      const preview = block.cloneNode(true);
-      preview.classList.add(dragPreview);
-      preview.style.width = `${rect.width}px`;
-      preview.style.position = "relative";
-      if (dragKeys.length > 1) {
-        const badge = document.createElement("div");
-        badge.className = dragCountBadge;
-        badge.textContent = String(dragKeys.length);
-        preview.appendChild(badge);
-      }
-      if (portalClassName) {
-        const wrapper = document.createElement("div");
-        wrapper.className = portalClassName;
-        wrapper.setAttribute("data-theme", theme);
-        wrapper.style.cssText = "position:fixed;top:-10000px;left:-10000px;pointer-events:none";
-        wrapper.appendChild(preview);
-        document.body.append(wrapper);
-        dragPreviewRef.current = wrapper;
-      } else {
-        document.body.append(preview);
-        dragPreviewRef.current = preview;
-      }
-      if (dragKeys.length > 1) {
-        for (const key of dragKeys) {
-          editor.getElementByKey(key)?.classList.add(draggingBlock);
-        }
-        draggingBlockKeysRef.current = dragKeys;
-      } else {
-        draggingBlockRef.current = block;
-        block.classList.add(draggingBlock);
-      }
-      const offsetX = Math.max(12, Math.min(rect.width - 12, event.clientX - rect.left));
-      const offsetY = Math.max(8, Math.min(rect.height - 8, event.clientY - rect.top));
-      event.dataTransfer.setDragImage(preview, offsetX, offsetY);
-    },
-    [clearDragVisualState, editor, getSelectedKeys, handle.nodeKey, portalClassName, theme]
-  );
-  const onGripOpenChange = useCallback(
-    (open) => {
-      setGripMenuOpen((previous) => {
-        if (previous === open) return previous;
-        onMenuOpenChange(open);
-        return open;
-      });
-    },
-    [onMenuOpenChange]
-  );
-  const onGripMouseDownCapture = useCallback((event) => {
-    dragStartedRef.current = false;
-    if (event.button === 0) event.stopPropagation();
-  }, []);
-  const onGripClick = useCallback(
-    (event) => {
-      if (event.detail === 0) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (dragStartedRef.current) {
-        dragStartedRef.current = false;
-        return;
-      }
-      if (!handle.nodeKey) return;
-      const { nodeKey } = handle;
-      const { shiftKey } = event;
-      editor.focus(() => selectBlock(nodeKey, shiftKey));
-    },
-    [editor, handle.nodeKey, selectBlock]
-  );
-  const onGripContextMenu = useCallback(
-    (event) => {
-      event.preventDefault();
-      if (handle.nodeKey) {
-        const currentKeys = getSelectedKeys();
-        if (!currentKeys.includes(handle.nodeKey)) {
-          selectBlock(handle.nodeKey, false);
-        }
-      }
-      onGripOpenChange(true);
-    },
-    [getSelectedKeys, handle.nodeKey, onGripOpenChange, selectBlock]
-  );
-  useEffect(() => {
-    const rootElement = editor.getRootElement();
-    if (!rootElement) return;
-    const unregDragOver = editor.registerCommand(
-      DRAGOVER_COMMAND,
-      (event) => {
-        if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "move";
-        const block = getDropTargetBlock(editor, rootElement, event);
-        if (!block) {
-          setDropLine((state) => state.visible ? { ...state, visible: false } : state);
-          return true;
-        }
-        const rect = block.getBoundingClientRect();
-        const rootRect = rootElement.getBoundingClientRect();
-        const midY = rect.top + rect.height / 2;
-        const y = event.clientY < midY ? rect.top : rect.bottom;
-        setDropLine({
-          visible: true,
-          top: y + window.scrollY,
-          left: rootRect.left + window.scrollX,
-          width: rootRect.width
-        });
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH
-    );
-    const unregDrop = editor.registerCommand(
-      DROP_COMMAND,
-      (event) => {
-        const raw = event.dataTransfer?.getData(DRAG_DATA_KEY);
-        if (!raw) return false;
-        event.preventDefault();
-        setDropLine((state) => ({ ...state, visible: false }));
-        clearDragVisualState();
-        let draggedKeys;
-        try {
-          const parsed = JSON.parse(raw);
-          draggedKeys = Array.isArray(parsed) && parsed.every((key) => typeof key === "string") ? parsed : [raw];
-        } catch {
-          draggedKeys = [raw];
-        }
-        if (!draggedKeys.length) return false;
-        const block = getDropTargetBlock(editor, rootElement, event);
-        if (!block) return false;
-        editor.update(() => {
-          const targetNode = $getNearestNodeFromDOMNode(block);
-          if (!targetNode) return;
-          if (draggedKeys.includes(targetNode.getKey())) return;
-          const rect = block.getBoundingClientRect();
-          const insertBefore = event.clientY < rect.top + rect.height / 2;
-          const root = $getRoot();
-          const children = root.getChildren();
-          const keySet = new Set(draggedKeys);
-          const draggedNodes = children.filter((child) => keySet.has(child.getKey()));
-          for (const node of draggedNodes) {
-            node.remove();
-          }
-          const freshTarget = $getNodeByKey(targetNode.getKey());
-          if (!freshTarget) return;
-          if (insertBefore) {
-            for (let i = draggedNodes.length - 1; i >= 0; i--) {
-              freshTarget.insertBefore(draggedNodes[i]);
-            }
-          } else {
-            let cursor = freshTarget;
-            for (const node of draggedNodes) {
-              cursor.insertAfter(node);
-              cursor = node;
-            }
-          }
-        });
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH
-    );
-    const unregDragStart = editor.registerCommand(
-      DRAGSTART_COMMAND,
-      (event) => {
-        if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH
-    );
-    const clearDropLine = () => {
-      setDropLine((state) => state.visible ? { ...state, visible: false } : state);
-    };
-    const clearDragState = () => {
-      clearDropLine();
-      clearDragVisualState();
-    };
-    const onDragLeave = (event) => {
-      if (event.relatedTarget === null || !rootElement.contains(event.relatedTarget)) {
-        clearDropLine();
-      }
-    };
-    window.addEventListener("dragend", clearDragState);
-    window.addEventListener("drop", clearDragState);
-    rootElement.addEventListener("dragleave", onDragLeave);
-    return () => {
-      unregDragOver();
-      unregDrop();
-      unregDragStart();
-      window.removeEventListener("dragend", clearDragState);
-      window.removeEventListener("drop", clearDragState);
-      rootElement.removeEventListener("dragleave", onDragLeave);
-      clearDragState();
-    };
-  }, [clearDragVisualState, editor]);
-  useEffect(() => {
-    const rootElement = editor.getRootElement();
-    if (!rootElement) return;
-    const outerContainer = rootElement.closest(".rich-editor");
-    if (!outerContainer) return;
-    let isDragging = false;
-    let lastKey = null;
-    const getBlockKeyAtY = (clientY) => {
-      const block = getNearestBlockByY(rootElement, clientY);
-      if (!block) return null;
-      let nodeKey = null;
-      editor.read(() => {
-        nodeKey = $getNearestNodeFromDOMNode(block)?.getKey() ?? null;
-      });
-      return nodeKey;
-    };
-    const onMouseDown = (event) => {
-      if (event.button !== 0) return;
-      const target = event.target;
-      if (rootElement.contains(target)) return;
-      const nodeKey = getBlockKeyAtY(event.clientY);
-      if (!nodeKey) return;
-      event.preventDefault();
-      editor.focus(() => selectBlock(nodeKey, event.shiftKey));
-      isDragging = true;
-      lastKey = nodeKey;
-    };
-    const onMouseMove = (event) => {
-      if (!isDragging) return;
-      const nodeKey = getBlockKeyAtY(event.clientY);
-      if (!nodeKey || nodeKey === lastKey) return;
-      selectBlock(nodeKey, true);
-      lastKey = nodeKey;
-    };
-    const onMouseUp = () => {
-      isDragging = false;
-      lastKey = null;
-    };
-    outerContainer.addEventListener("mousedown", onMouseDown);
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-    return () => {
-      outerContainer.removeEventListener("mousedown", onMouseDown);
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [editor, selectBlock]);
-  const themeWrapperProps = portalClassName ? {
-    "className": portalClassName,
-    "data-theme": theme,
-    "style": { display: "contents" }
-  } : {};
-  return /* @__PURE__ */ jsxs("div", { ...themeWrapperProps, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${handleContainer} ${handle.visible ? handleContainerVisible : ""}`,
-        style: { top: handle.top, left: handle.left },
-        onMouseEnter: onHandleEnter,
-        onMouseLeave: onHandleLeave,
-        children: [
-          /* @__PURE__ */ jsx("button", { "aria-label": "Add block", className: handleBtn, onClick: handleAddBlock, children: /* @__PURE__ */ jsx(Plus, { size: 14 }) }),
-          /* @__PURE__ */ jsxs(DropdownMenu, { open: gripMenuOpen, onOpenChange: onGripOpenChange, children: [
-            /* @__PURE__ */ jsx(
-              DropdownMenuTrigger,
-              {
-                draggable: true,
-                "aria-label": "Block actions",
-                className: handleBtn,
-                onClick: onGripClick,
-                onContextMenu: onGripContextMenu,
-                onDragStart: onGripDragStart,
-                onMouseDownCapture: onGripMouseDownCapture,
-                children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
-              }
-            ),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "bottom", sideOffset: 4, children: [
-              /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-                /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "TURN INTO" }),
-                TURN_INTO_ITEMS.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleTurnInto(item.key), children: [
-                  /* @__PURE__ */ jsx(item.icon, {}),
-                  item.label
-                ] }, item.key))
-              ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-                /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "ACTIONS" }),
-                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleDuplicate, children: [
-                  /* @__PURE__ */ jsx(Copy, {}),
-                  "Duplicate"
-                ] }),
-                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleMoveUp, children: [
-                  /* @__PURE__ */ jsx(ArrowUp, {}),
-                  "Move Up"
-                ] }),
-                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleMoveDown, children: [
-                  /* @__PURE__ */ jsx(ArrowDown, {}),
-                  "Move Down"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: menuItemDestructive, onClick: handleDelete, children: [
-                /* @__PURE__ */ jsx(Trash2, {}),
-                "Delete"
-              ] })
-            ] })
-          ] })
-        ]
-      }
-    ),
-    dropLine.visible && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: dropIndicator,
-        style: {
-          top: dropLine.top,
-          left: dropLine.left,
-          width: dropLine.width
-        }
-      }
-    )
-  ] });
+	const { className: portalClassName, theme } = usePortalTheme();
+	const [handle, setHandle] = useState({
+		visible: false,
+		top: 0,
+		left: 0,
+		nodeKey: null
+	});
+	const [dropLine, setDropLine] = useState({
+		visible: false,
+		top: 0,
+		left: 0,
+		width: 0
+	});
+	const activeBlockRef = useRef(null);
+	const hideTimerRef = useRef(null);
+	const hoveringHandleRef = useRef(false);
+	const menuOpenCountRef = useRef(0);
+	const dragPreviewRef = useRef(null);
+	const draggingBlockRef = useRef(null);
+	const draggingBlockKeysRef = useRef(null);
+	const { selectBlock, getSelectedKeys, deleteSelectedBlocks } = useBlockSelection(editor);
+	const clearHideTimer = useCallback(() => {
+		if (hideTimerRef.current) {
+			clearTimeout(hideTimerRef.current);
+			hideTimerRef.current = null;
+		}
+	}, []);
+	const scheduleHide = useCallback(() => {
+		clearHideTimer();
+		hideTimerRef.current = setTimeout(() => {
+			if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) {
+				activeBlockRef.current = null;
+				setHandle((state) => ({
+					...state,
+					visible: false,
+					nodeKey: null
+				}));
+			}
+		}, HIDE_DELAY);
+	}, [clearHideTimer]);
+	const onHandleEnter = useCallback(() => {
+		hoveringHandleRef.current = true;
+		clearHideTimer();
+	}, [clearHideTimer]);
+	const onHandleLeave = useCallback(() => {
+		hoveringHandleRef.current = false;
+		scheduleHide();
+	}, [scheduleHide]);
+	const onMenuOpenChange = useCallback((open) => {
+		menuOpenCountRef.current += open ? 1 : -1;
+		if (!open) scheduleHide();
+		else clearHideTimer();
+	}, [clearHideTimer, scheduleHide]);
+	const updatePositionFromBlock = useCallback((block) => {
+		if (block !== void 0) activeBlockRef.current = block;
+		const element = activeBlockRef.current;
+		if (!element || !element.isConnected) {
+			activeBlockRef.current = null;
+			setHandle((state) => state.visible ? {
+				...state,
+				visible: false,
+				nodeKey: null
+			} : state);
+			return;
+		}
+		const rootElement = editor.getRootElement();
+		if (!rootElement) return;
+		const blockRect = element.getBoundingClientRect();
+		const rootRect = rootElement.getBoundingClientRect();
+		const page = toPagePosition(blockRect);
+		let nodeKey = null;
+		editor.read(() => {
+			const node = $getNearestNodeFromDOMNode(element);
+			if (node) nodeKey = node.getKey();
+		});
+		setHandle({
+			visible: true,
+			top: page.top,
+			left: toPagePosition(rootRect).left - HANDLE_OFFSET,
+			nodeKey
+		});
+	}, [editor]);
+	useEffect(() => {
+		const rootElement = editor.getRootElement();
+		if (!rootElement) return;
+		let rafId = null;
+		const onMouseMove = (event) => {
+			if (rafId !== null) return;
+			rafId = requestAnimationFrame(() => {
+				rafId = null;
+				const target = event.target;
+				const block = getBlockElement(editor, target);
+				if (block) {
+					clearHideTimer();
+					updatePositionFromBlock(block);
+				}
+			});
+		};
+		const onMouseLeave = () => {
+			if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) scheduleHide();
+		};
+		rootElement.addEventListener("mousemove", onMouseMove);
+		rootElement.addEventListener("mouseleave", onMouseLeave);
+		return () => {
+			if (rafId !== null) cancelAnimationFrame(rafId);
+			rootElement.removeEventListener("mousemove", onMouseMove);
+			rootElement.removeEventListener("mouseleave", onMouseLeave);
+			clearHideTimer();
+		};
+	}, [
+		clearHideTimer,
+		editor,
+		scheduleHide,
+		updatePositionFromBlock
+	]);
+	useEffect(() => {
+		const update = () => updatePositionFromBlock();
+		window.addEventListener("scroll", update, true);
+		window.addEventListener("resize", update);
+		return () => {
+			window.removeEventListener("scroll", update, true);
+			window.removeEventListener("resize", update);
+		};
+	}, [updatePositionFromBlock]);
+	useEffect(() => editor.registerUpdateListener(() => updatePositionFromBlock()), [editor, updatePositionFromBlock]);
+	const handleAddBlock = useCallback(() => {
+		if (!handle.nodeKey) return;
+		editor.update(() => {
+			const node = $getNodeByKey(handle.nodeKey);
+			if (!node) return;
+			const paragraph = $createParagraphNode();
+			node.insertAfter(paragraph);
+			paragraph.selectStart();
+		});
+	}, [editor, handle.nodeKey]);
+	const handleTurnInto = useCallback((type) => {
+		const { nodeKey } = handle;
+		if (!nodeKey) return;
+		if ([
+			"bullet",
+			"numbered",
+			"todo",
+			"divider"
+		].includes(type)) {
+			editor.update(() => {
+				const node = $getNodeByKey(nodeKey);
+				if (!node) return;
+				if ($isElementNode(node)) node.selectStart();
+			});
+			const commands = {
+				bullet: INSERT_UNORDERED_LIST_COMMAND,
+				numbered: INSERT_ORDERED_LIST_COMMAND,
+				todo: INSERT_CHECK_LIST_COMMAND,
+				divider: INSERT_HORIZONTAL_RULE_COMMAND
+			};
+			editor.dispatchCommand(commands[type], void 0);
+			return;
+		}
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if (!node || !$isElementNode(node)) return;
+			node.selectStart();
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection)) return;
+			const create = {
+				paragraph: () => $createParagraphNode(),
+				h1: () => $createHeadingNode("h1"),
+				h2: () => $createHeadingNode("h2"),
+				h3: () => $createHeadingNode("h3"),
+				quote: () => $createQuoteNode(),
+				code: () => $createCodeNode()
+			}[type];
+			if (create) $setBlocksType(selection, create);
+		});
+	}, [editor, handle]);
+	const handleDelete = useCallback(() => {
+		deleteSelectedBlocks(handle.nodeKey);
+		setHandle((state) => ({
+			...state,
+			visible: false,
+			nodeKey: null
+		}));
+	}, [deleteSelectedBlocks, handle.nodeKey]);
+	const handleDuplicate = useCallback(() => {
+		const selectedKeys = getSelectedKeys();
+		const keys = selectedKeys.length > 0 ? selectedKeys : handle.nodeKey ? [handle.nodeKey] : [];
+		if (!keys.length) return;
+		editor.update(() => {
+			const children = $getRoot().getChildren();
+			const keySet = new Set(keys);
+			const nodesToDuplicate = children.filter((child) => keySet.has(child.getKey()));
+			if (!nodesToDuplicate.length) return;
+			let insertAfter = nodesToDuplicate.at(-1);
+			for (const node of nodesToDuplicate) {
+				const clone = $cloneNode(node);
+				insertAfter.insertAfter(clone);
+				insertAfter = clone;
+			}
+		});
+	}, [
+		editor,
+		getSelectedKeys,
+		handle.nodeKey
+	]);
+	const handleMoveUp = useCallback(() => {
+		const selectedKeys = getSelectedKeys();
+		const keys = selectedKeys.length > 0 ? selectedKeys : handle.nodeKey ? [handle.nodeKey] : [];
+		if (!keys.length) return;
+		editor.update(() => {
+			const children = $getRoot().getChildren();
+			const keySet = new Set(keys);
+			const selectedNodes = children.filter((child) => keySet.has(child.getKey()));
+			if (!selectedNodes.length) return;
+			const previousSibling = selectedNodes[0].getPreviousSibling();
+			if (!previousSibling || keySet.has(previousSibling.getKey())) return;
+			const lastSelected = selectedNodes.at(-1);
+			previousSibling.remove();
+			lastSelected.insertAfter(previousSibling);
+		});
+	}, [
+		editor,
+		getSelectedKeys,
+		handle.nodeKey
+	]);
+	const handleMoveDown = useCallback(() => {
+		const selectedKeys = getSelectedKeys();
+		const keys = selectedKeys.length > 0 ? selectedKeys : handle.nodeKey ? [handle.nodeKey] : [];
+		if (!keys.length) return;
+		editor.update(() => {
+			const children = $getRoot().getChildren();
+			const keySet = new Set(keys);
+			const selectedNodes = children.filter((child) => keySet.has(child.getKey()));
+			if (!selectedNodes.length) return;
+			const nextSibling = selectedNodes.at(-1).getNextSibling();
+			if (!nextSibling || keySet.has(nextSibling.getKey())) return;
+			const firstSelected = selectedNodes[0];
+			nextSibling.remove();
+			firstSelected.insertBefore(nextSibling);
+		});
+	}, [
+		editor,
+		getSelectedKeys,
+		handle.nodeKey
+	]);
+	const [gripMenuOpen, setGripMenuOpen] = useState(false);
+	const dragStartedRef = useRef(false);
+	const clearDragVisualState = useCallback(() => {
+		const preview = dragPreviewRef.current;
+		if (preview) {
+			preview.remove();
+			dragPreviewRef.current = null;
+		}
+		const draggingBlock$1 = draggingBlockRef.current;
+		if (draggingBlock$1) {
+			draggingBlock$1.classList.remove(draggingBlock);
+			draggingBlockRef.current = null;
+		}
+		const draggingKeys = draggingBlockKeysRef.current;
+		if (draggingKeys) {
+			for (const key of draggingKeys) editor.getElementByKey(key)?.classList.remove(draggingBlock);
+			draggingBlockKeysRef.current = null;
+		}
+	}, [editor]);
+	const onGripDragStart = useCallback((event) => {
+		dragStartedRef.current = true;
+		if (!event.dataTransfer || !handle.nodeKey) return;
+		const selectedKeys = getSelectedKeys();
+		const dragKeys = selectedKeys.length > 0 && selectedKeys.includes(handle.nodeKey) ? selectedKeys : [handle.nodeKey];
+		event.dataTransfer.setData(DRAG_DATA_KEY, JSON.stringify(dragKeys));
+		event.dataTransfer.effectAllowed = "move";
+		const block = activeBlockRef.current;
+		if (!block) return;
+		clearDragVisualState();
+		const rect = block.getBoundingClientRect();
+		const preview = block.cloneNode(true);
+		preview.classList.add(dragPreview);
+		preview.style.width = `${rect.width}px`;
+		preview.style.position = "relative";
+		if (dragKeys.length > 1) {
+			const badge = document.createElement("div");
+			badge.className = dragCountBadge;
+			badge.textContent = String(dragKeys.length);
+			preview.appendChild(badge);
+		}
+		if (portalClassName) {
+			const wrapper = document.createElement("div");
+			wrapper.className = portalClassName;
+			wrapper.setAttribute("data-theme", theme);
+			wrapper.style.cssText = "position:fixed;top:-10000px;left:-10000px;pointer-events:none";
+			wrapper.appendChild(preview);
+			document.body.append(wrapper);
+			dragPreviewRef.current = wrapper;
+		} else {
+			document.body.append(preview);
+			dragPreviewRef.current = preview;
+		}
+		if (dragKeys.length > 1) {
+			for (const key of dragKeys) editor.getElementByKey(key)?.classList.add(draggingBlock);
+			draggingBlockKeysRef.current = dragKeys;
+		} else {
+			draggingBlockRef.current = block;
+			block.classList.add(draggingBlock);
+		}
+		const offsetX = Math.max(12, Math.min(rect.width - 12, event.clientX - rect.left));
+		const offsetY = Math.max(8, Math.min(rect.height - 8, event.clientY - rect.top));
+		event.dataTransfer.setDragImage(preview, offsetX, offsetY);
+	}, [
+		clearDragVisualState,
+		editor,
+		getSelectedKeys,
+		handle.nodeKey,
+		portalClassName,
+		theme
+	]);
+	const onGripOpenChange = useCallback((open) => {
+		setGripMenuOpen((previous) => {
+			if (previous === open) return previous;
+			onMenuOpenChange(open);
+			return open;
+		});
+	}, [onMenuOpenChange]);
+	const onGripMouseDownCapture = useCallback((event) => {
+		dragStartedRef.current = false;
+		if (event.button === 0) event.stopPropagation();
+	}, []);
+	const onGripClick = useCallback((event) => {
+		if (event.detail === 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (dragStartedRef.current) {
+			dragStartedRef.current = false;
+			return;
+		}
+		if (!handle.nodeKey) return;
+		const { nodeKey } = handle;
+		const { shiftKey } = event;
+		editor.focus(() => selectBlock(nodeKey, shiftKey));
+	}, [
+		editor,
+		handle.nodeKey,
+		selectBlock
+	]);
+	const onGripContextMenu = useCallback((event) => {
+		event.preventDefault();
+		if (handle.nodeKey) {
+			if (!getSelectedKeys().includes(handle.nodeKey)) selectBlock(handle.nodeKey, false);
+		}
+		onGripOpenChange(true);
+	}, [
+		getSelectedKeys,
+		handle.nodeKey,
+		onGripOpenChange,
+		selectBlock
+	]);
+	useEffect(() => {
+		const rootElement = editor.getRootElement();
+		if (!rootElement) return;
+		const unregDragOver = editor.registerCommand(DRAGOVER_COMMAND, (event) => {
+			if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "move";
+			const block = getDropTargetBlock(editor, rootElement, event);
+			if (!block) {
+				setDropLine((state) => state.visible ? {
+					...state,
+					visible: false
+				} : state);
+				return true;
+			}
+			const rect = block.getBoundingClientRect();
+			const rootRect = rootElement.getBoundingClientRect();
+			const midY = rect.top + rect.height / 2;
+			setDropLine({
+				visible: true,
+				top: (event.clientY < midY ? rect.top : rect.bottom) + window.scrollY,
+				left: rootRect.left + window.scrollX,
+				width: rootRect.width
+			});
+			return true;
+		}, COMMAND_PRIORITY_HIGH);
+		const unregDrop = editor.registerCommand(DROP_COMMAND, (event) => {
+			const raw = event.dataTransfer?.getData(DRAG_DATA_KEY);
+			if (!raw) return false;
+			event.preventDefault();
+			setDropLine((state) => ({
+				...state,
+				visible: false
+			}));
+			clearDragVisualState();
+			let draggedKeys;
+			try {
+				const parsed = JSON.parse(raw);
+				draggedKeys = Array.isArray(parsed) && parsed.every((key) => typeof key === "string") ? parsed : [raw];
+			} catch {
+				draggedKeys = [raw];
+			}
+			if (!draggedKeys.length) return false;
+			const block = getDropTargetBlock(editor, rootElement, event);
+			if (!block) return false;
+			editor.update(() => {
+				const targetNode = $getNearestNodeFromDOMNode(block);
+				if (!targetNode) return;
+				if (draggedKeys.includes(targetNode.getKey())) return;
+				const rect = block.getBoundingClientRect();
+				const insertBefore = event.clientY < rect.top + rect.height / 2;
+				const children = $getRoot().getChildren();
+				const keySet = new Set(draggedKeys);
+				const draggedNodes = children.filter((child) => keySet.has(child.getKey()));
+				for (const node of draggedNodes) node.remove();
+				const freshTarget = $getNodeByKey(targetNode.getKey());
+				if (!freshTarget) return;
+				if (insertBefore) for (let i = draggedNodes.length - 1; i >= 0; i--) freshTarget.insertBefore(draggedNodes[i]);
+				else {
+					let cursor = freshTarget;
+					for (const node of draggedNodes) {
+						cursor.insertAfter(node);
+						cursor = node;
+					}
+				}
+			});
+			return true;
+		}, COMMAND_PRIORITY_HIGH);
+		const unregDragStart = editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+			if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
+			return true;
+		}, COMMAND_PRIORITY_HIGH);
+		const clearDropLine = () => {
+			setDropLine((state) => state.visible ? {
+				...state,
+				visible: false
+			} : state);
+		};
+		const clearDragState = () => {
+			clearDropLine();
+			clearDragVisualState();
+		};
+		const onDragLeave = (event) => {
+			if (event.relatedTarget === null || !rootElement.contains(event.relatedTarget)) clearDropLine();
+		};
+		window.addEventListener("dragend", clearDragState);
+		window.addEventListener("drop", clearDragState);
+		rootElement.addEventListener("dragleave", onDragLeave);
+		return () => {
+			unregDragOver();
+			unregDrop();
+			unregDragStart();
+			window.removeEventListener("dragend", clearDragState);
+			window.removeEventListener("drop", clearDragState);
+			rootElement.removeEventListener("dragleave", onDragLeave);
+			clearDragState();
+		};
+	}, [clearDragVisualState, editor]);
+	useEffect(() => {
+		const rootElement = editor.getRootElement();
+		if (!rootElement) return;
+		const outerContainer = rootElement.closest(".rich-editor");
+		if (!outerContainer) return;
+		let isDragging = false;
+		let lastKey = null;
+		const getBlockKeyAtY = (clientY) => {
+			const block = getNearestBlockByY(rootElement, clientY);
+			if (!block) return null;
+			let nodeKey = null;
+			editor.read(() => {
+				nodeKey = $getNearestNodeFromDOMNode(block)?.getKey() ?? null;
+			});
+			return nodeKey;
+		};
+		const onMouseDown = (event) => {
+			if (event.button !== 0) return;
+			const target = event.target;
+			if (rootElement.contains(target)) return;
+			const nodeKey = getBlockKeyAtY(event.clientY);
+			if (!nodeKey) return;
+			event.preventDefault();
+			editor.focus(() => selectBlock(nodeKey, event.shiftKey));
+			isDragging = true;
+			lastKey = nodeKey;
+		};
+		const onMouseMove = (event) => {
+			if (!isDragging) return;
+			const nodeKey = getBlockKeyAtY(event.clientY);
+			if (!nodeKey || nodeKey === lastKey) return;
+			selectBlock(nodeKey, true);
+			lastKey = nodeKey;
+		};
+		const onMouseUp = () => {
+			isDragging = false;
+			lastKey = null;
+		};
+		outerContainer.addEventListener("mousedown", onMouseDown);
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseUp);
+		return () => {
+			outerContainer.removeEventListener("mousedown", onMouseDown);
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [editor, selectBlock]);
+	return /* @__PURE__ */ jsxs("div", {
+		...portalClassName ? {
+			"className": portalClassName,
+			"data-theme": theme,
+			"style": { display: "contents" }
+		} : {},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `${handleContainer} ${handle.visible ? handleContainerVisible : ""}`,
+			style: {
+				top: handle.top,
+				left: handle.left
+			},
+			onMouseEnter: onHandleEnter,
+			onMouseLeave: onHandleLeave,
+			children: [/* @__PURE__ */ jsx("button", {
+				"aria-label": "Add block",
+				className: handleBtn,
+				onClick: handleAddBlock,
+				children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+			}), /* @__PURE__ */ jsxs(DropdownMenu, {
+				open: gripMenuOpen,
+				onOpenChange: onGripOpenChange,
+				children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					draggable: true,
+					"aria-label": "Block actions",
+					className: handleBtn,
+					onClick: onGripClick,
+					onContextMenu: onGripContextMenu,
+					onDragStart: onGripDragStart,
+					onMouseDownCapture: onGripMouseDownCapture,
+					children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+					align: "start",
+					side: "bottom",
+					sideOffset: 4,
+					children: [
+						/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "TURN INTO" }), TURN_INTO_ITEMS.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: () => handleTurnInto(item.key),
+							children: [/* @__PURE__ */ jsx(item.icon, {}), item.label]
+						}, item.key))] }),
+						/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+						/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+							/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "ACTIONS" }),
+							/* @__PURE__ */ jsxs(DropdownMenuItem, {
+								onClick: handleDuplicate,
+								children: [/* @__PURE__ */ jsx(Copy, {}), "Duplicate"]
+							}),
+							/* @__PURE__ */ jsxs(DropdownMenuItem, {
+								onClick: handleMoveUp,
+								children: [/* @__PURE__ */ jsx(ArrowUp, {}), "Move Up"]
+							}),
+							/* @__PURE__ */ jsxs(DropdownMenuItem, {
+								onClick: handleMoveDown,
+								children: [/* @__PURE__ */ jsx(ArrowDown, {}), "Move Down"]
+							})
+						] }),
+						/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							className: menuItemDestructive,
+							onClick: handleDelete,
+							children: [/* @__PURE__ */ jsx(Trash2, {}), "Delete"]
+						})
+					]
+				})]
+			})]
+		}), dropLine.visible && /* @__PURE__ */ jsx("div", {
+			className: "iihqkc5",
+			style: {
+				top: dropLine.top,
+				left: dropLine.left,
+				width: dropLine.width
+			}
+		})]
+	});
 }
 function BlockHandlePlugin() {
-  const [editor] = useLexicalComposerContext();
-  return createPortal(/* @__PURE__ */ jsx(BlockHandleInner, { editor }), document.body);
+	const [editor] = useLexicalComposerContext();
+	return createPortal(/* @__PURE__ */ jsx(BlockHandleInner, { editor }), document.body);
 }
-export {
-  BlockHandlePlugin
-};
+//#endregion
+export { BlockHandlePlugin };