@manuscripts/body-editor 3.13.10 → 3.13.12

package/dist/cjs/commands.js

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = void 0;
+exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = void 0;
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
@@ -598,6 +598,25 @@ const insertBoxElement = (state, dispatch) => {
     return true;
 };
 exports.insertBoxElement = insertBoxElement;
+const insertHeadshotGrid = (state, dispatch) => {
+    const selection = state.selection;
+    const { nodes } = transform_1.schema;
+    const isBody = (0, prosemirror_utils_1.hasParentNodeOfType)(nodes.body)(selection);
+    if (!isBody) {
+        return false;
+    }
+    const position = findBlockInsertPosition(state);
+    if (position && dispatch) {
+        const headshotElement = transform_1.schema.nodes.headshot_element.createAndFill();
+        const node = nodes.headshot_grid.create({}, headshotElement);
+        const tr = state.tr.insert(position, node);
+        const headshotNamePosition = position + 2;
+        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, headshotNamePosition));
+        dispatch(tr.scrollIntoView());
+    }
+    return true;
+};
+exports.insertHeadshotGrid = insertHeadshotGrid;
 const insertSection = (subsection = false) => (state, dispatch, view) => {
     const { nodes } = transform_1.schema;
     const $pos = state.selection.$from;

package/dist/cjs/components/views/FigureDropdown.js

@@ -119,6 +119,14 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
         }
     }, [isOpen, container.classList]);
     useDropdownKeyboardNav(isOpen, dropdownRef, toggleOpen);
+    const hasAnyActions = !!showDownload ||
+        !!showUpload ||
+        !!showDetach ||
+        !!showReplace ||
+        showDelete();
+    if (!hasAnyActions) {
+        return null;
+    }
     const isEmbedMode = !!onReplaceEmbed;
     const groupFiles = (0, files_1.memoGroupFiles)();
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },

package/dist/cjs/configs/editor-views.js

@@ -31,6 +31,9 @@ const footnote_1 = __importDefault(require("../views/footnote"));
 const footnotes_element_1 = __importDefault(require("../views/footnotes_element"));
 const general_table_footnote_1 = __importDefault(require("../views/general_table_footnote"));
 const hero_image_editable_1 = __importDefault(require("../views/hero_image_editable"));
+const headshot_grid_editable_1 = __importDefault(require("../views/headshot_grid_editable"));
+const headshot_element_1 = __importDefault(require("../views/headshot_element"));
+const headshot_image_editable_1 = __importDefault(require("../views/headshot_image_editable"));
 const image_element_editable_1 = __importDefault(require("../views/image_element_editable"));
 const inline_equation_editable_1 = __importDefault(require("../views/inline_equation_editable"));
 const inline_footnote_editable_1 = __importDefault(require("../views/inline_footnote_editable"));
