@manuscripts/body-editor 1.13.25 → 1.13.26

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addRows = exports.insertTableFootnote = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertContributors = exports.insertAbstract = exports.insertBackMatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertFootnote = exports.createFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
+exports.addColumns = exports.addRows = exports.insertTableFootnote = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertContributors = exports.insertAbstract = exports.insertBackMatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertFootnote = exports.createFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -982,9 +982,6 @@ const insertTableFootnote = (node, position, view, inlineFootnote) => {
 };
 exports.insertTableFootnote = insertTableFootnote;
 const addRows = (direction) => (state, dispatch) => {
-    if (!(0, prosemirror_tables_1.isInTable)(state)) {
-        return false;
-    }
     if (dispatch) {
         const { tr } = state;
         const rect = (0, prosemirror_tables_1.selectedRect)(state);
@@ -997,3 +994,17 @@ const addRows = (direction) => (state, dispatch) => {
     return true;
 };
 exports.addRows = addRows;
+const addColumns = (direction) => (state, dispatch) => {
+    if (dispatch) {
+        const { tr } = state;
+        const rect = (0, prosemirror_tables_1.selectedRect)(state.apply(tr));
+        const selectedRows = rect.right - rect.left;
+        for (let i = 0; i < selectedRows; i++) {
+            const command = direction === 'right' ? prosemirror_tables_1.addColumnAfter : prosemirror_tables_1.addColumnBefore;
+            command(state.apply(tr), (t) => t.steps.map((s) => tr.step(s)));
+        }
+        dispatch(tr);
+    }
+    return true;
+};
+exports.addColumns = addColumns;

package/dist/cjs/components/views/TableCellContextMenu.js

@@ -33,14 +33,19 @@ const prosemirror_tables_1 = require("prosemirror-tables");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const commands_1 = require("../../commands");
-const getSelectedCells = (state) => {
+const getSelectedCellsCount = (state) => {
     const { selection } = state;
-    const selectedCells = { rows: 1 };
+    const selectedCells = { rows: 1, columns: 1 };
     if (selection instanceof prosemirror_tables_1.CellSelection) {
         const rect = (0, prosemirror_tables_1.selectedRect)(state);
         selectedCells.rows = rect.bottom - rect.top;
+        selectedCells.columns = rect.right - rect.left;
     }
-    return selectedCells;
+    const { rows, columns } = selectedCells;
+    return {
+        rows: rows > 1 ? `${rows} rows` : `row`,
+        columns: columns > 1 ? `${columns} columns` : `column`,
+    };
 };
 const ContextMenu = ({ view, close, }) => {
     const runCommand = (command, noTracking) => {
@@ -48,30 +53,35 @@ const ContextMenu = ({ view, close, }) => {
         close();
     };
     const [columnAction, setColumnAction] = (0, react_1.useState)(undefined);
-    const { rows } = getSelectedCells(view.state);
+    const { rows, columns } = getSelectedCellsCount(view.state);
     return (react_1.default.createElement(MenuDropdownList, null,
         react_1.default.createElement(ActionButton, { onClick: () => runCommand((0, commands_1.addRows)('top')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert row above ",
-            rows > 1 && rows),
+            rows),
         react_1.default.createElement(ActionButton, { onClick: () => runCommand((0, commands_1.addRows)('bottom')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert row below ",
-            rows > 1 && rows),
-        react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => prosemirror_tables_1.addColumnBefore) },
+            rows),
+        react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => (0, commands_1.addColumns)('left')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
-            " Insert column to the left"),
-        react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => prosemirror_tables_1.addColumnAfter) },
+            " Insert ",
+            columns,
+            " to the left"),
+        react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => (0, commands_1.addColumns)('right')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
-            " Insert column to the right"),
+            " Insert ",
+            columns,
+            " to the right"),
         react_1.default.createElement(Separator, null),
         react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.deleteRow) },
             react_1.default.createElement(GrayDeleteIcon, null),
-            " Delete row ",
-            rows > 1 && rows),
+            " Delete ",
+            rows),
         react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => prosemirror_tables_1.deleteColumn) },
             react_1.default.createElement(GrayDeleteIcon, null),
