tiptap-markdown-react 0.8.11 → 0.8.12

package/dist/icons/index.d.ts

@@ -5,7 +5,7 @@ import { SVGProps } from 'react';
  *
  * 通用图标（粗体/斜体/下划线/列表/撤销等，本文件前 17 个）的 path 取自 Lucide，
  * 其许可证为 ISC，其中部分图形源自 Feather 的 MIT——完整版权声明见
- * 仓库根目录 THIRD_PARTY_LICENSES.md。表格行列操作图标（Column / Row 系列）为自绘。
+ * 仓库根目录 THIRD_PARTY_LICENSES.md。表格行列操作图标（Column / Row / TableDelete 系列）为自绘。
  */
 export interface IconProps extends SVGProps<SVGSVGElement> {
     size?: number | string;
@@ -34,3 +34,4 @@ export declare const ColumnDeleteIcon: (p: IconProps) => import("react").JSX.Ele
 export declare const RowBeforeIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const RowAfterIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const RowDeleteIcon: (p: IconProps) => import("react").JSX.Element;
+export declare const TableDeleteIcon: (p: IconProps) => import("react").JSX.Element;

package/dist/index.js

@@ -18,6 +18,7 @@ import { FileHandlePlugin } from "@tiptap/extension-file-handler";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Popover from "@radix-ui/react-popover";
 import { createPortal } from "react-dom";
+import { isInTable, selectedRect, rowIsHeader, CellSelection } from "@tiptap/pm/tables";
 import { C, R as R2, f, r, s as s2 } from "./scrollToTocHeading-CwapFaVP.js";
 function CitationRefView({ node, extension }) {
   const index = String(node.attrs.index ?? "");
@@ -636,6 +637,13 @@ const RowDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("path", { d: "m9 8 6 8" }),
   /* @__PURE__ */ jsx("path", { d: "m15 8-6 8" })
 ] });