@@ -111,6 +114,9 @@ exports.default = (props, dispatch) => {
         long_desc: (0, accessibility_element_1.default)(props, dispatch),
         alt_text: (0, accessibility_element_1.default)(props, dispatch),
         hero_image: (0, hero_image_editable_1.default)(props, dispatch),
+        headshot_grid: (0, headshot_grid_editable_1.default)(props, dispatch),
+        headshot_element: (0, headshot_element_1.default)(props, dispatch),
+        headshot_image: (0, headshot_image_editable_1.default)(props, dispatch),
         abstracts: (0, abstracts_1.default)(props),
         trans_abstract: (0, translated_abstract_editable_1.default)(props),
         trans_graphical_abstract: (0, trans_graphical_abstract_editable_1.default)(props),

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
+exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -9,6 +9,7 @@ exports.addAuthorIcon = renderIcon(style_guide_1.AddAuthorIcon);
 exports.arrowDown = renderIcon(style_guide_1.ArrowDownCircleIcon);
 exports.arrowUp = renderIcon(style_guide_1.ArrowUpIcon);
 exports.alertIcon = renderIcon(style_guide_1.AlertIcon);
+exports.cameraIcon = renderIcon(style_guide_1.CameraIcon);
 exports.deleteIcon = renderIcon(style_guide_1.DeleteIcon);
 exports.editIcon = renderIcon(style_guide_1.EditIcon);
 exports.sectionCategoryIcon = renderIcon(style_guide_1.SectionCategoryIcon);

package/dist/cjs/lib/files.js

@@ -13,6 +13,7 @@ const figureTypes = [
     transform_1.schema.nodes.figure_element,
     transform_1.schema.nodes.image_element,
     transform_1.schema.nodes.hero_image,
+    transform_1.schema.nodes.headshot_grid,
     transform_1.schema.nodes.embed,
 ];
 function memoGroupFiles() {
@@ -56,7 +57,11 @@ const groupFiles = (doc, files) => {
             }
         }
         else {
-            for (const figure of (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.figure)) {
+            const descend = node.type === transform_1.schema.nodes.headshot_grid;
+            const figureNodeType = node.type === transform_1.schema.nodes.headshot_grid
+                ? transform_1.schema.nodes.headshot_image
+                : transform_1.schema.nodes.figure;
+            for (const figure of (0, prosemirror_utils_1.findChildrenByType)(node, figureNodeType, descend)) {
                 if ((0, track_changes_utils_1.isHidden)(figure.node)) {
                     continue;
                 }

package/dist/cjs/menus.js

@@ -272,6 +272,14 @@ const getEditorMenus = (editor) => {
                 run: doCommand(commands_1.insertBoxElement),
                 isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.box_element),
             },
+            {
+                id: 'insert-headshot-grid',
+                label: 'Headshot Panel',
+                isEnabled: (0, utils_1.isEditAllowed)(state) &&
+                    isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.headshot_grid)),
+                run: doCommand(commands_1.insertHeadshotGrid),
+                isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.headshot_grid),
+            },
             {
                 role: 'separator',
             },

package/dist/cjs/node-type-icons.js

@@ -23,6 +23,8 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const react_1 = __importDefault(require("react"));
 const { nodes } = transform_1.schema;
+const OutlineHeadshotGridIcon = () => (react_1.default.createElement(style_guide_1.FileHeadshotGridIcon, { width: "12", height: "12" }));
+const OutlineHeadshotElementIcon = () => (react_1.default.createElement(style_guide_1.AvatarIcon, { width: "16", height: "16" }));
 const OutlineImageIcon = () => (react_1.default.createElement(style_guide_1.FileImageIcon, { width: "11", height: "14" }));
 const OutlineSupplementsIcon = () => (react_1.default.createElement(style_guide_1.SupplementsIcon, { width: "11", height: "14" }));
 const OutlineMainDocumentIcon = () => (react_1.default.createElement(style_guide_1.FileDocumentIcon, { width: "11", height: "14" }));
