@manuscripts/body-editor 3.16.2 → 3.17.0

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/inline_equation.js

@@ -16,6 +16,7 @@
 import { renderMath } from '../lib/math';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
+import { handleEnterKey } from '../lib/navigation-utils';
 export class InlineEquationView extends BaseNodeView {
     constructor() {
         super(...arguments);
@@ -24,6 +25,7 @@ export class InlineEquationView extends BaseNodeView {
     initialise() {
         this.createDOM();
         this.updateContents();
+        this.dom.addEventListener('keydown', handleEnterKey(() => this.selectNode()));
     }
     updateContents() {
         super.updateContents();

package/dist/es/views/inline_equation_editable.js

@@ -34,6 +34,8 @@ export class InlineEquationEditableView extends InlineEquationView {
                     Esc: () => {
                         this.props.popper.destroy();
                         this.view.focus();
+                        const tabbableView = this.dom.querySelector('[tabindex="0"]');
+                        tabbableView?.focus();
                     },
                 },
             });

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');

package/dist/es/views/table_element.js

@@ -15,6 +15,7 @@
  */
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import { HorizontalPositionMenu } from '../lib/position-menu';
 export class TableElementView extends BlockView {
     constructor() {
         super(...arguments);
@@ -23,8 +24,29 @@ export class TableElementView extends BlockView {
             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 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(TableElementView);

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

@@ -13,16 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Placement, StrictModifiers } from '@popperjs/core';
+import { Instance, Placement, StrictModifiers } from '@popperjs/core';
 export declare class PopperManager {
     private activePopper?;
     private handleDocumentClick?;
     private triggerElement?;
     private container?;
-    show(target: Element, contents: HTMLElement, placement?: Placement, showArrow?: boolean, modifiers?: Array<Partial<StrictModifiers>>, autoFocus?: boolean): void;
+    private destructionListener?;
+    show(target: Element, contents: HTMLElement, placement?: Placement, showArrow?: boolean, modifiers?: Array<Partial<StrictModifiers>>, autoFocus?: boolean, onDestroy?: ((i: Instance) => void) | undefined): void;
     destroy(): void;
     getContainer(): HTMLElement | undefined;
     update(): void;
+    replaceContent(newContent: HTMLElement): void;
     isActive: () => boolean;
     private focusInput;
     private addContainerClass;

package/dist/types/lib/position-menu.d.ts

@@ -15,20 +15,45 @@
  */
 import { ManuscriptEditorView, ManuscriptNode, ManuscriptNodeType } from '@manuscripts/transform';
 import { EditorProps } from '../configs/ManuscriptsEditor';
+import BlockView from '../views/block_view';
+export declare enum HorizontalPositions {
+    left = "half-left",
+    right = "half-right",
+    default = ""
+}
 export interface PopperMenuPositionOption {
     label: string;
     action: () => void;
     icon: string;
     selected: boolean;
 }
-export declare const createPositionOptions: <T extends ManuscriptNode>(nodeType: ManuscriptNodeType, node: T, currentPosition: string, view: ManuscriptEditorView, onComplete?: () => void) => {
-    title: string;
-    action: () => void;
-    IconComponent: string;
-    iconName: string;
-    selected: boolean;
-}[];
-export declare const createPopperMenuPositionOptions: <T extends ManuscriptNode>(nodeType: ManuscriptNodeType, node: T, currentPosition: string, view: ManuscriptEditorView, onComplete?: () => void) => PopperMenuPositionOption[];
-export declare const showPositionMenu: <T extends ManuscriptNode>(nodeType: ManuscriptNodeType, node: T, currentPosition: string, positionMenuWrapper: HTMLElement, view: ManuscriptEditorView, getPos: () => number, props: EditorProps) => void;
-export declare const setElementPositionAlignment: (element: HTMLElement, position: string) => void;
-export declare const createPositionMenuWrapper: (currentPosition: string, onClick: () => void, props: EditorProps) => HTMLDivElement;
+export declare class HorizontalPositionMenu {
+    private parent;
+    menuOpen: boolean;
+    posMenuSelector: string;
+    onChange: (newPos: HorizontalPositions) => void;
+    positionMenuWrapper: HTMLDivElement;
+    location: HTMLElement;
+    getPositionSource?: () => ManuscriptNode | null;
+    constructor(parent: BlockView<ManuscriptNode>, onChange: (newPos: HorizontalPositions) => void, location?: HTMLElement, getPositionSource?: () => ManuscriptNode | null);
+    static createPositionOptions<T extends ManuscriptNode>(nodeType: ManuscriptNodeType, node: T, currentPosition: string, view: ManuscriptEditorView, onComplete?: () => void): {
+        title: string;
+        action: () => void;
+        IconComponent: string;
+        iconName: string;
+        selected: boolean;
+    }[];
+    createPopperMenuPositionOptions<T extends ManuscriptNode>(nodeType: ManuscriptNodeType, node: T, currentPosition: string, view: ManuscriptEditorView, onComplete?: () => void): PopperMenuPositionOption[];
+    buttonClass: string;
+    createPositionMenuWrapper(currentPosition: string, props: EditorProps): void;
+    getHorizontalPositionOptions(current: string, onPick: (newPos: HorizontalPositions) => void, destroy: () => void): {
+        actions: {
+            label: string;
+            action: () => void;
+            icon: string;
+            selected: boolean;
+        }[];
+    };
+    showPositionMenu(force?: boolean): void;
+    create(): void;
+}

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.16.2";
+export declare const VERSION = "3.17.0";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -17,7 +17,13 @@ import { BoxElementNode } from '@manuscripts/transform';
 import BlockView from './block_view';
 export declare class BoxElementView extends BlockView<BoxElementNode> {
     elementType: string;
+    container: HTMLDivElement;
     createElement: () => void;
+    updateContents(): void;
+    protected addTools(): void;
+    private positionMenu;
+    protected addPositionMenu(): void;
+    private updateHorizontalPosition;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<BoxElementView>;
 export default _default;

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

@@ -16,17 +16,11 @@
 import { ImageElementNode } from '@manuscripts/transform';
 import { Trackable } from '../types';
 import BlockView from './block_view';
-export declare enum figurePositions {
-    left = "half-left",
-    right = "half-right",
-    default = ""
-}
 export declare class ImageElementView extends BlockView<Trackable<ImageElementNode>> {
     container: HTMLElement;
     subcontainer: HTMLElement;
     extLinkEditorContainer: HTMLDivElement;
-    private positionMenuWrapper;
-    private figurePosition;
+    private positionMenu;
     private isEditingExtLink;
     ignoreMutation: () => boolean;
     upload: (file: File) => Promise<void>;
@@ -35,10 +29,9 @@ export declare class ImageElementView extends BlockView<Trackable<ImageElementNo
     createElement(): void;
     updateContents(): void;
     protected addTools(): void;
-    protected addPositionMenu(): void;
     private getFirstFigure;
     private getAllFigures;
-    private showPositionMenu;
+    protected addPositionMenu(): void;
     private updateAllFiguresPosition;
     private removeExtLink;
     private setExtLink;

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

@@ -18,6 +18,8 @@ import BlockView from './block_view';
 export declare class PullquoteElementView extends BlockView<PullquoteElementNode> {
     elementType: string;
     contextMenu: HTMLElement;
+    container: HTMLDivElement;
+    private positionMenu;
     ignoreMutation: () => boolean;
     stopEvent: () => boolean;
     private handleClick;
@@ -25,7 +27,11 @@ export declare class PullquoteElementView extends BlockView<PullquoteElementNode
     handleAddFigure(): void;
     actionGutterButtons: () => HTMLElement[];
     addFigureContextMenu: () => HTMLElement | undefined;
+    updateContents(): void;
     destroy: () => void;
+    protected addTools(): void;
+    protected addPositionMenu(): void;
+    private updateHorizontalPosition;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps) => import("../types").NodeViewCreator<PullquoteElementView>;
 export default _default;

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

@@ -17,7 +17,13 @@ import { TableElementNode } from '@manuscripts/transform';
 import BlockView from './block_view';
 export declare class TableElementView extends BlockView<TableElementNode> {
     elementType: string;
+    container: HTMLDivElement;
+    private positionMenu;
     createElement: () => void;
+    updateContents(): void;
+    protected addTools(): void;
+    protected addPositionMenu(): void;
+    private updateHorizontalPosition;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<TableElementView>;
 export default _default;

package/package.json

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

package/src/lib/context-menu.ts

@@ -42,7 +42,7 @@ import {
   insertInlineTableFootnote,
 } from '../commands'
 import { PopperManager } from './popper'
-import { createPositionOptions } from './position-menu'
+import { HorizontalPositionMenu } from './position-menu'
 import { templateAllows } from './template'
 import {
   getMatchingChild,
@@ -59,9 +59,18 @@ const readonlyTypes = [
   schema.nodes.footnotes_section,
 ]
 
-const isBoxElementSectionTitle = ($pos: ResolvedPos, node: ManuscriptNode) =>
-  isSectionTitleNode(node) &&
-  $pos.node($pos.depth - 1).type === schema.nodes.box_element
+const getBoxElementOfSectionTitle = (
+  $pos: ResolvedPos,
+  node: ManuscriptNode
+) => {
+  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: number) => {
   switch (depth) {
@@ -245,31 +254,43 @@ export class ContextMenu {
     menu.className = 'menu'
 
     const $pos = this.resolvePos()
-    const isBox = isBoxElementSectionTitle($pos, this.node)
-    const type = isBox ? schema.nodes.box_element : this.node.type
+    const boxParent = getBoxElementOfSectionTitle($pos, this.node)
+    const type = boxParent ? schema.nodes.box_element : this.node.type
 
-    if (
-      type === schema.nodes.figure_element ||
-      type === schema.nodes.image_element
-    ) {
+    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) {

package/src/lib/popper.ts

@@ -27,6 +27,7 @@ export class PopperManager {
   private handleDocumentClick?: (e: Event) => void
   private triggerElement?: Element
   private container?: HTMLElement
+  private destructionListener?: (i: Instance) => void
 
   public show(
     target: Element,
@@ -34,7 +35,8 @@ export class PopperManager {
     placement: Placement = 'bottom',
     showArrow = true,
     modifiers: Array<Partial<StrictModifiers>> = [],
-    autoFocus = true
+    autoFocus = true,
+    onDestroy: ((i: Instance) => void) | undefined = undefined
   ) {
     // destroy any existing popper first
     // checking activePopper is in destroy() method
@@ -42,6 +44,7 @@ export class PopperManager {
 
     // Store the trigger element to return focus later
     this.triggerElement = target
+    this.destructionListener = onDestroy
 
     window.requestAnimationFrame(() => {
       const container = document.createElement('div')
@@ -125,6 +128,8 @@ export class PopperManager {
       this.removeContainerClass(
         this.activePopper.state.elements.reference as Element
       )
+      this.destructionListener?.(this.activePopper)
+      this.destructionListener = undefined
       this.activePopper.destroy()
       this.activePopper.state.elements.popper.remove()
       if (this.handleDocumentClick) {
@@ -146,6 +151,18 @@ export class PopperManager {
     }
   }
 
+  public replaceContent(newContent: HTMLElement) {
+    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()
+    }
+  }
+
   public isActive = () => !!this.activePopper
 
   private focusInput(container: HTMLDivElement, autoFocus = true) {