@manuscripts/body-editor 1.13.16 → 1.13.19

package/dist/cjs/commands.js

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-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.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertFileAsFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
+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.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertFileAsFigure = 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");
 const prosemirror_model_1 = require("prosemirror-model");
 const prosemirror_schema_list_1 = require("prosemirror-schema-list");
 const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_tables_1 = require("prosemirror-tables");
 const prosemirror_transform_1 = require("prosemirror-transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const comments_1 = require("./lib/comments");
@@ -947,3 +948,19 @@ const insertTableFootnote = (node, position, view, inlineFootnote) => {
     dispatch(view.state.tr.setSelection(textSelection).scrollIntoView());
 };
 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);
+        const selectedRows = rect.bottom - rect.top;
+        for (let i = 0; i < selectedRows; i++) {
+            (0, prosemirror_tables_1.addRow)(tr, rect, rect[direction]);
+        }
+        dispatch(tr);
+    }
+    return true;
+};
+exports.addRows = addRows;

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

@@ -32,19 +32,32 @@ const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 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 { selection } = state;
+    const selectedCells = { rows: 1 };
+    if (selection instanceof prosemirror_tables_1.CellSelection) {
+        const rect = (0, prosemirror_tables_1.selectedRect)(state);
+        selectedCells.rows = rect.bottom - rect.top;
+    }
+    return selectedCells;
+};
 const ContextMenu = ({ view, close, }) => {
     const runCommand = (command, noTracking) => {
         command(view.state, (tr) => view.dispatch((noTracking && (0, track_changes_plugin_1.skipTracking)(tr)) || tr));
         close();
     };
     const [columnAction, setColumnAction] = (0, react_1.useState)(undefined);
+    const { rows } = getSelectedCells(view.state);
     return (react_1.default.createElement(MenuDropdownList, null,
-        react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.addRowBefore) },
+        react_1.default.createElement(ActionButton, { onClick: () => runCommand((0, commands_1.addRows)('top')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
-            " Insert row above"),
-        react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.addRowAfter) },
+            " Insert row above ",
+            rows > 1 && 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"),
+            " Insert row below ",
+            rows > 1 && rows),
         react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => prosemirror_tables_1.addColumnBefore) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert column to the left"),
@@ -54,7 +67,8 @@ const ContextMenu = ({ view, close, }) => {
         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"),
+            " Delete row ",
+            rows > 1 && rows),
         react_1.default.createElement(ActionButton, { onClick: () => setColumnAction(() => prosemirror_tables_1.deleteColumn) },
             react_1.default.createElement(GrayDeleteIcon, null),
             " Delete column"),

package/dist/cjs/lib/context-menu.js

@@ -137,11 +137,7 @@ class ContextMenu {
                     }
                 }));
             }
-            popper.show(target, menu, 'right', true, {
-                modifiers: {
-                    offset: { offset: '0, 50%p' },
-                },
-            });
+            popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
@@ -276,11 +272,7 @@ class ContextMenu {
                     }));
                 }));
             }
