feat: Table

package.json

@@ -19,7 +19,10 @@
   },
   "homepage": "https://github.com/chatwoot/prosemirror-schema#readme",
   "dependencies": {
+    "markdown-it": "^12.0.0",
+    "markdown-it-multimd-table": "^4.2.3",
     "markdown-it-sup": "^1.0.0",
+    "markdown-it-table": "^4.1.1",
     "prosemirror-commands": "^1.1.4",
     "prosemirror-dropcursor": "^1.3.2",
     "prosemirror-gapcursor": "^1.1.5",
@@ -31,7 +34,7 @@
     "prosemirror-model": "^1.1.0",
     "prosemirror-schema-list": "^1.1.4",
     "prosemirror-state": "^1.3.3",
-    "prosemirror-tables": "^1.3.0",
+    "prosemirror-tables": "^1.5.0",
     "prosemirror-utils": "^0.9.6",
     "prosemirror-view": "^1.17.2"
   },

src/index.js

@@ -3,7 +3,9 @@ import { Plugin } from "prosemirror-state";
 import { dropCursor } from "prosemirror-dropcursor";
 import { gapCursor } from "prosemirror-gapcursor";
 import { menuBar } from "prosemirror-menu";
-
+import { keymap } from "prosemirror-keymap";
+import { tableEditing, goToNextCell } from "prosemirror-tables";
+// import { tableInputRule } from "./rules/tables";
 import Placeholder from "./Placeholder";
 import {
   listInputRules,
@@ -52,9 +54,19 @@ export const buildEditor = ({
       onImageUpload,
     }),
   }),
+  // Add table-related plugins only if enabledMenuOptions includes 'table'
+  ...(enabledMenuOptions.includes('table') ? [
+    // tableInputRule(schema),
+    tableEditing(),
+    keymap({
+      Tab: goToNextCell(1),
+      'Shift-Tab': goToNextCell(-1),
+    }),
+  ] : []),
   new Plugin({
     props: {
       attributes: { class: "ProseMirror-woot-style" },
     },
   }),
+
 ];

src/menu/menuOptions.js

@@ -1,7 +1,21 @@
 import { wrapInList } from "prosemirror-schema-list";
+import { TextSelection } from 'prosemirror-state';
+import { Fragment } from 'prosemirror-model';
 import { toggleMark } from "prosemirror-commands";
-import { MenuItem } from "prosemirror-menu";
+import { Dropdown, DropdownSubmenu, MenuItem } from "prosemirror-menu";
 import { undo, redo } from "prosemirror-history";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  deleteColumn,
+  addRowAfter,
+  addRowBefore,
+  deleteRow,
+  mergeCells,
+  splitCell,
+  deleteTable,
+} from 'prosemirror-tables';
+
 import { openPrompt } from "../prompt";
 import { TextField } from "../TextField";
 import {
@@ -54,6 +68,56 @@ const headerItem = (nodeType, options) => {
   });
 };
 
