@kerebron/extension-tables 0.4.28 → 0.4.30

package/src/NodeTable.ts

@@ -0,0 +1,139 @@
+import { TextSelection } from 'prosemirror-state';
+import { NodeSpec, NodeType } from 'prosemirror-model';
+import { Node as ProseMirrorNode } from 'prosemirror-model';
+
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+import { type InputRule } from '@kerebron/editor/plugins/input-rules';
+import {
+  getHtmlAttributes,
+  setHtmlAttributes,
+} from '@kerebron/editor/utilities';
+
+import { createTable } from './utilities/createTable.js';
+import { CellSelection } from './utilities/CellSelection.js';
+import { columnResizing } from './utilities/columnResizing.js';
+import { tableEditing } from './utilities/tableEditing.js';
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  goToNextCell,
+  mergeCells,
+  setCellAttr,
+  splitCell,
+  toggleHeader,
+  toggleHeaderCell,
+  toggleHeaderColumn,
+  toggleHeaderRow,
+} from './utilities/commands.js';
+import { Plugin } from 'prosemirror-state';
+import { Direction } from './utilities/input.js';
+
+export class NodeTable extends Node {
+  override name = 'table';
+  requires = ['doc'];
+
+  override attributes = {
+    class: {
+      default: 'table',
+      fromDom(element: HTMLElement) {
+        return element.hasAttribute('class')
+          ? element.getAttribute('class')!
+          : undefined;
+      },
+    },
+  };
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: 'table_row+',
+      tableRole: 'table',
+      isolating: true,
+      group: 'block',
+      parseDOM: [{
+        tag: 'table',
+        getAttrs: (element) => setHtmlAttributes(this, element),
+      }],
+      toDOM: (
+        node: ProseMirrorNode,
+      ) => ['table', getHtmlAttributes(this, node), ['tbody', 0]],
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    const commands: Partial<CommandFactories> = {
+      addColumnAfter: () => (state, dispatch) =>
+        addColumnAfter(state, dispatch),
+      addColumnBefore: () => (state, dispatch) =>
+        addColumnBefore(state, dispatch),
+      addRowAfter: () => (state, dispatch) => addRowAfter(state, dispatch),
+      addRowBefore: () => (state, dispatch) => addRowBefore(state, dispatch),
+      deleteColumn: () => (state, dispatch) => deleteColumn(state, dispatch),
+      deleteRow: () => (state, dispatch) => deleteRow(state, dispatch),
+      deleteTable: () => (state, dispatch) => deleteTable(state, dispatch),
+      goToNextCell: (direction: Direction) => goToNextCell(direction),
+      mergeCells: () => (state, dispatch) => mergeCells(state, dispatch),
+      setCellAttr: (...args) => setCellAttr(...args),
+      splitCell: () => (state, dispatch) => splitCell(state, dispatch),
+      toggleHeader: (...args) => toggleHeader(...args),
+      toggleHeaderCell: () => (state, dispatch) =>
+        toggleHeaderCell(state, dispatch),
+      toggleHeaderRow: () => (state, dispatch) =>
+        toggleHeaderRow(state, dispatch),
+      toggleHeaderColumn: () => (state, dispatch) =>
+        toggleHeaderColumn(state, dispatch),
+      insertTable:
+        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+        (state, dispatch) => {
+          const tr = state.tr;
+          const node = createTable(editor.schema, rows, cols, withHeaderRow);
+
+          if (dispatch) {
+            const offset = tr.selection.from + 1;
+
+            tr.replaceSelectionWith(node)
+              .scrollIntoView()
+              .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+          }
+
+          return true;
+        },
+      setCellSelection: (position) => (state, dispatch) => {
+        if (dispatch) {
+          const selection = CellSelection.create(
+            state.doc,
+            position.anchorCell,
+            position.headCell,
+          );
+
+          state.tr.setSelection(selection);
+        }
+        return true;
+      },
+    };
+    return commands;
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    const keys = {};
+    return keys;
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      columnResizing(),
+      tableEditing(),
+    ];
+  }
+}

package/src/NodeTableCell.ts