-            " Delete column"),
+            " Delete ",
+            columns),
         react_1.default.createElement(style_guide_1.ColumnChangeWarningDialog, { isOpen: !!columnAction, primaryAction: () => {
                 if (columnAction) {
                     runCommand(columnAction, true);

package/dist/cjs/views/table_cell.js

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellView = void 0;
+const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_tables_1 = require("prosemirror-tables");
@@ -31,12 +32,7 @@ class TableCellView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.initialise = () => {
-            if (!this.node.type.spec.toDOM) {
-                return;
-            }
-            const outputSpec = this.node.type.spec.toDOM(this.node);
-            const { dom } = prosemirror_model_1.DOMSerializer.renderSpec(document, outputSpec);
-            this.dom = dom;
+            this.dom = this.toDom();
             this.contentDOM = document.createElement('span');
             this.dom.appendChild(this.contentDOM);
             const can = this.props.getCapabilities();
@@ -44,6 +40,10 @@ class TableCellView extends block_view_1.default {
                 this.createContextMenu();
             }
         };
+        this.updateContents = () => {
+            this.dom.getAttributeNames().map((attr) => this.dom.removeAttribute(attr));
+            Array.from(this.toDom().attributes).map((attr) => attr.nodeValue && this.dom.setAttribute(attr.nodeName, attr.nodeValue));
+        };
     }
     ignoreMutation(mutation) {
         return mutation.type === 'attributes' && mutation.attributeName === 'class';
@@ -78,6 +78,15 @@ class TableCellView extends block_view_1.default {
         });
         this.dom.appendChild(contextMenuButton);
     }
+    toDom() {
+        if (!this.node.type.spec.toDOM) {
+            return this.node.type === transform_1.schema.nodes.table_cell
+                ? document.createElement('td')
+                : document.createElement('th');
+        }
+        const outputSpec = this.node.type.spec.toDOM(this.node);
+        return prosemirror_model_1.DOMSerializer.renderSpec(document, outputSpec).dom;
+    }
 }
 exports.TableCellView = TableCellView;
 exports.default = (0, creators_1.createNodeView)(TableCellView);

package/dist/es/commands.js

@@ -19,7 +19,7 @@ import { generateID, generateNodeID, isElementNodeType, isFootnoteNode, isInBibl
 import { Fragment, NodeRange, } from 'prosemirror-model';
 import { wrapInList } from 'prosemirror-schema-list';
 import { NodeSelection, TextSelection, } from 'prosemirror-state';
-import { addRow, isInTable, selectedRect } from 'prosemirror-tables';
+import { addColumnAfter, addColumnBefore, addRow, selectedRect, } from 'prosemirror-tables';
 import { findWrapping, liftTarget, ReplaceAroundStep, } from 'prosemirror-transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
@@ -939,9 +939,6 @@ export const insertTableFootnote = (node, position, view, inlineFootnote) => {
     dispatch(view.state.tr.setSelection(textSelection).scrollIntoView());
 };
 export const addRows = (direction) => (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
     if (dispatch) {
         const { tr } = state;
         const rect = selectedRect(state);
@@ -953,3 +950,16 @@ export const addRows = (direction) => (state, dispatch) => {
     }
     return true;
 };
+export const addColumns = (direction) => (state, dispatch) => {
+    if (dispatch) {
+        const { tr } = state;
+        const rect = selectedRect(state.apply(tr));
+        const selectedRows = rect.right - rect.left;
+        for (let i = 0; i < selectedRows; i++) {
+            const command = direction === 'right' ? addColumnAfter : addColumnBefore;
+            command(state.apply(tr), (t) => t.steps.map((s) => tr.step(s)));
+        }
+        dispatch(tr);
+    }
+    return true;
+};

package/dist/es/components/views/TableCellContextMenu.js

@@ -1,17 +1,22 @@
 import { ColumnChangeWarningDialog, DeleteIcon, IconTextButton, PlusIcon, } from '@manuscripts/style-guide';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { addColumnAfter, addColumnBefore, CellSelection, deleteColumn, deleteRow, selectedRect, } from 'prosemirror-tables';
+import { CellSelection, deleteColumn, deleteRow, selectedRect, } from 'prosemirror-tables';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { addRows } from '../../commands';
-const getSelectedCells = (state) => {
+import { addColumns, addRows } from '../../commands';
+const getSelectedCellsCount = (state) => {
     const { selection } = state;
-    const selectedCells = { rows: 1 };
+    const selectedCells = { rows: 1, columns: 1 };
     if (selection instanceof CellSelection) {
         const rect = selectedRect(state);
         selectedCells.rows = rect.bottom - rect.top;
+        selectedCells.columns = rect.right - rect.left;
     }
-    return selectedCells;
+    const { rows, columns } = selectedCells;
+    return {
+        rows: rows > 1 ? `${rows} rows` : `row`,
+        columns: columns > 1 ? `${columns} columns` : `column`,
+    };
 };
 export const ContextMenu = ({ view, close, }) => {
     const runCommand = (command, noTracking) => {
@@ -19,30 +24,35 @@ export const ContextMenu = ({ view, close, }) => {
         close();
     };
     const [columnAction, setColumnAction] = useState(undefined);
-    const { rows } = getSelectedCells(view.state);
+    const { rows, columns } = getSelectedCellsCount(view.state);
     return (React.createElement(MenuDropdownList, null,
         React.createElement(ActionButton, { onClick: () => runCommand(addRows('top')) },
             React.createElement(PlusIcon, null),
             " Insert row above ",
-            rows > 1 && rows),
+            rows),
         React.createElement(ActionButton, { onClick: () => runCommand(addRows('bottom')) },
             React.createElement(PlusIcon, null),
             " Insert row below ",
-            rows > 1 && rows),
-        React.createElement(ActionButton, { onClick: () => setColumnAction(() => addColumnBefore) },
+            rows),
+        React.createElement(ActionButton, { onClick: () => setColumnAction(() => addColumns('left')) },
             React.createElement(PlusIcon, null),
-            " Insert column to the left"),
-        React.createElement(ActionButton, { onClick: () => setColumnAction(() => addColumnAfter) },
+            " Insert ",
+            columns,
+            " to the left"),
+        React.createElement(ActionButton, { onClick: () => setColumnAction(() => addColumns('right')) },
             React.createElement(PlusIcon, null),
-            " Insert column to the right"),
+            " Insert ",
+            columns,
+            " to the right"),
         React.createElement(Separator, null),
         React.createElement(ActionButton, { onClick: () => runCommand(deleteRow) },
             React.createElement(GrayDeleteIcon, null),
-            " Delete row ",
-            rows > 1 && rows),
+            " Delete ",
+            rows),
         React.createElement(ActionButton, { onClick: () => setColumnAction(() => deleteColumn) },
             React.createElement(GrayDeleteIcon, null),
-            " Delete column"),
+            " Delete ",
+            columns),
         React.createElement(ColumnChangeWarningDialog, { isOpen: !!columnAction, primaryAction: () => {
                 if (columnAction) {
                     runCommand(columnAction, true);

package/dist/es/views/table_cell.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { schema } from '@manuscripts/transform';
 import { DOMSerializer } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { CellSelection } from 'prosemirror-tables';
@@ -25,12 +26,7 @@ export class TableCellView extends BlockView {
     constructor() {
         super(...arguments);
         this.initialise = () => {
-            if (!this.node.type.spec.toDOM) {
-                return;
-            }
-            const outputSpec = this.node.type.spec.toDOM(this.node);
-            const { dom } = DOMSerializer.renderSpec(document, outputSpec);
-            this.dom = dom;
+            this.dom = this.toDom();
             this.contentDOM = document.createElement('span');
             this.dom.appendChild(this.contentDOM);
             const can = this.props.getCapabilities();
@@ -38,6 +34,10 @@ export class TableCellView extends BlockView {
                 this.createContextMenu();
             }
         };
+        this.updateContents = () => {
+            this.dom.getAttributeNames().map((attr) => this.dom.removeAttribute(attr));
+            Array.from(this.toDom().attributes).map((attr) => attr.nodeValue && this.dom.setAttribute(attr.nodeName, attr.nodeValue));
+        };
     }
     ignoreMutation(mutation) {
         return mutation.type === 'attributes' && mutation.attributeName === 'class';
@@ -72,5 +72,14 @@ export class TableCellView extends BlockView {
         });
         this.dom.appendChild(contextMenuButton);
     }
+    toDom() {
+        if (!this.node.type.spec.toDOM) {
+            return this.node.type === schema.nodes.table_cell
+                ? document.createElement('td')
+                : document.createElement('th');
+        }
+        const outputSpec = this.node.type.spec.toDOM(this.node);
+        return DOMSerializer.renderSpec(document, outputSpec).dom;
+    }
 }
 export default createNodeView(TableCellView);

package/dist/types/commands.d.ts

@@ -67,4 +67,5 @@ interface NodeWithPosition {
 }
 export declare const insertTableFootnote: (node: ManuscriptNode, position: number, view: EditorView, inlineFootnote?: NodeWithPosition) => void;
 export declare const addRows: (direction: 'top' | 'bottom') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
+export declare const addColumns: (direction: 'right' | 'left') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export {};

package/dist/types/views/table_cell.d.ts

@@ -19,7 +19,9 @@ export declare class TableCellView extends BlockView<EditableBlockProps> {
     contentDOM: HTMLElement;
     ignoreMutation(mutation: MutationRecord): boolean;
     initialise: () => void;
+    updateContents: () => void;
     private createContextMenu;
+    private toDom;
 }
 declare const _default: (props: import("./base_node_view").BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<TableCellView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.13.25",
+  "version": "1.13.26",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",