@manuscripts/body-editor 3.12.17 → 3.12.19

package/dist/cjs/commands.js

@@ -37,8 +37,7 @@ const editor_props_1 = require("./plugins/editor-props");
 const search_replace_1 = require("./plugins/search-replace");
 const autocompletion_1 = require("./plugins/section_title/autocompletion");
 const persistent_cursor_1 = require("./plugins/persistent-cursor");
-const AffiliationsModal_1 = require("./components/affiliations/AffiliationsModal");
-const AuthorsModal_1 = require("./components/authors/AuthorsModal");
+const AuthorsAndAffiliationsModals_1 = require("./components/authors-affiliations/AuthorsAndAffiliationsModals");
 const addToStart = (state, dispatch) => {
     const { selection } = state;
     const props = (0, editor_props_1.getEditorProps)(state);
@@ -748,7 +747,7 @@ const insertContributors = (state, dispatch, view) => {
     if (dispatch) {
         const selection = prosemirror_state_1.NodeSelection.create(tr.doc, contributors.pos);
         dispatch(tr.setSelection(selection).scrollIntoView());
-        (0, AuthorsModal_1.openAuthorsModal)(contributors.pos, view);
+        (0, AuthorsAndAffiliationsModals_1.openAuthorsAndAffiliationsModals)(contributors.pos, view, 'authors');
     }
     return true;
 };
@@ -770,7 +769,7 @@ const insertAffiliation = (state, dispatch, view) => {
     if (dispatch) {
         const selection = prosemirror_state_1.NodeSelection.create(tr.doc, affiliations.pos);
         dispatch(tr.setSelection(selection).scrollIntoView());
-        (0, AffiliationsModal_1.openAffiliationsModal)(affiliations.pos, view);
+        (0, AuthorsAndAffiliationsModals_1.openAuthorsAndAffiliationsModals)(affiliations.pos, view, 'affiliations');
     }
     return true;
 };

package/dist/cjs/components/affiliations/AffiliationForm.js

@@ -39,14 +39,13 @@ const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
 const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
-    if (actionsRef && !actionsRef.current) {
+    const formRef = (0, react_1.useRef)(null);
+    if (actionsRef) {
         actionsRef.current = {
-            reset: () => {
-                formRef.current?.resetForm();
-            },
+            reset: () => formRef.current?.resetForm(),
+            submitForm: () => formRef.current?.submitForm(),
         };
     }
-    const formRef = (0, react_1.useRef)(null);
     const validateAffiliation = (values) => {
         const errors = {};
         if (!values.institution?.trim()) {
@@ -54,7 +53,7 @@ const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
         }
         return errors;
     };
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: (attrs) => onSave(attrs), innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
         react_1.default.createElement(style_guide_1.FormRow, null,
             react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => {
                 const hasError = formik.touched.institution && formik.errors.institution;

package/dist/cjs/components/affiliations/AffiliationsModal.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleUpdateAuthors = exports.handleDeleteAffiliation = exports.handleSaveAffiliation = exports.openAffiliationsModal = exports.AffiliationsModal = void 0;
+exports.AffiliationsModal = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const lodash_1 = require("lodash");
@@ -50,37 +50,45 @@ const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
 const FormFooter_1 = __importDefault(require("../form/FormFooter"));
 const FormPlaceholder_1 = require("../form/FormPlaceholder");
 const ModalFormActions_1 = require("../form/ModalFormActions");
-const GenericDrawer_1 = require("../modal-drawer/GenericDrawer");
-const GenericDrawerGroup_1 = require("../modal-drawer/GenericDrawerGroup");
+const AuthorsPanel_1 = require("../authors/AuthorsPanel");
 const AffiliationForm_1 = require("./AffiliationForm");
 const AffiliationList_1 = require("./AffiliationList");
-const editor_props_1 = require("../../plugins/editor-props");
-const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
-const view_1 = require("../../lib/view");
 function makeAuthorItems(authors) {
     return authors.map((author) => ({
         id: author.id,
         label: `${author.given} ${author.family}`,
     }));
 }
-const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
+const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, onOpenAuthorsModal, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(true);
     const [selection, setSelection] = (0, react_1.useState)(affiliation);
     const [showingDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
     const valuesRef = (0, react_1.useRef)(undefined);
     const actionsRef = (0, react_1.useRef)(undefined);
     const [authors, dispatchAuthors] = (0, react_1.useReducer)(AuthorsModal_1.authorsReducer, $authors.sort(authors_1.authorComparator));
+    (0, react_1.useEffect)(() => {
+        dispatchAuthors({
+            type: 'set',
+            state: [...$authors].sort(authors_1.authorComparator),
+        });
+    }, [$authors]);
     const [affiliations, dispatchAffiliations] = (0, react_1.useReducer)(useManageAffiliations_1.affiliationsReducer, $affiliations);
     const [isDisableSave, setIsDisableSave] = (0, react_1.useState)(true);
     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 [showAuthorDrawer, setShowAuthorDrawer] = (0, react_1.useState)(false);
     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)(new Map());
+    const prevIsOpenRef = (0, react_1.useRef)(isOpen);
+    (0, react_1.useEffect)(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            onClose?.();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
     (0, react_1.useEffect)(() => {
         if (!selection) {
             return;
@@ -145,7 +153,6 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
             setNewAffiliation(false);
             setSelection(affiliation);
             setSelectedAuthorIds(affiliatedAuthorIds);
-            setShowAuthorDrawer(false);
             setAffiliationAuthorMap((prevMap) => {
                 const newMap = new Map(prevMap);
                 newMap.set(affiliation.id, affiliatedAuthorIds);
@@ -185,7 +192,6 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
             newMap.set(affiliation.id, selectedAuthorIds);
             return newMap;
         });
-        setShowAuthorDrawer(false);
         setSavedAffiliationId(affiliation.id);
         setTimeout(() => {
             setSavedAffiliationId(undefined);
@@ -279,7 +285,6 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
         setNewAffiliation(true);
         setSelection(emptyAffiliation);
         setSelectedAuthorIds([]);
-        setShowAuthorDrawer(false);
     };
     (0, react_1.useEffect)(() => {
         if (addNewAffiliation) {
@@ -327,7 +332,6 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
     const handleConfirmationCancel = () => {
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        setShowAuthorDrawer(false);
         if (pendingAction === 'select' && pendingSelection) {
             setSelection(pendingSelection);
             setNewAffiliation(false);
@@ -368,19 +372,17 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
                         react_1.default.createElement(AffiliationList_1.AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
                 react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(AffiliationTabs, null,
-                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
                                 !(showConfirmationDialog ||
                                     showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
                         react_1.default.createElement(style_guide_1.InspectorTabList, null,
                             react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
-                            react_1.default.createElement(style_guide_1.InspectorTab, null, "Authors")),
+                            onOpenAuthorsModal && react_1.default.createElement(style_guide_1.InspectorTab, null, "Authors")),
                         react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
                             react_1.default.createElement(AffiliationTabPanel, null,
-                                react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
-                            react_1.default.createElement(AffiliationTabPanel, null,
-                                react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: GenericDrawer_1.GenericDrawer, removeItem: (id) => {
-                                        setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
-                                    }, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }) })))),
+                                react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef })),
+                            onOpenAuthorsModal && (react_1.default.createElement(AffiliationTabPanel, null,
+                                react_1.default.createElement(AuthorsPanel_1.AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, onOpenAuthorsModal: onOpenAuthorsModal }))))),
                     react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "affiliation" }),
                     react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }))) : (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 }))));
