@manuscripts/body-editor 2.8.84 → 2.8.85

package/dist/cjs/commands.js

@@ -16,7 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.isCommentingAllowed = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = 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.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.insertEmbed = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = void 0;
+exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -160,6 +160,9 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
         case transform_1.schema.nodes.image_element:
             node = createImageElement(attrs);
             break;
+        case transform_1.schema.nodes.hero_image:
+            node = createHeroImage(attrs);
+            break;
         case transform_1.schema.nodes.listing_element:
             node = transform_1.schema.nodes.listing_element.create({}, [
                 transform_1.schema.nodes.listing.create(),
@@ -1077,7 +1080,8 @@ const isCommentingAllowed = (type) => type === transform_1.schema.nodes.title ||
     type === transform_1.schema.nodes.embed ||
     type === transform_1.schema.nodes.affiliations ||
     type === transform_1.schema.nodes.contributors ||
-    type === transform_1.schema.nodes.image_element;
+    type === transform_1.schema.nodes.image_element ||
+    type === transform_1.schema.nodes.hero_image;
 exports.isCommentingAllowed = isCommentingAllowed;
 const addNodeComment = (node, state, dispatch) => {
     if (!(0, exports.isCommentingAllowed)(node.type)) {
@@ -1235,3 +1239,19 @@ const activateSearchReplace = (state, dispatch) => {
     return true;
 };
 exports.activateSearchReplace = activateSearchReplace;
+const createHeroImage = (attrs) => transform_1.schema.nodes.hero_image.create(Object.assign(Object.assign({}, attrs), { id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.hero_image) }), [
+    transform_1.schema.nodes.figure.create(),
+    transform_1.schema.nodes.alt_text.create(),
+    transform_1.schema.nodes.long_desc.create(),
+]);
+const insertHeroImage = () => (state, dispatch, view) => {
+    if ((0, utils_1.getChildOfType)(state.doc, transform_1.schema.nodes.hero_image, true)) {
+        return false;
+    }
+    const backmatter = (0, doc_1.findBackmatter)(state.doc);
+    const position = backmatter.pos + backmatter.node.content.size + 1;
+    view === null || view === void 0 ? void 0 : view.focus();
+    (0, exports.createBlock)(transform_1.schema.nodes.hero_image, position, state, dispatch);
+    return true;
+};
+exports.insertHeroImage = insertHeroImage;

package/dist/cjs/components/outline/DraggableTree.js

@@ -47,7 +47,8 @@ const excludedTypes = [
     transform_1.schema.nodes.title,
     transform_1.schema.nodes.alt_titles,
     transform_1.schema.nodes.alt_title,
-    transform_1.schema.nodes.hero_image,
+    transform_1.schema.nodes.alt_text,
+    transform_1.schema.nodes.long_desc,
 ];
 const childrenExcludedTypes = [
     transform_1.schema.nodes.pullquote_element,
@@ -174,7 +175,8 @@ const DraggableTree = ({ tree, view, depth, can, }) => {
         }),
     });
     const isDeletedItem = (0, track_changes_utils_1.isDeleted)(node);
-    const isTop = isManuscriptNode(parent);
+    const isHeroImage = (0, transform_1.isHeroImageNode)(node);
+    const isTop = isManuscriptNode(parent) && !isHeroImage;
     const handleContextMenu = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -191,8 +193,9 @@ const DraggableTree = ({ tree, view, depth, can, }) => {
     const dragClass = isDragging ? 'dragging' : '';
     const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
     const deletedClass = isDeletedItem ? 'deleted' : '';
-    return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass}` },
-        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: depth, onContextMenu: handleContextMenu },
+    const heroImageClass = isHeroImage ? 'hero-image' : '';
+    return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
+        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu },
             items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { onClick: toggleOpen }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
             react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}` },
                 react_1.default.createElement(Outline_1.OutlineItemIcon, null, (0, node_type_icons_1.nodeTypeIcon)(node.type)),

package/dist/cjs/components/outline/Outline.js

