@manuscripts/body-editor 3.13.10 → 3.13.12

package/src/commands.ts

@@ -925,6 +925,33 @@ export const insertBoxElement = (
   return true
 }
 
+export const insertHeadshotGrid = (
+  state: ManuscriptEditorState,
+  dispatch?: Dispatch
+) => {
+  const selection = state.selection
+  const { nodes } = schema
+
+  const isBody = hasParentNodeOfType(nodes.body)(selection)
+  if (!isBody) {
+    return false
+  }
+
+  const position = findBlockInsertPosition(state)
+
+  if (position && dispatch) {
+    const headshotElement =
+      schema.nodes.headshot_element.createAndFill() as ManuscriptNode
+    const node = nodes.headshot_grid.create({}, headshotElement)
+    const tr = state.tr.insert(position, node)
+    const headshotNamePosition = position + 2
+    tr.setSelection(TextSelection.create(tr.doc, headshotNamePosition))
+    dispatch(tr.scrollIntoView())
+  }
+
+  return true
+}
+
 export const insertSection =
   (subsection = false) =>
   (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => {

package/src/components/views/FigureDropdown.tsx

@@ -184,6 +184,17 @@ export const FigureOptions: React.FC<WrappedProps> = ({
 
   useDropdownKeyboardNav(isOpen, dropdownRef, toggleOpen)
 
+  const hasAnyActions =
+    !!showDownload ||
+    !!showUpload ||
+    !!showDetach ||
+    !!showReplace ||
+    showDelete()
+
+  if (!hasAnyActions) {
+    return null
+  }
+
   const isEmbedMode = !!onReplaceEmbed
 
   const groupFiles = memoGroupFiles()

package/src/configs/editor-views.ts

@@ -45,6 +45,9 @@ import footnote from '../views/footnote'
 import footnotesElement from '../views/footnotes_element'
 import generalTableFootnote from '../views/general_table_footnote'
 import heroImage from '../views/hero_image_editable'
+import headshotGrid from '../views/headshot_grid_editable'
+import headshotElement from '../views/headshot_element'
+import headshotImage from '../views/headshot_image_editable'
 import imageElement from '../views/image_element_editable'
 import inlineEquation from '../views/inline_equation_editable'
 import inlineFootnote from '../views/inline_footnote_editable'
@@ -130,6 +133,9 @@ export default (
     long_desc: accessibilityElement(props, dispatch),
     alt_text: accessibilityElement(props, dispatch),
     hero_image: heroImage(props, dispatch),
+    headshot_grid: headshotGrid(props, dispatch),
+    headshot_element: headshotElement(props, dispatch),
+    headshot_image: headshotImage(props, dispatch),
     abstracts: abstracts(props),
     trans_abstract: transAbstract(props),
     trans_graphical_abstract: transGraphicalAbstract(props),

package/src/icons.ts

@@ -18,6 +18,7 @@ import {
   AlertIcon,
   ArrowDownCircleIcon,
   ArrowUpIcon,
+  CameraIcon,
   DeleteIcon,
   DraggableIcon,
   EditIcon,
@@ -44,6 +45,7 @@ export const addAuthorIcon = renderIcon(AddAuthorIcon)
 export const arrowDown = renderIcon(ArrowDownCircleIcon)
 export const arrowUp = renderIcon(ArrowUpIcon)
 export const alertIcon = renderIcon(AlertIcon)
+export const cameraIcon = renderIcon(CameraIcon)
 export const deleteIcon = renderIcon(DeleteIcon)
 export const editIcon = renderIcon(EditIcon)
 export const sectionCategoryIcon = renderIcon(SectionCategoryIcon)

package/src/lib/files.ts

@@ -69,6 +69,7 @@ const figureTypes = [
   schema.nodes.figure_element,
   schema.nodes.image_element,
   schema.nodes.hero_image,
+  schema.nodes.headshot_grid,
   schema.nodes.embed,
 ]
 
@@ -119,7 +120,12 @@ export const groupFiles = (
         })
       }
     } else {
-      for (const figure of findChildrenByType(node, schema.nodes.figure)) {
+      const descend = node.type === schema.nodes.headshot_grid
+      const figureNodeType =
+        node.type === schema.nodes.headshot_grid
+          ? schema.nodes.headshot_image
+          : schema.nodes.figure
+      for (const figure of findChildrenByType(node, figureNodeType, descend)) {
         if (isHidden(figure.node)) {
           continue
         }

package/src/menus.tsx

@@ -40,6 +40,7 @@ import {
   insertCrossReference,
   insertEmbed,
   insertGraphicalAbstract,
+  insertHeadshotGrid,
   insertHeroImage,
   insertInlineCitation,
   insertInlineEquation,
@@ -333,6 +334,15 @@ export const getEditorMenus = (
         run: doCommand(insertBoxElement),
         isHidden: !templateAllows(state, schema.nodes.box_element),
       },
+      {
+        id: 'insert-headshot-grid',
+        label: 'Headshot Panel',
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.headshot_grid)),
+        run: doCommand(insertHeadshotGrid),
+        isHidden: !templateAllows(state, schema.nodes.headshot_grid),
+      },
       {
         role: 'separator',
       },

package/src/node-type-icons.tsx

@@ -15,9 +15,11 @@
  */
 
 import {
+  AvatarIcon,
   FileDocumentIcon,
   SupplementsIcon,
   FileImageIcon,
+  FileHeadshotGridIcon,
   OutlineBlockQuoteIcon,
   OutlineEmbedIcon,
   OutlineEquationIcon,
@@ -36,6 +38,14 @@ import React from 'react'
 
 const { nodes } = schema
 
+const OutlineHeadshotGridIcon: React.FC = () => (
+  <FileHeadshotGridIcon width="12" height="12" />
+)
+
+const OutlineHeadshotElementIcon: React.FC = () => (
+  <AvatarIcon width="16" height="16" />
+)
+
 const OutlineImageIcon: React.FC = () => (
   <FileImageIcon width="11" height="14" />
 )
@@ -67,6 +77,8 @@ const icons: Map<
   [nodes.hero_image, OutlineImageIcon],
   [nodes.supplements, OutlineSupplementsIcon],
   [nodes.attachments, OutlineMainDocumentIcon],
+  [nodes.headshot_grid, OutlineHeadshotGridIcon],
+  [nodes.headshot_element, OutlineHeadshotElementIcon],
 ])
 
 export const nodeTypeIcon = (nodeType: NodeType, listType?: string) => {

package/src/plugins/accessibility_element.ts

@@ -71,7 +71,10 @@ const isSelectionWithin = (
 const buildExpandButtonDecorations = (doc: ManuscriptNode) => {
   const decorations: Decoration[] = []
   doc.descendants((node, pos) => {
-    if (node.type.spec.content?.includes('alt_text')) {
+    if (
+      node.type !== schema.nodes.headshot_element &&
+      node.type.spec.content?.includes('alt_text')
+    ) {
       decorations.push(
         Decoration.widget(
           pos + node.nodeSize - 1,

package/src/versions.ts

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

package/src/views/accessibility_element.ts

@@ -19,11 +19,18 @@ import { TextSelection } from 'prosemirror-state'
 import { createKeyboardInteraction } from '../lib/navigation-utils'
 import BlockView from './block_view'
 import { createNodeView } from './creators'
+import empty from './empty'
 export class AccessibilityElementView extends BlockView<LongDescNode> {
   public contentDOM: HTMLElement
   private removeKeydownListener?: () => void
 
   public initialise() {
+    const $pos = this.view.state.doc.resolve(this.getPos())
+    if ($pos.parent.type === schema.nodes.headshot_element) {
+      const { dom } = empty('accessibility_element')()
+      this.dom = dom
+      return
+    }
     this.createDOM()
     this.createElement()
     this.updateContents()
@@ -45,7 +52,6 @@ export class AccessibilityElementView extends BlockView<LongDescNode> {
   public createElement() {
     super.createElement()
     this.contentDOM.className = 'accessibility_element_input'
-    this.contentDOM.setAttribute('contenteditable', 'true')
 
     this.contentDOM.tabIndex = this.node.type === schema.nodes.alt_text ? 0 : -1
 

package/src/views/affiliations.ts

@@ -52,7 +52,6 @@ export class AffiliationsView extends BlockView<Trackable<AffiliationNode>> {
     this.container = document.createElement('div')
     this.container.classList.add('affiliations', 'block')
     this.container.contentEditable = 'false'
-    this.container.addEventListener('click', this.handleClick)
     this.dom.setAttribute('contenteditable', 'false')
     this.dom.appendChild(this.container)
   }
@@ -75,6 +74,12 @@ export class AffiliationsView extends BlockView<Trackable<AffiliationNode>> {
   }
 
   private buildAffiliations(affs: PluginState) {
+    const can = this.props.getCapabilities()
+    this.container.removeEventListener('click', this.handleClick)
+    if (can.editMetadata) {
+      this.container.addEventListener('click', this.handleClick)
+    }
+
     const elements = []
     for (const affiliation of affs.affiliations) {
       const index = affs.indexedAffiliationIds.get(affiliation.id)

package/src/views/caption.ts

@@ -29,7 +29,6 @@ export class CaptionView
   protected createDOM() {
     this.dom = document.createElement('caption')
     this.dom.className = 'caption-description placeholder'
-    this.dom.contentEditable = 'true'
     this.contentDOM = this.dom
   }
 }

package/src/views/caption_title.ts

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

package/src/views/headshot_element.ts

@@ -0,0 +1,98 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HeadshotElementNode } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import { plusIcon } from '../icons'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class HeadshotElement extends BaseNodeView<
+  Trackable<HeadshotElementNode>
+> {
+  public elementType = 'div'
+  private container: HTMLElement
+  private deleteHeadshotButton: HTMLElement
+
+  public initialise() {
+    this.createElement()
+    this.updateContents()
+  }
+
+  public createElement = () => {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('headshot-element')
+    this.dom.tabIndex = 0
+    this.dom.setAttribute('id', this.node.attrs.id)
+
+    this.container = document.createElement('div')
+    this.container.classList.add('block')
+    this.dom.appendChild(this.container)
+
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('block-container', 'headshot-element-block')
+    this.container.appendChild(this.contentDOM)
+
+    const can = this.props.getCapabilities()
+
+    if (can.editArticle) {
+      this.deleteHeadshotButton = document.createElement('button')
+      this.deleteHeadshotButton.innerHTML = plusIcon
+      this.deleteHeadshotButton.classList.add('headshot-remove-button')
+      this.deleteHeadshotButton.setAttribute('data-cy', 'headshot-delete')
+      this.deleteHeadshotButton.contentEditable = 'false'
+      this.deleteHeadshotButton.addEventListener(
+        'click',
+        this.handleDeleteHeadshot
+      )
+      this.deleteHeadshotButton.addEventListener(
+        'keydown',
+        handleEnterKey(this.handleDeleteHeadshot)
+      )
+      this.container.appendChild(this.deleteHeadshotButton)
+    }
+  }
+
+  private handleDeleteHeadshot = () => {
+    const { state, dispatch } = this.view
+    const { tr } = state
+    const pos = this.getPos()
+
+    tr.delete(pos, pos + this.node.nodeSize)
+    this.view.focus()
+    const $pos = tr.doc.resolve(pos)
+    if ($pos.node().nodeSize > 2) {
+      // we set selection to the start to prevent it from selecting alt_text & long_desc as we render them for now with empty dom node
+      tr.setSelection(
+        TextSelection.near(tr.doc.resolve($pos.start()))
+      ).scrollIntoView()
+    }
+    dispatch(tr)
+  }
+
+  public destroy() {
+    this.deleteHeadshotButton?.removeEventListener(
+      'click',
+      this.handleDeleteHeadshot
+    )
+    super.destroy()
+  }
+}
+
+export default createNodeView(HeadshotElement)

package/src/views/headshot_element_editable.ts

@@ -0,0 +1,20 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createEditableNodeView } from './creators'
+import { HeadshotElement } from './headshot_element'
+
+export default createEditableNodeView(HeadshotElement)

package/src/views/headshot_grid.ts

@@ -0,0 +1,98 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  HeadshotElementNode,
+  HeadshotGridNode,
+  schema,
+} from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import { addAuthorIcon } from '../icons'
+import {
+  createKeyboardInteraction,
+  handleEnterKey,
+} from '../lib/navigation-utils'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class HeadshotGridView extends BlockView<HeadshotGridNode> {
+  public elementType = 'div'
+  private container: HTMLElement
+  private addHeadshotButton: HTMLElement
+  private removeKeydownListener?: () => void
+
+  public createElement = () => {
+    this.container = document.createElement('div')
+    this.container.classList.add('block', 'headshot-grid-container')
+    this.dom.appendChild(this.container)
+
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('headshot-grid-block')
+    this.contentDOM.setAttribute('id', this.node.attrs.id)
+    this.removeKeydownListener = createKeyboardInteraction({
+      container: this.contentDOM,
+      navigation: {
+        arrowKeys: { forward: 'ArrowDown', backward: 'ArrowUp' },
+        getItems: () => [...(this.contentDOM?.children || [])] as HTMLElement[],
+      },
+    })
+    this.container.appendChild(this.contentDOM)
+
+    const can = this.props.getCapabilities()
+
+    if (can.editArticle) {
+      this.addHeadshotButton = document.createElement('button')
+      this.addHeadshotButton.classList.add('add-headshot-element-button')
+      this.addHeadshotButton.setAttribute('data-cy', 'headshot-add')
+      this.addHeadshotButton.contentEditable = 'false'
+      this.addHeadshotButton.innerHTML = addAuthorIcon
+      const buttonText = document.createElement('span')
+      buttonText.classList.add('add-headshot-element-text')
+      buttonText.innerText = 'Add Headshot'
+      this.addHeadshotButton.appendChild(buttonText)
+      this.addHeadshotButton.addEventListener('click', this.handleAddHeadshot)
+      this.addHeadshotButton.addEventListener(
+        'keydown',
+        handleEnterKey(this.handleAddHeadshot)
+      )
+      this.container.appendChild(this.addHeadshotButton)
+    }
+
+    this.dom.appendChild(this.container)
+  }
+
+  private handleAddHeadshot = () => {
+    const { state, dispatch } = this.view
+    const { tr } = state
+
+    const headshotElementNode =
+      schema.nodes.headshot_element.createAndFill() as HeadshotElementNode
+    const insertPos = this.getPos() + 1
+    tr.insert(insertPos, headshotElementNode)
+    this.view.focus()
+    tr.setSelection(TextSelection.create(tr.doc, insertPos))
+    dispatch(tr.scrollIntoView())
+  }
+
+  public destroy() {
+    this.addHeadshotButton?.removeEventListener('click', this.handleAddHeadshot)
+    this.removeKeydownListener?.()
+    super.destroy()
+  }
+}
+
+export default createNodeView(HeadshotGridView)

package/src/views/headshot_grid_editable.ts

@@ -0,0 +1,21 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createEditableNodeView } from './creators'
+import { EditableBlock } from './editable_block'
+import { HeadshotGridView } from './headshot_grid'
+
+export default createEditableNodeView(EditableBlock(HeadshotGridView))

package/src/views/headshot_image_editable.ts

@@ -0,0 +1,93 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  addTrackChangesAttributes,
+  addTrackChangesClassNames,
+} from '@manuscripts/track-changes-plugin'
+
+import { cameraIcon, plusIcon } from '../icons'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { createEditableNodeView } from './creators'
+import { FigureEditableView } from './figure_editable'
+
+export class HeadshotImageEditableView extends FigureEditableView {
+  private detachImageButton: HTMLButtonElement
+
+  public ignoreMutation = () => true
+
+  override createDOM() {
+    this.dom = document.createElement('figure')
+    this.container = document.createElement('div')
+    this.container.className = 'headshot-figure'
+    this.container.contentEditable = 'false'
+    this.dom.appendChild(this.container)
+  }
+
+  override addTools() {
+    const src = this.node.attrs.src
+    const files = this.props.getFiles()
+    const file = src && files.filter((f) => f.id === src)[0]
+    const link = file && this.props.fileManagement.previewLink(file)
+    const can = this.props.getCapabilities()
+    if (can.detachFile && link) {
+      this.detachImageButton = document.createElement('button')
+      this.detachImageButton.innerHTML = plusIcon
+      this.detachImageButton.classList.add('headshot-remove-button')
+      this.detachImageButton.setAttribute('data-cy', 'headshot-image-detach')
+      this.detachImageButton.contentEditable = 'false'
+      this.detachImageButton.addEventListener('click', this.handleDetachImage)
+      this.detachImageButton.addEventListener(
+        'keydown',
+        handleEnterKey(this.handleDetachImage)
+      )
+      this.container.appendChild(this.detachImageButton)
+    }
+  }
+
+  public override updateContents() {
+    super.updateContents()
+    addTrackChangesAttributes(this.node.attrs, this.dom)
+    addTrackChangesClassNames(this.node.attrs, this.dom)
+  }
+
+  protected override createPlaceholder = () => {
+    const element = document.createElement('div')
+    element.classList.add('figure', 'placeholder')
+    element.tabIndex = 0
+
+    const instructions = document.createElement('div')
+    instructions.classList.add('instructions')
+    instructions.innerHTML = `${cameraIcon}<div>Upload<br>photo</div>`
+
+    element.appendChild(instructions)
+
+    return element
+  }
+
+  private handleDetachImage = () => {
+    const { state, dispatch } = this.view
+    const pos = this.getPos()
+    dispatch(state.tr.delete(pos, pos + this.node.nodeSize))
+  }
+
+  public destroy() {
+    this.detachImageButton?.removeEventListener('click', this.handleDetachImage)
+    super.destroy()
+  }
+}
+
+export default createEditableNodeView(HeadshotImageEditableView)

package/src/views/supplement.ts

@@ -28,13 +28,12 @@ export class SupplementView extends BaseNodeView<Trackable<SupplementNode>> {
   private supplementInfoEl: HTMLDivElement
   private static currentDragSupplementId: string | null = null
   private dragIcon: HTMLDivElement | undefined
-
+  private dragAndDropInitialized = false
   public ignoreMutation = () => true
 
   public initialise() {
     this.createElement()
     this.updateContents()
-    this.setupDragAndDrop()
   }
 
   public createElement = () => {
@@ -56,6 +55,20 @@ export class SupplementView extends BaseNodeView<Trackable<SupplementNode>> {
   public updateContents() {
     super.updateContents()
     this.refreshFileInfo()
+    const can = this.props.getCapabilities()
+    this.dom.draggable = can.editArticle
+    if (can.editArticle) {
+      if (!this.dragAndDropInitialized) {
+        this.setupDragAndDrop()
+        this.dragAndDropInitialized = true
+      }
+      if (!this.dragIcon) {
+        this.addDragIcon()
+      }
+    } else {
+      this.dragIcon?.remove()
+      this.dragIcon = undefined
+    }
   }
 
   private getDropSide(element: Element, clientY: number): 'before' | 'after' {