@manuscripts/body-editor 3.13.10 → 3.13.11

package/dist/es/views/headshot_element.js

@@ -0,0 +1,70 @@
+/*!
+ * © 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 { TextSelection } from 'prosemirror-state';
+import { plusIcon } from '../icons';
+import { handleEnterKey } from '../lib/navigation-utils';
+import { BaseNodeView } from './base_node_view';
+import { createNodeView } from './creators';
+export class HeadshotElement extends BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.elementType = 'div';
+        this.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);
+            }
+        };
+        this.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) {
+                tr.setSelection(TextSelection.near(tr.doc.resolve($pos.start()))).scrollIntoView();
+            }
+            dispatch(tr);
+        };
+    }
+    initialise() {
+        this.createElement();
+        this.updateContents();
+    }
+    destroy() {
+        this.deleteHeadshotButton?.removeEventListener('click', this.handleDeleteHeadshot);
+        super.destroy();
+    }
+}
+export default createNodeView(HeadshotElement);

package/dist/es/views/headshot_element_editable.js

@@ -0,0 +1,18 @@
+/*!
+ * © 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/dist/es/views/headshot_grid.js

@@ -0,0 +1,75 @@
+/*!
+ * © 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 { 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 {
+    constructor() {
+        super(...arguments);
+        this.elementType = 'div';
+        this.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 || [])],
+                },
+            });
+            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);
+        };
+        this.handleAddHeadshot = () => {
+            const { state, dispatch } = this.view;
+            const { tr } = state;
+            const headshotElementNode = schema.nodes.headshot_element.createAndFill();
+            const insertPos = this.getPos() + 1;
+            tr.insert(insertPos, headshotElementNode);
+            this.view.focus();
+            tr.setSelection(TextSelection.create(tr.doc, insertPos));
+            dispatch(tr.scrollIntoView());
+        };
+    }
+    destroy() {
+        this.addHeadshotButton?.removeEventListener('click', this.handleAddHeadshot);
+        this.removeKeydownListener?.();
+        super.destroy();
+    }
+}
+export default createNodeView(HeadshotGridView);

package/dist/es/views/headshot_grid_editable.js

@@ -0,0 +1,19 @@
+/*!
+ * © 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/dist/es/views/headshot_image_editable.js

@@ -0,0 +1,75 @@
+/*!
+ * © 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 {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.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;
+        };
+        this.handleDetachImage = () => {
+            const { state, dispatch } = this.view;
+            const pos = this.getPos();
+            dispatch(state.tr.delete(pos, pos + this.node.nodeSize));
+        };
+    }
+    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);
+    }
+    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);
+        }
+    }
+    updateContents() {
+        super.updateContents();
+        addTrackChangesAttributes(this.node.attrs, this.dom);
+        addTrackChangesClassNames(this.node.attrs, this.dom);
+    }
+    destroy() {
+        this.detachImageButton?.removeEventListener('click', this.handleDetachImage);
+        super.destroy();
+    }
+}
+export default createEditableNodeView(HeadshotImageEditableView);

package/dist/types/commands.d.ts

@@ -51,6 +51,7 @@ export declare const insertTableElementFooter: (tr: Transaction, table: [Manuscr
 export declare const insertFootnotesElement: (tr: Transaction, container: [ManuscriptNode, number]) => [FootnotesElementNode, number];
 export declare const insertInlineFootnote: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertBoxElement: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
+export declare const insertHeadshotGrid: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertSection: (subsection?: boolean) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertAbstractSection: (category?: SectionCategory) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertBackmatterSection: (category: SectionCategory) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;

package/dist/types/icons.d.ts

@@ -2,6 +2,7 @@ export declare const addAuthorIcon: string;
 export declare const arrowDown: string;
 export declare const arrowUp: string;
 export declare const alertIcon: string;
+export declare const cameraIcon: string;
 export declare const deleteIcon: string;
 export declare const editIcon: string;
 export declare const sectionCategoryIcon: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.13.10";
+export declare const VERSION = "3.13.11";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/headshot_element.d.ts

@@ -0,0 +1,29 @@
+/*!
+ * © 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 { Trackable } from '../types';
+import { BaseNodeView } from './base_node_view';
+export declare class HeadshotElement extends BaseNodeView<Trackable<HeadshotElementNode>> {
+    elementType: string;
+    private container;
+    private deleteHeadshotButton;
+    initialise(): void;
+    createElement: () => void;
+    private handleDeleteHeadshot;
+    destroy(): void;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeadshotElement>;
+export default _default;

package/dist/types/views/headshot_element_editable.d.ts

@@ -0,0 +1,18 @@
+/*!
+ * © 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 { HeadshotElement } from './headshot_element';
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeadshotElement>;
+export default _default;

package/dist/types/views/headshot_grid.d.ts

@@ -0,0 +1,28 @@
+/*!
+ * © 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 { HeadshotGridNode } from '@manuscripts/transform';
+import BlockView from './block_view';
+export declare class HeadshotGridView extends BlockView<HeadshotGridNode> {
+    elementType: string;
+    private container;
+    private addHeadshotButton;
+    private removeKeydownListener?;
+    createElement: () => void;
+    private handleAddHeadshot;
+    destroy(): void;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeadshotGridView>;
+export default _default;

package/dist/types/views/headshot_grid_editable.d.ts

@@ -0,0 +1,44 @@
+/*!
+ * © 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 { HeadshotGridView } from './headshot_grid';
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<{
+    gutterButtons(): HTMLElement[];
+    actionGutterButtons(): never[];
+    createAddButton(): HTMLAnchorElement | null;
+    createEditButton(): HTMLElement | null;
+    createMenu: () => import("../lib/context-menu").ContextMenu;
+    initialise(): void;
+    updateContents(): void;
+    handleTrackChanges(): void;
+    updateClasses(): void;
+    updatePlaceholder(): void;
+    createElement(): void;
+    createDOM(): void;
+    gutter: Record<string, HTMLElement>;
+    createGutter(className: string, buttons: HTMLElement[]): void;
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+    elementType: string;
+    readonly props: import("../configs/ManuscriptsEditor").EditorProps;
+    node: import("prosemirror-model").Node;
+    readonly view: import("@manuscripts/transform").ManuscriptEditorView;
+    readonly getPos: () => number;
+    update(newNode: import("@manuscripts/transform").ManuscriptNode): boolean;
+    selectNode(): void;
+    deselectNode(): void;
+    destroy(): void;
+} & HeadshotGridView>;
+export default _default;

package/dist/types/views/headshot_image_editable.d.ts

@@ -0,0 +1,28 @@
+/*!
+ * © 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 { FigureEditableView } from './figure_editable';
+export declare class HeadshotImageEditableView extends FigureEditableView {
+    private detachImageButton;
+    ignoreMutation: () => boolean;
+    createDOM(): void;
+    addTools(): void;
+    updateContents(): void;
+    protected createPlaceholder: () => HTMLDivElement;
+    private handleDetachImage;
+    destroy(): void;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeadshotImageEditableView>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.13.10",
+  "version": "3.13.11",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.6.3",
+    "@manuscripts/style-guide": "3.6.4",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.4.5",
     "@popperjs/core": "2.11.8",

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/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.11';
 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()