@@ -447,41 +449,3 @@ const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.
   margin-top: 8px;
   margin-bottom: 16px;
 `;
-const openAffiliationsModal = (pos, view) => {
-    if (!view) {
-        return;
-    }
-    const { state } = view;
-    const props = (0, editor_props_1.getEditorProps)(state);
-    const contributors = (0, view_1.findChildrenAttrsByType)(view, transform_1.schema.nodes.contributor);
-    const componentProps = {
-        affiliations: [],
-        authors: contributors,
-        onSaveAffiliation: (affiliation) => (0, exports.handleSaveAffiliation)(view, affiliation, pos),
-        onDeleteAffiliation: (affiliation) => (0, exports.handleDeleteAffiliation)(view, affiliation),
-        onUpdateAuthors: (authors) => (0, exports.handleUpdateAuthors)(view, authors),
-        addNewAffiliation: true,
-    };
-    const dialog = (0, ReactSubView_1.default)(props, exports.AffiliationsModal, componentProps, state.doc, () => pos, view);
-    view.focus();
-    document.body.appendChild(dialog);
-};
-exports.openAffiliationsModal = openAffiliationsModal;
-const handleSaveAffiliation = (view, affiliation, affiliationsPos) => {
-    const update = (0, view_1.updateNodeAttrs)(view, transform_1.schema.nodes.affiliation, affiliation);
-    if (!update) {
-        const node = transform_1.schema.nodes.affiliation.create(affiliation);
-        view.dispatch(view.state.tr.insert(affiliationsPos + 1, node));
-    }
-};
-exports.handleSaveAffiliation = handleSaveAffiliation;
-const handleDeleteAffiliation = (view, affiliation) => {
-    (0, view_1.deleteNode)(view, affiliation.id);
-};
-exports.handleDeleteAffiliation = handleDeleteAffiliation;
-const handleUpdateAuthors = (view, authors) => {
-    authors.forEach((author) => {
-        (0, view_1.updateNodeAttrs)(view, transform_1.schema.nodes.contributor, author);
-    });
-};
-exports.handleUpdateAuthors = handleUpdateAuthors;

package/dist/cjs/components/affiliations/AffiliationsPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationsPanel = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const GenericPanel_1 = require("../authors-affiliations/GenericPanel");
+function affiliationSecondaryLine(item) {
+    const line = [item.city, item.county, item.country].filter(Boolean).join(', ');
+    return line || undefined;
+}
+const AffiliationsPanel = ({ items, selectedItems = [], onSelect, onOpenAffiliationsModal, }) => {
+    const selectedIds = (0, GenericPanel_1.useListSelectedIds)(selectedItems);
+    return (react_1.default.createElement(GenericPanel_1.GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-panel-empty", isEmpty: items.length === 0, emptyIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null), emptyMessage: react_1.default.createElement(react_1.default.Fragment, null,
+            "There are no affiliations attributed yet!",
+            react_1.default.createElement("br", null),
+            "Click \u2018Create New Affiliation\u2019") },
+        react_1.default.createElement(GenericPanel_1.ListItems, { "data-cy": "affiliations-panel" }, items.map((item) => (react_1.default.createElement(GenericPanel_1.ListItem, { key: item.id, selected: selectedIds.has(item.id), onClick: () => onSelect(item.id), primary: item.institution, secondary: affiliationSecondaryLine(item) }))))));
+};
+exports.AffiliationsPanel = AffiliationsPanel;

package/dist/cjs/components/authors/AuthorDetailsForm.js

@@ -73,11 +73,10 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
             formRef.current.setFieldValue('creditRoles', selectedCreditRoles);
         }
     }, [selectedCreditRoles]);
-    if (actionsRef && !actionsRef.current) {
+    if (actionsRef) {
         actionsRef.current = {
-            reset: () => {
-                formRef.current?.resetForm();
-            },
+            reset: () => formRef.current?.resetForm(),
+            submitForm: () => formRef.current?.submitForm(),
         };
     }
     const validateAuthor = (values) => {

package/dist/cjs/components/authors/AuthorsModal.js

@@ -51,7 +51,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleDeleteContributor = exports.handleSaveContributor = exports.openAuthorsModal = exports.AuthorsModal = exports.authorsReducer = void 0;
+exports.AuthorsModal = exports.authorsReducer = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const lodash_1 = require("lodash");
@@ -65,18 +65,22 @@ const FormFooter_1 = __importDefault(require("../form/FormFooter"));
 const FormPlaceholder_1 = require("../form/FormPlaceholder");
 const ModalFormActions_1 = require("../form/ModalFormActions");
 const GenericDrawerGroup_1 = require("../modal-drawer/GenericDrawerGroup");
-const AffiliationDrawer_1 = require("./AffiliationDrawer");
+const AffiliationsPanel_1 = require("../affiliations/AffiliationsPanel");
 const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
 const AuthorList_1 = require("./AuthorList");
 const CreditDrawer_1 = require("./CreditDrawer");
 const useManageAffiliations_1 = require("./useManageAffiliations");
 const useManageCredit_1 = require("./useManageCredit");
-const editor_props_1 = require("../../plugins/editor-props");
-const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
-const view_1 = require("../../lib/view");
 exports.authorsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
-const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
+const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, onOpenAffiliationsModal, onClose, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const prevIsOpenRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            onClose?.();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
     const [isDisableSave, setDisableSave] = (0, react_1.useState)(true);
     const [isEmailRequired, setEmailRequired] = (0, react_1.useState)(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = (0, react_1.useState)(false);
@@ -99,7 +103,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = (0, react_1.useState)(author);
-    const { showAffiliationDrawer, setShowAffiliationDrawer, selectedAffiliations, setSelectedAffiliations, removeAffiliation, selectAffiliation, affiliations, } = (0, useManageAffiliations_1.useManageAffiliations)(selection, $affiliations);
+    const { selectedAffiliations, setSelectedAffiliations, selectAffiliation, affiliations, } = (0, useManageAffiliations_1.useManageAffiliations)(selection, $affiliations);
     (0, react_1.useEffect)(() => {
         const currentAuthor = selection;
         const relevantAffiliations = affiliations.filter((item) => currentAuthor?.affiliationIDs?.includes(item.id));
@@ -126,12 +130,10 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             else {
                 updateAffiliationSelection(author);
                 setSelection(author);
-                setShowAffiliationDrawer(false);
                 setNewAuthor(false);
             }
         }
         else {
-            setShowAffiliationDrawer(false);
             updateAffiliationSelection(author);
             setSelection(author);
             setNewAuthor(false);
@@ -172,7 +174,6 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
                 setSelection(nextAuthor);
                 setNextAuthor(null);
                 setNewAuthor(false);
-                setShowAffiliationDrawer(false);
                 updateAffiliationSelection(nextAuthor);
                 setIsCreatingNewAuthor(false);
             }
@@ -205,7 +206,6 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        setShowAffiliationDrawer(false);
     };
     const saveAuthor = (values) => {
         if (!values || !selection) {
@@ -224,7 +224,6 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         setSelection(author);
         setShowConfirmationDialog(false);
         setNewAuthor(false);
-        setShowAffiliationDrawer(false);
         setIsCreatingNewAuthor(false);
         dispatchAuthors({
             type: 'update',
@@ -281,7 +280,6 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         else {
             createNewAuthor();
-            setShowAffiliationDrawer(false);
         }
     };
     const deleteAuthor = () => {
@@ -350,19 +348,19 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
                         react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(AuthorTabs, null,
-                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
+                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
                                 (isCreatingNewAuthor &&
                                     !showConfirmationDialog &&
                                     !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
                         react_1.default.createElement(style_guide_1.InspectorTabList, null,
                             react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
-                            react_1.default.createElement(style_guide_1.InspectorTab, null, "Affiliations"),
+                            onOpenAffiliationsModal && (react_1.default.createElement(style_guide_1.InspectorTab, null, "Affiliations")),
                             react_1.default.createElement(style_guide_1.InspectorTab, null, "Contributions (CRediT)")),
                         react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
                             react_1.default.createElement(AuthorTabPanel, null,
                                 react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
-                            react_1.default.createElement(AuthorTabPanel, null,
-                                react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: AffiliationDrawer_1.AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }) })),
+                            onOpenAffiliationsModal && (react_1.default.createElement(AuthorTabPanel, null,
+                                react_1.default.createElement(AffiliationsPanel_1.AffiliationsPanel, { items: affiliations, selectedItems: selectedAffiliations, onSelect: selectAffiliation, onOpenAffiliationsModal: onOpenAffiliationsModal }))),
                             react_1.default.createElement(AuthorTabPanel, null,
                                 react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
                                         id: r.vocabTerm,
@@ -431,34 +429,3 @@ const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody
 const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
   margin-bottom: 16px;
 `;
