@modusoperandi/licit-vignette 0.0.16

package/src/Constants.ts

@@ -0,0 +1,6 @@
+export const VIGNETTE = 'vignette';
+export const PARAGRAPH = 'paragraph';
+export const TABLE = 'table';
+export const TABLE_CELL = 'table_cell';
+export const DEF_BORDER_COLOR = '#36598d';
+export const DEF_BORDER_RADIUS = '10px';

package/src/CreateCommand.ts

@@ -0,0 +1,38 @@
+import {EditorState, Transaction} from 'prosemirror-state';
+import {Transform} from 'prosemirror-transform';
+import {EditorView} from 'prosemirror-view';
+
+import {UICommand} from '@modusoperandi/licit-doc-attrs-step';
+
+type ExecuteCall = (
+  state: EditorState,
+  dispatch?: (tr: Transform) => void,
+  view?: EditorView
+) => boolean;
+
+export default function createCommand(execute: ExecuteCall): UICommand {
+  class CustomCommand extends UICommand {
+    isEnabled = (state: EditorState): boolean => {
+      return this.execute(state);
+    };
+
+    execute = (
+      state: EditorState,
+      dispatch?: (tr: Transform) => void,
+      view?: EditorView
+    ): boolean => {
+      const tr = state.tr;
+      let endTr = tr;
+      execute(
+        state,
+        (nextTr) => {
+          endTr = nextTr as Transaction;
+          dispatch && dispatch(endTr);
+        },
+        view
+      );
+      return endTr.docChanged || tr !== endTr;
+    };
+  }
+  return new CustomCommand();
+}

package/src/TableBackgroundColorCommand.ts

@@ -0,0 +1,9 @@
+import TableColorCommand from './ui/TableColorCommand';
+
+class TableBackgroundColorCommand extends TableColorCommand {
+  getAttrName = (): string => {
+    return 'background';
+  };
+}
+
+export default TableBackgroundColorCommand;

package/src/TableBorderColorCommand.ts

@@ -0,0 +1,9 @@
+import TableColorCommand from './ui/TableColorCommand';
+
+class TableBorderColorCommand extends TableColorCommand {
+  getAttrName = (): string => {
+    return 'borderColor';
+  };
+}
+
+export default TableBorderColorCommand;

package/src/VignetteCommand.ts

@@ -0,0 +1,103 @@
+import {Fragment, Schema} from 'prosemirror-model';
+import {EditorState, Transaction, TextSelection} from 'prosemirror-state';
+import {EditorView} from 'prosemirror-view';
+import {UICommand} from '@modusoperandi/licit-doc-attrs-step';
+import {DEF_BORDER_COLOR, PARAGRAPH, TABLE, TABLE_CELL} from './Constants';
+
+class VignetteCommand extends UICommand {
+  isEnabled = (state: EditorState, view?: EditorView): boolean => {
+    return this.__isEnabled(state, view);
+  };
+
+  execute = (
+    state: EditorState,
+    dispatch?: (tr: Transaction) => void,
+    view?: EditorView
+  ): boolean => {
+    if (dispatch) {
+      const {schema} = state;
+      let {tr} = state;
+      tr = this.insertTable(tr, schema, 1, 1);
+      tr = this.insertParagraph(state, tr);
+      dispatch(tr);
+      view && view.focus();
+    }
+
+    return true;
+  };
+
+  __isEnabled = (_state: EditorState, _view?: EditorView): boolean => {
+    return true;
+  };
+
+  insertTable(
+    tr: Transaction,
+    schema: Schema,
+    rows: number,
+    cols: number
+  ): Transaction {
+    if (!tr.selection || !tr.doc) {
+      return tr;
+    }
+    const {from, to} = tr.selection;
+    if (from !== to) {
+      return tr;
+    }
+
+    const {nodes} = schema;
+    const cell = nodes[TABLE_CELL];
+    const paragraph = nodes[PARAGRAPH];
+    const row = nodes['table_row'];
+    const table = nodes[TABLE];
+    if (!(cell && paragraph && row && table)) {
+      return tr;
+    }
+
+    const rowNodes = [];
+    for (let rr = 0; rr < rows; rr++) {
+      const cellNodes = [];
+      for (let cc = 0; cc < cols; cc++) {
+        // [FS] IRAD-950 2020-05-25
+        // Fix:Extra arrow key required for cell navigation using arrow right/Left
+        const cellNode = cell.create(
+          {
+            borderColor: DEF_BORDER_COLOR,
+            background: '#dce6f2',
+            vignette: true,
+          },
+          Fragment.fromArray([paragraph.create()])
+        );
+        cellNodes.push(cellNode);
+      }
+      const rowNode = row.create({}, Fragment.from(cellNodes));
+      rowNodes.push(rowNode);
+    }
+    const tableNode = table.create({vignette: true}, Fragment.from(rowNodes));
+    tr = tr.insert(from, Fragment.from(tableNode));
+
+    const selection = TextSelection.create(tr.doc, from + 5, from + 5);
+
+    tr = tr.setSelection(selection);
+    return tr;
+  }
+
+  // [FS] 2021-04-01
+  // Add empty line after table drop
+  // To make easier to enter a line after table
+  insertParagraph(state: EditorState, tr: Transaction) {
+    const paragraph = state.schema.nodes[PARAGRAPH];
+    const textNode = state.schema.text(' ');
+    const {from, to} = tr.selection;
+    if (from !== to) {
+      return tr;
+    }
+    const paragraphNode = paragraph.create({}, textNode, null);
+    tr = tr.insert(
+      from + tr.selection.$head.node(1).nodeSize - 4,
+      Fragment.from(paragraphNode)
+    );
+    return tr;
+  }
+}
+
+export default VignetteCommand;

