@haklex/rich-plugin-table 0.0.65 → 0.0.67

package/README.md

@@ -1,35 +1,66 @@
 # @haklex/rich-plugin-table
 
-表格编辑插件。
+Table editing plugin with cell resizing and row/column manipulation.
 
-## 安装
+## Installation
 
 ```bash
-pnpm add @haklex/rich-plugin-table @haklex/rich-editor
+pnpm add @haklex/rich-plugin-table
 ```
 
-## 导出
+## Peer Dependencies
 
-```ts
-export { TableCellResizerPlugin } from './TableCellResizerPlugin'
-export { TableRowColumnHandlesPlugin } from './TableRowColumnHandlesPlugin'
-```
+| Package | Version |
+| --- | --- |
+| `@lexical/react` | `^0.41.0` |
+| `@lexical/table` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
 
-## 使用
+## Usage
 
 ```tsx
-import { 
-  TableCellResizerPlugin, 
-  TableRowColumnHandlesPlugin 
+import {
+  TableCellResizerPlugin,
+  TableRowColumnHandlesPlugin,
 } from '@haklex/rich-plugin-table'
-import { RichEditor } from '@haklex/rich-editor'
+import '@haklex/rich-plugin-table/style.css'
 
-<RichEditor>
-  <TableRowColumnHandlesPlugin />
-  <TableCellResizerPlugin />
-</RichEditor>
+function Editor() {
+  return (
+    <RichEditor>
+      <TableCellResizerPlugin />
+      <TableRowColumnHandlesPlugin />
+    </RichEditor>
+  )
+}
 ```
 
