@manuscripts/body-editor 3.16.3 → 3.17.0

package/dist/cjs/views/table_element.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableElementView = void 0;
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const position_menu_1 = require("../lib/position-menu");
 class TableElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -29,9 +30,30 @@ class TableElementView extends block_view_1.default {
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('block');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
-            this.dom.appendChild(this.contentDOM);
+            this.container = document.createElement('div');
+            this.container.classList.add('container');
+            this.container.appendChild(this.contentDOM);
+            this.dom.appendChild(this.container);
         };
     }
+    updateContents() {
+        super.updateContents();
+        this.addTools();
+    }
+    addTools() {
+        this.addPositionMenu();
+    }
+    addPositionMenu() {
+        if (!this.positionMenu) {
+            this.positionMenu = new position_menu_1.HorizontalPositionMenu(this, this.updateHorizontalPosition, this.container);
+        }
+        this.positionMenu.create();
+    }
+    updateHorizontalPosition(horizontalPosition) {
+        const tr = this.view.state.tr;
+        tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition);
+        this.view.dispatch(tr);
+    }
 }
 exports.TableElementView = TableElementView;
 exports.default = (0, creators_1.createNodeView)(TableElementView);

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

@@ -22,7 +22,7 @@ import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { addNodeComment, createBlock, findPosBeforeFirstSubsection, insertGeneralTableFootnote, insertInlineTableFootnote, } from '../commands';
 import { PopperManager } from './popper';
-import { createPositionOptions } from './position-menu';
+import { HorizontalPositionMenu } from './position-menu';
 import { templateAllows } from './template';
 import { getMatchingChild, isChildOfNodeTypes, isSelectionInNode, } from './utils';
 const popper = new PopperManager();
@@ -32,8 +32,15 @@ const readonlyTypes = [
     schema.nodes.bibliography_section,
     schema.nodes.footnotes_section,
 ];