package/src/VignetteMenuPlugin.ts

@@ -0,0 +1,151 @@
+import {EditorState, Plugin, PluginKey} from 'prosemirror-state';
+import {EditorView} from 'prosemirror-view';
+import {Node} from 'prosemirror-model';
+
+import {UICommand} from '@modusoperandi/licit-doc-attrs-step';
+import TableBackgroundColorCommand from './TableBackgroundColorCommand';
+import TableBorderColorCommand from './TableBorderColorCommand';
+import createCommand from './CreateCommand';
+import {CellSelection, deleteTable, TableView} from 'prosemirror-tables';
+import {TABLE} from './Constants';
+
+export const TABLE_BACKGROUND_COLOR = new TableBackgroundColorCommand();
+export const TABLE_BORDER_COLOR = new TableBorderColorCommand();
+export const TABLE_DELETE_TABLE = createCommand(deleteTable);
+
+export const VIGNETTE_COMMANDS_GROUP = [
+  {
+    'Fill Color...': TABLE_BACKGROUND_COLOR,
+    'Border Color....': TABLE_BORDER_COLOR,
+  },
+  {
+    'Delete Vignette': TABLE_DELETE_TABLE,
+  },
+];
+
+class VignetteView {
+  constructor(editorView: EditorView) {
+    this.setCustomMenu(editorView);
+    this.setCustomTableNodeViewUpdate(editorView);
+  }
+
+  setCustomMenu(editorView: EditorView) {
+    editorView['pluginViews'].forEach((pluginView) => {
+      if (
+        // 'TableCellTooltipView' has property _cellElement
+        Object.prototype.hasOwnProperty.call(pluginView, '_cellElement')
+      ) {
+        pluginView['getMenu'] = this.getMenu.bind(this);
+      }
+    });
+  }
+
+  setCustomTableNodeViewUpdate(editorView: EditorView) {
+    const tableNodeView = editorView['nodeViews']['table'];
+    const tableNodeViewEx = this.tableNodeViewEx.bind(this, tableNodeView);
+    editorView['nodeViews'][TABLE] = tableNodeViewEx;
+    const index = editorView.state.plugins.findIndex((plugin) => {
+      let found = false;
+      if (plugin.spec.key) {
+        found = plugin.spec.key['key'].includes('tableColumnResizing$');
+      }
+      return found;
+    });
+    if (-1 != index) {
+      editorView.state.plugins[index].spec.props.nodeViews[TABLE] =
+        tableNodeViewEx;
+    }
+  }
+
+  tableNodeViewEx(
+    tableNodeView: (node: Node, view: EditorView) => TableView,
+    node: Node,
+    view: EditorView
+  ): TableView {
+    const base = tableNodeView && tableNodeView(node, view);
+    if (base && base.update && node.attrs.vignette) {
+      base.update = this.updateEx.bind(base, base.update, this);
+      this.updateBorder(base);
+    }
+    return base;
+  }
+
+  updateEx(
+    update: (node: Node) => boolean,
+    self: VignetteView,
+    node: Node
+  ): boolean {
+    const result = update.call(this, node);
+    if (result) {
+      self.updateBorder(this as unknown as TableView);
+    }
+    return result;
+  }
+
+  updateBorder(tableView: TableView) {
+    tableView.table.style.border = 'none';
+  }
+
+  static isVignette(state: EditorState, actionNode: Node) {
+    let vignette = false;
+    if (state.selection instanceof CellSelection) {
+      if (state.selection.$anchorCell.node(-1).attrs.vignette) {
+        vignette = true;
+      }
+    }
+    if (actionNode && actionNode.attrs.vignette) {
+      vignette = true;
+    }
+    if (state.selection.$anchor.node(1).attrs.vignette) {
+      vignette = true;
+    }
+    return vignette;
+  }
+
+  getMenu(
+    state: EditorState,
+    actionNode: Node,
+    cmdGrps: Array<{[key: string]: UICommand}>
+  ): Array<{[key: string]: UICommand}> {
+    let vignette = VignetteView.isVignette(state, actionNode);
+
+    cmdGrps.forEach((cmdGrp) => {
+      Object.entries(cmdGrp).forEach((entry) => {
+        entry[1].isEnabled = this.isEnabledEx.bind(
+          entry[1],
+          entry[1].isEnabled
+        );
+      });
+    });
+    return vignette ? VIGNETTE_COMMANDS_GROUP : cmdGrps;
+  }
+
+  isEnabledEx(
+    isEnabled: (state: EditorState, view?: EditorView) => boolean,
+    state: EditorState,
+    view?: EditorView
+  ): boolean {
+    return VignetteView.isVignette(state, null)
+      ? false
+      : isEnabled.call(this as UICommand, state, view);
+  }
+
+  destroy = (): void => {
+    // do nothing.
+  };
+}
+
+const SPEC = {
+  key: new PluginKey('VignetteMenuPlugin'),
+  view(editorView: EditorView) {
+    return new VignetteView(editorView);
+  },
+};
+
+class VignetteMenuPlugin extends Plugin {
+  constructor() {
+    super(SPEC);
+  }
+}
+
+export default VignetteMenuPlugin;

