@modusoperandi/licit-vignette 0.0.18 → 1.0.1

package/{dist/Constants.d.ts → Constants.d.ts}

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

package/{dist/CreateCommand.d.ts → CreateCommand.d.ts}

@@ -1,7 +1,7 @@
-import { EditorState } 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;
-export {};
+import { EditorState } 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 declare function createCommand(execute: ExecuteCall): UICommand;
+export {};

package/CreateCommand.js

@@ -0,0 +1,36 @@
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+export function createCommand(execute) {
+    class CustomCommand extends UICommand {
+        isEnabled = (state) => {
+            return this.execute(state);
+        };
+        execute = (state, dispatch, view) => {
+            const tr = state.tr;
+            let endTr = tr;
+            execute(state, (nextTr) => {
+                endTr = nextTr;
+                dispatch?.(endTr);
+            }, view);
+            return endTr.docChanged || tr !== endTr;
+        };
+        waitForUserInput = (_state, _dispatch, _view, _event) => {
+            return Promise.resolve(undefined);
+        };
+        executeWithUserInput = (_state, _dispatch, _view, _inputs) => {
+            return false;
+        };
+        cancel() {
+            return null;
+        }
+        renderLabel() {
+            return null;
+        }
+        isActive() {
+            return true;
+        }
+        executeCustom(_state, tr) {
+            return tr;
+        }
+    }
+    return new CustomCommand();
+}

package/TableBackgroundColorCommand.d.ts

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

package/TableBackgroundColorCommand.js

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

package/TableBorderColorCommand.d.ts

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

package/TableBorderColorCommand.js

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

package/{dist/VignetteCommand.d.ts → VignetteCommand.d.ts}

