@haklex/rich-plugin-block-handle 0.0.65 → 0.0.66

package/README.md

@@ -0,0 +1,65 @@
+# @haklex/rich-plugin-block-handle
+
+Block handle plugin with drag handle, add button, and context menu for the Haklex rich editor.
+
+## Installation
+
+```bash
+pnpm add @haklex/rich-plugin-block-handle
+```
+
+## Peer Dependencies
+
+| Package | Version |
+| --- | --- |
+| `@lexical/code` | `^0.41.0` |
+| `@lexical/list` | `^0.41.0` |
+| `@lexical/react` | `^0.41.0` |
+| `@lexical/rich-text` | `^0.41.0` |
+| `@lexical/selection` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
+
+## Usage
+
+```tsx
+import { BlockHandlePlugin } from '@haklex/rich-plugin-block-handle'
+import '@haklex/rich-plugin-block-handle/style.css'
+
+function Editor() {
+  return (
+    <RichEditor>
+      <BlockHandlePlugin />
+    </RichEditor>
+  )
+}
+```
+
+The plugin renders a drag handle and an add button on the left side of each block. Hovering over a block reveals the handle, which supports:
+
+- **Drag and drop** to reorder blocks
+- **Add button** to insert a new block above or below
+- **Context menu** with block-level actions (duplicate, delete, change type, etc.)
+
+## Exports
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `BlockHandlePlugin` | Component | Main plugin component to render inside `RichEditor` |
+
+## Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-plugin-block-handle` | Plugin component |
+| `@haklex/rich-plugin-block-handle/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
+## License
+
+MIT

package/dist/BlockHandlePlugin.d.ts.map

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

package/dist/index.mjs

@@ -1,5 +1,6 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "@haklex/rich-editor-ui";
+import { usePortalTheme } from "@haklex/rich-style-token";
 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";
@@ -43,7 +44,7 @@ function getBlockElement(editor, target) {
   return null;
 }
 function getNearestBlockByY(rootElement, clientY) {
-  const blocks = Array.from(rootElement.children).filter(
+  const blocks = [...rootElement.children].filter(
     (child) => child instanceof HTMLElement
   );
   if (!blocks.length) return null;
@@ -67,13 +68,8 @@ function getDropTargetBlock(editor, rootElement, event) {
   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)
-  );
+  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 });
   }
@@ -107,9 +103,8 @@ function $cloneNode(node) {
   }
   return clone;
 }
-function BlockHandleInner({
-  editor
-}) {
+function BlockHandleInner({ editor }) {
+  const { className: portalClassName, theme } = usePortalTheme();
   const [handle, setHandle] = useState({
     visible: false,
     top: 0,
@@ -165,9 +160,7 @@ function BlockHandleInner({
       const el = activeBlockRef.current;
       if (!el || !el.isConnected) {
         activeBlockRef.current = null;
-        setHandle(
-          (s) => s.visible ? { ...s, visible: false, nodeKey: null } : s
-        );
+        setHandle((s) => s.visible ? { ...s, visible: false, nodeKey: null } : s);
         return;
       }
       const rootElement = editor.getRootElement();
@@ -349,21 +342,25 @@ function BlockHandleInner({
       const preview = block.cloneNode(true);
       preview.classList.add(dragPreview);
       preview.style.width = `${rect.width}px`;
-      document.body.append(preview);
+      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;
+      }
       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)
-      );
+      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]
+    [clearDragVisualState, handle.nodeKey, portalClassName, theme]
   );
   const onGripOpenChange = useCallback(
     (open) => {
@@ -480,7 +477,12 @@ function BlockHandleInner({
       clearDragState();
     };
   }, [clearDragVisualState, editor]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const themeWrapperProps = portalClassName ? {
+    "className": portalClassName,
+    "data-theme": theme,
+    "style": { display: "contents" }
+  } : {};
+  return /* @__PURE__ */ jsxs("div", { ...themeWrapperProps, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -489,42 +491,27 @@ function BlockHandleInner({
         onMouseEnter: onHandleEnter,
         onMouseLeave: onHandleLeave,
         children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: handleBtn,
-              "aria-label": "Add block",
-              onClick: handleAddBlock,
-              children: /* @__PURE__ */ jsx(Plus, { size: 14 })
-            }
-          ),
+          /* @__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,
               {
-                className: handleBtn,
-                "aria-label": "Block actions",
                 draggable: true,
+                "aria-label": "Block actions",
+                className: handleBtn,
+                onClick: onGripClick,
                 onDragStart: onGripDragStart,
                 onMouseDownCapture: onGripMouseDownCapture,
-                onClick: onGripClick,
                 children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
               }
             ),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", align: "start", sideOffset: 4, children: [
+            /* @__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
-                ))
+                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: [
@@ -543,17 +530,10 @@ function BlockHandleInner({
                 ] })
               ] }),
               /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  className: menuItemDestructive,
-                  onClick: handleDelete,
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, {}),
-                    "Delete"
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: menuItemDestructive, onClick: handleDelete, children: [
+                /* @__PURE__ */ jsx(Trash2, {}),
+                "Delete"
+              ] })
             ] })
           ] })
         ]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-plugin-block-handle",
   "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "description": "Block handle plugin with add button and context menu",
   "license": "MIT",
   "exports": {
@@ -27,8 +27,8 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@haklex/rich-style-token": "0.0.65",
-    "@haklex/rich-editor-ui": "0.0.65"
+    "@haklex/rich-editor-ui": "0.0.66",
+    "@haklex/rich-style-token": "0.0.66"
   },
   "devDependencies": {
     "@lexical/code": "^0.41.0",
@@ -51,6 +51,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-plugin-block-handle"
+  },
   "scripts": {
     "build": "vite build",
     "dev:build": "vite build --watch"