package/src/VignetteNodeSpec.ts

@@ -0,0 +1,74 @@
+import {Node, NodeSpec} from 'prosemirror-model';
+import {TABLE, VIGNETTE} from './Constants';
+
+// Override the default table node spec to support custom attributes.
+export const VignetteTableNodeSpec = (nodespec: NodeSpec) =>
+  Object.assign({}, nodespec, {
+    attrs: {
+      marginLeft: {default: null},
+      vignette: {default: false},
+    },
+    parseDOM: [
+      {
+        tag: TABLE,
+        getAttrs(dom: HTMLElement): unknown | null {
+          const {marginLeft} = dom.style;
+          const vignette = dom.getAttribute(VIGNETTE) === 'true' || false;
+          if (marginLeft && /\d+px/.test(marginLeft)) {
+            return {marginLeft: parseFloat(marginLeft), vignette};
+          }
+          return {vignette};
+        },
+        style: 'border',
+      },
+    ],
+    toDOM(node: Node): Array<unknown> {
+      // Normally, the DOM structure of the table node is rendered by
+      // `TableNodeView`. This method is only called when user selects a
+      // table node and copies it, which triggers the "serialize to HTML" flow
+      //  that calles this method.
+      const {marginLeft, vignette} = node.attrs;
+      const domAttrs = {vignette};
+      let style = 'border: none';
+      if (marginLeft) {
+        style += `margin-left: ${marginLeft}px`;
+      }
+      domAttrs['style'] = style;
+      return [TABLE, domAttrs, 0];
+    },
+  });
+
+export const VignetteTableCellNodeSpec = (nodespec: NodeSpec) =>
+  Object.assign({}, nodespec, {
+    attrs: Object.assign({}, nodespec.attrs, {
+      vignette: {default: false},
+    }),
+    parseDOM: [
+      {
+        tag: 'td',
+        getAttrs: (dom: HTMLElement) => {
+          return Object.assign({}, nodespec.parseDOM[0].getAttrs(dom), {
+            vignette: dom.getAttribute(VIGNETTE) || false,
+          });
+        },
+      },
+    ],
+    toDOM(node: Node): Array<unknown> {
+      const base = nodespec.toDOM(node);
+      if (
+        node.attrs.vignette &&
+        Array.isArray(base) &&
+        1 < base.length &&
+        base[1].style
+      ) {
+        base[1].style +=
+          'border-radius: 10px; border-style: solid; border-width: thin';
+      }
+
+      base[1].vignette = node.attrs.vignette;
+
+      return base as unknown as Array<unknown>;
+    },
+  });
+
+export default VignetteTableNodeSpec;