@@ -1,12 +1,19 @@
-import { Schema } from 'prosemirror-model';
-import { EditorState, Transaction } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-declare class VignetteCommand extends UICommand {
-    isEnabled: (state: EditorState, view?: EditorView) => boolean;
-    execute: (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean;
-    __isEnabled: (_state: EditorState, _view?: EditorView) => boolean;
-    insertTable(tr: Transaction, schema: Schema, rows: number, cols: number): Transaction;
-    insertParagraph(state: EditorState, tr: Transaction): Transaction;
-}
-export default VignetteCommand;
+import { Schema } from 'prosemirror-model';
+import { EditorState, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import * as React from 'react';
+import { Transform } from 'prosemirror-transform';
+export declare class VignetteCommand extends UICommand {
+    isEnabled: (state: EditorState, view?: EditorView) => boolean;
+    execute: (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean;
+    waitForUserInput: (_state: EditorState, _dispatch: (tr: Transform) => void, _view: EditorView, _event: React.SyntheticEvent<Element, Event>) => Promise<undefined>;
+    executeWithUserInput: (_state: EditorState, _dispatch: (tr: Transform) => void, _view: EditorView, _inputs: string) => boolean;
+    cancel(): void;
+    __isEnabled: (_state: EditorState, _view?: EditorView) => boolean;
+    insertTable(tr: Transaction, schema: Schema, rows: number, cols: number): Transaction;
+    insertParagraph(state: EditorState, tr: Transaction): Transaction;
+    renderLabel(): any;
+    isActive(): boolean;
+    executeCustom(_state: EditorState, tr: Transform): Transform;
+}

package/VignetteCommand.js

@@ -0,0 +1,93 @@
+import { Fragment } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import { DEF_BORDER_COLOR, PARAGRAPH, TABLE, TABLE_CELL } from './Constants';
+export class VignetteCommand extends UICommand {
+    isEnabled = (state, view) => {
+        return this.__isEnabled(state, view);
+    };
+    execute = (state, dispatch, view) => {
+        if (dispatch) {
+            const { schema } = state;
+            let { tr } = state;
+            tr = this.insertTable(tr, schema, 1, 1);
+            tr = this.insertParagraph(state, tr);
+            dispatch(tr);
+            view?.focus();
+        }
+        return true;
+    };
+    waitForUserInput = (_state, _dispatch, _view, _event) => {
+        return Promise.resolve(undefined);
+    };
+    executeWithUserInput = (_state, _dispatch, _view, _inputs) => {
+        return false;
+    };
+    cancel() {
+        return null;
+    }
+    __isEnabled = (_state, _view) => {
+        return true;
+    };
+    insertTable(tr, schema, rows, cols) {
+        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, tr) {
+        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;
+    }
+    renderLabel() {
+        return null;
+    }
+    isActive() {
+        return true;
+    }
+    executeCustom(_state, tr) {
+        return tr;
+    }
+}

package/VignetteMenuPlugin.d.ts

@@ -0,0 +1,24 @@
+import { EditorState, Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import { TableView } from 'prosemirror-tables';
+export declare class VignetteView {
+    constructor(editorView: EditorView);
+    setCustomMenu(editorView: EditorView): void;
+    setCustomTableNodeViewUpdate(editorView: EditorView): void;
+    tableNodeViewEx(tableNodeView: (node: Node, view: EditorView) => TableView, node: Node, view: EditorView): TableView;
+    updateEx(update: (node: Node) => boolean, self: VignetteView, node: Node): boolean;
+    updateBorder(tableView: TableView): void;
+    static isVignette(state: EditorState, actionNode: Node): boolean;
+    getMenu(state: EditorState, actionNode: Node, cmdGrps: Array<{
+        [key: string]: UICommand;
+    }>): Array<{
+        [key: string]: UICommand;
+    }>;
+    isEnabledEx(isEnabled: (state: EditorState, view?: EditorView) => boolean, state: EditorState, view?: EditorView): boolean;
+    destroy: () => void;
+}
+export declare class VignetteMenuPlugin extends Plugin {
+    constructor();
+}

package/VignetteMenuPlugin.js

@@ -0,0 +1,112 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { TableBackgroundColorCommand } from './TableBackgroundColorCommand';
+import { TableBorderColorCommand } from './TableBorderColorCommand';
+import { createCommand } from './CreateCommand';
+import { CellSelection, deleteTable } from 'prosemirror-tables';
+import { TABLE } from './Constants';
+const TABLE_BACKGROUND_COLOR = new TableBackgroundColorCommand();
+const TABLE_BORDER_COLOR = new TableBorderColorCommand();
+const TABLE_DELETE_TABLE = createCommand(deleteTable);
+const VIGNETTE_COMMANDS_GROUP = [
+    {
+        'Fill Color...': TABLE_BACKGROUND_COLOR,
+        'Border Color....': TABLE_BORDER_COLOR,
+    },
+    {
+        'Delete Vignette': TABLE_DELETE_TABLE,
+    },
+];
+export class VignetteView {
+    constructor(editorView) {
+        this.setCustomMenu(editorView);
+        this.setCustomTableNodeViewUpdate(editorView);
+    }
+    setCustomMenu(editorView) {
+        editorView['pluginViews'].forEach((pluginView) => {
+            if (
+            // 'TableCellTooltipView' has property _cellElement
+            Object.hasOwn(pluginView, '_cellElement')) {
+                pluginView['getMenu'] = this.getMenu.bind(this);
+            }
+        });
+    }
+    setCustomTableNodeViewUpdate(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, view) {
+        const base = tableNodeView?.(node, view);
+        if (base?.update && node.attrs.vignette) {
+            base.update = this.updateEx.bind(base, base.update, this);
+            this.updateBorder(base);
+        }
+        return base;
+    }
+    updateEx(update, self, node) {
+        const result = update.call(this, node);
+        if (result) {
+            self.updateBorder(this);
+        }
+        return result;
+    }
+    updateBorder(tableView) {
+        if (tableView.table) {
+            tableView.table.style.border = 'none';
+        }
+    }
+    static isVignette(state, actionNode) {
+        let vignette = false;
+        if (state.selection instanceof CellSelection) {
+            if (state.selection.$anchorCell.node(-1).attrs.vignette) {
+                vignette = true;
+            }
+        }
+        if (actionNode?.attrs.vignette) {
+            vignette = true;
+        }
+        if (state.selection.$anchor.node(1).attrs.vignette) {
+            vignette = true;
+        }
+        return vignette;
+    }
+    getMenu(state, actionNode, cmdGrps) {
+        const 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, view) {
+        return VignetteView.isVignette(state, null)
+            ? false
+            : isEnabled.call(this, state, view);
+    }
+    destroy = () => {
+        // do nothing.
+    };
+}
+const SPEC = {
+    key: new PluginKey('VignetteMenuPlugin'),
+    view(editorView) {
+        return new VignetteView(editorView);
+    },
+};
+export class VignetteMenuPlugin extends Plugin {
+    constructor() {
+        super(SPEC);
+    }
+}

package/{dist/VignetteNodeSpec.d.ts → VignetteNodeSpec.d.ts}

@@ -1,3 +1,3 @@
-export declare const VignetteTableNodeSpec: (nodespec: NodeSpec) => any;
-export declare const VignetteTableCellNodeSpec: (nodespec: NodeSpec) => any;
-export default VignetteTableNodeSpec;
+import { NodeSpec } from 'prosemirror-model';
+export declare const VignetteTableNodeSpec: (nodespec: NodeSpec) => NodeSpec;
+export declare const VignetteTableCellNodeSpec: (nodespec: NodeSpec) => NodeSpec;

package/VignetteNodeSpec.js

@@ -0,0 +1,67 @@
+import { TABLE, VIGNETTE } from './Constants';
+// Override the default table node spec to support custom attributes.
+export const VignetteTableNodeSpec = (nodespec) => ({
+    ...nodespec,
+    attrs: {
+        marginLeft: { default: null },
+        vignette: { default: false },
+    },
+    parseDOM: [
+        {
+            tag: TABLE,
+            getAttrs(dom) {
+                const { marginLeft } = dom.style;
+                const vignette = dom.getAttribute(VIGNETTE) === 'true' || false;
+                const marginAmount = parseFloat(marginLeft);
+                if (marginLeft &&
+                    !Number.isNaN(marginAmount) &&
+                    marginLeft.includes('px')) {
+                    return { marginLeft: marginAmount, vignette };
+                }
+                return { vignette };
+            },
+            style: 'border',
+        }
+    ],
+    toDOM(node) {
+        // 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,
+    attrs: { ...nodespec.attrs, vignette: { default: false } },
+    parseDOM: [
+        {
+            tag: 'td',
+            getAttrs: (dom) => {
+                return {
+                    ...nodespec.parseDOM[0].getAttrs(dom),
+                    vignette: dom.getAttribute(VIGNETTE) === 'true' || false,
+                };
+            },
+        },
+    ],
+    toDOM(node) {
+        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:none!important; box-shadow: inset 0 0 0 1px #36598d;';
+        }
+        base[1].vignette = node.attrs.vignette;
+        return base;
+    },
+});

package/{dist/VignettePlugin.d.ts → VignettePlugin.d.ts}

@@ -1,12 +1,12 @@
-import { Plugin } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { Schema } from 'prosemirror-model';
-import VignetteCommand from './VignetteCommand';
-export declare class VignettePlugin extends Plugin {
-    _view: EditorView;
-    constructor();
-    getEffectiveSchema(schema: Schema): Schema;
-    initButtonCommands(): {
-        '[crop] Insert Vignette': VignetteCommand;
-    };
-}
+import { Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Schema } from 'prosemirror-model';
+import { VignetteCommand } from './VignetteCommand';
+export declare class VignettePlugin extends Plugin {
+    _view: EditorView;
+    constructor();
+    getEffectiveSchema(schema: Schema): Schema;
+    initButtonCommands(): {
+        '[crop] Insert Vignette': VignetteCommand;
+    };
+}

package/VignettePlugin.js

@@ -0,0 +1,39 @@
+// Plugin to handle Citation.
+import { Plugin, PluginKey } from 'prosemirror-state';
+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 = null;
+    constructor() {
+        super({
+            key: new PluginKey('VignettePlugin'),
+            state: {
+                init(_config, _state) {
+                    // do nothing
+                },
+                apply(_tr, _set) {
+                    //do nothing
+                },
+            },
+            props: {
+                nodeViews: {},
+            },
+        });
+    }
+    getEffectiveSchema(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/VignettePlugins.d.ts

@@ -0,0 +1,3 @@
+import { VignettePlugin } from './VignettePlugin';
+import { VignetteMenuPlugin } from './VignetteMenuPlugin';
+export declare const VignettePlugins: (VignetteMenuPlugin | VignettePlugin)[];

package/VignettePlugins.js

@@ -0,0 +1,6 @@
+import { VignettePlugin } from './VignettePlugin';
+import { VignetteMenuPlugin } from './VignetteMenuPlugin';
+export const VignettePlugins = [
+    new VignetteMenuPlugin(),
+    new VignettePlugin(),
+];

package/index.d.ts

@@ -0,0 +1,10 @@
+export * from './VignettePlugins';
+export * from './ui/TableColorCommand';
+export * from './CreateCommand';
+export * from './TableBackgroundColorCommand';
+export * from './TableBorderColorCommand';
+export * from './VignetteCommand';
+export * from './VignettePlugin';
+export * from './Constants';
+export * from './VignetteMenuPlugin';
+export * from './VignetteNodeSpec';

package/index.js

@@ -0,0 +1,10 @@
+export * from './VignettePlugins';
+export * from './ui/TableColorCommand';
+export * from './CreateCommand';
+export * from './TableBackgroundColorCommand';
+export * from './TableBorderColorCommand';
+export * from './VignetteCommand';
+export * from './VignettePlugin';
+export * from './Constants';
+export * from './VignetteMenuPlugin';
+export * from './VignetteNodeSpec';