+const createTable = (state, dispatch) => {
+  const offset = state.tr.selection.anchor + 1;
+  const transaction = state.tr;
+  const createCell = () => state.schema.nodes.table_cell.createAndFill(null, state.schema.nodes.paragraph.create());
+  const node = state.schema.nodes.table.create(
+    null,
+    Fragment.fromArray([
+      state.schema.nodes.table_row.create(
+        null,
+        Fragment.fromArray([createCell(), createCell(), createCell()])
+      ),
+      state.schema.nodes.table_row.create(
+        null,
+        Fragment.fromArray([createCell(), createCell(), createCell()])
+      )
+    ])
+  );
+
+  if (dispatch) {
+    dispatch(
+      transaction
+        .replaceSelectionWith(node)
+        .setSelection(
+          TextSelection.near(
+            transaction.doc.resolve(offset)
+          )
+        )
+    );
+  }
+
+  return true;
+}
+
+const tableMenu = [
+  { 
+    label: 'Insert table', 
+    run: createTable,
+    icon: icons.insertTable // Assuming you have this icon
+  },
+  { label: 'Delete table', run: deleteTable, select: deleteTable, icon: icons.deleteTable },
+  { label: 'Insert column before', run: addColumnBefore, select: addColumnBefore, icon: icons.insertColumnBefore },
+  { label: 'Insert column after', run: addColumnAfter, select: addColumnAfter, icon: icons.insertColumnAfter },
+  { label: 'Delete column', run: deleteColumn, select: deleteColumn, icon: icons.deleteColumn },
+  { label: 'Insert row before', run: addRowBefore, select: addRowBefore, icon: icons.insertRowBefore },
+  { label: 'Insert row after', run: addRowAfter, select: addRowAfter, icon: icons.insertRowAfter },
+  { label: 'Delete row', run: deleteRow, select: deleteRow, icon: icons.deleteRow },
+  { label: 'Merge cells', run: mergeCells, select: mergeCells, icon: icons.mergeCells },
+  { label: 'Split cell', run: splitCell, select: splitCell, icon: icons.splitCell },
+];
+
 const linkItem = (markType) =>
   new MenuItem({
     title: "Add or remove link",
@@ -99,6 +163,7 @@ const buildMenuOptions = (
       "redo",
       "bulletList",
       "orderedList",
+      "table",
     ],
     onImageUpload = () => {},
   }
@@ -153,13 +218,25 @@ const buildMenuOptions = (
       icon: icons.h3,
     }),
     imageUpload: imageUploadItem(schema.nodes.image, onImageUpload),
+    table: new Dropdown(tableMenu.map(item => new MenuItem({
+      title: item.label,
+      label: item.label,
+      run: item.run,
+      select: item.select,
+      enable: item.enable,
+    })), {
+      label: "Table",
+      title: "Table operations",
+      icon: icons.table,
+      class: "prosemirror-menu-table-dropdown",
+    }),
   };
 
-  return [
-    enabledMenuOptions
-      .filter((menuOptionKey) => !!availableMenuOptions[menuOptionKey])
-      .map((menuOptionKey) => availableMenuOptions[menuOptionKey]),
-  ];
+  const menuItems = enabledMenuOptions
+    .filter((menuOptionKey) => !!availableMenuOptions[menuOptionKey])
+    .map((menuOptionKey) => availableMenuOptions[menuOptionKey]);
+
+  return [menuItems];
 };
 
 export default buildMenuOptions;

src/rules/index.js

@@ -2,6 +2,7 @@ export { listInputRules } from './lists';
 export { linksInputRules } from './links';
 export { blocksInputRule } from './blocks';
 export { hrInputRules } from './hr';
+export { tableInputRule } from './tables';
 export { baseKeyMaps } from '../keymap';
 
 export { textFormattingInputRules } from './marks';

src/rules/tables.js

@@ -0,0 +1,50 @@
+import { InputRule } from "prosemirror-inputrules";
+import { NodeType, Schema } from "prosemirror-model";
+import { EditorState, TextSelection, Transaction } from "prosemirror-state";
+
+function createTable(schema, rowsCount, colsCount) {
+  const {
+    table,
+    table_row: tableRow,
+    table_cell: tableCell,
+    table_header: tableHeader,
+    paragraph,
+  } = schema.nodes;
+
+  const cells = [];
+  for (let i = 0; i < colsCount; i++) {
+    cells.push(
+      tableHeader.createAndFill() || tableCell.createAndFill()
+    );
+  }
+
+  const rows = [];
+  for (let i = 0; i < rowsCount; i++) {
+    rows.push(tableRow.createChecked(null, cells));
+  }
+
+  return table.createChecked(null, rows);
+}
+
+export function tableInputRule(schema) {
+  return new InputRule(
+    /^\|\s+([\s\S]*)\s+\|\s*$/,
+    (state, match, start, end) => {
+      const [okay, columns] = match;
+      if (okay) {
+        const parts = columns.split("|").map((s) => s.trim());
+        const table = createTable(schema, 1, parts.length);
+
+        const tr = state.tr.replaceRangeWith(start, end, table);
+        const selection = TextSelection.create(
+          tr.doc,
+          start + 1
+        );
+        return tr.setSelection(selection);
+      }
+      return null;
+    }
+  );
+}
+
+export default tableInputRule;