package/src/VignettePlugin.ts

@@ -0,0 +1,53 @@
+// Plugin to handle Citation.
+import {Plugin, PluginKey} from 'prosemirror-state';
+import {EditorView} from 'prosemirror-view';
+import {Schema} from 'prosemirror-model';
+import VignetteCommand from './VignetteCommand';
+import {
+  VignetteTableCellNodeSpec,
+  VignetteTableNodeSpec,
+} from './VignetteNodeSpec';
+import {TABLE, TABLE_CELL} from './Constants';
+
+export class VignettePlugin extends Plugin {
+  _view: EditorView = null;
+  constructor() {
+    super({
+      key: new PluginKey('VignettePlugin'),
+      state: {
+        init(_config, _state) {
+          // do nothing
+        },
+        apply(_tr, _set) {
+          //do nothing
+        },
+      },
+      props: {
+        nodeViews: {},
+      },
+    });
+  }
+
+  getEffectiveSchema(schema: Schema): Schema {
+    let nodes = schema.spec.nodes.update(
+      TABLE,
+      VignetteTableNodeSpec(schema.spec.nodes.get(TABLE))
+    );
+    nodes = nodes.update(
+      TABLE_CELL,
+      VignetteTableCellNodeSpec(schema.spec.nodes.get(TABLE_CELL))
+    );
+    const marks = schema.spec.marks;
+
+    return new Schema({
+      nodes: nodes,
+      marks: marks,
+    });
+  }
+
+  initButtonCommands() {
+    return {
+      '[crop] Insert Vignette': new VignetteCommand(),
+    };
+  }
+}

package/src/VignettePlugins.ts

@@ -0,0 +1,7 @@
+import {VignettePlugin} from './VignettePlugin';
+import VignetteMenuPlugin from './VignetteMenuPlugin';
+
+export default [
+  new VignetteMenuPlugin(),
+  new VignettePlugin(),
+];

package/src/index.test.ts

