@manuscripts/body-editor 2.8.83 → 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/affiliations/AffiliationsModal.js

@@ -109,7 +109,7 @@ const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.
   margin-bottom: 16px;
 `;
 const normalize = (affiliation) => ({
-    id: affiliation.id,
+    id: affiliation.id || (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
     institution: affiliation.institution,
     department: affiliation.department,
     addressLine1: affiliation.addressLine1,
@@ -122,9 +122,9 @@ const normalize = (affiliation) => ({
     email: affiliation.email,
     priority: affiliation.priority,
 });
-const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
+const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(true);
-    const [selection, setSelection] = (0, react_1.useState)(undefined);
+    const [selection, setSelection] = (0, react_1.useState)(affiliation);
     const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
     const valuesRef = (0, react_1.useRef)();
     const actionsRef = (0, react_1.useRef)();
@@ -134,37 +134,37 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
     const [newAffiliation, setNewAffiliation] = (0, react_1.useState)(false);
     const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = (0, react_1.useState)(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = (0, react_1.useState)(false);
-    const affiliation = {
-        id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
-        institution: '',
-        department: '',
-        addressLine1: '',
-        addressLine2: '',
-        addressLine3: '',
-        postCode: '',
-        country: '',
-        county: '',
-        city: '',
-        email: {
-            href: '',
-            text: '',
-        },
-        priority: affiliations.length,
-    };
     const [showAuthorDrawer, setShowAuthorDrawer] = (0, react_1.useState)(false);
-    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    const [selectedAuthorIds, setSelectedAuthorIds] = (0, react_1.useState)([]);
     const [pendingSelection, setPendingSelection] = (0, react_1.useState)(null);
     const [pendingAction, setPendingAction] = (0, react_1.useState)(null);
     const [savedAffiliationId, setSavedAffiliationId] = (0, react_1.useState)(undefined);
-    const [affiliationAuthorMap, setAffiliationAuthorMap] = (0, react_1.useState)({});
+    const [affiliationAuthorMap, setAffiliationAuthorMap] = (0, react_1.useState)(new Map());
+    (0, react_1.useEffect)(() => {
+        if (!selection) {
+            return;
+        }
+        const currentAffiliation = selection;
+        const affiliatedAuthorIds = authors
+            .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.includes(currentAffiliation.id); })
+            .map((author) => author.id);
+        setSelectedAuthorIds(affiliatedAuthorIds);
+        setAffiliationAuthorMap((prevMap) => {
+            const newMap = new Map(prevMap);
+            newMap.set(currentAffiliation.id, affiliatedAuthorIds);
+            return newMap;
+        });
+    }, []);
     const handleClose = () => {
-        var _a;
+        var _a, _b;
         const values = valuesRef.current;
         const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(values, normalize(selection));
-        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
-        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
+        const originalAuthors = selection
+            ? (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : []
+            : [];
+        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedAuthorIds.sort());
         const hasChanges = hasAffiliationChanges || (selection && hasAuthorChanges);
-        const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
+        const isInstitutionEmpty = ((_b = values === null || values === void 0 ? void 0 : values.institution) === null || _b === void 0 ? void 0 : _b.trim()) === '';
         if (hasChanges) {
             if (isInstitutionEmpty && hasAffiliationChanges) {
                 setShowRequiredFieldConfirmationDialog(true);
@@ -179,13 +179,15 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
         }
     };
     const handleSelect = (affiliation) => {
-        var _a;
+        var _a, _b;
         const values = valuesRef.current;
         const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(values, normalize(selection));
-        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
-        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
+        const originalAuthors = selection
+            ? (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : []
+            : [];
+        const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedAuthorIds.sort());
         const hasChanges = hasAffiliationChanges || hasAuthorChanges;
-        const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
+        const isInstitutionEmpty = ((_b = values === null || values === void 0 ? void 0 : values.institution) === null || _b === void 0 ? void 0 : _b.trim()) === '';
         if (hasChanges) {
             setPendingSelection(affiliation);
             setPendingAction('select');
@@ -202,12 +204,16 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
                 .map((author) => author.id);
             setNewAffiliation(false);
             setSelection(affiliation);
-            setSelectedIds(affiliatedAuthorIds);
+            setSelectedAuthorIds(affiliatedAuthorIds);
             setShowAuthorDrawer(false);
-            setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: affiliatedAuthorIds })));
+            setAffiliationAuthorMap((prevMap) => {
+                const newMap = new Map(prevMap);
+                newMap.set(affiliation.id, affiliatedAuthorIds);
+                return newMap;
+            });
         }
     };
-    const handleSaveAffiliation = (values) => {
+    const handleSaveAffiliation = (0, react_1.useCallback)((values) => {
         if (!values || !selection) {
             return;
         }
@@ -219,7 +225,7 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
             items: [affiliation],
         });
         setSelection(affiliation);
-        const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedIds.includes(author.id)
+        const updatedAuthors = authors.map((author) => (Object.assign(Object.assign({}, author), { affiliations: selectedAuthorIds.includes(author.id)
                 ? [...new Set([...(author.affiliations || []), affiliation.id])]
                 : (author.affiliations || []).filter((id) => id !== affiliation.id) })));
         dispatchAuthors({
@@ -228,15 +234,27 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
         });
         onUpdateAuthors(updatedAuthors);
         setNewAffiliation(false);
-        setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [affiliation.id]: selectedIds })));
+        setAffiliationAuthorMap((prevMap) => {
+            const newMap = new Map(prevMap);
+            newMap.set(affiliation.id, selectedAuthorIds);
+            return newMap;
+        });
         setShowAuthorDrawer(false);
         setSavedAffiliationId(affiliation.id);
         setTimeout(() => {
             setSavedAffiliationId(undefined);
         }, 3200);
-    };
+    }, [
+        authors,
+        dispatchAffiliations,
+        dispatchAuthors,
+        onSaveAffiliation,
+        onUpdateAuthors,
+        selectedAuthorIds,
+        selection,
+    ]);
     const handleAffiliationChange = (values) => {
-        var _a;
+        var _a, _b;
         valuesRef.current = values;
         if (!selection || selection.id !== values.id) {
             setIsDisableSave(true);
@@ -244,8 +262,8 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
         }
         const isInstitutionEmpty = !((_a = values.institution) === null || _a === void 0 ? void 0 : _a.trim());
         const hasAffiliationChanges = selection && !(0, lodash_1.isEqual)(normalize(values), normalize(selection));
-        const originalAuthors = affiliationAuthorMap[(selection === null || selection === void 0 ? void 0 : selection.id) || ''] || [];
-        const hasAuthorChanges = selection && !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedIds.sort());
+        const originalAuthors = (_b = affiliationAuthorMap.get(selection.id)) !== null && _b !== void 0 ? _b : [];
+        const hasAuthorChanges = selection && !(0, lodash_1.isEqual)(originalAuthors.sort(), selectedAuthorIds.sort());
         const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
         setIsDisableSave(!shouldEnableSave);
     };
@@ -267,22 +285,22 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
             type: 'delete',
             item: selection,
         });
-        setSelectedIds([]);
+        setSelectedAuthorIds([]);
         setSelection(undefined);
     };
     const handleAuthorSelect = (authorId) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!selection) {
             return;
         }
-        const newSelectedAuthorIds = selectedIds.includes(authorId)
-            ? selectedIds.filter((id) => id !== authorId)
-            : [...selectedIds, authorId];
-        setSelectedIds(newSelectedAuthorIds);
+        const newSelectedAuthorIds = selectedAuthorIds.includes(authorId)
+            ? selectedAuthorIds.filter((id) => id !== authorId)
+            : [...selectedAuthorIds, authorId];
+        setSelectedAuthorIds(newSelectedAuthorIds);
         const hasAffiliationChanges = !(0, lodash_1.isEqual)(valuesRef.current, normalize(selection));
-        const originalAuthors = affiliationAuthorMap[selection.id] || [];
+        const originalAuthors = (_a = affiliationAuthorMap.get(selection.id)) !== null && _a !== void 0 ? _a : [];
         const hasAuthorChanges = !(0, lodash_1.isEqual)(originalAuthors.sort(), newSelectedAuthorIds.sort());
-        const isInstitutionEmpty = !((_b = (_a = valuesRef.current) === null || _a === void 0 ? void 0 : _a.institution) === null || _b === void 0 ? void 0 : _b.trim());
+        const isInstitutionEmpty = !((_c = (_b = valuesRef.current) === null || _b === void 0 ? void 0 : _b.institution) === null || _c === void 0 ? void 0 : _c.trim());
         const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
         setIsDisableSave(!shouldEnableSave);
     };
@@ -290,7 +308,7 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
         id: author.id,
         label: `${author.bibliographicName.given} ${author.bibliographicName.family}`,
     }));
-    const selectedAuthors = selectedIds
+    const selectedAuthors = selectedAuthorIds
         .map((authorId) => {
         const author = authors.find((a) => a.id === authorId);
         return {
@@ -306,6 +324,23 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
         const values = valuesRef.current;
         const hasChanges = !isDisableSave;
         const isInstitutionEmpty = ((_a = values === null || values === void 0 ? void 0 : values.institution) === null || _a === void 0 ? void 0 : _a.trim()) === '';
+        const emptyAffiliation = {
+            id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
+            institution: '',
+            department: '',
+            addressLine1: '',
+            addressLine2: '',
+            addressLine3: '',
+            postCode: '',
+            country: '',
+            county: '',
+            city: '',
+            email: {
+                href: '',
+                text: '',
+            },
+            priority: affiliations.length,
+        };
         if (hasChanges) {
             setPendingAction('new');
             if (isInstitutionEmpty) {
@@ -317,8 +352,8 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
             return;
         }
         setNewAffiliation(true);
-        setSelection(affiliation);
-        setSelectedIds([]);
+        setSelection(emptyAffiliation);
+        setSelectedAuthorIds([]);
         setShowAuthorDrawer(false);
     };
     (0, react_1.useEffect)(() => {
@@ -327,14 +362,14 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
             setNewAffiliation(true);
         }
     }, [addNewAffiliation]);
-    const handleConfirmationSave = () => {
+    const handleConfirmationSave = (0, react_1.useCallback)(() => {
         handleSaveAffiliation(valuesRef.current);
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
         if (pendingAction === 'new') {
             setNewAffiliation(true);
             setSelection(affiliation);
-            setSelectedIds([]);
+            setSelectedAuthorIds([]);
             setIsDisableSave(true);
         }
         else if (pendingAction === 'select' && pendingSelection) {
@@ -343,17 +378,27 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
             const affiliatedAuthorIds = authors
                 .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
                 .map((author) => author.id);
-            setSelectedIds(affiliatedAuthorIds);
+            setSelectedAuthorIds(affiliatedAuthorIds);
             valuesRef.current = normalize(pendingSelection);
             setIsDisableSave(true);
-            setAffiliationAuthorMap((prevMap) => (Object.assign(Object.assign({}, prevMap), { [pendingSelection.id]: affiliatedAuthorIds })));
+            setAffiliationAuthorMap((prevMap) => {
+                const newMap = new Map(prevMap);
+                newMap.set(pendingSelection.id, affiliatedAuthorIds);
+                return newMap;
+            });
         }
-        setPendingSelection(null);
-        setPendingAction(null);
         if (pendingAction === 'close') {
             setIsOpen(false);
         }
-    };
+        setPendingSelection(null);
+        setPendingAction(null);
+    }, [
+        authors,
+        affiliation,
+        pendingAction,
+        pendingSelection,
+        handleSaveAffiliation,
+    ]);
     const handleConfirmationCancel = () => {
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
@@ -364,12 +409,12 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
             const affiliatedAuthorIds = authors
                 .filter((author) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.some((aff) => aff === pendingSelection.id); })
                 .map((author) => author.id);
-            setSelectedIds(affiliatedAuthorIds);
+            setSelectedAuthorIds(affiliatedAuthorIds);
         }
         else if (pendingAction === 'new') {
             setNewAffiliation(true);
             setSelection(affiliation);
-            setSelectedIds([]);
+            setSelectedAuthorIds([]);
         }
         if (pendingSelection) {
             valuesRef.current = normalize(pendingSelection);
@@ -408,9 +453,9 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, onS
                                 react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }),
                                 "Affiliate Authors")),
                         react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": "affiliation-authors", items: selectedAuthors, onRemove: (id) => {
-                                setSelectedIds((prev) => prev.filter((authorId) => authorId !== id));
+                                setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
                             }, placeholder: "No authors assigned" })),
-                    showAuthorDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
+                    showAuthorDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: authorItems, selectedIds: selectedAuthorIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
             react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
 };
 exports.AffiliationsModal = AffiliationsModal;

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

package/dist/cjs/views/affiliations.js

@@ -39,17 +39,21 @@ class AffiliationsView extends block_view_1.default {
         this.stopEvent = () => true;
         this.handleClick = (event) => {
             const element = event.target;
-            const item = element.closest('.affiliation');
-            if (item) {
-                const node = (0, view_1.findChildByID)(this.view, item.id);
-                if (!node) {
-                    return;
-                }
-                const view = this.view;
-                const tr = view.state.tr;
-                tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, node.pos));
-                view.dispatch(tr);
+            const affiliation = element.closest('.affiliation');
+            if (!affiliation) {
+                return;
             }
+            const { node, pos } = (0, view_1.findChildByID)(this.view, affiliation.id) || {};
+            if (!node || !pos) {
+                return;
+            }
+            if (!(0, track_changes_utils_1.isDeleted)(node)) {
+                this.showContextMenu(affiliation);
+            }
+            const view = this.view;
+            const tr = view.state.tr;
+            tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, pos));
+            view.dispatch(tr);
         };
         this.insertAffiliationNode = (attrs) => {
             const pos = this.getPos();
@@ -66,12 +70,16 @@ class AffiliationsView extends block_view_1.default {
         this.handleDeleteAffiliation = (affiliation) => {
             (0, view_1.deleteNode)(this.view, affiliation.id);
         };
-        this.handleEdit = (addNew) => {
+        this.handleEdit = (id, addNew) => {
             var _a;
             this.props.popper.destroy();
             const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
             const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
+            const affiliation = id
+                ? affiliations.filter((a) => a.id === id)[0]
+                : undefined;
             const componentProps = {
+                affiliation,
                 authors: contributors,
                 affiliations,
                 onSaveAffiliation: this.handleSaveAffiliation,
@@ -83,7 +91,7 @@ class AffiliationsView extends block_view_1.default {
             this.popper = (0, ReactSubView_1.default)(this.props, AffiliationsModal_1.AffiliationsModal, componentProps, this.node, this.getPos, this.view);
             this.container.appendChild(this.popper);
         };
-        this.showContextMenu = () => {
+        this.showGroupContextMenu = () => {
             const can = this.props.getCapabilities();
             const componentProps = {
                 actions: [],
@@ -96,12 +104,12 @@ class AffiliationsView extends block_view_1.default {
                 });
                 componentProps.actions.push({
                     label: 'New Affiliation',
-                    action: () => this.handleEdit(true),
+                    action: () => this.handleEdit('', true),
                     icon: 'AddOutline',
                 });
                 componentProps.actions.push({
                     label: 'Edit',
-                    action: () => this.handleEdit(),
+                    action: () => this.handleEdit(''),
                     icon: 'Edit',
                 });
                 this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
@@ -109,15 +117,30 @@ class AffiliationsView extends block_view_1.default {
             }
             return undefined;
         };
+        this.showContextMenu = (element) => {
+            const affiliationNameBlock = element.querySelector('.affiliation-name');
+            this.props.popper.destroy();
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => this.handleEdit(element.id),
+                        icon: 'Edit',
+                    },
+                ],
+            };
+            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
+            this.props.popper.show(affiliationNameBlock || element, this.contextMenu, 'right-start');
+        };
         this.actionGutterButtons = () => {
-            const contextMenu = this.showContextMenu();
+            const contextMenu = this.showGroupContextMenu();
             return contextMenu ? [contextMenu] : [];
         };
         this.selectNode = () => {
             const selectedMarker = document.querySelector('.comment-marker.selected-comment');
             this.dom.classList.add('ProseMirror-selectednode');
             if (!(0, track_changes_utils_1.isDeleted)(this.node) && !selectedMarker) {
-                this.handleEdit(true);
+                this.handleEdit('', true);
             }
         };
         this.handleUpdateAuthors = (authors) => {