@manuscripts/body-editor 3.16.3 → 3.17.1

package/src/lib/view.ts

@@ -27,6 +27,7 @@ import * as utils from 'prosemirror-utils'
 
 import { isHidden } from './track-changes-utils'
 import { sanitizeAttrsChange } from '@manuscripts/track-changes-plugin'
+import { EditorView } from 'prosemirror-view'
 
 const metaNodeTypes = [
   schema.nodes.bibliography_item,
@@ -163,3 +164,19 @@ export const saveBibliographyItem = (
 
   insertBibliographyItems(view, attrs)
 }
+
+export const isSelectionInsideNode = (
+  view: EditorView,
+  node: ManuscriptNode,
+  pos: number
+) => {
+  const { from, to, empty } = view.state.selection
+  const end = pos + node.nodeSize
+
+  // Treat a cursor as "inside" only when it is strictly within the node range.
+  if (empty) {
+    return from > pos && from < end
+  }
+
+  return from >= pos && to <= end
+}

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.3';
+export const VERSION = '3.17.1';
 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/footnote.ts

@@ -19,6 +19,7 @@ import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
 import { FootnoteNode, ManuscriptNode, schema } from '@manuscripts/transform'
 
 import isEqual from 'lodash/isEqual'
+import xor from 'lodash/xor'
 import { NodeSelection, Transaction } from 'prosemirror-state'
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
 
@@ -33,10 +34,13 @@ import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
 import ReactSubView from './ReactSubView'
 import { handleEnterKey } from '../lib/navigation-utils'
+import { isSelectionInsideNode } from '../lib/view'
 
 export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
   dialog: HTMLElement
   contextMenu: HTMLDivElement
+  isMenuShown: boolean = false
+  previousActionsLabels: string[] = []
 
   public initialise = () => {
     this.dom = document.createElement('div')
@@ -44,10 +48,24 @@ export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     this.dom.tabIndex = 0
     this.contentDOM = document.createElement('div')
     this.contentDOM.classList.add('footnote-text')
-    this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false))
+    if (!this.view.editable) {
+      // when the editor is in the viewing mode we can't depend on the selection to show context-menu so we use mousedown
+      // as in that case will not have the same listener from prosemirror-view to interfere with it
+      const actions = this.getContextMenuActions()
+      if (actions.length > 0) {
+        this.dom.addEventListener('mousedown', () =>
+          this.showContextMenu(actions, true)
+        )
+      }
+    }
     this.dom.addEventListener(
       'keydown',
-      handleEnterKey((e) => this.handleClick(e, true))
+      handleEnterKey(() => {
+        const actions = this.getContextMenuActions()
+        if (actions.length > 0) {
+          this.showContextMenu(actions, true)
+        }
+      })
     )
     this.updateContents()
   }
@@ -73,6 +91,29 @@ export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     this.dom.innerHTML = ''
     this.dom.appendChild(marker)
     this.contentDOM && this.dom.appendChild(this.contentDOM)
+
+    const selectionInsideNode = isSelectionInsideNode(
+      this.view,
+      this.node,
+      this.getPos()
+    )
+
+    const actions = this.getContextMenuActions()
+    const hasActions = actions.length > 0
+    const currentLabels = actions.map(({ label }) => label)
+    const changedLabels = xor(currentLabels, this.previousActionsLabels)
+    if (
+      selectionInsideNode &&
+      hasActions &&
+      (!this.isMenuShown || changedLabels.length > 0)
+    ) {
+      this.showContextMenu(actions, false)
+      this.previousActionsLabels = actions.map(({ label }) => label)
+    } else if ((!hasActions || !selectionInsideNode) && this.isMenuShown) {
+      this.props.popper.destroy()
+      this.isMenuShown = false
+      this.previousActionsLabels = []
+    }
   }
 
   getFootnoteState() {
@@ -81,55 +122,50 @@ export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     return { id, fn }
   }
 