@@ -119,5 +119,11 @@ exports.Outline = styled_components_1.default.div `
   & .subtree.collapsed {
     display: none;
   }
+
+  & .hero-image {
+    margin-top: 1rem;
+    padding-top: 0.5rem;
+    border-top: 1px dashed #ddd;
+  }
 `;
 exports.OutlineItemPlaceholder = styled_components_1.default.span ``;

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

@@ -25,6 +25,7 @@ const figure_element_editable_1 = __importDefault(require("../views/figure_eleme
 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 inline_equation_editable_1 = __importDefault(require("../views/inline_equation_editable"));
 const inline_footnote_editable_1 = __importDefault(require("../views/inline_footnote_editable"));
 const keyword_1 = __importDefault(require("../views/keyword"));
@@ -92,6 +93,6 @@ exports.default = (props, dispatch) => {
         award: (0, award_1.default)(props, dispatch),
         long_desc: (0, accessibility_element_1.default)(props, dispatch),
         alt_text: (0, accessibility_element_1.default)(props, dispatch),
-        hero_image: (0, empty_1.default)('hero_image'),
+        hero_image: (0, hero_image_editable_1.default)(props, dispatch),
     };
 };

package/dist/cjs/icons.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowDown = void 0;
+exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
 const renderIcon = (c) => (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(c));
 exports.arrowDown = renderIcon(style_guide_1.ArrowDownCircleIcon);
+exports.arrowUp = renderIcon(style_guide_1.ArrowUpIcon);
 exports.alertIcon = renderIcon(style_guide_1.AlertIcon);
 exports.deleteIcon = renderIcon(style_guide_1.DeleteIcon);
 exports.editIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.EditIcon));

package/dist/cjs/lib/files.js

@@ -8,7 +8,11 @@ const MISSING_FILE = {
     id: '',
     name: '',
 };
-const figureTypes = [transform_1.schema.nodes.figure_element, transform_1.schema.nodes.image_element];
+const figureTypes = [
+    transform_1.schema.nodes.figure_element,
+    transform_1.schema.nodes.image_element,
+    transform_1.schema.nodes.hero_image,
+];
 const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];

package/dist/cjs/menus.js

@@ -237,6 +237,12 @@ const getEditorMenus = (editor) => {
                     isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.image_element)),
                 run: doCommand((0, commands_1.insertBlock)(transform_1.schema.nodes.image_element)),
             },
