@prosekit/extensions 0.4.1 → 0.4.2

package/dist/_tsup-dts-rollup.d.ts

@@ -5,6 +5,7 @@ import { bundledLanguagesInfo } from 'shiki';
 import { BundledTheme } from 'shiki';
 import { BundledThemeInfo } from 'shiki';
 import { bundledThemesInfo } from 'shiki';
+import { Command } from '@prosekit/pm/state';
 import { CommandArgs } from '@prosekit/core';
 import { DedentListOptions } from 'prosemirror-flat-list';
 import { EditorState } from '@prosekit/pm/state';
@@ -64,6 +65,12 @@ export { BundledThemeInfo as ShikiBundledThemeInfo_alias_1 }
 export { bundledThemesInfo as shikiBundledThemesInfo }
 export { bundledThemesInfo as shikiBundledThemesInfo_alias_1 }
 
+export declare interface CellAttrs {
+    colspan: number;
+    rowspan: number;
+    colwidth: number[] | null;
+}
+
 /**
  * The attributes for the `codeBlock` node.
  *
@@ -516,6 +523,70 @@ export declare function defineStrikeSpec(): Extension<    {
 MARKS: "strike";
 }>;
 
+/**
+ * @public
+ */
+export declare function defineTable(): Extension<    {
+NODES: "table" | "tableRow" | "tableCell" | "tableHeaderCell";
+COMMAND_ARGS: {
+insertTable: [{
+row: number;
+col: number;
+header: boolean;
+}];
+exitTable: [];
+};
+}>;
+
+declare function defineTableCellSpec(): Extension<    {
+NODES: "tableCell";
+}>;
+export { defineTableCellSpec }
+export { defineTableCellSpec as defineTableCellSpec_alias_1 }
+
+/**
+ * Adds commands for working with `table` nodes.
+ *
+ * @public
+ */
+declare function defineTableCommands(): Extension<    {
+COMMAND_ARGS: {
+insertTable: [{
+row: number;
+col: number;
+header: boolean;
+}];
+exitTable: [];
+};
+}>;
+export { defineTableCommands }
+export { defineTableCommands as defineTableCommands_alias_1 }
+
+declare function defineTableHeaderCellSpec(): Extension<    {
+NODES: "tableHeaderCell";
+}>;
+export { defineTableHeaderCellSpec }
+export { defineTableHeaderCellSpec as defineTableHeaderCellSpec_alias_1 }
+
+/**
+ * @public
+ */
+declare function defineTablePlugins(): Extension<ExtensionTyping<string, string, CommandArgs>>;
+export { defineTablePlugins }
+export { defineTablePlugins as defineTablePlugins_alias_1 }
+
+declare function defineTableRowSpec(): Extension<    {
+NODES: "tableRow";
+}>;
+export { defineTableRowSpec }
+export { defineTableRowSpec as defineTableRowSpec_alias_1 }
+
+declare function defineTableSpec(): Extension<    {
+NODES: "table";
+}>;
+export { defineTableSpec }
+export { defineTableSpec as defineTableSpec_alias_1 }
+
 /**
  * Defines an enter rule that replaces the matched text with a block node.
  *
@@ -679,6 +750,14 @@ export declare type EnterRuleOptions = {
     stop?: boolean;
 };
 
+/**
+ * When the selection is in a table node, create a default block after the table
+ * table, and move the cursor there.
+ *
+ * @public
+ */
+export declare const exitTable: Command;
+
 export { getHighlighter }
 
 export declare function getPluginState(state: EditorState): PredictionPluginState | undefined;
@@ -708,6 +787,18 @@ export declare interface ImageAttrs {
     src?: string | null;
 }
 
+/**
+ * Insert a table node with the given number of rows and columns, and optionally
+ * a header row.
+ *
+ * @public
+ */
+export declare function insertTable({ row, col, header, }: {
+    row: number;
+    col: number;
+    header: boolean;
+}): Command;
+
 export declare const LINK_RE: RegExp;
 
 export declare const LINK_SPACE_RE: RegExp;

package/dist/prosekit-extensions-table.d.ts