@@ -0,0 +1,59 @@
+import {createEditor, doc, p, table, tr, td} from 'jest-prosemirror';
+import {TABLE} from './Constants';
+import VignetteCommand from './VignetteCommand';
+import {VignettePlugin} from './VignettePlugin';
+import VignettePlugins from './VignettePlugins';
+import createCommand from './CreateCommand';
+import {deleteTable} from 'prosemirror-tables';
+
+export {};
+
+describe('VignettePlugin', () => {
+  it('should handle VignetteCommand', () => {
+    createEditor(doc(p('<cursor>')), {plugins: [...VignettePlugins]})
+      .command((state, dispatch) => {
+        if (dispatch) {
+          new VignetteCommand().execute(state, dispatch);
+        }
+        return true;
+      })
+      .callback((content) => {
+        expect(content.state.doc).toEqualProsemirrorNode(
+          doc(
+            p(),
+            table(
+              tr(
+                td(
+                  {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    pretty: true,
+                    ugly: false,
+                  },
+                  p()
+                )
+              )
+            ),
+            p(' ')
+          )
+        );
+      });
+  });
+
+  it('should handle getEffectiveSchema', () => {
+    const schema = createEditor(doc(p('<cursor>'))).schema;
+    expect(schema.spec.nodes.get(TABLE)?.attrs?.vignette).toBeFalsy();
+    const newSchema = new VignettePlugin().getEffectiveSchema(schema);
+    expect(newSchema.spec.nodes.get(TABLE)?.attrs?.vignette).toBeTruthy();
+  });
+
+  it('should handle createCommand', () => {
+    createEditor(doc(p('<cursor>')), {plugins: [...VignettePlugins]}).command(
+      (state, _dispatch) => {
+        createCommand(deleteTable).isEnabled(state);
+        return true;
+      }
+    );
+  });
+});

package/src/index.ts

@@ -0,0 +1,3 @@
+import VignettePlugins from './VignettePlugins';
+
+export {VignettePlugins};

package/src/ui/TableColorCommand.tsx

@@ -0,0 +1,79 @@
+// @flow
+
+import nullthrows from 'nullthrows';
+import {EditorState} from 'prosemirror-state';
+import {setCellAttr} from 'prosemirror-tables';
+import {Transform} from 'prosemirror-transform';
+import {EditorView} from 'prosemirror-view';
+
+import {
+  ColorEditor,
+  atAnchorRight,
+  createPopUp,
+} from '@modusoperandi/licit-ui-commands';
+import {UICommand} from '@modusoperandi/licit-doc-attrs-step';
+
+class TableColorCommand extends UICommand {
+  _popUp = null;
+
+  getAttrName = (): string => {
+    return '';
+  };
+
+  isEnabled = (_state: EditorState): boolean => {
+    return true;
+  };
+
+  shouldRespondToUIEvent = (e: React.SyntheticEvent | MouseEvent): boolean => {
+    return e.type === UICommand.EventType.MOUSEENTER;
+  };
+
+  waitForUserInput = (
+    _state: EditorState,
+    _dispatch?: (tr: Transform) => void,
+    _view?: EditorView,
+    event?: React.SyntheticEvent
+  ): Promise<unknown> => {
+    if (this._popUp) {
+      return Promise.resolve(undefined);
+    }
+    const target = nullthrows(event).currentTarget;
+    if (!(target instanceof HTMLElement)) {
+      return Promise.resolve(undefined);
+    }
+
+    const anchor = event ? event.currentTarget : null;
+    return new Promise((resolve) => {
+      this._popUp = createPopUp(ColorEditor, null, {
+        anchor,
+        position: atAnchorRight,
+        onClose: (val) => {
+          if (this._popUp) {
+            this._popUp = null;
+            resolve(val);
+          }
+        },
+      });
+    });
+  };
+
+  executeWithUserInput = (
+    state: EditorState,
+    dispatch?: (tr: Transform) => void,
+    view?: EditorView,
+    color?: string
+  ): boolean => {
+    if (dispatch && color !== undefined) {
+      const cmd = setCellAttr(this.getAttrName(), color);
+      cmd(state, dispatch, view);
+      return true;
+    }
+    return false;
+  };
+
+  cancel(): void {
+    this._popUp && this._popUp.close(undefined);
+  }
+}
+
+export default TableColorCommand;

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": [
+      "es2017",
+      "dom",
+      "dom.Iterable"
+    ],
+    "outDir": "dist",
+    "pretty": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": [
+      "jest",
+      "node",
+      "jest-prosemirror"      
+    ],
+    // Ensure that .d.ts files are created by tsc, but not .js files
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    // Ensure that Babel can safely transpile files in the TypeScript project
+    "isolatedModules": true
+  },
+  "typeAcquisition": {
+    "enable": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts"
+  ]
+}