feat: ✨ add table

packages/core/package.json

@@ -30,6 +30,10 @@
     "@tiptap/extension-strike": "^2.9.1",
     "@tiptap/extension-subscript": "^2.9.1",
     "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-table": "^2.10.3",
+    "@tiptap/extension-table-cell": "^2.10.3",
+    "@tiptap/extension-table-header": "^2.10.3",
+    "@tiptap/extension-table-row": "^2.10.3",
     "@tiptap/extension-task-item": "^2.9.1",
     "@tiptap/extension-task-list": "^2.9.1",
     "@tiptap/extension-text": "^2.9.1",

packages/core/src/extensions/index.js

@@ -42,3 +42,4 @@ export { default as Blockquote } from "./blockquote.js";
 export { default as Divider } from "./divider.js";
 export { default as HardBreak } from "./hard-break.js";
 export { default as CodeBlock } from "./code-block.js";
+export { default as Table } from "./table.js";

packages/core/src/extensions/table.js

@@ -0,0 +1,43 @@
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableHeader from "@tiptap/extension-table-header";
+import TableCell from "@tiptap/extension-table-cell";
+
+export default Table.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      slash: true,
+      name: "table",
+      resizable: true,
+      desc: "",
+      command: ({ editor, range, params }) => {
+        range
+          ? editor
+              .chain()
+              .focus()
+              .deleteRange(range)
+              .insertTable({
+                rows: params?.rows || 3,
+                cols: params?.cols || 3,
+                withHeaderRow: params?.withHeaderRow || false,
+              })
+              .run()
+          : editor.commands.insertTable({
+              rows: params?.rows || 3,
+              cols: params?.cols || 3,
+              withHeaderRow: params?.withHeaderRow || false,
+            });
+      },
+      isActive: ({ editor }) => editor.isActive("table"),
+      isDisabled: ({ editor }) => !editor.can().insertTable(),
+      HTMLAttributes: {
+        class: "table",
+      },
+    };
+  },
+
+  addExtensions() {
+    return [TableRow, TableHeader, TableCell];
+  },
+});

packages/core/src/kit/notion-kit.js

@@ -26,6 +26,7 @@ import {
   Background,
   TextStyle,
   CodeBlock,
+  Table,
 } from "@/extensions";
 
 export default BasicKit.extend({
@@ -144,6 +145,10 @@ export default BasicKit.extend({
       extensions.push(CodeBlock.configure(this.options?.codeBlock));
     }
 
+    if (this.options.table !== false) {
+      extensions.push(Table.configure(this.options?.table));
+    }
+
     return extensions;
   },
 });

packages/core/src/locales/en.json

@@ -42,6 +42,7 @@
   "alignCenter": "Align Center",
   "alignRight": "Align Right",
   "alignJustify": "Align Justify",
+  "table": "Table",
 
   "edit": "Edit",
   "textClear": "Clear",

packages/core/src/locales/zh.json

@@ -42,6 +42,7 @@
   "alignCenter": "居中对齐",
   "alignRight": "右对齐",
   "alignJustify": "两端对齐",
+  "table": "表格",
 
   "edit": "编辑",
   "textClear": "清除",

packages/vue3/src/styles/index.scss

@@ -12,6 +12,7 @@
 @use "link";
 @use "selection";
 @use "code-block";
+@use "table";
 
 @use "menu";
 @use "ui";

packages/vue3/src/styles/placeholder.scss

@@ -11,7 +11,8 @@
     text-align: inherit;
   }
 
-  .#{$prefix}-node-empty::before {
+  pre.#{$prefix}-node-empty::before,
+  p.#{$prefix}-node-empty::before {
     content: attr(data-placeholder);
     float: left;
     color: var(--#{$prefix}-text-color-2);

packages/vue3/src/styles/table.scss

@@ -0,0 +1,63 @@
+@use "config" as *;
+
+.#{$prefix}.ProseMirror {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    margin-top: var(--#{$prefix}-margin);
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    td,
+    th {
+      min-width: 1em;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      border: 1px solid rgba(var(--isle-editor-border-color-val), 1);
+      padding: 3px 5px;
+      box-sizing: border-box;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: rgba(var(--isle-editor-border-color-val), 0.4);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(var(--isle-editor-theme-primary-val), 0.3);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 4px;
+      background-color: var(--isle-editor-theme-selected);
+      cursor: col-resize;
+    }
+    .column-resize-handle:visited {
+      cursor: col-resize;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}

packages/vue3/src/utils/icon.js

@@ -40,6 +40,7 @@ import {
   WrapText as HardBreak,
   ChevronDown as Down,
   CodeXml as CodeBlock,
+  Table,
 } from "lucide-vue-next";
 const ICONS = {
   Bold,
@@ -83,6 +84,7 @@ const ICONS = {
   HardBreak,
   Down,
   CodeBlock,
+  Table,
 };
 
 export const getIcon = (name) => {