@@ -44,6 +46,8 @@ const icons = new Map([
     [nodes.hero_image, OutlineImageIcon],
     [nodes.supplements, OutlineSupplementsIcon],
     [nodes.attachments, OutlineMainDocumentIcon],
+    [nodes.headshot_grid, OutlineHeadshotGridIcon],
+    [nodes.headshot_element, OutlineHeadshotElementIcon],
 ]);
 const nodeTypeIcon = (nodeType, listType) => {
     if (nodeType === transform_1.schema.nodes.list) {

package/dist/cjs/plugins/accessibility_element.js

@@ -30,7 +30,8 @@ const isSelectionWithin = (node, pos, selection) => {
 const buildExpandButtonDecorations = (doc) => {
     const decorations = [];
     doc.descendants((node, pos) => {
-        if (node.type.spec.content?.includes('alt_text')) {
+        if (node.type !== transform_1.schema.nodes.headshot_element &&
+            node.type.spec.content?.includes('alt_text')) {
             decorations.push(prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, (view) => {
                 const container = document.createElement('div');
                 container.className =

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.13.10';
+exports.VERSION = '3.13.12';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/accessibility_element.js

@@ -9,8 +9,15 @@ const prosemirror_state_1 = require("prosemirror-state");
 const navigation_utils_1 = require("../lib/navigation-utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const empty_1 = __importDefault(require("./empty"));
 class AccessibilityElementView extends block_view_1.default {
     initialise() {
+        const $pos = this.view.state.doc.resolve(this.getPos());
+        if ($pos.parent.type === transform_1.schema.nodes.headshot_element) {
+            const { dom } = (0, empty_1.default)('accessibility_element')();
+            this.dom = dom;
+            return;
+        }
         this.createDOM();
         this.createElement();
         this.updateContents();
@@ -30,7 +37,6 @@ class AccessibilityElementView extends block_view_1.default {
     createElement() {
         super.createElement();
         this.contentDOM.className = 'accessibility_element_input';
-        this.contentDOM.setAttribute('contenteditable', 'true');
         this.contentDOM.tabIndex = this.node.type === transform_1.schema.nodes.alt_text ? 0 : -1;
         this.removeKeydownListener = (0, navigation_utils_1.createKeyboardInteraction)({
             container: this.contentDOM,

package/dist/cjs/views/affiliations.js

@@ -120,7 +120,6 @@ class AffiliationsView extends block_view_1.default {
         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);
     }
@@ -140,6 +139,11 @@ class AffiliationsView extends block_view_1.default {
         this.updateSelection();
     }
     buildAffiliations(affs) {
+        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/dist/cjs/views/caption.js

@@ -28,7 +28,6 @@ class CaptionView extends base_node_view_1.BaseNodeView {
     createDOM() {
         this.dom = document.createElement('caption');
         this.dom.className = 'caption-description placeholder';
-        this.dom.contentEditable = 'true';
         this.contentDOM = this.dom;
     }
 }

package/dist/cjs/views/caption_title.js

@@ -28,7 +28,6 @@ class CaptionTitleView extends base_node_view_1.BaseNodeView {
     createDOM() {
         this.dom = document.createElement('label');
         this.dom.className = 'caption-title placeholder';
-        this.dom.contentEditable = 'true';
         this.contentDOM = this.dom;
     }
 }

package/dist/cjs/views/headshot_element.js

@@ -0,0 +1,74 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadshotElement = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const icons_1 = require("../icons");
+const navigation_utils_1 = require("../lib/navigation-utils");
+const base_node_view_1 = require("./base_node_view");
+const creators_1 = require("./creators");
+class HeadshotElement extends base_node_view_1.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 = icons_1.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', (0, navigation_utils_1.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(prosemirror_state_1.TextSelection.near(tr.doc.resolve($pos.start()))).scrollIntoView();
+            }
+            dispatch(tr);
+        };
+    }
+    initialise() {
+        this.createElement();
+        this.updateContents();
+    }
+    destroy() {
+        this.deleteHeadshotButton?.removeEventListener('click', this.handleDeleteHeadshot);
+        super.destroy();
+    }
+}
+exports.HeadshotElement = HeadshotElement;
+exports.default = (0, creators_1.createNodeView)(HeadshotElement);

package/dist/cjs/views/headshot_element_editable.js

@@ -0,0 +1,20 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const creators_1 = require("./creators");
+const headshot_element_1 = require("./headshot_element");
+exports.default = (0, creators_1.createEditableNodeView)(headshot_element_1.HeadshotElement);

package/dist/cjs/views/headshot_grid.js

@@ -0,0 +1,82 @@
+"use strict";
+/*!
+ * © 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadshotGridView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const icons_1 = require("../icons");
+const navigation_utils_1 = require("../lib/navigation-utils");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class HeadshotGridView extends block_view_1.default {
+    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 = (0, navigation_utils_1.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 = icons_1.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', (0, navigation_utils_1.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 = transform_1.schema.nodes.headshot_element.createAndFill();
+            const insertPos = this.getPos() + 1;
+            tr.insert(insertPos, headshotElementNode);
+            this.view.focus();
+            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, insertPos));
+            dispatch(tr.scrollIntoView());
+        };
+    }
+    destroy() {
+        this.addHeadshotButton?.removeEventListener('click', this.handleAddHeadshot);
+        this.removeKeydownListener?.();
+        super.destroy();
+    }
+}
+exports.HeadshotGridView = HeadshotGridView;
+exports.default = (0, creators_1.createNodeView)(HeadshotGridView);

package/dist/cjs/views/headshot_grid_editable.js

@@ -0,0 +1,21 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const creators_1 = require("./creators");
+const editable_block_1 = require("./editable_block");
+const headshot_grid_1 = require("./headshot_grid");
+exports.default = (0, creators_1.createEditableNodeView)((0, editable_block_1.EditableBlock)(headshot_grid_1.HeadshotGridView));

package/dist/cjs/views/headshot_image_editable.js

@@ -0,0 +1,79 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeadshotImageEditableView = void 0;
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const icons_1 = require("../icons");
+const navigation_utils_1 = require("../lib/navigation-utils");
+const creators_1 = require("./creators");
+const figure_editable_1 = require("./figure_editable");
+class HeadshotImageEditableView extends figure_editable_1.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 = `${icons_1.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 = icons_1.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', (0, navigation_utils_1.handleEnterKey)(this.handleDetachImage));
+            this.container.appendChild(this.detachImageButton);
+        }
+    }
+    updateContents() {
+        super.updateContents();
+        (0, track_changes_plugin_1.addTrackChangesAttributes)(this.node.attrs, this.dom);
+        (0, track_changes_plugin_1.addTrackChangesClassNames)(this.node.attrs, this.dom);
+    }
+    destroy() {
+        this.detachImageButton?.removeEventListener('click', this.handleDetachImage);
+        super.destroy();
+    }
+}
+exports.HeadshotImageEditableView = HeadshotImageEditableView;
+exports.default = (0, creators_1.createEditableNodeView)(HeadshotImageEditableView);

package/dist/cjs/views/supplement.js

@@ -25,6 +25,7 @@ const creators_1 = require("./creators");
 class SupplementView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
+        this.dragAndDropInitialized = false;
         this.ignoreMutation = () => true;
         this.createElement = () => {
             this.dom = document.createElement('div');
@@ -43,11 +44,25 @@ class SupplementView extends base_node_view_1.BaseNodeView {
     initialise() {
         this.createElement();
         this.updateContents();
-        this.setupDragAndDrop();
     }
     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;
+        }
     }
     getDropSide(element, clientY) {
         const { top, bottom } = element.getBoundingClientRect();

package/dist/es/commands.js

@@ -567,6 +567,24 @@ export const insertBoxElement = (state, dispatch) => {
     }
     return true;
 };
+export const insertHeadshotGrid = (state, 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();
+        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, dispatch, view) => {
     const { nodes } = schema;
     const $pos = state.selection.$from;

package/dist/es/components/views/FigureDropdown.js

@@ -80,6 +80,14 @@ export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onD
         }
     }, [isOpen, container.classList]);
     useDropdownKeyboardNav(isOpen, dropdownRef, toggleOpen);
+    const hasAnyActions = !!showDownload ||
+        !!showUpload ||
+        !!showDetach ||
+        !!showReplace ||
+        showDelete();
+    if (!hasAnyActions) {
+        return null;
+    }
     const isEmbedMode = !!onReplaceEmbed;
     const groupFiles = memoGroupFiles();
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },

package/dist/es/configs/editor-views.js

@@ -26,6 +26,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';
@@ -106,6 +109,9 @@ export default (props, dispatch) => {
         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/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, ORCIDIcon as ORCID, PlusIcon, ScrollIcon, SectionCategoryIcon, TickIcon, TranslateIcon, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, CameraIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, ORCIDIcon as ORCID, PlusIcon, ScrollIcon, SectionCategoryIcon, TickIcon, TranslateIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
@@ -6,6 +6,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);