@manuscripts/body-editor 2.6.18 → 2.6.19

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.autoComplete = exports.mergeCellsWithSpace = exports.addColumns = exports.addRows = 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.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.autoComplete = exports.mergeCellsWithSpace = exports.addColumns = exports.addHeaderRow = exports.addRows = 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.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = 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");
@@ -1045,6 +1045,22 @@ const addRows = (direction) => (state, dispatch) => {
     return true;
 };
 exports.addRows = addRows;
+const addHeaderRow = (direction) => (state, dispatch) => {
+    if (dispatch) {
+        const { tr } = state;
+        const rect = (0, prosemirror_tables_1.selectedRect)(state);
+        const addRowStep = (0, prosemirror_tables_1.addRow)(state.tr, rect, rect[direction === 'below' ? 'bottom' : 'top']).steps.pop();
+        if (addRowStep && addRowStep instanceof prosemirror_transform_1.ReplaceStep) {
+            const { from, to, slice } = addRowStep;
+            const cells = (0, prosemirror_utils_1.flatten)(slice.content.firstChild);
+            const row = transform_1.schema.nodes.table_row.create(undefined, cells.map((cell) => transform_1.schema.nodes.table_header.create(cell.node.attrs, cell.node.content)));
+            tr.step(new prosemirror_transform_1.ReplaceStep(from, to, new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(row), slice.openStart, slice.openEnd)));
+            dispatch(tr);
+        }
+    }
+    return true;
+};
+exports.addHeaderRow = addHeaderRow;
 const addColumns = (direction) => (state, dispatch) => {
     if (dispatch) {
         const { tr } = state;

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

@@ -42,11 +42,7 @@ const getSelectedCellsCount = (state) => {
         selectedCells.rows = rect.bottom - rect.top;
         selectedCells.columns = rect.right - rect.left;
     }
-    const { rows, columns } = selectedCells;
-    return {
-        rows: rows > 1 ? `${rows} rows` : `row`,
-        columns: columns > 1 ? `${columns} columns` : `column`,
-    };
+    return selectedCells;
 };
 const isHeaderCellSelected = (state) => {
     var _a;
@@ -76,7 +72,10 @@ const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
     const [columnAction, setColumnAction] = (0, react_1.useState)();
     const isCellSelectionMerged = (0, prosemirror_tables_1.mergeCells)(view.state);
     const isCellSelectionSplittable = (0, prosemirror_tables_1.splitCell)(view.state);
-    const { rows, columns } = getSelectedCellsCount(view.state);
+    const count = getSelectedCellsCount(view.state);
+    const rows = count.rows > 1 ? `${count.rows} rows` : `row`;
+    const columns = count.columns > 1 ? `${count.columns} columns` : `column`;
+    const headerPosition = isHeaderCellSelected(view.state) ? 'below' : 'above';
     return (react_1.default.createElement(MenuDropdownList, { className: 'table-ctx' },
         react_1.default.createElement(ActionButton, { disabled: isHeaderCellSelected(view.state), onClick: () => runCommand((0, commands_1.addRows)('top')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
@@ -99,9 +98,16 @@ const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
             columns,
             " to the right"),
         react_1.default.createElement(Separator, null),
+        react_1.default.createElement(ActionButton, { disabled: count.rows !== 1, onClick: () => runCommand((0, commands_1.addHeaderRow)(headerPosition)) },
+            react_1.default.createElement(style_guide_1.PlusIcon, null),
+            " Insert header row ",
+            headerPosition),
+        react_1.default.createElement(Separator, null),
         react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.deleteRow) },
             react_1.default.createElement(GrayDeleteIcon, null),
-            " Delete ",
+            " Delete",
+            isHeaderCellSelected(view.state) ? ' header ' : '',
+            " ",
             rows),
         react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => prosemirror_tables_1.deleteColumn) },
             react_1.default.createElement(GrayDeleteIcon, null),

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.6.18';
+exports.VERSION = '2.6.19';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/commands.js

@@ -16,12 +16,12 @@
 import { buildContribution } from '@manuscripts/json-schema';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
 import { generateNodeID, isElementNodeType, isListNode, isSectionNodeType, isTableElementNode, schema, } from '@manuscripts/transform';
-import { Fragment, NodeRange, } from 'prosemirror-model';
+import { Fragment, NodeRange, Slice, } from 'prosemirror-model';
 import { wrapInList } from 'prosemirror-schema-list';
 import { NodeSelection, TextSelection, } from 'prosemirror-state';
 import { addColSpan, addColumnAfter, addColumnBefore, addRow, CellSelection, selectedRect, } from 'prosemirror-tables';
-import { findWrapping, liftTarget, ReplaceAroundStep, } from 'prosemirror-transform';
-import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, hasParentNodeOfType, } from 'prosemirror-utils';
+import { findWrapping, liftTarget, ReplaceAroundStep, ReplaceStep, } from 'prosemirror-transform';
+import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, flatten, hasParentNodeOfType, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
 import { findBackmatter, findBibliographySection, findBody, insertFootnotesSection, insertSupplementsNode, } from './lib/doc';
 import { createFootnote, findFootnotesContainerNode, getFootnotesElementState, } from './lib/footnotes';