-const openAuthorsModal = (pos, view) => {
-    if (!view) {
-        return;
-    }
-    const { state } = view;
-    const props = (0, editor_props_1.getEditorProps)(state);
-    const affiliations = (0, view_1.findChildrenAttrsByType)(view, transform_1.schema.nodes.affiliation);
-    const componentProps = {
-        authors: [],
-        affiliations,
-        onSaveAuthor: (contributor) => (0, exports.handleSaveContributor)(view, contributor, pos),
-        onDeleteAuthor: (contributor) => (0, exports.handleDeleteContributor)(view, contributor),
-        addNewAuthor: true,
-    };
-    const dialog = (0, ReactSubView_1.default)(props, exports.AuthorsModal, componentProps, state.doc, () => pos, view);
-    view.focus();
-    document.body.appendChild(dialog);
-};
-exports.openAuthorsModal = openAuthorsModal;
-const handleSaveContributor = (view, contributor, contributorsPos) => {
-    const update = (0, view_1.updateNodeAttrs)(view, transform_1.schema.nodes.contributor, contributor);
-    if (!update) {
-        const node = transform_1.schema.nodes.contributor.create(contributor);
-        view.dispatch(view.state.tr.insert(contributorsPos + 1, node));
-    }
-};
-exports.handleSaveContributor = handleSaveContributor;
-const handleDeleteContributor = (view, contributor) => {
-    (0, view_1.deleteNode)(view, contributor.id);
-};
-exports.handleDeleteContributor = handleDeleteContributor;