+            {
+                id: 'insert-hero-image',
+                label: 'Hero Image',
+                isEnabled: (0, utils_1.isEditAllowed)(state) && isCommandValid((0, commands_1.insertHeroImage)()),
+                run: doCommand((0, commands_1.insertHeroImage)()),
+            },
             {
                 id: 'insert-table-element',
                 label: 'Table',

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

@@ -38,6 +38,7 @@ const icons = new Map([
     [nodes.graphical_abstract_section, style_guide_1.OutlineSectionIcon],
     [nodes.footnotes_section, style_guide_1.OutlineSectionIcon],
     [nodes.image_element, OutlineImageIcon],
+    [nodes.hero_image, OutlineImageIcon],
 ]);
 const nodeTypeIcon = (nodeType, listType) => {
     if (nodeType === transform_1.schema.nodes.list) {

package/dist/cjs/plugins/comments.js

@@ -187,6 +187,7 @@ const getDecorationPos = (node, pos) => {
         case transform_1.schema.nodes.paragraph:
         case transform_1.schema.nodes.embed:
         case transform_1.schema.nodes.contributors:
+        case transform_1.schema.nodes.hero_image:
             return pos;
         case transform_1.schema.nodes.keywords:
             return pos + 2;

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 = '2.8.84';
+exports.VERSION = '2.8.85';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/hero_image.js

@@ -0,0 +1,64 @@
+"use strict";
+/*!
+ * © 2025 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.HeroImageView = void 0;
+const icons_1 = require("../icons");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class HeroImageView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.container = document.createElement('div');
+            this.container.classList.add('block', 'hero-image-container');
+            this.dom.appendChild(this.container);
+            this.container.appendChild(this.createPanel());
+            this.contentDOM = document.createElement('figure');
+            this.contentDOM.classList.add('figure-block', 'hero-image-figure');
+            this.contentDOM.setAttribute('id', this.node.attrs.id);
+            this.container.appendChild(this.contentDOM);
+        };
+    }
+    createPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('hero-image-panel');
+        const label = document.createElement('span');
+        label.textContent = 'Hero image';
+        label.contentEditable = 'false';
+        const heroImageToggleBtn = document.createElement('button');
+        heroImageToggleBtn.classList.add('hero-image-toggle-btn', 'button-reset');
+        heroImageToggleBtn.innerHTML = icons_1.arrowUp;
+        heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
+        heroImageToggleBtn.onclick = () => {
+            this.collapsed = !this.collapsed;
+            if (this.contentDOM) {
+                this.contentDOM.style.display = this.collapsed ? 'none' : '';
+            }
+            heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
+        };
+        panel.appendChild(label);
+        panel.appendChild(heroImageToggleBtn);
+        return panel;
+    }
+}
+exports.HeroImageView = HeroImageView;
+exports.default = (0, creators_1.createNodeView)(HeroImageView);

package/dist/cjs/views/hero_image_editable.js

@@ -0,0 +1,21 @@
+"use strict";
+/*!
+ * © 2025 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 hero_image_1 = require("./hero_image");
+exports.default = (0, creators_1.createEditableNodeView)((0, editable_block_1.EditableBlock)(hero_image_1.HeroImageView));

package/dist/es/commands.js

@@ -150,6 +150,9 @@ export const createBlock = (nodeType, position, state, dispatch, attrs) => {
         case schema.nodes.image_element:
             node = createImageElement(attrs);
             break;
+        case schema.nodes.hero_image:
+            node = createHeroImage(attrs);
+            break;
         case schema.nodes.listing_element:
             node = schema.nodes.listing_element.create({}, [
                 schema.nodes.listing.create(),
@@ -1027,7 +1030,8 @@ export const isCommentingAllowed = (type) => type === schema.nodes.title ||
     type === schema.nodes.embed ||
     type === schema.nodes.affiliations ||
     type === schema.nodes.contributors ||
-    type === schema.nodes.image_element;
+    type === schema.nodes.image_element ||
+    type === schema.nodes.hero_image;
 export const addNodeComment = (node, state, dispatch) => {
     if (!isCommentingAllowed(node.type)) {
         return false;
@@ -1176,3 +1180,18 @@ export const activateSearchReplace = (state, dispatch) => {
     dispatch && dispatch(tr);
     return true;
 };
+const createHeroImage = (attrs) => schema.nodes.hero_image.create(Object.assign(Object.assign({}, attrs), { id: generateNodeID(schema.nodes.hero_image) }), [
+    schema.nodes.figure.create(),
+    schema.nodes.alt_text.create(),
+    schema.nodes.long_desc.create(),
+]);
+export const insertHeroImage = () => (state, dispatch, view) => {
+    if (getChildOfType(state.doc, schema.nodes.hero_image, true)) {
+        return false;
+    }
+    const backmatter = findBackmatter(state.doc);
+    const position = backmatter.pos + backmatter.node.content.size + 1;
+    view === null || view === void 0 ? void 0 : view.focus();
+    createBlock(schema.nodes.hero_image, position, state, dispatch);
+    return true;
+};

package/dist/es/components/outline/DraggableTree.js

@@ -1,5 +1,5 @@
 import { TriangleCollapsedIcon, TriangleExpandedIcon, } from '@manuscripts/style-guide';
-import { isElementNodeType, nodeTitle, nodeTitlePlaceholder, schema, } from '@manuscripts/transform';
+import { isElementNodeType, isHeroImageNode, nodeTitle, nodeTitlePlaceholder, schema, } from '@manuscripts/transform';
 import { Fragment } from 'prosemirror-model';
 import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
@@ -21,7 +21,8 @@ const excludedTypes = [
     schema.nodes.title,
     schema.nodes.alt_titles,
     schema.nodes.alt_title,
-    schema.nodes.hero_image,
+    schema.nodes.alt_text,
+    schema.nodes.long_desc,
 ];
 const childrenExcludedTypes = [
     schema.nodes.pullquote_element,
@@ -147,7 +148,8 @@ export const DraggableTree = ({ tree, view, depth, can, }) => {
         }),
     });
     const isDeletedItem = isDeleted(node);
-    const isTop = isManuscriptNode(parent);
+    const isHeroImage = isHeroImageNode(node);
+    const isTop = isManuscriptNode(parent) && !isHeroImage;
     const handleContextMenu = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -164,8 +166,9 @@ export const DraggableTree = ({ tree, view, depth, can, }) => {
     const dragClass = isDragging ? 'dragging' : '';
     const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
     const deletedClass = isDeletedItem ? 'deleted' : '';
-    return (React.createElement(Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass}` },
-        !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: depth, onContextMenu: handleContextMenu },
+    const heroImageClass = isHeroImage ? 'hero-image' : '';
+    return (React.createElement(Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
+        !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu },
             items.length ? (React.createElement(OutlineItemArrow, { onClick: toggleOpen }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))) : (React.createElement(OutlineItemNoArrow, null)),
             React.createElement(OutlineItemLink, { to: `#${node.attrs.id}` },
                 React.createElement(OutlineItemIcon, null, nodeTypeIcon(node.type)),

package/dist/es/components/outline/Outline.js

@@ -113,5 +113,11 @@ export const Outline = styled.div `
   & .subtree.collapsed {
     display: none;
   }
+
+  & .hero-image {
+    margin-top: 1rem;
+    padding-top: 0.5rem;
+    border-top: 1px dashed #ddd;
+  }
 `;
 export const OutlineItemPlaceholder = styled.span ``;

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

@@ -20,6 +20,7 @@ import figureElement from '../views/figure_element_editable';
 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 inlineEquation from '../views/inline_equation_editable';
 import inlineFootnote from '../views/inline_footnote_editable';
 import keyword from '../views/keyword';
@@ -87,6 +88,6 @@ export default (props, dispatch) => {
         award: award(props, dispatch),
         long_desc: accessibilityElement(props, dispatch),
         alt_text: accessibilityElement(props, dispatch),
-        hero_image: empty('hero_image'),
+        hero_image: heroImage(props, dispatch),
     };
 };

package/dist/es/icons.js

@@ -1,8 +1,9 @@
-import { AlertIcon, ArrowDownCircleIcon, DeleteIcon, EditIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
+import { AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, EditIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
 export const arrowDown = renderIcon(ArrowDownCircleIcon);
+export const arrowUp = renderIcon(ArrowUpIcon);
 export const alertIcon = renderIcon(AlertIcon);
 export const deleteIcon = renderIcon(DeleteIcon);
 export const editIcon = renderToStaticMarkup(createElement(EditIcon));

package/dist/es/lib/files.js

@@ -5,7 +5,11 @@ const MISSING_FILE = {
     id: '',
     name: '',
 };
-const figureTypes = [schema.nodes.figure_element, schema.nodes.image_element];
+const figureTypes = [
+    schema.nodes.figure_element,
+    schema.nodes.image_element,
+    schema.nodes.hero_image,
+];
 export const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];

package/dist/es/menus.js

@@ -16,7 +16,7 @@
 import { getGroupCategories, schema, } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
-import { activateSearchReplace, addInlineComment, blockActive, canInsert, insertAbstractSection, insertAffiliation, insertAward, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertGraphicalAbstract, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, } from './commands';
+import { activateSearchReplace, addInlineComment, blockActive, canInsert, insertAbstractSection, insertAffiliation, insertAward, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertGraphicalAbstract, insertHeroImage, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, } from './commands';
 import { openEmbedDialog } from './components/toolbar/InsertEmbedDialog';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { ListMenuItem } from './components/toolbar/ListMenuItem';
@@ -234,6 +234,12 @@ export const getEditorMenus = (editor) => {
                     isCommandValid(canInsert(schema.nodes.image_element)),
                 run: doCommand(insertBlock(schema.nodes.image_element)),
             },
+            {
+                id: 'insert-hero-image',
+                label: 'Hero Image',
+                isEnabled: isEditAllowed(state) && isCommandValid(insertHeroImage()),
+                run: doCommand(insertHeroImage()),
+            },
             {
                 id: 'insert-table-element',
                 label: 'Table',

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

@@ -32,6 +32,7 @@ const icons = new Map([
     [nodes.graphical_abstract_section, OutlineSectionIcon],
     [nodes.footnotes_section, OutlineSectionIcon],
     [nodes.image_element, OutlineImageIcon],
+    [nodes.hero_image, OutlineImageIcon],
 ]);
 export const nodeTypeIcon = (nodeType, listType) => {
     if (nodeType === schema.nodes.list) {

package/dist/es/plugins/comments.js

@@ -182,6 +182,7 @@ const getDecorationPos = (node, pos) => {
         case schema.nodes.paragraph:
         case schema.nodes.embed:
         case schema.nodes.contributors:
+        case schema.nodes.hero_image:
             return pos;
         case schema.nodes.keywords:
             return pos + 2;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.84';
+export const VERSION = '2.8.85';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/hero_image.js

@@ -0,0 +1,57 @@
+/*!
+ * © 2025 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 { arrowUp } from '../icons';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+export class HeroImageView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.ignoreMutation = () => true;
+        this.createElement = () => {
+            this.container = document.createElement('div');
+            this.container.classList.add('block', 'hero-image-container');
+            this.dom.appendChild(this.container);
+            this.container.appendChild(this.createPanel());
+            this.contentDOM = document.createElement('figure');
+            this.contentDOM.classList.add('figure-block', 'hero-image-figure');
+            this.contentDOM.setAttribute('id', this.node.attrs.id);
+            this.container.appendChild(this.contentDOM);
+        };
+    }
+    createPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('hero-image-panel');
+        const label = document.createElement('span');
+        label.textContent = 'Hero image';
+        label.contentEditable = 'false';
+        const heroImageToggleBtn = document.createElement('button');
+        heroImageToggleBtn.classList.add('hero-image-toggle-btn', 'button-reset');
+        heroImageToggleBtn.innerHTML = arrowUp;
+        heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
+        heroImageToggleBtn.onclick = () => {
+            this.collapsed = !this.collapsed;
+            if (this.contentDOM) {
+                this.contentDOM.style.display = this.collapsed ? 'none' : '';
+            }
+            heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
+        };
+        panel.appendChild(label);
+        panel.appendChild(heroImageToggleBtn);
+        return panel;
+    }
+}
+export default createNodeView(HeroImageView);

package/dist/es/views/hero_image_editable.js

@@ -0,0 +1,19 @@
+/*!
+ * © 2025 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 { HeroImageView } from './hero_image';
+export default createEditableNodeView(EditableBlock(HeroImageView));

package/dist/types/commands.d.ts

@@ -83,3 +83,4 @@ export declare const addColumns: (direction: 'right' | 'left') => (state: Editor
 export declare const autoComplete: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const activateSearch: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const activateSearchReplace: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
+export declare const insertHeroImage: () => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;

package/dist/types/icons.d.ts

@@ -1,4 +1,5 @@
 export declare const arrowDown: string;
+export declare const arrowUp: string;
 export declare const alertIcon: string;
 export declare const deleteIcon: string;
 export declare const editIcon: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.84";
+export declare const VERSION = "2.8.85";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -0,0 +1,27 @@
+/*!
+ * © 2025 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 { FigureElementNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import BlockView from './block_view';
+export declare class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
+    private container;
+    private collapsed;
+    ignoreMutation: () => boolean;
+    createElement: () => void;
+    createPanel(): HTMLDivElement;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<HeroImageView>;
+export default _default;

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

@@ -0,0 +1,44 @@
+/*!
+ * © 2025 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 { HeroImageView } from './hero_image';
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => 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 | undefined;
+    elementType: string;
+    readonly props: import("../configs/ManuscriptsEditor").EditorProps;
+    node: import("prosemirror-model").Node;
+    readonly view: import("prosemirror-view").EditorView;
+    readonly getPos: () => number;
+    update(newNode: import("prosemirror-model").Node): boolean;
+    selectNode(): void;
+    deselectNode(): void;
+    destroy(): void;
+} & HeroImageView>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.84",
+  "version": "2.8.85",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -33,7 +33,7 @@
     "@manuscripts/library": "1.3.14",
     "@manuscripts/style-guide": "2.1.13",
     "@manuscripts/track-changes-plugin": "1.10.8",
-    "@manuscripts/transform": "3.0.67",
+    "@manuscripts/transform": "3.0.68",
     "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
     "codemirror": "^5.58.1",

package/styles/AdvancedEditor.css

@@ -307,7 +307,8 @@
 }
 
 .comment-marker:has(+ .block-contributors),
-.comment-marker:has(+ .block-affiliations) {
+.comment-marker:has(+ .block-affiliations),
+.comment-marker:has(+ .block-hero_image) {
   height: 0;
   top: 0;
   right: 60px;
@@ -434,7 +435,8 @@ span.comment-marker {
   display: none;
 }
 
-.ProseMirror div.backmatter:has(:only-child.bibliography > .empty-node)::before {
+.ProseMirror
+  div.backmatter:has(:only-child.bibliography > .empty-node)::before {
   border-bottom: none;
 }
 
@@ -1261,7 +1263,7 @@ th:hover > .table-context-menu-button,
   position: relative;
   pointer-events: none;
   user-select: none;
-  box-shadow: inset 49px 0 0 white, inset 53px 0 0 #6E6E6E;
+  box-shadow: inset 49px 0 0 white, inset 53px 0 0 #6e6e6e;
 }
 .ProseMirror .non-editable .body-overlay,
 .ProseMirror .non-editable .figure-overlay {
@@ -1275,7 +1277,7 @@ th:hover > .table-context-menu-button,
   z-index: 10;
 }
 .ProseMirror .non-editable .body-overlay {
-  width: 52px
+  width: 52px;
 }
 .ProseMirror .non-editable .block {
   opacity: 50%;
@@ -1335,7 +1337,9 @@ th:hover > .table-context-menu-button,
   transform: rotate(180deg);
 }
 
-.ProseMirror .accessibility_element_expander_button_container .toggle-button-open {
+.ProseMirror
+  .accessibility_element_expander_button_container
+  .toggle-button-open {
   right: calc(100% - 6px);
 }
 
@@ -1344,6 +1348,49 @@ th:hover > .table-context-menu-button,
   bottom: 36px;
 }
 
-.ProseMirror .block-table_element .accessibility_element_expander_button_container {
+.ProseMirror
+  .block-table_element
+  .accessibility_element_expander_button_container {
   left: 93%;
 }
+
+.hero-image-container {
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  background: white;
+  padding: 0 !important;
+}
+
+.ProseMirror div.backmatter:has(+ .block-container.block-hero_image)::after {
+  content: '';
+  display: block;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 0 35pt 32px 35pt;
+}
+
+.hero-image-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f2f2f2;
+  padding: 8px 12px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #6e6e6e;
+  border-bottom: 1px solid #c9c9c9;
+}
+
+.hero-image-container .figure-block {
+  border: none !important;
+}
+
+.hero-image-container .position-menu {
+  display: none !important;
+}
+.hero-image-toggle-btn svg {
+  width: 16px;
+  height: 9px;
+}
+.hero-image-toggle-btn.collapsed svg {
+  transform: rotate(180deg);
+}