-const isBoxElementSectionTitle = ($pos, node) => isSectionTitleNode(node) &&
-    $pos.node($pos.depth - 1).type === schema.nodes.box_element;
+const getBoxElementOfSectionTitle = ($pos, node) => {
+    if (isSectionTitleNode(node)) {
+        const parent = $pos.node($pos.depth - 1);
+        if (parent.type === schema.nodes.box_element) {
+            return parent;
+        }
+    }
+    return null;
+};
 export const sectionLevel = (depth) => {
     switch (depth) {
         case 1:
@@ -153,18 +160,28 @@ export class ContextMenu {
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
-            const isBox = isBoxElementSectionTitle($pos, this.node);
-            const type = isBox ? schema.nodes.box_element : this.node.type;
-            if (type === schema.nodes.figure_element ||
-                type === schema.nodes.image_element) {
+            const boxParent = getBoxElementOfSectionTitle($pos, this.node);
+            const type = boxParent ? schema.nodes.box_element : this.node.type;
+            const positionableTypes = [
+                schema.nodes.figure_element,
+                schema.nodes.image_element,
+                schema.nodes.box_element,
+                schema.nodes.pullquote_element,
+                schema.nodes.table_element,
+            ];
+            let nodeBase = this.node;
+            if (positionableTypes.includes(type)) {
                 const figure = getMatchingChild(this.node, (node) => node.type === schema.nodes.figure);
                 if (figure) {
-                    const attrType = figure.attrs.type;
-                    const submenuOptions = createPositionOptions(schema.nodes.figure, figure, attrType, this.view, () => popper.destroy());
-                    const submenuLabel = 'Position';
-                    const submenu = this.createSubmenu(submenuLabel, submenuOptions);
-                    menu.appendChild(submenu);
+                    nodeBase = figure;
+                }
+                if (boxParent) {
+                    nodeBase = boxParent;
                 }
+                const submenuOptions = HorizontalPositionMenu.createPositionOptions(schema.nodes[nodeBase.type.name], nodeBase, nodeBase.attrs.type, this.view, () => popper.destroy());
+                const submenuLabel = 'Position';
+                const submenu = this.createSubmenu(submenuLabel, submenuOptions);
+                menu.appendChild(submenu);
             }
             if (type === schema.nodes.list) {
                 menu.appendChild(this.createMenuSection((section) => {

package/dist/es/lib/popper.js

@@ -19,9 +19,10 @@ export class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
-    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true) {
+    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true, onDestroy = undefined) {
         this.destroy();
         this.triggerElement = target;
+        this.destructionListener = onDestroy;
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
@@ -91,6 +92,8 @@ export class PopperManager {
     destroy() {
         if (this.activePopper) {
             this.removeContainerClass(this.activePopper.state.elements.reference);
+            this.destructionListener?.(this.activePopper);
+            this.destructionListener = undefined;
             this.activePopper.destroy();
             this.activePopper.state.elements.popper.remove();
             if (this.handleDocumentClick) {
@@ -108,6 +111,17 @@ export class PopperManager {
             this.activePopper.update();
         }
     }
+    replaceContent(newContent) {
+        if (this.container && this.activePopper) {
+            const arrow = this.container.querySelector('.popper-arrow');
+            this.container.innerHTML = '';
+            if (arrow) {
+                this.container.appendChild(arrow);
+            }
+            this.container.appendChild(newContent);
+            this.activePopper.update();
+        }
+    }
     focusInput(container, autoFocus = true) {
         const input = container.querySelector('input');
         if (input) {

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

@@ -15,100 +15,182 @@
  */
 import { ContextMenu } from '@manuscripts/style-guide';
 import { imageDefaultIcon, imageLeftIcon, imageRightIcon } from '../icons';
-import { figurePositions } from '../views/image_element';
-import ReactSubView from '../views/ReactSubView';
+import { createSubViewAsync } from '../views/ReactSubView';
 import { handleEnterKey } from './navigation-utils';
 import { updateNodeAttrs } from './view';
-export const createPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
-    const createAction = (position) => () => {
-        onComplete?.();
-        updateNodeAttrs(view, nodeType, {
-            ...node.attrs,
-            type: position,
-        });
-    };
-    return [
-        {
-            title: 'Left',
-            action: createAction(figurePositions.left),
-            IconComponent: imageLeftIcon,
-            iconName: 'ImageLeft',
-            selected: currentPosition === figurePositions.left,
-        },
-        {
-            title: 'Center',
-            action: createAction(figurePositions.default),
-            IconComponent: imageDefaultIcon,
-            iconName: 'ImageDefault',
-            selected: !currentPosition,
-        },
-        {
-            title: 'Right',
-            action: createAction(figurePositions.right),
-            IconComponent: imageRightIcon,
-            iconName: 'ImageRight',
-            selected: currentPosition === figurePositions.right,
-        },
-    ];
-};
-export const createPopperMenuPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
-    return createPositionOptions(nodeType, node, currentPosition, view, onComplete).map((option) => ({
-        label: option.title,
-        action: option.action,
-        icon: option.iconName,
-        selected: option.selected,
-    }));
-};
-export const showPositionMenu = (nodeType, node, currentPosition, positionMenuWrapper, view, getPos, props) => {
-    props.popper.destroy();
-    const options = createPopperMenuPositionOptions(nodeType, node, currentPosition, view, () => props.popper.destroy());
-    const componentProps = {
-        actions: options,
-    };
-    props.popper.show(positionMenuWrapper, ReactSubView(props, ContextMenu, componentProps, node, getPos, view, [
-        'context-menu',
-        'position-menu',
-    ]), 'left', false);
-};
-export const setElementPositionAlignment = (element, position) => {
-    switch (position) {
-        case figurePositions.left:
-            element.setAttribute('data-alignment', 'left');
-            break;
-        case figurePositions.right:
-            element.setAttribute('data-alignment', 'right');
-            break;
-        default:
-            element.removeAttribute('data-alignment');
-            break;
+export var HorizontalPositions;
+(function (HorizontalPositions) {
+    HorizontalPositions["left"] = "half-left";
+    HorizontalPositions["right"] = "half-right";
+    HorizontalPositions["default"] = "";
+})(HorizontalPositions || (HorizontalPositions = {}));
+export class HorizontalPositionMenu {
+    constructor(parent, onChange, location, getPositionSource) {
+        this.menuOpen = false;
+        this.posMenuSelector = 'position-menu';
+        this.buttonClass = 'position-menu-button';
+        const preSource = getPositionSource?.() || parent.node;
+        if (typeof preSource.attrs.type === 'undefined') {
+            console.error("This node doesn't support horizontal alignment");
+            return;
+        }
+        this.getPositionSource = getPositionSource;
+        this.location = location || parent.dom;
+        this.onChange = onChange.bind(parent);
+        this.parent = parent;
+    }
+    static createPositionOptions(nodeType, node, currentPosition, view, onComplete) {
+        const createAction = (position) => () => {
+            onComplete?.();
+            updateNodeAttrs(view, nodeType, {
+                ...node.attrs,
+                type: position,
+            });
+        };
+        return [
+            {
+                title: 'Left',
+                action: createAction(HorizontalPositions.left),
+                IconComponent: imageLeftIcon,
+                iconName: 'ImageLeft',
+                selected: currentPosition === HorizontalPositions.left,
+            },
+            {
+                title: 'Default',
+                action: createAction(HorizontalPositions.default),
+                IconComponent: imageDefaultIcon,
+                iconName: 'ImageDefault',
+                selected: !currentPosition || currentPosition === HorizontalPositions.default,
+            },
+            {
+                title: 'Right',
+                action: createAction(HorizontalPositions.right),
+                IconComponent: imageRightIcon,
+                iconName: 'ImageRight',
+                selected: currentPosition === HorizontalPositions.right,
+            },
+        ];
+    }
+    createPopperMenuPositionOptions(nodeType, node, currentPosition, view, onComplete) {
+        return HorizontalPositionMenu.createPositionOptions(nodeType, node, currentPosition, view, onComplete).map((option) => ({
+            label: option.title,
+            action: option.action,
+            icon: option.iconName,
+            selected: option.selected,
+        }));
     }
-};
-export const createPositionMenuWrapper = (currentPosition, onClick, props) => {
-    const can = props.getCapabilities();
-    const positionMenuWrapper = document.createElement('div');
-    positionMenuWrapper.classList.add('position-menu');
-    const positionMenuButton = document.createElement('div');
-    positionMenuButton.classList.add('position-menu-button');
-    let icon;
-    switch (currentPosition) {
-        case figurePositions.left:
-            icon = imageLeftIcon;
-            break;
-        case figurePositions.right:
-            icon = imageRightIcon;
-            break;
-        default:
-            icon = imageDefaultIcon;
-            break;
+    createPositionMenuWrapper(currentPosition, props) {
+        const can = props.getCapabilities();
+        const positionMenuWrapper = document.createElement('div');
+        positionMenuWrapper.classList.add(this.posMenuSelector);
+        const positionMenuButton = document.createElement('div');
+        positionMenuButton.classList.add(this.buttonClass);
+        let icon;
+        switch (currentPosition) {
+            case HorizontalPositions.left:
+                icon = imageLeftIcon;
+                break;
+            case HorizontalPositions.right:
+                icon = imageRightIcon;
+                break;
+            default:
+                icon = imageDefaultIcon;
+                break;
+        }
+        if (icon) {
+            positionMenuButton.innerHTML = icon;
+        }
+        const onClick = () => {
+            this.showPositionMenu();
+        };
+        if (can.editArticle) {
+            positionMenuButton.tabIndex = -1;
+            positionMenuButton.addEventListener('click', onClick);
+            positionMenuButton.addEventListener('keydown', handleEnterKey(onClick));
+        }
+        if (this.positionMenuWrapper) {
+            const button = this.positionMenuWrapper.querySelector('.' + this.buttonClass);
+            if (button) {
+                this.positionMenuWrapper.removeChild(button);
+                this.positionMenuWrapper.appendChild(positionMenuButton);
+            }
+        }
+        else {
+            positionMenuWrapper.appendChild(positionMenuButton);
+            this.positionMenuWrapper = positionMenuWrapper;
+            this.location.prepend(this.positionMenuWrapper);
+        }
     }
-    if (icon) {
-        positionMenuButton.innerHTML = icon;
+    getHorizontalPositionOptions(current, onPick, destroy) {
+        const componentProps = {
+            actions: [
+                {
+                    label: 'Left',
+                    action: () => {
+                        destroy();
+                        this.menuOpen = false;
+                        onPick(HorizontalPositions.left);
+                    },
+                    icon: 'ImageLeft',
+                    selected: current === HorizontalPositions.left,
+                },
+                {
+                    label: 'Default',
+                    action: () => {
+                        destroy();
+                        this.menuOpen = false;
+                        onPick(HorizontalPositions.default);
+                    },
+                    icon: 'ImageDefault',
+                    selected: !current,
+                },
+                {
+                    label: 'Right',
+                    action: () => {
+                        destroy();
+                        this.menuOpen = false;
+                        onPick(HorizontalPositions.right);
+                    },
+                    icon: 'ImageRight',
+                    selected: current === HorizontalPositions.right,
+                },
+            ],
+        };
+        return componentProps;
+    }
+    showPositionMenu(force = false) {
+        const p = this.parent;
+        if (this.menuOpen && !force) {
+            p.props.popper.destroy();
+            this.menuOpen = false;
+            return;
+        }
+        const posSource = this.getPositionSource
+            ? this.getPositionSource()
+            : this.parent.node;
+        const componentProps = this.getHorizontalPositionOptions(posSource?.attrs.type || HorizontalPositions.default, this.onChange, p.props.popper.destroy.bind(p.props.popper));
+        createSubViewAsync(p.props, ContextMenu, componentProps, p.node, p.getPos, p.view, ['context-menu', this.posMenuSelector]).then((content) => {
+            if (this.menuOpen && p.props.popper.isActive()) {
+                p.props.popper.replaceContent(content);
+            }
+            else {
+                p.props.popper.show(this.positionMenuWrapper, content, 'left', false, [], true, () => {
+                    this.menuOpen = false;
+                });
+                this.menuOpen = true;
+            }
+        });
     }
-    if (can.editArticle) {
-        positionMenuButton.tabIndex = 0;
-        positionMenuButton.addEventListener('click', onClick);
-        positionMenuButton.addEventListener('keydown', handleEnterKey(onClick));
+    create() {
+        if (!this.parent) {
+            return;
+        }
+        const p = this.parent;
+        if (p.props.getCapabilities()?.editArticle) {
+            const posSource = this.getPositionSource
+                ? this.getPositionSource()
+                : this.parent.node;
+            this.createPositionMenuWrapper(posSource?.attrs.type || HorizontalPositions.default, p.props);
+        }
     }
-    positionMenuWrapper.appendChild(positionMenuButton);
-    return positionMenuWrapper;
-};
+}

package/dist/es/plugins/detect-inconsistency/index.js

@@ -22,10 +22,12 @@ export default (props) => {
         key: detectInconsistencyKey,
         state: {
             init: (_, state) => buildPluginState(state, props, false),
-            apply: (tr, value, newState) => {
-                const showDecorations = tr.getMeta(detectInconsistencyKey) !== undefined
-                    ? tr.getMeta(detectInconsistencyKey)
-                    : value.showDecorations;
+            apply: (tr, value, _, newState) => {
+                const metaValue = tr.getMeta(detectInconsistencyKey);
+                const showDecorations = metaValue !== undefined ? metaValue : value.showDecorations;
+                if (!tr.docChanged && metaValue === undefined) {
+                    return value;
+                }
                 return buildPluginState(newState, props, showDecorations);
             },
         },

package/dist/es/plugins/persist.js

@@ -27,6 +27,9 @@ export default () => {
                 }
                 ids.add(id);
             });
+            if (!tr.steps.length) {
+                return null;
+            }
             skipTracking(tr);
             tr.setMeta('origin', 'persist');
             return tr;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.16.3';
+export const VERSION = '3.17.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/box_element.js

@@ -15,6 +15,7 @@
  */
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import { HorizontalPositionMenu } from '../lib/position-menu';
 export class BoxElementView extends BlockView {
     constructor() {
         super(...arguments);
@@ -23,8 +24,29 @@ export class BoxElementView extends BlockView {
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block box-element';
             this.contentDOM.setAttribute('id', this.node.attrs.id);
-            this.dom.appendChild(this.contentDOM);
+            this.container = document.createElement('div');
+            this.container.classList.add('container');
+            this.container.appendChild(this.contentDOM);
+            this.dom.appendChild(this.container);
         };
     }
+    updateContents() {
+        super.updateContents();
+        this.addTools();
+    }
+    addTools() {
+        this.addPositionMenu();
+    }
+    addPositionMenu() {
+        if (!this.positionMenu) {
+            this.positionMenu = new HorizontalPositionMenu(this, this.updateHorizontalPosition, this.container);
+        }
+        this.positionMenu.create();
+    }
+    updateHorizontalPosition(horizontalPosition) {
+        const tr = this.view.state.tr;
+        tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition);
+        this.view.dispatch(tr);
+    }
 }
 export default createNodeView(BoxElementView);

package/dist/es/views/caption_title.js

@@ -24,7 +24,7 @@ export class CaptionTitleView extends BaseNodeView {
         };
     }
     createDOM() {
-        this.dom = document.createElement('label');
+        this.dom = document.createElement('div');
         this.dom.className = 'caption-title placeholder';
         this.contentDOM = this.dom;
     }

package/dist/es/views/image_element.js

@@ -13,21 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ContextMenu } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import { deleteIcon, linkIcon } from '../icons';
 import { addInteractionHandlers, createMediaPlaceholder, MediaType, } from '../lib/media';
 import { handleEnterKey } from '../lib/navigation-utils';
-import { createPositionMenuWrapper } from '../lib/position-menu';
+import { HorizontalPositionMenu } from '../lib/position-menu';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
-import ReactSubView from './ReactSubView';
-export var figurePositions;
-(function (figurePositions) {
-    figurePositions["left"] = "half-left";
-    figurePositions["right"] = "half-right";
-    figurePositions["default"] = "";
-})(figurePositions || (figurePositions = {}));
 export class ImageElementView extends BlockView {
     constructor() {
         super(...arguments);
@@ -42,46 +34,6 @@ export class ImageElementView extends BlockView {
             this.setExtLink({ extLink: result.id });
             this.updateContents();
         };
-        this.showPositionMenu = () => {
-            const firstFigure = this.getFirstFigure();
-            if (!firstFigure) {
-                return;
-            }
-            this.props.popper.destroy();
-            const options = [
-                {
-                    label: 'Left',
-                    action: () => {
-                        this.props.popper.destroy();
-                        this.updateAllFiguresPosition(figurePositions.left);
-                    },
-                    icon: 'ImageLeft',
-                    selected: this.figurePosition === figurePositions.left,
-                },
-                {
-                    label: 'Default',
-                    action: () => {
-                        this.props.popper.destroy();
-                        this.updateAllFiguresPosition(figurePositions.default);
-                    },
-                    icon: 'ImageDefault',
-                    selected: !this.figurePosition,
-                },
-                {
-                    label: 'Right',
-                    action: () => {
-                        this.props.popper.destroy();
-                        this.updateAllFiguresPosition(figurePositions.right);
-                    },
-                    icon: 'ImageRight',
-                    selected: this.figurePosition === figurePositions.right,
-                },
-            ];
-            const componentProps = {
-                actions: options,
-            };
-            this.props.popper.show(this.positionMenuWrapper, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
-        };
         this.removeExtLink = () => {
             this.setExtLink({ extLink: '' });
         };
@@ -127,18 +79,6 @@ export class ImageElementView extends BlockView {
     addTools() {
         this.addPositionMenu();
     }
-    addPositionMenu() {
-        if (this.props.getCapabilities()?.editArticle) {
-            const existingMenu = this.container.querySelector('.position-menu');
-            if (existingMenu) {
-                existingMenu.remove();
-            }
-            const firstFigure = this.getFirstFigure();
-            this.figurePosition = firstFigure?.attrs.type || figurePositions.default;
-            this.positionMenuWrapper = createPositionMenuWrapper(this.figurePosition, this.showPositionMenu, this.props);
-            this.container.prepend(this.positionMenuWrapper);
-        }
-    }
     getFirstFigure() {
         if (this.node.type === schema.nodes.image_element) {
             const figureNode = this.node.firstChild;
@@ -176,6 +116,12 @@ export class ImageElementView extends BlockView {
         }
         return figures;
     }
+    addPositionMenu() {
+        if (!this.positionMenu) {
+            this.positionMenu = new HorizontalPositionMenu(this, this.updateAllFiguresPosition.bind(this), this.container, () => this.getFirstFigure());
+        }
+        this.positionMenu.create();
+    }
     updateAllFiguresPosition(position) {
         const figures = this.getAllFigures();
         const { tr } = this.view.state;
@@ -186,7 +132,6 @@ export class ImageElementView extends BlockView {
             });
         });
         this.view.dispatch(tr);
-        this.figurePosition = position;
     }
     createDnDPlaceholder() {
         const can = this.props.getCapabilities();

package/dist/es/views/pullquote_element.js

@@ -21,6 +21,7 @@ import { setCommentSelection } from '../plugins/comments';
 import BlockView from './block_view';
 import { createNodeOrElementView } from './creators';
 import ReactSubView from './ReactSubView';
+import { HorizontalPositionMenu } from '../lib/position-menu';
 export class PullquoteElementView extends BlockView {
     constructor() {
         super(...arguments);
@@ -43,7 +44,10 @@ export class PullquoteElementView extends BlockView {
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block';
             this.contentDOM.classList.add('pullquote');
-            this.dom.appendChild(this.contentDOM);
+            this.container = document.createElement('div');
+            this.container.classList.add('container');
+            this.container.appendChild(this.contentDOM);
+            this.dom.appendChild(this.container);
             this.dom.addEventListener('click', this.handleClick);
         };
         this.actionGutterButtons = () => {
@@ -78,5 +82,23 @@ export class PullquoteElementView extends BlockView {
         tr.insert(this.getPos() + 1, schema.nodes.quote_image.create());
         this.view.dispatch(tr);
     }
+    updateContents() {
+        super.updateContents();
+        this.addTools();
+    }
+    addTools() {
+        this.addPositionMenu();
+    }
+    addPositionMenu() {
+        if (!this.positionMenu) {
+            this.positionMenu = new HorizontalPositionMenu(this, this.updateHorizontalPosition, this.container);
+        }
+        this.positionMenu.create();
+    }
+    updateHorizontalPosition(horizontalPosition) {
+        const tr = this.view.state.tr;
+        tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition);
+        this.view.dispatch(tr);
+    }
 }
 export default createNodeOrElementView(PullquoteElementView, 'aside');