@@ -0,0 +1,7 @@
+export { defineTable } from './_tsup-dts-rollup';
+export { defineTableCellSpec } from './_tsup-dts-rollup';
+export { defineTableCommands } from './_tsup-dts-rollup';
+export { defineTableHeaderCellSpec } from './_tsup-dts-rollup';
+export { defineTablePlugins } from './_tsup-dts-rollup';
+export { defineTableRowSpec } from './_tsup-dts-rollup';
+export { defineTableSpec } from './_tsup-dts-rollup';

package/dist/prosekit-extensions-table.js

@@ -0,0 +1,197 @@
+// src/table/index.ts
+import { union } from "@prosekit/core";
+
+// src/table/table-commands.ts
+import {
+  defaultBlockAt,
+  defineCommands,
+  getNodeType,
+  insertNode
+} from "@prosekit/core";
+import { TextSelection } from "@prosekit/pm/state";
+function createEmptyTable(schema, row, col, header) {
+  const table = getNodeType(schema, "table");
+  const tableRow = getNodeType(schema, "tableRow");
+  const tableCell = getNodeType(schema, "tableCell");
+  const tableHeaderCell = getNodeType(schema, "tableHeaderCell");
+  const createHeaderRow = () => {
+    return tableRow.createAndFill(
+      null,
+      Array.from({ length: col }, () => tableHeaderCell.createAndFill())
+    );
+  };
+  const createBodyRow = () => {
+    return tableRow.createAndFill(
+      null,
+      Array.from({ length: col }, () => tableCell.createAndFill())
+    );
+  };
+  const rows = [
+    ...Array.from({ length: header ? 1 : 0 }, createHeaderRow),
+    ...Array.from({ length: header ? row - 1 : row }, createBodyRow)
+  ];
+  return table.createAndFill(null, rows);
+}
+function insertTable({
+  row,
+  col,
+  header
+}) {
+  return (state, dispatch, view) => {
+    const table = createEmptyTable(state.schema, row, col, header);
+    return insertNode({ node: table })(state, dispatch, view);
+  };
+}
+var exitTable = (state, dispatch) => {
+  const { $head, $anchor } = state.selection;
+  if (!$head.sameParent($anchor)) {
+    return false;
+  }
+  let tableStart = -1;
+  let tableDepth = -1;
+  for (let depth = $head.depth; depth >= 0; depth--) {
+    const node2 = $head.node(depth);
+    if (node2.type.spec.tableRole === "table") {
+      tableStart = $head.before(depth);
+      tableDepth = depth;
+    }
+  }
+  if (tableStart < 0 || tableDepth <= 0) {
+    return false;
+  }
+  const above = $head.node(tableDepth - 1);
+  const after = $head.indexAfter(tableDepth - 1);
+  const type = defaultBlockAt(above.contentMatchAt(after));
+  const node = type == null ? void 0 : type.createAndFill();
+  if (!type || !node || !above.canReplaceWith(after, after, type)) {
+    return false;
+  }
+  if (dispatch) {
+    const pos = $head.after(tableDepth);
+    const tr = state.tr.replaceWith(pos, pos, node);
+    tr.setSelection(TextSelection.near(tr.doc.resolve(pos), 1));
+    dispatch(tr.scrollIntoView());
+  }
+  return true;
+};
+function defineTableCommands() {
+  return defineCommands({
+    insertTable,
+    exitTable: () => exitTable
+  });
+}
+
+// src/table/table-plugins.ts
+import { definePlugin } from "@prosekit/core";
+import { tableEditing, columnResizing } from "prosemirror-tables";
+function defineTablePlugins() {
+  return definePlugin([tableEditing(), columnResizing()]);
+}
+
+// src/table/table-spec.ts
+import { defineNodeSpec } from "@prosekit/core";
+import "prosemirror-tables";
+var cellAttrs = {
+  colspan: { default: 1 },
+  rowspan: { default: 1 },
+  colwidth: { default: null }
+};
+var cellContent = "block+";
+function getCellAttrs(dom) {
+  if (typeof dom === "string") {
+    return {};
+  }
+  const widthAttr = dom.getAttribute("data-colwidth");
+  const widths = widthAttr && /^\d+(,\d+)*$/.test(widthAttr) ? widthAttr.split(",").map((s) => Number(s)) : null;
+  const colspan = Number(dom.getAttribute("colspan") || 1);
+  return {
+    colspan,
+    rowspan: Number(dom.getAttribute("rowspan") || 1),
+    colwidth: widths && widths.length == colspan ? widths : null
+  };
+}
+function setCellAttrs(node) {
+  const pmAttrs = node.attrs;
+  const domAttrs = {};
+  if (pmAttrs.colspan !== 1) {
+    domAttrs.colspan = pmAttrs.colspan;
+  }
+  if (pmAttrs.rowspan !== 1) {
+    domAttrs.rowspan = pmAttrs.rowspan;
+  }
+  if (pmAttrs.colwidth) {
+    domAttrs["data-colwidth"] = pmAttrs.colwidth.join(",");
+  }
+  return domAttrs;
+}
+function defineTableSpec() {
+  return defineNodeSpec({
+    name: "table",
+    tableRole: "table",
+    content: "tableRow+",
+    isolating: true,
+    group: "block",
+    parseDOM: [{ tag: "table" }],
+    toDOM() {
+      return ["table", ["tbody", 0]];
+    }
+  });
+}
+function defineTableRowSpec() {
+  return defineNodeSpec({
+    name: "tableRow",
+    tableRole: "row",
+    content: "(tableCell | tableHeaderCell)*",
+    parseDOM: [{ tag: "tr" }],
+    toDOM() {
+      return ["tr", 0];
+    }
+  });
+}
+function defineTableCellSpec() {
+  return defineNodeSpec({
+    name: "tableCell",
+    tableRole: "cell",
+    content: cellContent,
+    attrs: cellAttrs,
+    isolating: true,
+    parseDOM: [{ tag: "td", getAttrs: (dom) => getCellAttrs(dom) }],
+    toDOM(node) {
+      return ["td", setCellAttrs(node), 0];
+    }
+  });
+}
+function defineTableHeaderCellSpec() {
+  return defineNodeSpec({
+    name: "tableHeaderCell",
+    tableRole: "header_cell",
+    content: cellContent,
+    attrs: cellAttrs,
+    isolating: true,
+    parseDOM: [{ tag: "th", getAttrs: (dom) => getCellAttrs(dom) }],
+    toDOM(node) {
+      return ["th", setCellAttrs(node), 0];
+    }
+  });
+}
+
+// src/table/index.ts
+function defineTable() {
+  return union([
+    defineTableSpec(),
+    defineTableRowSpec(),
+    defineTableCellSpec(),
+    defineTableHeaderCellSpec(),
+    defineTablePlugins(),
+    defineTableCommands()
+  ]);
+}
+export {
+  defineTable,
+  defineTableCellSpec,
+  defineTableCommands,
+  defineTableHeaderCellSpec,
+  defineTablePlugins,
+  defineTableRowSpec,
+  defineTableSpec
+};

