@manuscripts/body-editor 2.0.6 → 2.0.7-LEAN-3724.0

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.mergeCellsWithSpace = 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");
@@ -787,7 +787,7 @@ const createAndFillTableElement = (state, tableConfig) => {
     const { nodes } = state.schema;
     const { numberOfColumns, numberOfRows, includeHeader } = tableConfig;
     const createRow = (cellType) => {
-        const cells = Array.from({ length: numberOfColumns }, () => nodes[cellType].create());
+        const cells = Array.from({ length: numberOfColumns }, () => nodes[cellType].create({}, state.schema.nodes.paragraph.create()));
         return nodes.table_row.create({}, cells);
     };
     const tableRows = includeHeader ? [createRow('table_header')] : [];
@@ -1012,3 +1012,80 @@ const addColumns = (direction) => (state, dispatch) => {
     return true;
 };
 exports.addColumns = addColumns;
+function isEmpty(cell) {
+    const c = cell.content;
+    return (c.childCount == 1 && c.child(0).isTextblock && c.child(0).childCount == 0);
+}
+function cellsOverlapRectangle({ width, height, map }, rect) {
+    let indexTop = rect.top * width + rect.left, indexLeft = indexTop;
+    let indexBottom = (rect.bottom - 1) * width + rect.left, indexRight = indexTop + (rect.right - rect.left - 1);
+    for (let i = rect.top; i < rect.bottom; i++) {
+        if ((rect.left > 0 && map[indexLeft] == map[indexLeft - 1]) ||
+            (rect.right < width && map[indexRight] == map[indexRight + 1])) {
+            return true;
+        }
+        indexLeft += width;
+        indexRight += width;
+    }
+    for (let i = rect.left; i < rect.right; i++) {
+        if ((rect.top > 0 && map[indexTop] == map[indexTop - width]) ||
+            (rect.bottom < height && map[indexBottom] == map[indexBottom + width])) {
+            return true;
+        }
+        indexTop++;
+        indexBottom++;
+    }
+    return false;
+}
+function mergeCellsWithSpace(state, dispatch) {
+    const sel = state.selection;
+    if (!(sel instanceof prosemirror_tables_1.CellSelection) ||
+        sel.$anchorCell.pos == sel.$headCell.pos) {
+        return false;
+    }
+    const rect = (0, prosemirror_tables_1.selectedRect)(state), { map } = rect;
+    if (cellsOverlapRectangle(map, rect)) {
+        return false;
+    }
+    if (dispatch) {
+        const tr = state.tr;
+        const seen = {};
+        let content = prosemirror_model_1.Fragment.empty;
+        let mergedPos;
+        let mergedCell;
+        for (let row = rect.top; row < rect.bottom; row++) {
+            for (let col = rect.left; col < rect.right; col++) {
+                const cellPos = map.map[row * map.width + col];
+                const cell = rect.table.nodeAt(cellPos);
+                if (seen[cellPos] || !cell) {
+                    continue;
+                }
+                seen[cellPos] = true;
+                if (mergedPos == null) {
+                    mergedPos = cellPos;
+                    mergedCell = cell;
+                }
+                else {
+                    if (!isEmpty(cell)) {
+                        content = content.append(cell.content.addToStart(cell.type.schema.text(' ')));
+                    }
+                    const mapped = tr.mapping.map(cellPos + rect.tableStart);
+                    tr.delete(mapped, mapped + cell.nodeSize);
+                }
+            }
+        }
+        if (mergedPos == null || mergedCell == null) {
+            return true;
+        }
+        tr.setNodeMarkup(mergedPos + rect.tableStart, null, Object.assign(Object.assign({}, (0, prosemirror_tables_1.addColSpan)(mergedCell.attrs, mergedCell.attrs.colspan, rect.right - rect.left - mergedCell.attrs.colspan)), { rowspan: rect.bottom - rect.top }));
+        if (content.size) {
+            const end = mergedPos + 1 + mergedCell.content.size;
+            const start = isEmpty(mergedCell) ? mergedPos + 1 : end;
+            tr.replaceWith(start + rect.tableStart, end + rect.tableStart, content);
+        }
+        tr.setSelection(new prosemirror_tables_1.CellSelection(tr.doc.resolve(mergedPos + rect.tableStart)));
+        dispatch(tr);
+    }
+    return true;
+}
+exports.mergeCellsWithSpace = mergeCellsWithSpace;

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

@@ -53,16 +53,20 @@ const ContextMenu = ({ view, close, }) => {
         close();
     };
     const [columnAction, setColumnAction] = (0, react_1.useState)(undefined);
+    const isCellSelectionMerged = (0, prosemirror_tables_1.mergeCells)(view.state);
+    const isCellSelectionSplittable = (0, prosemirror_tables_1.splitCell)(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),
+            " Insert ",
+            rows,
+            " above"),
         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),
