@manuscripts/body-editor 3.13.10 → 3.13.11

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/styles/AdvancedEditor.css

@@ -1052,7 +1052,7 @@ figure.block:has(.equation.selected-suggestion) {
   .ProseMirror
   [data-track-op='set_attrs']
   .block:not(.trans-abstract):not(.trans-graphical-abstract),
-.tracking-visible .block:has(figure[data-track-op='set_attrs']),
+.tracking-visible .block:has(figure[data-track-op='set_attrs']):not(.headshot-grid-container),
 .tracking-visible figure.block:has(.equation.set_attrs),
 .tracking-visible
   .ProseMirror
@@ -1761,6 +1761,174 @@ th:hover > .table-context-menu-button,
 .hero-image-container .position-menu {
   display: none !important;
 }
+
+/* Headshot Grid Container */
+
+.ProseMirror .block-headshot_grid > .block {
+  display: grid;
+  gap: 16px;
+  margin: 0 12px;
+  padding: 8px 10px 16px 10px;
+  border-radius: 4px;
+  border: 1px solid #F2F2F2;
+}
+
+.ProseMirror .headshot-grid-block {
+  display: grid;
+  gap: 16px;
+}
+
+.ProseMirror .headshot-grid-container .headshot-grid-block .headshot-element {
+  border-radius: 4px;
+  border: 1px solid #E2E2E2 !important;
+  background: #FFF;
+  position: relative;
+}
+
+
+/* Headshot Element Block */
+
+.ProseMirror .headshot-element-block {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  column-gap: 16px;
+  row-gap: 8px;
+  padding: 16px 24px;
+}
+
+.ProseMirror .headshot-element-block figure {
+  grid-row: 1 / span 2;
+  margin: 0;
+}
+
+/* Headshot Image */
+
+.ProseMirror .headshot-figure {
+  width: 84px;
+  height: 84px;
+  position: relative;
+}
+
+.ProseMirror .headshot-figure .figure-image {
+  border-radius: 8px;
+}
+
+.ProseMirror .headshot-element-block .figure.placeholder {
+  min-width: 84px;
+  min-height: 84px;
+  padding: 0;
+  border-radius: 8px;
+  background: #f2f2f2;
+  white-space: pre-line;
+}
+
+/* Headshot Captions */
+
+.ProseMirror .headshot-element-block .caption-title,
+.ProseMirror .headshot-element-block .caption-description {
+  text-align: start;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 16px;
+}
+
+.ProseMirror .headshot-element-block .caption-title {
+  font-weight: 700;
+  padding-top: 6px;
+}
+
+.ProseMirror .headshot-element-block .caption-description,
+.ProseMirror .headshot-element-block .caption-title .placeholder-text {
+  font-weight: 400;
+}
+
+.ProseMirror .headshot-element-block .caption-title .placeholder-text::before {
+  content: 'Name...';
+  color: #c9c9c9;
+}
+
+.ProseMirror .headshot-element-block .caption-description .placeholder-text::before {
+  content: 'Summary...';
+  color: #c9c9c9;
+}
+
+/* Add Headshot Button */
+
+.ProseMirror .add-headshot-element-button {
+  border-radius: 4px;
+  border: 1px dashed #E2E2E2;
+  background: #FAFAFA;
+  padding: 8px 24px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.ProseMirror .add-headshot-element-text {
+  color: #353535;
+  text-align: center;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.ProseMirror .add-headshot-element-button svg rect {
+  fill: #6e6e6e;
+}
+
+/* Headshot Remove Buttons */
+
+.ProseMirror .headshot-element .headshot-remove-button {
+  background: #ffffff;
+  padding: 4px;
+  margin: 8px;
+  cursor: pointer;
+  border: 1px solid #e2e2e2;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  visibility: hidden;
+  z-index: 10;
+}
+
+.ProseMirror .headshot-figure .headshot-remove-button {
+  margin: 0;
+  top: -6%;
+  right: -4%;
+}
+
+.ProseMirror .headshot-element .headshot-remove-button svg {
+  width: 12px;
+  height: 12px;
+  transform: rotate(45deg);
+}
+
+.ProseMirror .headshot-figure .headshot-remove-button svg {
+  width: 8px;
+  height: 8px;
+}
+
+.ProseMirror .headshot-element:hover .block > .headshot-remove-button,
+.ProseMirror .headshot-figure:hover .headshot-remove-button,
+.ProseMirror .headshot-element:focus-within .headshot-remove-button {
+  visibility: visible;
+}
+
+.ProseMirror .headshot-element:focus-visible,
+.ProseMirror .add-headshot-element-button:focus-visible,
+.ProseMirror .headshot-remove-button:focus-visible {
+  outline: 3px solid var(--focus-outline-color);
+}
+
 .toggle-btn {
   cursor: pointer;
 }