@@ -0,0 +1,70 @@
+import { Attrs, Node as PmNode, NodeSpec, NodeType } from 'prosemirror-model';
+
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+import { type InputRule } from '@kerebron/editor/plugins/input-rules';
+
+function getCellAttrs(dom: HTMLElement | string): Attrs {
+  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: PmNode): Attrs {
+  return {
+    colspan: (node.attrs.colspan != 1) ? node.attrs.colspan : undefined,
+    rowspan: (node.attrs.rowspan != 1) ? node.attrs.rowspan : undefined,
+    'data-colwidth': node.attrs.colwidth?.join(','),
+  };
+}
+
+export class NodeTableCell extends Node {
+  override name = 'table_cell';
+  requires = ['table_row'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: 'block+',
+      attrs: {
+        colspan: { default: 1 },
+        rowspan: { default: 1 },
+        colwidth: { default: null },
+      },
+      tableRole: 'cell',
+      isolating: true,
+      parseDOM: [
+        { tag: 'td', getAttrs: (dom) => getCellAttrs(dom) },
+      ],
+      toDOM(node) {
+        return ['td', setCellAttrs(node), 0];
+      },
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    const commands = {};
+    return commands;
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    const keys = {};
+    return keys;
+  }
+}

package/src/NodeTableHeader.ts

@@ -0,0 +1,49 @@
+import type { Attrs, Node as PmNode, NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+
+function getCellAttrs(dom: HTMLElement | string): Attrs {
+  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: PmNode): Attrs {
+  return {
+    colspan: (node.attrs.colspan != 1) ? node.attrs.colspan : undefined,
+    rowspan: (node.attrs.rowspan != 1) ? node.attrs.rowspan : undefined,
+    'data-colwidth': node.attrs.colwidth?.join(','),
+  };
+}
+
+export class NodeTableHeader extends Node {
+  override name = 'table_header';
+  requires = ['table'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: 'block+',
+      attrs: {
+        colspan: { default: 1 },
+        rowspan: { default: 1 },
+        colwidth: { default: null },
+      },
+      tableRole: 'header_cell',
+      isolating: true,
+      parseDOM: [
+        { tag: 'th', getAttrs: (dom) => getCellAttrs(dom) },
+      ],
+      toDOM: (node) => ['th', setCellAttrs(node), 0],
+    };
+  }
+}

package/src/NodeTableRow.ts

@@ -0,0 +1,41 @@
+import { NodeSpec, NodeType } from 'prosemirror-model';
+
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+import {
+  type InputRule,
+  textblockTypeInputRule,
+} from '@kerebron/editor/plugins/input-rules';
+
+export class NodeTableRow extends Node {
+  override name = 'table_row';
+  requires = ['table'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: '(table_cell | table_header)*',
+      tableRole: 'row',
+      parseDOM: [{ tag: 'tr' }],
+      toDOM() {
+        return ['tr', 0];
+      },
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    const commands = {};
+
+    return commands;
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    const keys = {};
+    return keys;
+  }
+}

package/src/_dnt.shims.ts

@@ -0,0 +1,60 @@
+const dntGlobals = {
+};
+export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
+
+function createMergeProxy<T extends object, U extends object>(
+  baseObj: T,
+  extObj: U,
+): Omit<T, keyof U> & U {
+  return new Proxy(baseObj, {
+    get(_target, prop, _receiver) {
+      if (prop in extObj) {
+        return (extObj as any)[prop];
+      } else {
+        return (baseObj as any)[prop];
+      }
+    },
+    set(_target, prop, value) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      (baseObj as any)[prop] = value;
+      return true;
+    },
+    deleteProperty(_target, prop) {
+      let success = false;
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+        success = true;
+      }
+      if (prop in baseObj) {
+        delete (baseObj as any)[prop];
+        success = true;
+      }
+      return success;
+    },
+    ownKeys(_target) {
+      const baseKeys = Reflect.ownKeys(baseObj);
+      const extKeys = Reflect.ownKeys(extObj);
+      const extKeysSet = new Set(extKeys);
+      return [...baseKeys.filter((k) => !extKeysSet.has(k)), ...extKeys];
+    },
+    defineProperty(_target, prop, desc) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      Reflect.defineProperty(baseObj, prop, desc);
+      return true;
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      if (prop in extObj) {
+        return Reflect.getOwnPropertyDescriptor(extObj, prop);
+      } else {
+        return Reflect.getOwnPropertyDescriptor(baseObj, prop);
+      }
+    },
+    has(_target, prop) {
+      return prop in extObj || prop in baseObj;
+    },
+  }) as any;
+}