src/schema/article.js

@@ -1,6 +1,7 @@
 import { orderedList, bulletList, listItem } from 'prosemirror-schema-list';
 import { Schema } from 'prosemirror-model';
 import { schema } from 'prosemirror-markdown';
+import { tableNodes } from 'prosemirror-tables';
 
 export const fullSchema = new Schema({
   nodes: {
@@ -22,6 +23,22 @@ export const fullSchema = new Schema({
       group: 'block',
     }),
     list_item: Object.assign(listItem, { content: 'paragraph block*' }),
+    ...tableNodes({
+      tableGroup: 'block',
+      cellContent: 'paragraph+',
+      cellAttributes: {
+        background: {
+          default: null,
+          getFromDOM: (dom) => dom.style.backgroundColor || null,
+          setDOMAttr: (value, attrs) => {
+            if (value) attrs.style = (attrs.style || '') + `background-color: ${value};`;
+          },
+        },
+        colspan: { default: 1 },
+        rowspan: { default: 1 },
+        alignment: { default: null },
+      },
+    }),
   },
   marks: {
     link: schema.spec.marks.get('link'),

src/schema/markdown/articleParser.js

@@ -1,6 +1,8 @@
 import MarkdownIt from 'markdown-it';
 import MarkdownItSup from 'markdown-it-sup';
 import { MarkdownParser } from 'prosemirror-markdown';
+import MarkdownItMultimdTable from 'markdown-it-multimd-table';
+
 import {
   baseSchemaToMdMapping,
   baseNodesMdToPmMapping,
@@ -14,6 +16,7 @@ export const articleSchemaToMdMapping = {
     rule: 'hr',
     heading: ['heading'],
     image: 'image',
+    // table: 'table',
   },
   marks: { ...baseSchemaToMdMapping.marks },
 };
@@ -33,20 +36,50 @@ export const articleMdToPmMapping = {
       return { userId, userFullName };
     },
   },
+  table: { 
+    node: 'table',
+    getAttrs: tok => ({ alignment: tok.info })
+  },
+  tr: {
+    node: 'table_row',
+  },
+  td: {
+    node: 'table_cell',
+    getAttrs: tok => ({
+      colspan: +(tok.attrGet("colspan") || 1),
+      rowspan: +(tok.attrGet("rowspan") || 1),
+      alignment: tok.info,
+    }),
+  },
+  th: {
+    node: 'table_header',
+    getAttrs: tok => ({
+      colspan: +(tok.attrGet("colspan") || 1),
+      rowspan: +(tok.attrGet("rowspan") || 1),
+      alignment: tok.info,
+    }),
+  },
 };
 
 const md = MarkdownIt('commonmark', {
   html: false,
   linkify: true,
   breaks: true,
-}).use(MarkdownItSup);
+}).use(MarkdownItSup).use(MarkdownItMultimdTable, {
+  multiline:  false,
+  rowspan:    false,
+  headerless: false,
+  multibody:  false,
+  autolabel:  false,
+});
 
 md.enable([
   // Process html entity - {, ¯, ", ...
   'entity',
   // Process escaped chars and hardbreaks
   'escape',
   'hr',
+  // 'table',
 ]);
 
 export class ArticleMarkdownTransformer {
@@ -66,11 +99,12 @@ export class ArticleMarkdownTransformer {
       filterMdToPmSchemaMapping(schema, articleMdToPmMapping)
     );
   }
+
   encode(_node) {
     throw new Error('This is not implemented yet');
   }
 
   parse(content) {
     return this.markdownParser.parse(content);
   }
-}
+}

src/schema/markdown/articleSerializer.js

@@ -18,6 +18,9 @@ import {
   strong,
   link,
   code,
+  table,
+  table_row,
+  table_cell,
 } from './serializer';
 
 export const ArticleMarkdownSerializer = new MarkdownSerializerBase(
@@ -33,6 +36,9 @@ export const ArticleMarkdownSerializer = new MarkdownSerializerBase(
     image,
     hard_break,
     text,
+    table,
+    table_row,
+    table_cell,
   },
   {
     em,