+            " Insert ",
+            rows,
+            " below"),
         react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => (0, commands_1.addColumns)('left')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
@@ -82,6 +86,9 @@ const ContextMenu = ({ view, close, }) => {
             react_1.default.createElement(GrayDeleteIcon, null),
             " Delete ",
             columns),
+        (isCellSelectionMerged || isCellSelectionSplittable) && react_1.default.createElement(Separator, null),
+        isCellSelectionMerged && (react_1.default.createElement(ActionButton, { onClick: () => runCommand(commands_1.mergeCellsWithSpace, true) }, "Merge cells")),
+        isCellSelectionSplittable && (react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.splitCell, true) }, "Split cells")),
         react_1.default.createElement(style_guide_1.ColumnChangeWarningDialog, { isOpen: !!columnAction, primaryAction: () => {
                 if (columnAction) {
                     runCommand(columnAction, true);

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '2.0.6';
+exports.VERSION = '2.0.7-LEAN-3724.0';
 exports.MATHJAX_VERSION = '3.2.2';

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 { addColumnAfter, addColumnBefore, addRow, selectedRect, } from 'prosemirror-tables';
+import { addColSpan, addColumnAfter, addColumnBefore, addRow, CellSelection, selectedRect, } from 'prosemirror-tables';
 import { findWrapping, liftTarget, ReplaceAroundStep, } from 'prosemirror-transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
@@ -748,7 +748,7 @@ export const createAndFillTableElement = (state, tableConfig) => {
     const { nodes } = state.schema;
     const { numberOfColumns, numberOfRows, includeHeader } = tableConfig;
     const createRow = (cellType) => {
-        const cells = Array.from({ length: numberOfColumns }, () => nodes[cellType].create());
+        const cells = Array.from({ length: numberOfColumns }, () => nodes[cellType].create({}, state.schema.nodes.paragraph.create()));
         return nodes.table_row.create({}, cells);
     };
     const tableRows = includeHeader ? [createRow('table_header')] : [];
@@ -967,3 +967,79 @@ export const addColumns = (direction) => (state, dispatch) => {
     }
     return true;
 };
+function isEmpty(cell) {
+    const c = cell.content;
+    return (c.childCount == 1 && c.child(0).isTextblock && c.child(0).childCount == 0);
+}
+function cellsOverlapRectangle({ width, height, map }, rect) {
+    let indexTop = rect.top * width + rect.left, indexLeft = indexTop;
+    let indexBottom = (rect.bottom - 1) * width + rect.left, indexRight = indexTop + (rect.right - rect.left - 1);
+    for (let i = rect.top; i < rect.bottom; i++) {
+        if ((rect.left > 0 && map[indexLeft] == map[indexLeft - 1]) ||
+            (rect.right < width && map[indexRight] == map[indexRight + 1])) {
+            return true;
+        }
+        indexLeft += width;
+        indexRight += width;
+    }
+    for (let i = rect.left; i < rect.right; i++) {
+        if ((rect.top > 0 && map[indexTop] == map[indexTop - width]) ||
+            (rect.bottom < height && map[indexBottom] == map[indexBottom + width])) {
+            return true;
+        }
+        indexTop++;
+        indexBottom++;
+    }
+    return false;
+}
+export function mergeCellsWithSpace(state, dispatch) {
+    const sel = state.selection;
+    if (!(sel instanceof CellSelection) ||
+        sel.$anchorCell.pos == sel.$headCell.pos) {
+        return false;
+    }
+    const rect = selectedRect(state), { map } = rect;
+    if (cellsOverlapRectangle(map, rect)) {
+        return false;
+    }
+    if (dispatch) {
+        const tr = state.tr;
+        const seen = {};
+        let content = Fragment.empty;
+        let mergedPos;
+        let mergedCell;
+        for (let row = rect.top; row < rect.bottom; row++) {
+            for (let col = rect.left; col < rect.right; col++) {
+                const cellPos = map.map[row * map.width + col];
+                const cell = rect.table.nodeAt(cellPos);
+                if (seen[cellPos] || !cell) {
+                    continue;
+                }
+                seen[cellPos] = true;
+                if (mergedPos == null) {
+                    mergedPos = cellPos;
+                    mergedCell = cell;
+                }
+                else {
+                    if (!isEmpty(cell)) {
+                        content = content.append(cell.content.addToStart(cell.type.schema.text(' ')));
+                    }
+                    const mapped = tr.mapping.map(cellPos + rect.tableStart);
+                    tr.delete(mapped, mapped + cell.nodeSize);
+                }
+            }
+        }
+        if (mergedPos == null || mergedCell == null) {
+            return true;
+        }
+        tr.setNodeMarkup(mergedPos + rect.tableStart, null, Object.assign(Object.assign({}, addColSpan(mergedCell.attrs, mergedCell.attrs.colspan, rect.right - rect.left - mergedCell.attrs.colspan)), { rowspan: rect.bottom - rect.top }));
+        if (content.size) {
+            const end = mergedPos + 1 + mergedCell.content.size;
+            const start = isEmpty(mergedCell) ? mergedPos + 1 : end;
+            tr.replaceWith(start + rect.tableStart, end + rect.tableStart, content);
+        }
+        tr.setSelection(new CellSelection(tr.doc.resolve(mergedPos + rect.tableStart)));
+        dispatch(tr);
+    }
+    return true;
+}

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

@@ -1,9 +1,9 @@
 import { ColumnChangeWarningDialog, DeleteIcon, IconTextButton, PlusIcon, } from '@manuscripts/style-guide';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { CellSelection, deleteColumn, deleteRow, selectedRect, } from 'prosemirror-tables';
+import { CellSelection, deleteColumn, deleteRow, mergeCells, selectedRect, splitCell, } from 'prosemirror-tables';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { addColumns, addRows } from '../../commands';
+import { addColumns, addRows, mergeCellsWithSpace } from '../../commands';
 const getSelectedCellsCount = (state) => {
     const { selection } = state;
     const selectedCells = { rows: 1, columns: 1 };
@@ -24,16 +24,20 @@ export const ContextMenu = ({ view, close, }) => {
         close();
     };
     const [columnAction, setColumnAction] = useState(undefined);
+    const isCellSelectionMerged = mergeCells(view.state);
+    const isCellSelectionSplittable = splitCell(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),
+            " Insert ",
+            rows,
+            " above"),
         React.createElement(ActionButton, { onClick: () => runCommand(addRows('bottom')) },
             React.createElement(PlusIcon, null),
-            " Insert row below ",
-            rows),
+            " Insert ",
+            rows,
+            " below"),
         React.createElement(ActionButton, { onClick: () => setColumnAction(() => addColumns('left')) },
             React.createElement(PlusIcon, null),
             " Insert ",
@@ -53,6 +57,9 @@ export const ContextMenu = ({ view, close, }) => {
             React.createElement(GrayDeleteIcon, null),
             " Delete ",
             columns),
+        (isCellSelectionMerged || isCellSelectionSplittable) && React.createElement(Separator, null),
+        isCellSelectionMerged && (React.createElement(ActionButton, { onClick: () => runCommand(mergeCellsWithSpace, true) }, "Merge cells")),
+        isCellSelectionSplittable && (React.createElement(ActionButton, { onClick: () => runCommand(splitCell, true) }, "Split cells")),
         React.createElement(ColumnChangeWarningDialog, { isOpen: !!columnAction, primaryAction: () => {
                 if (columnAction) {
                     runCommand(columnAction, true);

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.0.6';
+export const VERSION = '2.0.7-LEAN-3724.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -68,4 +68,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 declare function mergeCellsWithSpace(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
 export {};

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.0.6";
+export declare const VERSION = "2.0.7-LEAN-3724.0";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

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