package/dist/cjs/components/authors/AuthorsPanel.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthorsPanel = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const GenericPanel_1 = require("../authors-affiliations/GenericPanel");
+const AuthorsPanel = ({ items, selectedItems = [], onSelect, onOpenAuthorsModal, }) => {
+    const selectedIds = (0, GenericPanel_1.useListSelectedIds)(selectedItems);
+    return (react_1.default.createElement(GenericPanel_1.GenericPanel, { title: "Authors", createLabel: "Add New Author", onCreate: onOpenAuthorsModal, createDataCy: "add-authors-link", emptyDataCy: "authors-panel-empty", isEmpty: items.length === 0, emptyIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null), emptyMessage: react_1.default.createElement(react_1.default.Fragment, null,
+            "There are no authors attributed yet!",
+            react_1.default.createElement("br", null),
+            "Click \u2018Add New Author\u2019") },
+        react_1.default.createElement(GenericPanel_1.ListItems, { "data-cy": "authors-panel" }, items.map((item) => (react_1.default.createElement(GenericPanel_1.ListItem, { key: item.id, selected: selectedIds.has(item.id), onClick: () => onSelect(item.id), primary: item.label }))))));
+};
+exports.AuthorsPanel = AuthorsPanel;

package/dist/cjs/components/authors/useManageAffiliations.js