package/dist/table/style.css

@@ -0,0 +1,34 @@
+/* src/table/style.css */
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+.ProseMirror table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+.ProseMirror td,
+.ProseMirror th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  border-width: 1px;
+}
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  z-index: 20;
+  background-color: HighlightText;
+  pointer-events: none;
+}
+.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+.ProseMirror .selectedCell {
+  background-color: Highlight;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -121,6 +121,14 @@
       "import": "./dist/prosekit-extensions-strike.js",
       "default": "./dist/prosekit-extensions-strike.js"
     },
+    "./table": {
+      "types": "./dist/prosekit-extensions-table.d.ts",
+      "import": "./dist/prosekit-extensions-table.js",
+      "default": "./dist/prosekit-extensions-table.js"
+    },
+    "./table/style.css": {
+      "default": "./dist/table/style.css"
+    },
     "./underline": {
       "types": "./dist/prosekit-extensions-underline.d.ts",
       "import": "./dist/prosekit-extensions-underline.js",
@@ -144,13 +152,14 @@
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-flat-list": "^0.4.6",
     "prosemirror-highlight": "^0.5.0",
-    "shiki": "^1.1.2"
+    "prosemirror-tables": "^1.3.7",
+    "shiki": "^1.1.7"
   },
   "devDependencies": {
     "@prosekit/dev": "*",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "vitest": "^1.2.2"
+    "vitest": "^1.3.1"
   },
   "scripts": {
     "build:tsup": "tsup",
@@ -213,6 +222,9 @@
       "strike": [
         "./dist/prosekit-extensions-strike.d.ts"
       ],
+      "table": [
+        "./dist/prosekit-extensions-table.d.ts"
+      ],
       "underline": [
         "./dist/prosekit-extensions-underline.d.ts"
       ],