-            popper.show(target, menu, 'right', true, {
-                modifiers: {
-                    offset: { offset: '0, 50%p' },
-                },
-            });
+            popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
         this.createMenuItem = (contents, handler) => {

package/dist/cjs/lib/popper.js

@@ -14,17 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopperManager = void 0;
-const popper_js_1 = __importDefault(require("popper.js"));
+const core_1 = require("@popperjs/core");
 class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
-    show(target, contents, placement = 'bottom', showArrow = true, modifiers = {}) {
+    show(target, contents, placement = 'bottom', showArrow = true, modifiers = []) {
         this.destroy();
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
@@ -36,25 +33,27 @@ class PopperManager {
                 const arrow = document.createElement('div');
                 arrow.className = 'popper-arrow';
                 container.appendChild(arrow);
-                modifiers.arrow = {
-                    element: arrow,
-                };
+                modifiers.push({
+                    name: 'arrow',
+                    options: {
+                        element: arrow,
+                    },
+                });
             }
             else {
-                modifiers.arrow = {
-                    enabled: false,
-                };
+                modifiers.push({
+                    name: 'arrow',
+                    options: {
+                        element: null,
+                    },
+                });
             }
-            modifiers.preventOverflow = {
-                escapeWithReference: true,
-            };
             container.appendChild(contents);
             document.body.appendChild(container);
-            this.activePopper = new popper_js_1.default(target, container, {
+            this.activePopper = (0, core_1.createPopper)(target, container, {
                 placement,
-                removeOnDestroy: true,
                 modifiers,
-                onCreate: () => {
+                onFirstUpdate: () => {
                     this.addContainerClass(target);
                     this.focusInput(container);
                 },
@@ -72,8 +71,10 @@ class PopperManager {
     }
     destroy() {
         if (this.activePopper) {
-            this.removeContainerClass(this.activePopper.reference);
+            console.log('destroying popper', this.activePopper, this.activePopper.state.elements.reference);
+            this.removeContainerClass(this.activePopper.state.elements.reference);
             this.activePopper.destroy();
+            this.activePopper.state.elements.popper.remove();
             if (this.handleDocumentClick) {
                 window.removeEventListener('click', this.handleDocumentClick);
             }

package/dist/cjs/views/table_cell.js

@@ -61,8 +61,7 @@ class TableCellView extends block_view_1.default {
             }
             else {
                 if (!(this.view.state.selection instanceof prosemirror_tables_1.CellSelection &&
-                    (this.getPos() === this.view.state.selection.$anchorCell.pos ||
-                        this.getPos() === this.view.state.selection.$headCell.pos))) {
+                    !!this.view.state.selection.ranges.find((range) => range.$from.pos === this.getPos() + 1))) {
                     this.view.dispatch(this.view.state.tr.setSelection(prosemirror_state_1.TextSelection.create(this.view.state.doc, this.getPos())));
                     this.view.focus();
                 }

package/dist/es/commands.js

@@ -19,6 +19,7 @@ import { generateID, isElementNodeType, isFootnoteNode, isInBibliographySection,
 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 { findWrapping, liftTarget, ReplaceAroundStep, } from 'prosemirror-transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
@@ -907,3 +908,18 @@ export const insertTableFootnote = (node, position, view, inlineFootnote) => {
     view.focus();
     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);
+        const selectedRows = rect.bottom - rect.top;
+        for (let i = 0; i < selectedRows; i++) {
+            addRow(tr, rect, rect[direction]);
+        }
+        dispatch(tr);
+    }
+    return true;
+};

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

@@ -1,21 +1,34 @@
 import { ColumnChangeWarningDialog, DeleteIcon, IconTextButton, PlusIcon, } from '@manuscripts/style-guide';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, deleteColumn, deleteRow, } from 'prosemirror-tables';
+import { addColumnAfter, addColumnBefore, CellSelection, deleteColumn, deleteRow, selectedRect, } from 'prosemirror-tables';
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { addRows } from '../../commands';
+const getSelectedCells = (state) => {
+    const { selection } = state;
+    const selectedCells = { rows: 1 };
+    if (selection instanceof CellSelection) {
+        const rect = selectedRect(state);
+        selectedCells.rows = rect.bottom - rect.top;
+    }
+    return selectedCells;
+};
 export const ContextMenu = ({ view, close, }) => {
     const runCommand = (command, noTracking) => {
         command(view.state, (tr) => view.dispatch((noTracking && skipTracking(tr)) || tr));
         close();
     };
     const [columnAction, setColumnAction] = useState(undefined);
+    const { rows } = getSelectedCells(view.state);
     return (React.createElement(MenuDropdownList, null,
-        React.createElement(ActionButton, { onClick: () => runCommand(addRowBefore) },
+        React.createElement(ActionButton, { onClick: () => runCommand(addRows('top')) },
             React.createElement(PlusIcon, null),
-            " Insert row above"),
-        React.createElement(ActionButton, { onClick: () => runCommand(addRowAfter) },
+            " Insert row above ",
+            rows > 1 && rows),
+        React.createElement(ActionButton, { onClick: () => runCommand(addRows('bottom')) },
             React.createElement(PlusIcon, null),
-            " Insert row below"),
+            " Insert row below ",
+            rows > 1 && rows),
         React.createElement(ActionButton, { onClick: () => setColumnAction(() => addColumnBefore) },
             React.createElement(PlusIcon, null),
             " Insert column to the left"),
@@ -25,7 +38,8 @@ export const ContextMenu = ({ view, close, }) => {
         React.createElement(Separator, null),
         React.createElement(ActionButton, { onClick: () => runCommand(deleteRow) },
             React.createElement(GrayDeleteIcon, null),
-            " Delete row"),
+            " Delete row ",
+            rows > 1 && rows),
         React.createElement(ActionButton, { onClick: () => setColumnAction(() => deleteColumn) },
             React.createElement(GrayDeleteIcon, null),
             " Delete column"),

package/dist/es/lib/context-menu.js

@@ -130,11 +130,7 @@ export class ContextMenu {
                     }
                 }));
             }
-            popper.show(target, menu, 'right', true, {
-                modifiers: {
-                    offset: { offset: '0, 50%p' },
-                },
-            });
+            popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
@@ -269,11 +265,7 @@ export class ContextMenu {
                     }));
                 }));
             }
-            popper.show(target, menu, 'right', true, {
-                modifiers: {
-                    offset: { offset: '0, 50%p' },
-                },
-            });
+            popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
         this.createMenuItem = (contents, handler) => {

package/dist/es/lib/popper.js

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Popper from 'popper.js';
+import { createPopper, } from '@popperjs/core';
 export class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
-    show(target, contents, placement = 'bottom', showArrow = true, modifiers = {}) {
+    show(target, contents, placement = 'bottom', showArrow = true, modifiers = []) {
         this.destroy();
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
@@ -30,25 +30,27 @@ export class PopperManager {
                 const arrow = document.createElement('div');
                 arrow.className = 'popper-arrow';
                 container.appendChild(arrow);
-                modifiers.arrow = {
-                    element: arrow,
-                };
+                modifiers.push({
+                    name: 'arrow',
+                    options: {
+                        element: arrow,
+                    },
+                });
             }
             else {
-                modifiers.arrow = {
-                    enabled: false,
-                };
+                modifiers.push({
+                    name: 'arrow',
+                    options: {
+                        element: null,
+                    },
+                });
             }
-            modifiers.preventOverflow = {
-                escapeWithReference: true,
-            };
             container.appendChild(contents);
             document.body.appendChild(container);
-            this.activePopper = new Popper(target, container, {
+            this.activePopper = createPopper(target, container, {
                 placement,
-                removeOnDestroy: true,
                 modifiers,
-                onCreate: () => {
+                onFirstUpdate: () => {
                     this.addContainerClass(target);
                     this.focusInput(container);
                 },
@@ -66,8 +68,10 @@ export class PopperManager {
     }
     destroy() {
         if (this.activePopper) {
-            this.removeContainerClass(this.activePopper.reference);
+            console.log('destroying popper', this.activePopper, this.activePopper.state.elements.reference);
+            this.removeContainerClass(this.activePopper.state.elements.reference);
             this.activePopper.destroy();
+            this.activePopper.state.elements.popper.remove();
             if (this.handleDocumentClick) {
                 window.removeEventListener('click', this.handleDocumentClick);
             }

package/dist/es/views/table_cell.js

@@ -55,8 +55,7 @@ export class TableCellView extends BlockView {
             }
             else {
                 if (!(this.view.state.selection instanceof CellSelection &&
-                    (this.getPos() === this.view.state.selection.$anchorCell.pos ||
-                        this.getPos() === this.view.state.selection.$headCell.pos))) {
+                    !!this.view.state.selection.ranges.find((range) => range.$from.pos === this.getPos() + 1))) {
                     this.view.dispatch(this.view.state.tr.setSelection(TextSelection.create(this.view.state.doc, this.getPos())));
                     this.view.focus();
                 }

package/dist/types/commands.d.ts

@@ -16,7 +16,7 @@
 import { FileAttachment, TableConfig } from '@manuscripts/style-guide';
 import { InlineFootnoteNode, ManuscriptEditorState, ManuscriptEditorView, ManuscriptMarkType, ManuscriptNode, ManuscriptNodeType, ManuscriptTransaction } from '@manuscripts/transform';
 import { Attrs, ResolvedPos } from 'prosemirror-model';
-import { NodeSelection, Selection, TextSelection, Transaction } from 'prosemirror-state';
+import { EditorState, NodeSelection, Selection, TextSelection, Transaction } from 'prosemirror-state';
 import { NodeWithPos } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
 import { EditorAction } from './types';
@@ -62,4 +62,5 @@ interface NodeWithPosition {
     pos: number;
 }
 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 {};

package/dist/types/lib/popper.d.ts

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Popper from 'popper.js';
+import { Placement, StrictModifiers } from '@popperjs/core';
 export declare class PopperManager {
     private activePopper?;
     private handleDocumentClick?;
-    show(target: Element, contents: HTMLElement, placement?: Popper.Placement, showArrow?: boolean, modifiers?: Popper.Modifiers): void;
+    show(target: Element, contents: HTMLElement, placement?: Placement, showArrow?: boolean, modifiers?: Array<Partial<StrictModifiers>>): void;
     destroy(): void;
     update(): void;
     isActive: () => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.13.16",
+  "version": "1.13.19",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -33,14 +33,14 @@
     "@manuscripts/style-guide": "1.13.12",
     "@manuscripts/track-changes-plugin": "1.7.14",
     "@manuscripts/transform": "2.3.19",
+    "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
-    "mathjax-full": "^3.2.2",
     "codemirror": "^5.58.1",
     "dompurify": "^2.4.1",
     "formik": "^2.2.9",
     "grapheme-splitter": "^1.0.4",
     "history": "^4.10.1",
-    "popper.js": "^1.16.1",
+    "mathjax-full": "^3.2.2",
     "prosemirror-collab": "^1.3.1",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-dropcursor": "^1.6.1",

package/styles/AdvancedEditor.css

@@ -551,12 +551,14 @@ span.comment-marker {
   font-family: Lato, sans-serif;
   font-size: 14px;
   line-height: 16px;
-  margin-bottom: 4px;
   border: 1px solid transparent;
   border-radius: 6px;
   position: relative;
   cursor: default;
   padding: 4px 8px;
+  border: 1px solid #C9C9C9;
+  margin-top: 10px;
+  margin-bottom: 4px;
 }
 
 .keywords .selected-suggestion {
@@ -987,4 +989,4 @@ span.accepted .selected-suggestion,
 
 .ProseMirror td:hover > .table-context-menu-button, th:hover > .table-context-menu-button, .open-context-menu {
   visibility: visible !important;
-}
+}

package/styles/popper.css

@@ -14,47 +14,42 @@
   border: 5px solid transparent;
 }
 
-.popper[x-placement='bottom'] .popper-arrow {
+.popper[data-popper-placement='bottom'] .popper-arrow {
   top: -5px;
   left: calc(50% - 5px);
   border-bottom-color: #e2e2e2;
   border-top-width: 0;
-  margin: 0 5px;
 }
 
-.popper[x-placement='top'] .popper-arrow {
+.popper[data-popper-placement='top'] .popper-arrow {
   bottom: -5px;
   left: calc(50% - 5px);
   border-top-color: #e2e2e2;
   border-bottom-width: 0;
-  margin: 0 5px;
 }
 
-.popper[x-placement='left'] .popper-arrow {
+.popper[data-popper-placement='left'] .popper-arrow {
   right: -5px;
   top: calc(50% - 5px);
   border-left-color: #e2e2e2;
   border-right-width: 0;
-  margin: 5px 0;
 }
 
-.popper[x-placement='right'] .popper-arrow {
+.popper[data-popper-placement='right'] .popper-arrow {
   left: -5px;
   top: calc(50% - 5px);
   border-right-color: #e2e2e2;
   border-left-width: 0;
-  margin: 5px 0;
 }
 
-.popper[x-placement='bottom-start'] .popper-arrow {
+.popper[data-popper-placement='bottom-start'] .popper-arrow {
   top: -5px;
   left: calc(50% - 5px);
   border-bottom-color: #e2e2e2;
   border-top-width: 0;
-  margin: 0 5px;
 }
 
-/*.popper[x-placement="right-end"] .popper-arrow {
+/*.popper[data-popper-placement="right-end"] .popper-arrow {
   left: -5px;
   top: 5px;
   border-right-color: #eee;