@manuscripts/body-editor 3.16.2 → 3.17.0

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,249 @@ 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,
+          () => {
+            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/src/plugins/detect-inconsistency/index.ts

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

package/src/plugins/persist.ts

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

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.16.2';
+export const VERSION = '3.17.0';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/box_element.ts

@@ -18,15 +18,48 @@ import { BoxElementNode } from '@manuscripts/transform'
 
 import BlockView from './block_view'
 import { createNodeView } from './creators'
+import { HorizontalPositionMenu } from '../lib/position-menu'
 
 export class BoxElementView extends BlockView<BoxElementNode> {
   public elementType = 'div'
+  container: HTMLDivElement
 
   public createElement = () => {
     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)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.addTools()
+  }
+
+  protected addTools() {
+    this.addPositionMenu()
+  }
+
+  private positionMenu: HorizontalPositionMenu
+
+  protected addPositionMenu() {
+    if (!this.positionMenu) {
+      this.positionMenu = new HorizontalPositionMenu(
+        this,
+        this.updateHorizontalPosition,
+        this.container
+      )
+    }
+    this.positionMenu.create()
+  }
+
+  private updateHorizontalPosition(horizontalPosition: string) {
+    const tr = this.view.state.tr
+    tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition)
+    this.view.dispatch(tr)
   }
 }
 

package/src/views/caption_title.ts

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

package/src/views/equation.ts

@@ -20,6 +20,7 @@ import { renderMath } from '../lib/math'
 import { Trackable } from '../types'
 import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
+import { handleEnterKey } from '../lib/navigation-utils'
 
 export class EquationView
   extends BaseNodeView<Trackable<EquationNode>>
@@ -33,6 +34,10 @@ export class EquationView
   public createDOM = () => {
     this.dom = document.createElement('div')
     this.dom.classList.add('equation')
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => this.selectNode())
+    )
   }
 
   public updateContents() {

package/src/views/equation_editable.ts

@@ -38,6 +38,9 @@ export class EquationEditableView extends EquationView {
         Esc: () => {
           this.props.popper.destroy()
           this.view.focus()
+          const tabbableView =
+            this.dom.querySelector<HTMLElement>('[tabindex="0"]')
+          tabbableView?.focus()
         },
       },
     })

package/src/views/image_element.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { ContextMenu } from '@manuscripts/style-guide'
 import { FigureNode, ImageElementNode, schema } from '@manuscripts/transform'
 
 import { deleteIcon, linkIcon } from '../icons'
@@ -24,24 +23,16 @@ import {
   MediaType,
 } from '../lib/media'
 import { handleEnterKey } from '../lib/navigation-utils'
-import { createPositionMenuWrapper } from '../lib/position-menu'
+import { HorizontalPositionMenu } from '../lib/position-menu'
 import { Trackable } from '../types'
 import BlockView from './block_view'
 import { createNodeView } from './creators'
-import ReactSubView from './ReactSubView'
-
-export enum figurePositions {
-  left = 'half-left',
-  right = 'half-right',
-  default = '',
-}
 
 export class ImageElementView extends BlockView<Trackable<ImageElementNode>> {
   public container: HTMLElement
   public subcontainer: HTMLElement
   public extLinkEditorContainer: HTMLDivElement
-  private positionMenuWrapper: HTMLDivElement
-  private figurePosition: string
+  private positionMenu: HorizontalPositionMenu
   private isEditingExtLink = false
 
   public ignoreMutation = () => true
@@ -93,33 +84,12 @@ export class ImageElementView extends BlockView<Trackable<ImageElementNode>> {
     this.addPositionMenu()
   }
 
-  protected addPositionMenu() {
-    if (this.props.getCapabilities()?.editArticle) {
-      // Remove existing position menu if it exists
-      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)
-    }
-  }
-
   /**
    * Gets the first figure node from the element.
    * Optimized for image_element (direct access) vs figure_element (loop through all).
    * @returns The first figure node or null if no figure exists
    */
-  private getFirstFigure(): FigureNode | null {
+  private getFirstFigure() {
     // Optimize for image_element which only has one figure
     if (this.node.type === schema.nodes.image_element) {
       // Direct access to the single figure in image_element
@@ -166,62 +136,16 @@ export class ImageElementView extends BlockView<Trackable<ImageElementNode>> {
     return figures
   }
 
-  private 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,
+  protected addPositionMenu() {
+    if (!this.positionMenu) {
+      this.positionMenu = new HorizontalPositionMenu(
+        this,
+        this.updateAllFiguresPosition.bind(this),
+        this.container,
+        () => this.getFirstFigure()
+      )
     }
-
-    this.props.popper.show(
-      this.positionMenuWrapper,
-      ReactSubView(
-        this.props,
-        ContextMenu,
-        componentProps,
-        this.node,
-        this.getPos,
-        this.view,
-        ['context-menu', 'position-menu']
-      ),
-      'left',
-      false
-    )
+    this.positionMenu.create()
   }
 
   /**
@@ -241,7 +165,6 @@ export class ImageElementView extends BlockView<Trackable<ImageElementNode>> {
     })
 
     this.view.dispatch(tr)
-    this.figurePosition = position
   }
 
   // external link editor