@@ -997,6 +997,21 @@ export const addRows = (direction) => (state, dispatch) => {
     }
     return true;
 };
+export const addHeaderRow = (direction) => (state, dispatch) => {
+    if (dispatch) {
+        const { tr } = state;
+        const rect = selectedRect(state);
+        const addRowStep = addRow(state.tr, rect, rect[direction === 'below' ? 'bottom' : 'top']).steps.pop();
+        if (addRowStep && addRowStep instanceof ReplaceStep) {
+            const { from, to, slice } = addRowStep;
+            const cells = flatten(slice.content.firstChild);
+            const row = schema.nodes.table_row.create(undefined, cells.map((cell) => schema.nodes.table_header.create(cell.node.attrs, cell.node.content)));
+            tr.step(new ReplaceStep(from, to, new Slice(Fragment.from(row), slice.openStart, slice.openEnd)));
+            dispatch(tr);
+        }
+    }
+    return true;
+};
 export const addColumns = (direction) => (state, dispatch) => {
     if (dispatch) {
         const { tr } = state;

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

@@ -4,7 +4,7 @@ import { schema } from '@manuscripts/transform';
 import { CellSelection, deleteColumn, deleteRow, mergeCells, selectedRect, splitCell, } from 'prosemirror-tables';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { addColumns, addRows, mergeCellsWithSpace } from '../../commands';
+import { addColumns, addHeaderRow, addRows, mergeCellsWithSpace, } from '../../commands';
 const getSelectedCellsCount = (state) => {
     const { selection } = state;
     const selectedCells = { rows: 1, columns: 1 };
@@ -13,11 +13,7 @@ const getSelectedCellsCount = (state) => {
         selectedCells.rows = rect.bottom - rect.top;
         selectedCells.columns = rect.right - rect.left;
     }
-    const { rows, columns } = selectedCells;
-    return {
-        rows: rows > 1 ? `${rows} rows` : `row`,
-        columns: columns > 1 ? `${columns} columns` : `column`,
-    };
+    return selectedCells;
 };
 const isHeaderCellSelected = (state) => {
     var _a;
@@ -47,7 +43,10 @@ export const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
     const [columnAction, setColumnAction] = useState();
     const isCellSelectionMerged = mergeCells(view.state);
     const isCellSelectionSplittable = splitCell(view.state);
-    const { rows, columns } = getSelectedCellsCount(view.state);
+    const count = getSelectedCellsCount(view.state);
+    const rows = count.rows > 1 ? `${count.rows} rows` : `row`;
+    const columns = count.columns > 1 ? `${count.columns} columns` : `column`;
+    const headerPosition = isHeaderCellSelected(view.state) ? 'below' : 'above';
     return (React.createElement(MenuDropdownList, { className: 'table-ctx' },
         React.createElement(ActionButton, { disabled: isHeaderCellSelected(view.state), onClick: () => runCommand(addRows('top')) },
             React.createElement(PlusIcon, null),
@@ -70,9 +69,16 @@ export const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
             columns,
             " to the right"),
         React.createElement(Separator, null),
+        React.createElement(ActionButton, { disabled: count.rows !== 1, onClick: () => runCommand(addHeaderRow(headerPosition)) },
+            React.createElement(PlusIcon, null),
+            " Insert header row ",
+            headerPosition),
+        React.createElement(Separator, null),
         React.createElement(ActionButton, { onClick: () => runCommand(deleteRow) },
             React.createElement(GrayDeleteIcon, null),
-            " Delete ",
+            " Delete",
+            isHeaderCellSelected(view.state) ? ' header ' : '',
+            " ",
             rows),
         React.createElement(ActionButton, { onClick: () => setColumnAction(() => deleteColumn) },
             React.createElement(GrayDeleteIcon, null),

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.6.18';
+export const VERSION = '2.6.19';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -73,6 +73,7 @@ export declare const createAndFillTableElement: (state: ManuscriptEditorState, c
 export declare const addNodeComment: (node: ManuscriptNode, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const addInlineComment: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const addRows: (direction: 'top' | 'bottom') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
+export declare const addHeaderRow: (direction: 'above' | 'below') => (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 declare const autoComplete: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.6.18";
+export declare const VERSION = "2.6.19";
 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.6.18",
+  "version": "2.6.19",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/Editor.css

@@ -133,14 +133,18 @@
   padding: 10px;
 }
 
-.ProseMirror tr:first-of-type th {
+.ProseMirror tr th {
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
-  background: #f2f2f2;
+  background: #E2E2E2;
   text-align: left;
   font-weight: bold;
 }
 
+.ProseMirror tr th:not(:last-child) {
+  border-right: 1px solid #C9C9C9;
+}
+
 .ProseMirror tr td {
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;