@manuscripts/body-editor 3.16.3 → 3.17.1

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.3",
+  "version": "3.17.1",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -43,7 +43,7 @@
     "@iarna/word-count": "1.1.2",
     "@manuscripts/style-guide": "3.7.1",
     "@manuscripts/track-changes-plugin": "2.4.0",
-    "@manuscripts/transform": "4.5.1",
+    "@manuscripts/transform": "4.5.2",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

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,9 @@ export class PopperManager {
     placement: Placement = 'bottom',
     showArrow = true,
     modifiers: Array<Partial<StrictModifiers>> = [],
-    autoFocus = true
+    autoFocus = true,
+    autoCloseOnOutsideClick = true,
+    onDestroy: ((i: Instance) => void) | undefined = undefined
   ) {
     // destroy any existing popper first
     // checking activePopper is in destroy() method
@@ -42,6 +45,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')
@@ -111,9 +115,10 @@ export class PopperManager {
       // add EventListener for checking if click was done outside of editor
       // only if popper has class 'context-menu'
       if (
-        contents.classList.contains('context-menu') ||
-        contents.classList.contains('language') ||
-        contents.classList.contains('section-category')
+        (contents.classList.contains('context-menu') ||
+          contents.classList.contains('language') ||
+          contents.classList.contains('section-category')) &&
+        autoCloseOnOutsideClick
       ) {
         window.addEventListener('click', this.handleDocumentClick)
       }
@@ -125,6 +130,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 +153,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) {

package/src/lib/position-menu.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
+import { ContextMenu } from '@manuscripts/style-guide'
 import {
   ManuscriptEditorView,
   ManuscriptNode,
@@ -23,10 +23,16 @@ import {
 
 import { EditorProps } from '../configs/ManuscriptsEditor'
 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'
+import BlockView from '../views/block_view'
+
+export enum HorizontalPositions {
+  left = 'half-left',
+  right = 'half-right',
+  default = '',
+}
 
 export interface PopperMenuPositionOption {
   label: string
@@ -35,150 +41,250 @@ export interface PopperMenuPositionOption {
   selected: boolean
 }
 
-export const createPositionOptions = <T extends ManuscriptNode>(
-  nodeType: ManuscriptNodeType,
-  node: T,
-  currentPosition: string,
-  view: ManuscriptEditorView,
-  onComplete?: () => void
-) => {
-  const createAction = (position: string) => () => {
-    onComplete?.()
-    updateNodeAttrs(view, nodeType, {
-      ...node.attrs,
-      type: position,
-    })
+export class HorizontalPositionMenu {
+  private parent: BlockView<ManuscriptNode>
+
+  menuOpen: boolean = false
+  posMenuSelector = 'position-menu'
+  onChange: (newPos: HorizontalPositions) => void
+  positionMenuWrapper: HTMLDivElement
+  location: HTMLElement
+  getPositionSource?: () => ManuscriptNode | null
+
+  constructor(
+    parent: BlockView<ManuscriptNode>,
+    onChange: (newPos: HorizontalPositions) => void,
+    location?: HTMLElement,
+    getPositionSource?: () => ManuscriptNode | null // if different from parent as in figure element case
+  ) {
+    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
   }
 
-  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,
-    },
-  ]
-}
+  static createPositionOptions<T extends ManuscriptNode>(
+    nodeType: ManuscriptNodeType,
+    node: T,
+    currentPosition: string,
+    view: ManuscriptEditorView,
+    onComplete?: () => void
+  ) {
+    const createAction = (position: string) => () => {
+      onComplete?.()
+      updateNodeAttrs(view, nodeType, {
+        ...node.attrs,
+        type: position,
+      })
+    }
 
-export const createPopperMenuPositionOptions = <T extends ManuscriptNode>(
-  nodeType: ManuscriptNodeType,
-  node: T,
-  currentPosition: string,
-  view: ManuscriptEditorView,
-  onComplete?: () => void
-): PopperMenuPositionOption[] => {
-  return createPositionOptions(
-    nodeType,
-    node,
-    currentPosition,
-    view,
-    onComplete
-  ).map((option) => ({
-    label: option.title,
-    action: option.action,
-    icon: option.iconName,
-    selected: option.selected,
-  }))
-}
+    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,
+      },
+    ]
+  }
 
-export const showPositionMenu = <T extends ManuscriptNode>(
-  nodeType: ManuscriptNodeType,
-  node: T,
-  currentPosition: string,
-  positionMenuWrapper: HTMLElement,
-  view: ManuscriptEditorView,
-  getPos: () => number,
-  props: EditorProps
-) => {
-  props.popper.destroy()
-
-  const options = createPopperMenuPositionOptions(
-    nodeType,
-    node,
-    currentPosition,
-    view,
-    () => props.popper.destroy()
-  )
-
-  const componentProps: ContextMenuProps = {
-    actions: options,
+  createPopperMenuPositionOptions<T extends ManuscriptNode>(
+    nodeType: ManuscriptNodeType,
+    node: T,
+    currentPosition: string,
+    view: ManuscriptEditorView,
+    onComplete?: () => void
+  ): PopperMenuPositionOption[] {
+    return HorizontalPositionMenu.createPositionOptions(
+      nodeType,
+      node,
+      currentPosition,
+      view,
+      onComplete
+    ).map((option) => ({
+      label: option.title,
+      action: option.action,
+      icon: option.iconName,
+      selected: option.selected,
+    }))
   }
 
-  props.popper.show(
-    positionMenuWrapper,
-    ReactSubView(props, ContextMenu, componentProps, node, getPos, view, [
-      'context-menu',
-      'position-menu',
-    ]),
-    'left',
-    false
-  )
-}
+  buttonClass = 'position-menu-button'
+
+  createPositionMenuWrapper(currentPosition: string, props: EditorProps) {
+    const can = props.getCapabilities()
+    const positionMenuWrapper = document.createElement('div')
+    positionMenuWrapper.classList.add(this.posMenuSelector)
+
+    const positionMenuButton = document.createElement('div')
+    positionMenuButton.classList.add(this.buttonClass)
 
-export const setElementPositionAlignment = (
-  element: HTMLElement,
-  position: string
-): void => {
-  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
+    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)
+    }
   }
-}
 
-export const createPositionMenuWrapper = (
-  currentPosition: string,
-  onClick: () => void,
-  props: EditorProps
-): HTMLDivElement => {
-  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
+  getHorizontalPositionOptions(
+    current: string,
+    onPick: (newPos: HorizontalPositions) => void,
+    destroy: () => void
+  ) {
+    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
   }
-  if (icon) {
-    positionMenuButton.innerHTML = icon
+
+  showPositionMenu(force = false) {
+    const p = this.parent
+
+    if (this.menuOpen && !force) {
+      // Toggle off on click
+      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,
+          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
 }