+This plugin provides two complementary components:
+
+- **TableCellResizerPlugin** -- Allows users to resize table columns by dragging cell borders.
+- **TableRowColumnHandlesPlugin** -- Renders handles for inserting, deleting, and reordering rows and columns.
+
+## Exports
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `TableCellResizerPlugin` | Component | Cell border drag-to-resize plugin |
+| `TableRowColumnHandlesPlugin` | Component | Row/column insert, delete, and reorder handles |
+
+## Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-plugin-table` | Plugin components |
+| `@haklex/rich-plugin-table/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
 ## License
 
 MIT

package/dist/TableCellResizerPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellResizerPlugin.d.ts","sourceRoot":"","sources":["../src/TableCellResizerPlugin.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqC,YAAY,EAAE,MAAM,OAAO,CAAA;AAuP5E,wBAAgB,sBAAsB,IAAI,YAAY,CAIrD"}
+{"version":3,"file":"TableCellResizerPlugin.d.ts","sourceRoot":"","sources":["../src/TableCellResizerPlugin.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqC,YAAY,EAAE,MAAM,OAAO,CAAC;AAiP7E,wBAAgB,sBAAsB,IAAI,YAAY,CAIrD"}

package/dist/TableRowColumnHandlesPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowColumnHandlesPlugin.d.ts","sourceRoot":"","sources":["../src/TableRowColumnHandlesPlugin.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AA6YzC,wBAAgB,2BAA2B,IAAI,YAAY,CAO1D"}
+{"version":3,"file":"TableRowColumnHandlesPlugin.d.ts","sourceRoot":"","sources":["../src/TableRowColumnHandlesPlugin.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA6X1C,wBAAgB,2BAA2B,IAAI,YAAY,CAI1D"}

package/dist/index.mjs

@@ -13,12 +13,8 @@ var rowColHandle = "t6ga9o3";
 var rowColHandleVisible = "t6ga9o4";
 var handleBtn = "t6ga9o5";
 const RESIZER_HANDLE_ATTR = "data-table-resizer-handle";
-function TableCellResizerInner({
-  editor
-}) {
-  const [activeCell, setActiveCell] = useState(
-    null
-  );
+function TableCellResizerInner({ editor }) {
+  const [activeCell, setActiveCell] = useState(null);
   const [resizing, setResizing] = useState(false);
   const [direction, setDirection] = useState(null);
   const [handlePos, setHandlePos] = useState({ right: null, bottom: null });
@@ -184,9 +180,9 @@ function TableCellResizerInner({
     handlePos.right && /* @__PURE__ */ jsx(
       "div",
       {
-        "data-testid": "table-cell-resizer-right",
-        "data-table-resizer-handle": "true",
         className: `${resizeHandle} ${direction === "right" ? resizeHandleActive : ""}`,
+        "data-table-resizer-handle": "true",
+        "data-testid": "table-cell-resizer-right",
         style: {
           top: handlePos.right.top,
           left: handlePos.right.left,
@@ -201,9 +197,9 @@ function TableCellResizerInner({
     handlePos.bottom && /* @__PURE__ */ jsx(
       "div",
       {
-        "data-testid": "table-cell-resizer-bottom",
-        "data-table-resizer-handle": "true",
         className: `${resizeHandle} ${direction === "bottom" ? resizeHandleActive : ""}`,
+        "data-table-resizer-handle": "true",
+        "data-testid": "table-cell-resizer-bottom",
         style: {
           top: handlePos.bottom.top,
           left: handlePos.bottom.left,
@@ -297,60 +293,57 @@ function TableRowColumnHandlesInner({
     hoveringHandleRef.current = false;
     scheduleHide();
   }, [scheduleHide]);
-  const updateHandlesFromAnchor = useCallback(
-    (anchor) => {
-      if (anchor !== void 0) {
-        activeAnchorRef.current = anchor;
-      }
-      const activeAnchor = activeAnchorRef.current;
-      if (!activeAnchor) return;
-      const { table, rowIndex, colIndex } = activeAnchor;
-      if (!table.isConnected) {
-        activeAnchorRef.current = null;
-        setRowHandle((s) => ({ ...s, visible: false }));
-        setColHandle((s) => ({ ...s, visible: false }));
-        return;
-      }
-      const rows = table.querySelectorAll("tr");
-      const row = rows[rowIndex];
-      if (!row) {
-        activeAnchorRef.current = null;
-        setRowHandle((s) => ({ ...s, visible: false }));
-        setColHandle((s) => ({ ...s, visible: false }));
-        return;
-      }
-      const cells = row.querySelectorAll("td, th");
-      const cell = cells[colIndex] ?? cells[0];
-      if (!cell) {
-        activeAnchorRef.current = null;
-        setRowHandle((s) => ({ ...s, visible: false }));
-        setColHandle((s) => ({ ...s, visible: false }));
-        return;
-      }
-      tableRef.current = table;
-      const resolvedColIndex = cell.cellIndex;
-      activeAnchorRef.current = { table, rowIndex, colIndex: resolvedColIndex };
-      const cellRect = cell.getBoundingClientRect();
-      const tableRect = table.getBoundingClientRect();
-      const cellPage = toPagePosition(cellRect);
-      const tablePage = toPagePosition(tableRect);
-      setRowHandle({
-        visible: true,
-        top: cellPage.top + cellRect.height / 2 - ROW_HANDLE_HEIGHT / 2,
-        left: tablePage.left - 38,
-        rowIndex,
-        colIndex: resolvedColIndex
-      });
-      setColHandle({
-        visible: true,
-        top: tablePage.top - 22,
-        left: cellPage.left + cellRect.width / 2 - COL_HANDLE_WIDTH / 2,
-        rowIndex,
-        colIndex: resolvedColIndex
-      });
-    },
-    []
-  );
+  const updateHandlesFromAnchor = useCallback((anchor) => {
+    if (anchor !== void 0) {
+      activeAnchorRef.current = anchor;
+    }
+    const activeAnchor = activeAnchorRef.current;
+    if (!activeAnchor) return;
+    const { table, rowIndex, colIndex } = activeAnchor;
+    if (!table.isConnected) {
+      activeAnchorRef.current = null;
+      setRowHandle((s) => ({ ...s, visible: false }));
+      setColHandle((s) => ({ ...s, visible: false }));
+      return;
+    }
+    const rows = table.querySelectorAll("tr");
+    const row = rows[rowIndex];
+    if (!row) {
+      activeAnchorRef.current = null;
+      setRowHandle((s) => ({ ...s, visible: false }));
+      setColHandle((s) => ({ ...s, visible: false }));
+      return;
+    }
+    const cells = row.querySelectorAll("td, th");
+    const cell = cells[colIndex] ?? cells[0];
+    if (!cell) {
+      activeAnchorRef.current = null;
+      setRowHandle((s) => ({ ...s, visible: false }));
+      setColHandle((s) => ({ ...s, visible: false }));
+      return;
+    }
+    tableRef.current = table;
+    const resolvedColIndex = cell.cellIndex;
+    activeAnchorRef.current = { table, rowIndex, colIndex: resolvedColIndex };
+    const cellRect = cell.getBoundingClientRect();
+    const tableRect = table.getBoundingClientRect();
+    const cellPage = toPagePosition(cellRect);
+    const tablePage = toPagePosition(tableRect);
+    setRowHandle({
+      visible: true,
+      top: cellPage.top + cellRect.height / 2 - ROW_HANDLE_HEIGHT / 2,
+      left: tablePage.left - 38,
+      rowIndex,
+      colIndex: resolvedColIndex
+    });
+    setColHandle({
+      visible: true,
+      top: tablePage.top - 22,
+      left: cellPage.left + cellRect.width / 2 - COL_HANDLE_WIDTH / 2,
+      rowIndex,
+      colIndex: resolvedColIndex
+    });
+  }, []);
   useEffect(() => {
     const rootElement = editor.getRootElement();
     if (!rootElement) return;
@@ -476,19 +469,10 @@ function TableRowColumnHandlesInner({
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: handleBtn,
-              onClick: addRowBelow,
-              "aria-label": "Add row",
-              children: /* @__PURE__ */ jsx(Plus, { size: ICON_SIZE })
-            }
-          ),
+          /* @__PURE__ */ jsx("button", { "aria-label": "Add row", className: handleBtn, type: "button", onClick: addRowBelow, children: /* @__PURE__ */ jsx(Plus, { size: ICON_SIZE }) }),
           /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: handleBtn, children: /* @__PURE__ */ jsx(GripVertical, { size: ICON_SIZE }) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "right", align: "start", sideOffset: 4, children: [
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "right", sideOffset: 4, children: [
               /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: insertRowAbove, children: [
                 /* @__PURE__ */ jsx(ArrowUp, { size: 14 }),
                 "Insert row above"
@@ -498,17 +482,10 @@ function TableRowColumnHandlesInner({
                 "Insert row below"
               ] }),
               /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  className: menuItemDestructive,
-                  onClick: deleteRow,
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { size: 14 }),
-                    "Delete row"
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: menuItemDestructive, onClick: deleteRow, children: [
+                /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                "Delete row"
+              ] })
             ] })
           ] })
         ]
@@ -525,16 +502,16 @@ function TableRowColumnHandlesInner({
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
+              "aria-label": "Add column",
               className: handleBtn,
+              type: "button",
               onClick: addColumnLeft,
-              "aria-label": "Add column",
               children: /* @__PURE__ */ jsx(Plus, { size: ICON_SIZE })
             }
           ),
           /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: handleBtn, children: /* @__PURE__ */ jsx(GripVertical, { size: ICON_SIZE }) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", align: "start", sideOffset: 4, children: [
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "bottom", sideOffset: 4, children: [
               /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: insertColumnLeft, children: [
                 /* @__PURE__ */ jsx(ArrowLeft, { size: 14 }),
                 "Insert column left"
@@ -544,17 +521,10 @@ function TableRowColumnHandlesInner({
                 "Insert column right"
               ] }),
               /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  className: menuItemDestructive,
-                  onClick: deleteColumn,
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { size: 14 }),
-                    "Delete column"
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: menuItemDestructive, onClick: deleteColumn, children: [
+                /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                "Delete column"
+              ] })
             ] })
           ] })
         ]
@@ -564,10 +534,7 @@ function TableRowColumnHandlesInner({
 }
 function TableRowColumnHandlesPlugin() {
   const [editor] = useLexicalComposerContext();
-  return createPortal(
-    /* @__PURE__ */ jsx(TableRowColumnHandlesInner, { editor }),
-    document.body
-  );
+  return createPortal(/* @__PURE__ */ jsx(TableRowColumnHandlesInner, { editor }), document.body);
 }
 export {
   TableCellResizerPlugin,

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@haklex/rich-plugin-table",
-  "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Table editing plugin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-plugin-table"
+  },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -15,17 +20,9 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "@lexical/react": "^0.41.0",
-    "@lexical/table": "^0.41.0",
-    "lexical": "^0.41.0",
-    "lucide-react": "^0.574.0",
-    "react": ">=19",
-    "react-dom": ">=19"
-  },
   "dependencies": {
-    "@haklex/rich-style-token": "0.0.65",
-    "@haklex/rich-editor-ui": "0.0.65"
+    "@haklex/rich-editor-ui": "0.0.67",
+    "@haklex/rich-style-token": "0.0.67"
   },
   "devDependencies": {
     "@lexical/react": "^0.41.0",
@@ -42,6 +39,14 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
+  "peerDependencies": {
+    "@lexical/react": "^0.41.0",
+    "@lexical/table": "^0.41.0",
+    "lexical": "^0.41.0",
+    "lucide-react": "^0.574.0",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
   "publishConfig": {
     "access": "public"
   },