@haklex/rich-plugin-block-handle 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/dist/BlockHandlePlugin.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+export declare function BlockHandlePlugin(): ReactElement;
+//# sourceMappingURL=BlockHandlePlugin.d.ts.map

package/dist/BlockHandlePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockHandlePlugin.d.ts","sourceRoot":"","sources":["../src/BlockHandlePlugin.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAGV,YAAY,EACb,MAAM,OAAO,CAAA;AAgmBd,wBAAgB,iBAAiB,IAAI,YAAY,CAGhD"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { BlockHandlePlugin } from './BlockHandlePlugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,533 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "@haklex/rich-editor-ui";
+import { $createCodeNode } from "@lexical/code";
+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 { $setBlocksType } from "@lexical/selection";
+import { $getNearestNodeFromDOMNode, $getNodeByKey, $createParagraphNode, $isElementNode, $getSelection, $isRangeSelection, DRAGOVER_COMMAND, COMMAND_PRIORITY_HIGH, 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 { useState, useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+var handleContainer = "iihqkc0";
+var handleContainerVisible = "iihqkc1";
+var handleBtn = "iihqkc2";
+var draggingBlock = "iihqkc3";
+var dragPreview = "iihqkc4";
+var dropIndicator = "iihqkc5";
+var menuItemDestructive = "iihqkc6";
+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 }
+];
+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;
+}
+function toPagePosition(rect) {
+  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;
+}
+function BlockHandleInner({
+  editor
+}) {
+  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 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((s) => ({ ...s, 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();
+    },
+    [scheduleHide, clearHideTimer]
+  );
+  const updatePositionFromBlock = useCallback(
+    (block) => {
+      if (block !== void 0) activeBlockRef.current = block;
+      const el = activeBlockRef.current;
+      if (!el || !el.isConnected) {
+        activeBlockRef.current = null;
+        setHandle(
+          (s) => s.visible ? { ...s, visible: false, nodeKey: null } : s
+        );
+        return;
+      }
+      const rootElement = editor.getRootElement();
+      if (!rootElement) return;
+      const blockRect = el.getBoundingClientRect();
+      const rootRect = rootElement.getBoundingClientRect();
+      const page = toPagePosition(blockRect);
+      let nodeKey = null;
+      editor.read(() => {
+        const node = $getNearestNodeFromDOMNode(el);
+        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 = (e) => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const target = e.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();
+    };
+  }, [editor, clearHideTimer, 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 p = $createParagraphNode();
+      node.insertAfter(p);
+      p.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 sel = $getSelection();
+        if (!$isRangeSelection(sel)) 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(sel, create);
+      });
+    },
+    [editor, handle.nodeKey]
+  );
+  const handleDelete = useCallback(() => {
+    if (!handle.nodeKey) return;
+    editor.update(() => {
+      const node = $getNodeByKey(handle.nodeKey);
+      node?.remove();
+    });
+    setHandle((s) => ({ ...s, visible: false, nodeKey: null }));
+  }, [editor, handle.nodeKey]);
+  const handleDuplicate = useCallback(() => {
+    if (!handle.nodeKey) return;
+    editor.update(() => {
+      const node = $getNodeByKey(handle.nodeKey);
+      if (!node) return;
+      const clone = $cloneNode(node);
+      node.insertAfter(clone);
+    });
+  }, [editor, handle.nodeKey]);
+  const handleMoveUp = useCallback(() => {
+    if (!handle.nodeKey) return;
+    editor.update(() => {
+      const node = $getNodeByKey(handle.nodeKey);
+      if (!node) return;
+      const prev = node.getPreviousSibling();
+      if (prev) {
+        node.remove();
+        prev.insertBefore(node);
+      }
+    });
+  }, [editor, handle.nodeKey]);
+  const handleMoveDown = useCallback(() => {
+    if (!handle.nodeKey) return;
+    editor.update(() => {
+      const node = $getNodeByKey(handle.nodeKey);
+      if (!node) return;
+      const next = node.getNextSibling();
+      if (next) {
+        node.remove();
+        next.insertAfter(node);
+      }
+    });
+  }, [editor, 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 onGripDragStart = useCallback(
+    (e) => {
+      dragStartedRef.current = true;
+      if (!e.dataTransfer || !handle.nodeKey) return;
+      e.dataTransfer.setData(DRAG_DATA_KEY, handle.nodeKey);
+      e.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`;
+      document.body.append(preview);
+      draggingBlockRef.current = block;
+      dragPreviewRef.current = preview;
+      block.classList.add(draggingBlock);
+      const offsetX = Math.max(
+        12,
+        Math.min(rect.width - 12, e.clientX - rect.left)
+      );
+      const offsetY = Math.max(
+        8,
+        Math.min(rect.height - 8, e.clientY - rect.top)
+      );
+      e.dataTransfer.setDragImage(preview, offsetX, offsetY);
+    },
+    [clearDragVisualState, handle.nodeKey]
+  );
+  const onGripOpenChange = useCallback(
+    (open) => {
+      setGripMenuOpen((prev) => {
+        if (prev === open) return prev;
+        onMenuOpenChange(open);
+        return open;
+      });
+    },
+    [onMenuOpenChange]
+  );
+  const onGripMouseDownCapture = useCallback((e) => {
+    dragStartedRef.current = false;
+    if (e.button === 0) e.stopPropagation();
+  }, []);
+  const onGripClick = useCallback(
+    (e) => {
+      if (e.detail === 0) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (dragStartedRef.current) {
+        dragStartedRef.current = false;
+        return;
+      }
+      onGripOpenChange(!gripMenuOpen);
+    },
+    [gripMenuOpen, onGripOpenChange]
+  );
+  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 target = event.target;
+        const block = getBlockElement(editor, target);
+        if (block) {
+          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 draggedKey = event.dataTransfer?.getData(DRAG_DATA_KEY);
+        if (!draggedKey) return false;
+        event.preventDefault();
+        setDropLine((s) => ({ ...s, visible: false }));
+        clearDragVisualState();
+        const target = event.target;
+        const block = getBlockElement(editor, target);
+        if (!block) return false;
+        editor.update(() => {
+          const draggedNode = $getNodeByKey(draggedKey);
+          const targetNode = $getNearestNodeFromDOMNode(block);
+          if (!draggedNode || !targetNode || draggedNode === targetNode) return;
+          const rect = block.getBoundingClientRect();
+          const midY = rect.top + rect.height / 2;
+          draggedNode.remove();
+          if (event.clientY < midY) {
+            targetNode.insertBefore(draggedNode);
+          } else {
+            targetNode.insertAfter(draggedNode);
+          }
+        });
+        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((s) => s.visible ? { ...s, visible: false } : s);
+    };
+    const clearDragState = () => {
+      clearDropLine();
+      clearDragVisualState();
+    };
+    const onDragLeave = (e) => {
+      if (e.relatedTarget === null || !rootElement.contains(e.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]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${handleContainer} ${handle.visible ? handleContainerVisible : ""}`,
+        style: { top: handle.top, left: handle.left },
+        onMouseEnter: onHandleEnter,
+        onMouseLeave: onHandleLeave,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: handleBtn,
+              "aria-label": "Add block",
+              onClick: handleAddBlock,
+              children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(DropdownMenu, { open: gripMenuOpen, onOpenChange: onGripOpenChange, children: [
+            /* @__PURE__ */ jsx(
+              DropdownMenuTrigger,
+              {
+                className: handleBtn,
+                "aria-label": "Block actions",
+                draggable: true,
+                onDragStart: onGripDragStart,
+                onMouseDownCapture: onGripMouseDownCapture,
+                onClick: onGripClick,
+                children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", align: "start", 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, { size: 14 }),
+                      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, { size: 14 }),
+                  "Duplicate"
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleMoveUp, children: [
+                  /* @__PURE__ */ jsx(ArrowUp, { size: 14 }),
+                  "Move Up"
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleMoveDown, children: [
+                  /* @__PURE__ */ jsx(ArrowDown, { size: 14 }),
+                  "Move Down"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  className: menuItemDestructive,
+                  onClick: handleDelete,
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                    "Delete"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    dropLine.visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: dropIndicator,
+        style: {
+          top: dropLine.top,
+          left: dropLine.left,
+          width: dropLine.width
+        }
+      }
+    )
+  ] });
+}
+function BlockHandlePlugin() {
+  const [editor] = useLexicalComposerContext();
+  return createPortal(/* @__PURE__ */ jsx(BlockHandleInner, { editor }), document.body);
+}
+export {
+  BlockHandlePlugin
+};

package/dist/rich-plugin-block-handle.css

@@ -0,0 +1,64 @@
+.iihqkc0 {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  position: absolute;
+  z-index: 30;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+.iihqkc1 {
+  opacity: 1;
+  pointer-events: auto;
+}
+.iihqkc2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--rc-text) 35%, transparent);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.15s, color 0.15s;
+}
+.iihqkc2:hover {
+  background: color-mix(in srgb, var(--rc-text) 8%, transparent);
+  color: color-mix(in srgb, var(--rc-text) 70%, transparent);
+}
+.iihqkc3 {
+  opacity: 0.35;
+}
+.iihqkc4 {
+  position: fixed;
+  top: -10000px;
+  left: -10000px;
+  z-index: 40;
+  pointer-events: none;
+  margin: 0;
+  box-sizing: border-box;
+  opacity: 0.9;
+  background-color: var(--rc-bg);
+  border: 1px solid var(--rc-border);
+  border-radius: var(--rc-radius-sm);
+  box-shadow: 0 10px 28px color-mix(in srgb, var(--rc-text) 18%, transparent);
+}
+.iihqkc5 {
+  position: absolute;
+  height: 2px;
+  background: var(--rc-accent);
+  border-radius: 1px;
+  z-index: 30;
+  pointer-events: none;
+}
+.iihqkc6 {
+  color: var(--rc-alert-caution);
+}
+.iihqkc6[data-highlighted] {
+  color: var(--rc-alert-caution);
+  background-color: color-mix(in srgb, var(--rc-alert-caution) 8%, transparent);
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,8 @@
+export declare const handleContainer: string;
+export declare const handleContainerVisible: string;
+export declare const handleBtn: string;
+export declare const draggingBlock: string;
+export declare const dragPreview: string;
+export declare const dropIndicator: string;
+export declare const menuItemDestructive: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,QAS1B,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAGjC,CAAA;AAGF,eAAO,MAAM,SAAS,QAiBpB,CAAA;AAGF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,WAAW,QAatB,CAAA;AAGF,eAAO,MAAM,aAAa,QAOxB,CAAA;AAGF,eAAO,MAAM,mBAAmB,QAQ9B,CAAA"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@haklex/rich-plugin-block-handle",
+  "version": "0.0.1",
+  "description": "Block handle plugin with add button and context menu",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-plugin-block-handle.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@haklex/rich-editor-ui": "0.0.1"
+  },
+  "devDependencies": {
+    "@lexical/code": "^0.39.0",
+    "@lexical/list": "^0.39.0",
+    "@lexical/react": "^0.39.0",
+    "@lexical/rich-text": "^0.39.0",
+    "@lexical/selection": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.574.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/code": "^0.39.0",
+    "@lexical/list": "^0.39.0",
+    "@lexical/react": "^0.39.0",
+    "@lexical/rich-text": "^0.39.0",
+    "@lexical/selection": "^0.39.0",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.574.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}