-  showContextMenu(element: HTMLElement, autoFocus: boolean) {
+  showContextMenu(actions: ContextMenuProps['actions'], autoFocus: boolean) {
+    this.isMenuShown = true
     this.props.popper.destroy()
-
-    const can = this.props.getCapabilities()
-    const { id, fn } = this.getFootnoteState()
-
-    const componentProps: ContextMenuProps = {
-      actions: [],
-    }
-    if (!fn?.unusedFootnoteIDs.has(id)) {
-      componentProps.actions.push({
-        label: 'Go to footnote Refernce',
-        action: () => this.handleMarkerClick(),
-        icon: 'Scroll',
-      })
-    }
-    if (can.editArticle && !isDeleted(this.node)) {
-      componentProps.actions.push({
-        label: 'Delete',
-        action: () => this.handleDeleteClick(),
-        icon: 'Delete',
-      })
-    }
-
     this.contextMenu = ReactSubView(
       this.props,
       ContextMenu,
-      componentProps,
+      { actions },
       this.node,
       this.getPos,
       this.view,
       ['context-menu', 'footnote-context-menu']
     )
     this.props.popper.show(
-      element,
+      this.dom,
       this.contextMenu,
       'right-start',
       true,
       [],
-      autoFocus
+      autoFocus,
+      false
     )
   }
 
-  handleClick = (event: Event, fromKeyboard = false) => {
-    const element = event.target as HTMLElement
-    const item = element.closest('.footnote')
-    if (item) {
-      this.showContextMenu(item as HTMLElement, fromKeyboard)
+  getContextMenuActions() {
+    const can = this.props.getCapabilities()
+    const { id, fn } = this.getFootnoteState()
+    const actions: ContextMenuProps['actions'] = []
+
+    if (!fn?.unusedFootnoteIDs.has(id)) {
+      actions.push({
+        label: 'Go to footnote Reference',
+        action: () => this.handleMarkerClick(),
+        icon: 'Scroll',
+      })
+    }
+    if (can.editArticle && !isDeleted(this.node)) {
+      actions.push({
+        label: 'Delete',
+        action: () => this.handleDeleteClick(),
+        icon: 'Delete',
+      })
     }
+
+    return actions
   }
 
   handleMarkerClick = (e?: Event) => {

package/src/views/general_table_footnote.ts

@@ -30,17 +30,30 @@ import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
 import ReactSubView from './ReactSubView'
 import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { isSelectionInsideNode } from '../lib/view'
 
 export class GeneralTableFootnoteView extends BaseNodeView<
   Trackable<GeneralTableFootnoteNode>
 > {
   dialog: HTMLElement
   contextMenu: HTMLDivElement
+  isMenuShown: boolean = false
 
   public initialise = () => {
     this.dom = document.createElement('div')
     this.dom.classList.add('footnote', 'general-table-footnote')
-    this.dom.addEventListener('mousedown', this.handleClick)
+    this.dom.tabIndex = 0
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => {
+        const can = this.props.getCapabilities()
+        const canShowMenu = can.editArticle && !isDeleted(this.node)
+        if (canShowMenu) {
+          this.showContextMenu(true)
+        }
+      })
+    )
     this.contentDOM = document.createElement('div')
     this.contentDOM.classList.add('footnote-text')
     this.updateContents()
@@ -50,32 +63,34 @@ export class GeneralTableFootnoteView extends BaseNodeView<
     super.updateContents()
     this.dom.innerHTML = ''
     this.contentDOM && this.dom.appendChild(this.contentDOM)
-  }
 
-  handleClick = (e: Event) => {
-    const element = e.target as HTMLElement
+    const selectionInsideNode = isSelectionInsideNode(
+      this.view,
+      this.node,
+      this.getPos()
+    )
     const can = this.props.getCapabilities()
-
-    if (can.editArticle) {
-      const item = element.closest('.general-table-footnote')
-      if (item) {
-        this.showContextMenu(item as HTMLElement)
-      }
+    const canShowMenu = can.editArticle && !isDeleted(this.node)
+    if (canShowMenu && selectionInsideNode && !this.isMenuShown) {
+      this.showContextMenu(false)
+    } else if ((!canShowMenu || !selectionInsideNode) && this.isMenuShown) {
+      this.props.popper.destroy()
+      this.isMenuShown = false
     }
   }
 
-  showContextMenu(element: HTMLElement) {
+  showContextMenu(autoFocus = false) {
+    this.isMenuShown = true
     this.props.popper.destroy()
 
     const componentProps: ContextMenuProps = {
-      actions: [],
-    }
-    if (!isDeleted(this.node)) {
-      componentProps.actions.push({
-        label: 'Delete',
-        action: () => this.handleDeleteClick(),
-        icon: 'Delete',
-      })
+      actions: [
+        {
+          label: 'Delete',
+          action: () => this.handleDeleteClick(),
+          icon: 'Delete',
+        },
+      ],
     }
 
     this.contextMenu = ReactSubView(
@@ -87,7 +102,15 @@ export class GeneralTableFootnoteView extends BaseNodeView<
       this.view,
       ['context-menu', 'footnote-context-menu']
     )
-    this.props.popper.show(element, this.contextMenu, 'right-start')
+    this.props.popper.show(
+      this.dom,
+      this.contextMenu,
+      'right-start',
+      false,
+      [],
+      autoFocus,
+      false
+    )
   }
 
   handleDeleteClick = () => {

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

package/src/views/pullquote_element.ts

@@ -24,10 +24,13 @@ 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<PullquoteElementNode> {
   public elementType = 'aside'
   contextMenu: HTMLElement
+  container: HTMLDivElement
+  private positionMenu: HorizontalPositionMenu
 
   public ignoreMutation = () => true
   public stopEvent = () => true
@@ -51,7 +54,10 @@ export class PullquoteElementView extends BlockView<PullquoteElementNode> {
     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)
 
     // Add click event listener to handle comment marker clicks
     this.dom.addEventListener('click', this.handleClick)
@@ -96,11 +102,37 @@ export class PullquoteElementView extends BlockView<PullquoteElementNode> {
     return undefined
   }
 
+  public updateContents() {
+    super.updateContents()
+    this.addTools()
+  }
+
   public destroy = () => {
     // Clean up event listener
     this.dom.removeEventListener('click', this.handleClick)
     super.destroy()
   }
+
+  protected addTools() {
+    this.addPositionMenu()
+  }
+
+  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)
+  }
 }
 
 export default createNodeOrElementView(PullquoteElementView, 'aside')

package/src/views/table_element.ts

@@ -18,15 +18,48 @@ import { TableElementNode } from '@manuscripts/transform'
 
 import BlockView from './block_view'
 import { createNodeView } from './creators'
+import { HorizontalPositionMenu } from '../lib/position-menu'
 
 export class TableElementView extends BlockView<TableElementNode> {
   public elementType = 'figure'
+  container: HTMLDivElement
+  private positionMenu: HorizontalPositionMenu
 
   public createElement = () => {
     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)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.addTools()
+  }
+
+  protected addTools() {
+    this.addPositionMenu()
+  }
+
+  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)
   }
 }