@@ -5,8 +5,12 @@ const react_1 = require("react");
 const array_reducer_1 = require("../../lib/array-reducer");
 exports.affiliationsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
 const useManageAffiliations = (selection, $affiliations) => {
-    const [affiliations] = (0, react_1.useReducer)(exports.affiliationsReducer, $affiliations);
-    const [showAffiliationDrawer, setShowAffiliationDrawer] = (0, react_1.useState)(false);
+    const [affiliations, dispatchAffiliations] = (0, react_1.useReducer)(exports.affiliationsReducer, [
+        ...$affiliations,
+    ]);
+    (0, react_1.useEffect)(() => {
+        dispatchAffiliations({ type: 'set', state: [...$affiliations] });
+    }, [$affiliations]);
     const [selectedAffiliations, setSelectedAffiliations] = (0, react_1.useState)([]);
     const removeAffiliation = (affId) => {
         if (!selection) {
@@ -29,8 +33,6 @@ const useManageAffiliations = (selection, $affiliations) => {
         setSelectedAffiliations(affiliations.filter((item) => newAffiliations.includes(item.id)));
     };
     return {
-        showAffiliationDrawer,
-        setShowAffiliationDrawer,
         selectedAffiliations,
         setSelectedAffiliations,
         removeAffiliation,

package/dist/cjs/components/authors-affiliations/AuthorsAndAffiliationsModals.js

@@ -0,0 +1,134 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openAuthorsAndAffiliationsModals = exports.AuthorsAndAffiliationsModals = void 0;
+const transform_1 = require("@manuscripts/transform");
+const react_1 = __importStar(require("react"));
+const editor_props_1 = require("../../plugins/editor-props");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
+const view_1 = require("../../lib/view");
+const AffiliationsModal_1 = require("../affiliations/AffiliationsModal");
+const AuthorsModal_1 = require("../authors/AuthorsModal");
+function insertNode(parentType, childType) {
+    return (view, attrs) => {
+        const parent = (0, view_1.findChildByType)(view, parentType);
+        if (parent) {
+            view.dispatch(view.state.tr.insert(parent.pos + 1, childType.create(attrs)));
+        }
+    };
+}
+function upsertNode(nodeType, insertFn) {
+    return (view, attrs) => {
+        if (!(0, view_1.updateNodeAttrs)(view, nodeType, attrs)) {
+            insertFn(view, attrs);
+        }
+    };
+}
+const insertAuthorNode = insertNode(transform_1.schema.nodes.contributors, transform_1.schema.nodes.contributor);
+const insertAffiliationNode = insertNode(transform_1.schema.nodes.affiliations, transform_1.schema.nodes.affiliation);
+const upsertAuthor = upsertNode(transform_1.schema.nodes.contributor, insertAuthorNode);
+const upsertAffiliation = upsertNode(transform_1.schema.nodes.affiliation, insertAffiliationNode);
+const AuthorsAndAffiliationsModals = ({ initialModal, view, author, affiliation, addNewAuthor, addNewAffiliation, }) => {
+    const [showOverlay, setShowOverlay] = (0, react_1.useState)(false);
+    const [authors, setAuthors] = (0, react_1.useState)(() => (0, view_1.findChildrenAttrsByType)(view, transform_1.schema.nodes.contributor));
+    const [affiliations, setAffiliations] = (0, react_1.useState)(() => (0, view_1.findChildrenAttrsByType)(view, transform_1.schema.nodes.affiliation));
+    const handleOpenOverlay = () => setShowOverlay(true);
+    const handleOverlayClose = () => {
+        setShowOverlay(false);
+        setAuthors((0, view_1.findChildrenAttrsByType)(view, transform_1.schema.nodes.contributor));
+        setAffiliations((0, view_1.findChildrenAttrsByType)(view, transform_1.schema.nodes.affiliation));
+    };
+    const authorsProps = {
+        author,
+        authors,
+        affiliations,
+        addNewAuthor,
+        onSaveAuthor: (a) => upsertAuthor(view, a),
+        onDeleteAuthor: (a) => (0, view_1.deleteNode)(view, a.id),
+    };
+    const affiliationsProps = {
+        affiliation,
+        authors,
+        affiliations,
+        addNewAffiliation,
+        onSaveAffiliation: (a) => upsertAffiliation(view, a),
+        onDeleteAffiliation: (a) => (0, view_1.deleteNode)(view, a.id),
+        onUpdateAuthors: (updated) => updated.forEach((a) => (0, view_1.updateNodeAttrs)(view, transform_1.schema.nodes.contributor, a)),
+    };
+    if (initialModal === 'authors') {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(AuthorsModal_1.AuthorsModal, { ...authorsProps, onOpenAffiliationsModal: handleOpenOverlay }),
+            showOverlay && (react_1.default.createElement(AffiliationsModal_1.AffiliationsModal, { ...affiliationsProps, addNewAffiliation: true, onClose: handleOverlayClose }))));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(AffiliationsModal_1.AffiliationsModal, { ...affiliationsProps, onOpenAuthorsModal: handleOpenOverlay }),
+        showOverlay && (react_1.default.createElement(AuthorsModal_1.AuthorsModal, { ...authorsProps, addNewAuthor: true, onClose: handleOverlayClose }))));
+};
+exports.AuthorsAndAffiliationsModals = AuthorsAndAffiliationsModals;
+const openAuthorsAndAffiliationsModals = (pos, view, initialModal) => {
+    if (!view) {
+        return;
+    }
+    const { state } = view;
+    const props = (0, editor_props_1.getEditorProps)(state);
+    const componentProps = {
+        initialModal,
+        view: view,
+        addNewAuthor: initialModal === 'authors',
+        addNewAffiliation: initialModal === 'affiliations',
+    };
+    const dialog = (0, ReactSubView_1.default)(props, exports.AuthorsAndAffiliationsModals, componentProps, state.doc, () => pos, view);
+    view.focus();
+    document.body.appendChild(dialog);
+};
+exports.openAuthorsAndAffiliationsModals = openAuthorsAndAffiliationsModals;