+const TableDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 5v14" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 5v14" }),
+  /* @__PURE__ */ jsx("path", { d: "m7 2 10 20" })
+] });
 const defaultToolbarLabels = {
   undo: "Undo",
   redo: "Redo",
@@ -678,12 +686,20 @@ const defaultToolbarLabels = {
   hr: "Divider",
   importMarkdown: "Markdown",
   tableInsert: "Insert table",
+  tableSizeSelected: (cols, rows) => `${cols} × ${rows}`,
   tableAddColumnBefore: "Add column before",
   tableAddColumnAfter: "Add column after",
   tableDeleteColumn: "Delete column",
   tableAddRowBefore: "Add row before",
   tableAddRowAfter: "Add row after",
   tableDeleteRow: "Delete row",
+  tableAddColumnBeforeN: (n) => `Add ${n} columns before`,
+  tableAddColumnAfterN: (n) => `Add ${n} columns after`,
+  tableDeleteColumnN: (n) => `Delete ${n} columns`,
+  tableAddRowBeforeN: (n) => `Add ${n} rows before`,
+  tableAddRowAfterN: (n) => `Add ${n} rows after`,
+  tableDeleteRowN: (n) => `Delete ${n} rows`,
+  tableDeleteTable: "Delete table",
   inlineMath: "Inline equation",
   blockMath: "Block equation",
   mathPlaceholder: "E = mc^2",
@@ -1142,45 +1158,140 @@ function splitTopLevelBlocks(markdown) {
 function stripToPlainText(markdown) {
   return markdown.replace(/!\[[^\]]*\]\([^)]+\)/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#{1,6}\s+/gm, "").replace(/^[ \t]*[-*+]\s+/gm, "").replace(/^[ \t]*\d+\.\s+/gm, "").replace(/[*_~`]+/g, "").replace(/<[^>]+>/g, "").replace(/\|/g, " ").replace(/\s+/g, " ").trim();
 }
-const toolbar = "_toolbar_16b09_2";
-const inner = "_inner_16b09_15";
-const btn = "_btn_16b09_27";
-const btnActive = "_btnActive_16b09_50";
-const tableBubble = "_tableBubble_16b09_66";
-const txtIcon = "_txtIcon_16b09_78";
-const colorIcon = "_colorIcon_16b09_86";
-const colorIconGlyph = "_colorIconGlyph_16b09_94";
-const colorIconBar = "_colorIconBar_16b09_100";
-const scriptTrigger = "_scriptTrigger_16b09_107";
-const scriptTriggerGlyph = "_scriptTriggerGlyph_16b09_127";
-const divider = "_divider_16b09_135";
-const styleTrigger = "_styleTrigger_16b09_144";
-const styleTriggerLabel = "_styleTriggerLabel_16b09_173";
-const styleTriggerCaret = "_styleTriggerCaret_16b09_181";
-const styleItem = "_styleItem_16b09_187";
-const styleIcon = "_styleIcon_16b09_193";
-const scriptGlyph = "_scriptGlyph_16b09_203";
-const menu = "_menu_16b09_215";
-const menuItem = "_menuItem_16b09_226";
-const menuItemSelected = "_menuItemSelected_16b09_252";
-const popoverContent$1 = "_popoverContent_16b09_266";
-const mathLayer = "_mathLayer_16b09_270";
-const mathStack = "_mathStack_16b09_275";
-const mathStackBlock = "_mathStackBlock_16b09_282";
-const mathHint = "_mathHint_16b09_287";
-const mathHintBlock = "_mathHintBlock_16b09_299";
-const mathHintIcon = "_mathHintIcon_16b09_305";
-const mathField = "_mathField_16b09_336";
-const mathFieldBlock = "_mathFieldBlock_16b09_348";
-const mathInput = "_mathInput_16b09_355";
-const mathDone = "_mathDone_16b09_373";
-const mathDoneKbd = "_mathDoneKbd_16b09_398";
+function getTableSelectionInfo(state) {
+  if (!isInTable(state)) return null;
+  const rect = selectedRect(state);
+  const rowCount = Math.max(1, rect.bottom - rect.top);
+  const colCount = Math.max(1, rect.right - rect.left);
+  let includesHeaderRow = false;
+  for (let row = rect.top; row < rect.bottom; row++) {
+    if (rowIsHeader(rect.map, rect.table, row)) {
+      includesHeaderRow = true;
+      break;
+    }
+  }
+  return {
+    rowCount,
+    colCount,
+    isMultiCell: rowCount > 1 || colCount > 1,
+    includesHeaderRow,
+    coversAllRows: rect.top === 0 && rect.bottom === rect.map.height,
+    coversAllCols: rect.left === 0 && rect.right === rect.map.width
+  };
+}
+function isPosInCellSelection(selection, pos) {
+  let found = false;
+  selection.forEachCell((node, cellPos) => {
+    if (pos >= cellPos && pos <= cellPos + node.nodeSize) {
+      found = true;
+    }
+  });
+  return found;
+}
+function preserveTableSelectionOnContextMenu(editor, pos) {
+  const { selection } = editor.state;
+  if (selection instanceof CellSelection && isPosInCellSelection(selection, pos)) {
+    editor.view.focus();
+    return;
+  }
+  editor.chain().focus().setTextSelection(pos).run();
+}
+function addRowsBefore(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addRowBefore()) return false;
+  }
+  return true;
+}
+function addRowsAfter(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addRowAfter()) return false;
+  }
+  return true;
+}
+function addColumnsBefore(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addColumnBefore()) return false;
+  }
+  return true;
+}
+function addColumnsAfter(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addColumnAfter()) return false;
+  }
+  return true;
+}
+function deleteSelectedRows(editor) {
+  const info = getTableSelectionInfo(editor.state);
+  if (!info) return false;
+  if (info.coversAllRows) return editor.commands.deleteTable();
+  return editor.commands.deleteRow();
+}
+function deleteSelectedColumns(editor) {
+  const info = getTableSelectionInfo(editor.state);
+  if (!info) return false;
+  if (info.coversAllCols) {
+    if (info.coversAllRows) return editor.commands.deleteTable();
+    return false;
+  }
+  return editor.commands.deleteColumn();
+}
+const toolbar = "_toolbar_1f7fb_2";
+const inner = "_inner_1f7fb_15";
+const btn = "_btn_1f7fb_27";
+const btnActive = "_btnActive_1f7fb_50";
+const tableBubble = "_tableBubble_1f7fb_66";
+const tableMenuItem = "_tableMenuItem_1f7fb_77";
+const tableMenuItemIcon = "_tableMenuItemIcon_1f7fb_103";
+const tableMenuItemLabel = "_tableMenuItemLabel_1f7fb_113";
+const tableMenuDivider = "_tableMenuDivider_1f7fb_118";
+const txtIcon = "_txtIcon_1f7fb_126";
+const colorIcon = "_colorIcon_1f7fb_134";
+const colorIconGlyph = "_colorIconGlyph_1f7fb_142";
+const colorIconBar = "_colorIconBar_1f7fb_148";
+const scriptTrigger = "_scriptTrigger_1f7fb_155";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_1f7fb_175";
+const divider = "_divider_1f7fb_183";
+const styleTrigger = "_styleTrigger_1f7fb_192";
+const styleTriggerLabel = "_styleTriggerLabel_1f7fb_221";
+const styleTriggerCaret = "_styleTriggerCaret_1f7fb_229";
+const styleItem = "_styleItem_1f7fb_235";
+const styleIcon = "_styleIcon_1f7fb_241";
+const scriptGlyph = "_scriptGlyph_1f7fb_251";
+const menu = "_menu_1f7fb_263";
+const menuItem = "_menuItem_1f7fb_274";
+const menuItemSelected = "_menuItemSelected_1f7fb_301";
+const tableInsertCaret = "_tableInsertCaret_1f7fb_314";
+const tableSizePicker = "_tableSizePicker_1f7fb_322";
+const tableSizeGrid = "_tableSizeGrid_1f7fb_332";
+const tableSizeCell = "_tableSizeCell_1f7fb_337";
+const tableSizeCellActive = "_tableSizeCellActive_1f7fb_347";
+const tableSizeLabel = "_tableSizeLabel_1f7fb_352";
+const popoverContent$1 = "_popoverContent_1f7fb_361";
+const mathLayer = "_mathLayer_1f7fb_365";
+const mathStack = "_mathStack_1f7fb_370";
+const mathStackBlock = "_mathStackBlock_1f7fb_377";
+const mathHint = "_mathHint_1f7fb_382";
+const mathHintBlock = "_mathHintBlock_1f7fb_394";
+const mathHintIcon = "_mathHintIcon_1f7fb_400";
+const mathField = "_mathField_1f7fb_431";
+const mathFieldBlock = "_mathFieldBlock_1f7fb_443";
+const mathInput = "_mathInput_1f7fb_450";
+const mathDone = "_mathDone_1f7fb_468";
+const mathDoneKbd = "_mathDoneKbd_1f7fb_493";
 const styles$3 = {
   toolbar,
   inner,
   btn,
   btnActive,
   tableBubble,
+  tableMenuItem,
+  tableMenuItemIcon,
+  tableMenuItemLabel,
+  tableMenuDivider,
   txtIcon,
   colorIcon,
   colorIconGlyph,
@@ -1197,6 +1308,12 @@ const styles$3 = {
   menu,
   menuItem,
   menuItemSelected,
+  tableInsertCaret,
+  tableSizePicker,
+  tableSizeGrid,
+  tableSizeCell,
+  tableSizeCellActive,
+  tableSizeLabel,
   popoverContent: popoverContent$1,
   mathLayer,
   mathStack,
@@ -1539,6 +1656,30 @@ function ToolbarButton({
 function Divider() {
   return /* @__PURE__ */ jsx("span", { className: styles$3.divider, "aria-hidden": true });
 }
+function TableMenuItem({
+  label,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: styles$3.tableMenuItem,
+      onMouseDown: (e2) => e2.preventDefault(),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles$3.tableMenuItemIcon, "aria-hidden": true, children }),
+        /* @__PURE__ */ jsx("span", { className: styles$3.tableMenuItemLabel, children: label })
+      ]
+    }
+  );
+}
+function TableMenuDivider() {
+  return /* @__PURE__ */ jsx("div", { className: styles$3.tableMenuDivider, "aria-hidden": true });
+}
 const MenuCloseCtx = createContext(() => {
 });
 function MenuPopover({
@@ -1584,6 +1725,92 @@ function MenuItem({
     }
   );
 }
+const TABLE_PICKER_COLS = 10;
+const TABLE_PICKER_ROWS = 8;
+function TableInsertItem({
+  disabled,
+  labels,
+  onInsert
+}) {
+  const closeMenu = useContext(MenuCloseCtx);
+  const [open, setOpen] = useState(false);
+  const [hover, setHover] = useState({ cols: 0, rows: 0 });
+  const resetHover = useCallback(() => setHover({ cols: 0, rows: 0 }), []);
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (!next) resetHover();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: `${styles$3.menuItem} ${open ? styles$3.menuItemSelected : ""}`,
+            onMouseDown: (e2) => e2.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "⊞" }),
+                labels.tableInsert
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$3.tableInsertCaret })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            className: styles$3.tableSizePicker,
+            side: "right",
+            align: "start",
+            sideOffset: 6,
+            onOpenAutoFocus: (e2) => e2.preventDefault(),
+            onCloseAutoFocus: (e2) => e2.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles$3.tableSizeGrid,
+                  style: {
+                    gridTemplateColumns: `repeat(${TABLE_PICKER_COLS}, 1fr)`
+                  },
+                  onMouseLeave: resetHover,
+                  children: Array.from({ length: TABLE_PICKER_ROWS * TABLE_PICKER_COLS }, (_, i) => {
+                    const col = i % TABLE_PICKER_COLS + 1;
+                    const row = Math.floor(i / TABLE_PICKER_COLS) + 1;
+                    const active2 = hover.cols > 0 && col <= hover.cols && row <= hover.rows;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": labels.tableSizeSelected(col, row),
+                        className: `${styles$3.tableSizeCell} ${active2 ? styles$3.tableSizeCellActive : ""}`,
+                        onMouseDown: (e2) => e2.preventDefault(),
+                        onMouseEnter: () => setHover({ cols: col, rows: row }),
+                        onClick: () => {
+                          onInsert(row, col);
+                          setOpen(false);
+                          resetHover();
+                          closeMenu();
+                        }
+                      },
+                      i
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: styles$3.tableSizeLabel, children: hover.cols > 0 ? labels.tableSizeSelected(hover.cols, hover.rows) : labels.tableInsert })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
 function ColorPopover({
   title,
   glyph,
@@ -1669,7 +1896,6 @@ function EditorToolbar({
       superscript: e2.isActive("superscript"),
       subscript: e2.isActive("subscript"),
       inTable: e2.isActive("table"),
-      inTableHeader: e2.isActive("tableHeader"),
       canUndo: e2.can().undo(),
       canRedo: e2.can().redo()
     })
@@ -1709,7 +1935,7 @@ function EditorToolbar({
       }
       if (!inTable) return;
       e2.preventDefault();
-      editor.chain().focus().setTextSelection(coords.pos).run();
+      preserveTableSelectionOnContextMenu(editor, coords.pos);
       setTableMenu({ x: e2.clientX, y: e2.clientY });
     };
     dom.addEventListener("contextmenu", onContextMenu);
@@ -1734,6 +1960,13 @@ function EditorToolbar({
     },
     [closeTableMenu]
   );
+  const tableSel = tableMenu ? getTableSelectionInfo(editor.state) : null;
+  const tableRowN = (tableSel == null ? void 0 : tableSel.rowCount) ?? 1;
+  const tableColN = (tableSel == null ? void 0 : tableSel.colCount) ?? 1;
+  const tableMulti = (tableSel == null ? void 0 : tableSel.isMultiCell) ?? false;
+  const disableAddRowBefore = !!(tableSel == null ? void 0 : tableSel.includesHeaderRow);
+  const disableDeleteRow = !!(tableSel == null ? void 0 : tableSel.includesHeaderRow);
+  const disableDeleteColumn = !!(tableSel == null ? void 0 : tableSel.coversAllCols) && !(tableSel == null ? void 0 : tableSel.coversAllRows);
   const handlePickImage = () => {
     var _a;
     return (_a = fileInputRef.current) == null ? void 0 : _a.click();
@@ -2280,14 +2513,11 @@ function EditorToolbar({
                   t.hr
                 ] }) }),
                 /* @__PURE__ */ jsx(
-                  MenuItem,
+                  TableInsertItem,
                   {
                     disabled: state.inTable,
-                    onSelect: () => chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "⊞" }),
-                      t.tableInsert
-                    ] })
+                    labels: t,
+                    onInsert: (rows, cols) => chain().insertTable({ rows, cols, withHeaderRow: true }).run()
                   }
                 ),
                 extraToolbarItems == null ? void 0 : extraToolbarItems.map((item2) => /* @__PURE__ */ jsx(
@@ -2339,59 +2569,76 @@ function EditorToolbar({
         {
           className: styles$3.tableBubble,
           style: { position: "fixed", left: tableMenu.x, top: tableMenu.y },
+          role: "menu",
           onMouseDown: (e2) => e2.stopPropagation(),
           onContextMenu: (e2) => e2.preventDefault(),
           children: [
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddColumnBefore,
-                onClick: () => runTable(() => chain().addColumnBefore().run()),
+                label: tableMulti ? t.tableAddColumnBeforeN(tableColN) : t.tableAddColumnBefore,
+                onClick: () => runTable(() => addColumnsBefore(editor, tableColN)),
                 children: /* @__PURE__ */ jsx(ColumnBeforeIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddColumnAfter,
-                onClick: () => runTable(() => chain().addColumnAfter().run()),
+                label: tableMulti ? t.tableAddColumnAfterN(tableColN) : t.tableAddColumnAfter,
+                onClick: () => runTable(() => addColumnsAfter(editor, tableColN)),
                 children: /* @__PURE__ */ jsx(ColumnAfterIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableDeleteColumn,
-                onClick: () => runTable(() => chain().deleteColumn().run()),
+                label: tableMulti ? t.tableDeleteColumnN(tableColN) : t.tableDeleteColumn,
+                disabled: disableDeleteColumn,
+                onClick: () => runTable(() => {
+                  deleteSelectedColumns(editor);
+                }),
                 children: /* @__PURE__ */ jsx(ColumnDeleteIcon, {})
               }
             ),
-            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(TableMenuDivider, {}),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddRowBefore,
-                disabled: state.inTableHeader,
-                onClick: () => runTable(() => chain().addRowBefore().run()),
+                label: tableMulti ? t.tableAddRowBeforeN(tableRowN) : t.tableAddRowBefore,
+                disabled: disableAddRowBefore,
+                onClick: () => runTable(() => addRowsBefore(editor, tableRowN)),
                 children: /* @__PURE__ */ jsx(RowBeforeIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddRowAfter,
-                onClick: () => runTable(() => chain().addRowAfter().run()),
+                label: tableMulti ? t.tableAddRowAfterN(tableRowN) : t.tableAddRowAfter,
+                onClick: () => runTable(() => addRowsAfter(editor, tableRowN)),
                 children: /* @__PURE__ */ jsx(RowAfterIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableDeleteRow,
-                disabled: state.inTableHeader,
-                onClick: () => runTable(() => chain().deleteRow().run()),
+                label: tableMulti ? t.tableDeleteRowN(tableRowN) : t.tableDeleteRow,
+                disabled: disableDeleteRow,
+                onClick: () => runTable(() => {
+                  deleteSelectedRows(editor);
+                }),
                 children: /* @__PURE__ */ jsx(RowDeleteIcon, {})
               }
+            ),
+            /* @__PURE__ */ jsx(TableMenuDivider, {}),
+            /* @__PURE__ */ jsx(
+              TableMenuItem,
+              {
+                label: t.tableDeleteTable,
+                onClick: () => runTable(() => {
+                  editor.commands.deleteTable();
+                }),
+                children: /* @__PURE__ */ jsx(TableDeleteIcon, {})
+              }
             )
           ]
         }
@@ -2636,6 +2883,7 @@ export {
   RowBeforeIcon,
   RowDeleteIcon,
   StrikethroughIcon,
+  TableDeleteIcon,
   TocPanel,
   TrashIcon,
   UnderlineIcon,