@manuscripts/body-editor 3.12.17 → 3.12.20

package/dist/es/commands.js

@@ -33,8 +33,7 @@ import { getEditorProps } from './plugins/editor-props';
 import { searchReplaceKey } from './plugins/search-replace';
 import { checkForCompletion } from './plugins/section_title/autocompletion';
 import { persistentCursor } from './plugins/persistent-cursor';
-import { openAffiliationsModal } from './components/affiliations/AffiliationsModal';
-import { openAuthorsModal } from './components/authors/AuthorsModal';
+import { openAuthorsAndAffiliationsModals } from './components/authors-affiliations/AuthorsAndAffiliationsModals';
 export const addToStart = (state, dispatch) => {
     const { selection } = state;
     const props = getEditorProps(state);
@@ -176,7 +175,7 @@ export const createBlock = (nodeType, position, state, dispatch, attrs) => {
         case schema.nodes.listing_element:
             node = schema.nodes.listing_element.create({}, [
                 schema.nodes.listing.create(),
-                createAndFillFigcaptionElement(),
+                ...createAndFillCaption(),
             ]);
             break;
         case schema.nodes.equation_element:
@@ -244,10 +243,7 @@ export const insertFigure = (file, state, dispatch) => {
     });
     const element = state.schema.nodes.figure_element.createAndFill({}, [
         figure,
-        state.schema.nodes.figcaption.create({}, [
-            state.schema.nodes.caption_title.create(),
-            state.schema.nodes.caption.create(),
-        ]),
+        schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
     ]);
     const tr = state.tr.insert(position, element);
     dispatch(tr);
@@ -262,7 +258,7 @@ export const insertEmbed = (state, dispatch, attrs) => {
         ...attrs,
         id: generateNodeID(schema.nodes.embed),
     }, [
-        createAndFillFigcaptionElement(),
+        ...createAndFillCaption(),
         schema.nodes.alt_text.create(),
         schema.nodes.long_desc.create(),
     ]);
@@ -286,12 +282,7 @@ export const insertSupplement = (file, view) => {
     const supplement = schema.nodes.supplement.createAndFill({
         id: generateNodeID(schema.nodes.supplement),
         href: file.id,
-    }, [
-        schema.nodes.figcaption.create({}, [
-            schema.nodes.caption_title.create(),
-            schema.nodes.caption.create(),
-        ]),
-    ]);
+    }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = upsertSupplementsSection(tr, supplement);
     tr.setSelection(NodeSelection.create(tr.doc, pos));
@@ -560,7 +551,7 @@ export const insertBoxElement = (state, dispatch) => {
         paragraph,
     ]);
     const node = nodes.box_element.createAndFill({}, [
-        nodes.figcaption.create({}, [nodes.caption_title.create()]),
+        nodes.caption_title.create(),
         section,
     ]);
     if (position && dispatch) {
@@ -713,7 +704,7 @@ export const insertContributors = (state, dispatch, view) => {
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, contributors.pos);
         dispatch(tr.setSelection(selection).scrollIntoView());
-        openAuthorsModal(contributors.pos, view);
+        openAuthorsAndAffiliationsModals(contributors.pos, view, 'authors');
     }
     return true;
 };
@@ -734,7 +725,7 @@ export const insertAffiliation = (state, dispatch, view) => {
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, affiliations.pos);
         dispatch(tr.setSelection(selection).scrollIntoView());
-        openAffiliationsModal(affiliations.pos, view);
+        openAuthorsAndAffiliationsModals(affiliations.pos, view, 'affiliations');
     }
     return true;
 };
@@ -1073,7 +1064,7 @@ export const createAndFillTableElement = (attrs, config = DEFAULT_TABLE_CONFIG)
         ...attrs,
         id: generateNodeID(schema.nodes.table_element),
     }, [
-        createAndFillFigcaptionElement(),
+        schema.nodes.caption_title.create(),
         schema.nodes.table.create({}, tableRows),
         schema.nodes.alt_text.create(),
         schema.nodes.long_desc.create(),
@@ -1084,21 +1075,22 @@ const createAndFillFigureElement = (attrs) => schema.nodes.figure_element.create
     ...attrs,
     id: generateNodeID(schema.nodes.figure_element),
 }, [
-    schema.nodes.figure.create({}, [schema.nodes.figcaption.create()]),
-    createAndFillFigcaptionElement(),
+    schema.nodes.figure.create(),
+    schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
     schema.nodes.alt_text.create(),
     schema.nodes.long_desc.create(),
     schema.nodes.listing.create(),
 ]);
-const createAndFillFigcaptionElement = () => schema.nodes.figcaption.create({}, [
+const createAndFillCaption = () => [
     schema.nodes.caption_title.create(),
-    schema.nodes.caption.create(),
-]);
+    schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
+];
 const createImageElement = (attrs) => schema.nodes.image_element.create({
     ...attrs,
     id: generateNodeID(schema.nodes.image_element),
 }, [
     schema.nodes.figure.create(),
+    schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
     schema.nodes.alt_text.create(),
     schema.nodes.long_desc.create(),
 ]);
@@ -1106,7 +1098,7 @@ const createEmbedElement = (attrs) => schema.nodes.embed.create({
     ...attrs,
     id: generateNodeID(schema.nodes.embed),
 }, [
-    createAndFillFigcaptionElement(),
+    ...createAndFillCaption(),
     schema.nodes.alt_text.create(),
     schema.nodes.long_desc.create(),
 ]);

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

@@ -3,14 +3,13 @@ import { Field, Formik } from 'formik';
 import React, { useRef } from 'react';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
 export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
-    if (actionsRef && !actionsRef.current) {
+    const formRef = useRef(null);
+    if (actionsRef) {
         actionsRef.current = {
-            reset: () => {
-                formRef.current?.resetForm();
-            },
+            reset: () => formRef.current?.resetForm(),
+            submitForm: () => formRef.current?.submitForm(),
         };
     }
-    const formRef = useRef(null);
     const validateAffiliation = (values) => {
         const errors = {};
         if (!values.institution?.trim()) {
@@ -18,7 +17,7 @@ export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
         }
         return errors;
     };
-    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
+    return (React.createElement(Formik, { initialValues: values, onSubmit: (attrs) => onSave(attrs), innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
         React.createElement(FormRow, null,
             React.createElement(Field, { name: "institution" }, (props) => {
                 const hasError = formik.touched.institution && formik.errors.institution;

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

@@ -1,4 +1,4 @@
-import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -11,37 +11,45 @@ import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
 import FormFooter from '../form/FormFooter';
 import { FormPlaceholder } from '../form/FormPlaceholder';
 import { ModalFormActions } from '../form/ModalFormActions';
-import { GenericDrawer } from '../modal-drawer/GenericDrawer';
-import { DrawerGroup } from '../modal-drawer/GenericDrawerGroup';
+import { AuthorsPanel } from '../authors/AuthorsPanel';
 import { AffiliationForm } from './AffiliationForm';
 import { AffiliationList } from './AffiliationList';
-import { getEditorProps } from '../../plugins/editor-props';
-import ReactSubView from '../../views/ReactSubView';
-import { deleteNode, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
 function makeAuthorItems(authors) {
     return authors.map((author) => ({
         id: author.id,
         label: `${author.given} ${author.family}`,
     }));
 }
-export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
+export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, onOpenAuthorsModal, }) => {
     const [isOpen, setIsOpen] = useState(true);
     const [selection, setSelection] = useState(affiliation);
     const [showingDeleteDialog, setShowDeleteDialog] = useState(false);
     const valuesRef = useRef(undefined);
     const actionsRef = useRef(undefined);
     const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
+    useEffect(() => {
+        dispatchAuthors({
+            type: 'set',
+            state: [...$authors].sort(authorComparator),
+        });
+    }, [$authors]);
     const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
     const [isDisableSave, setIsDisableSave] = useState(true);
     const [newAffiliation, setNewAffiliation] = useState(false);
     const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = useState(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
-    const [showAuthorDrawer, setShowAuthorDrawer] = useState(false);
     const [selectedAuthorIds, setSelectedAuthorIds] = useState([]);
     const [pendingSelection, setPendingSelection] = useState(null);
     const [pendingAction, setPendingAction] = useState(null);
     const [savedAffiliationId, setSavedAffiliationId] = useState(undefined);
     const [affiliationAuthorMap, setAffiliationAuthorMap] = useState(new Map());
+    const prevIsOpenRef = useRef(isOpen);
+    useEffect(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            onClose?.();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
     useEffect(() => {
         if (!selection) {
             return;
@@ -106,7 +114,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             setNewAffiliation(false);
             setSelection(affiliation);
             setSelectedAuthorIds(affiliatedAuthorIds);
-            setShowAuthorDrawer(false);
             setAffiliationAuthorMap((prevMap) => {
                 const newMap = new Map(prevMap);
                 newMap.set(affiliation.id, affiliatedAuthorIds);
@@ -146,7 +153,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             newMap.set(affiliation.id, selectedAuthorIds);
             return newMap;
         });
-        setShowAuthorDrawer(false);
         setSavedAffiliationId(affiliation.id);
         setTimeout(() => {
             setSavedAffiliationId(undefined);
@@ -240,7 +246,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
         setNewAffiliation(true);
         setSelection(emptyAffiliation);
         setSelectedAuthorIds([]);
-        setShowAuthorDrawer(false);
     };
     useEffect(() => {
         if (addNewAffiliation) {
@@ -288,7 +293,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
     const handleConfirmationCancel = () => {
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        setShowAuthorDrawer(false);
         if (pendingAction === 'select' && pendingSelection) {
             setSelection(pendingSelection);
             setNewAffiliation(false);
@@ -329,19 +333,17 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                         React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
                     React.createElement(AffiliationTabs, null,
-                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
                                 !(showConfirmationDialog ||
                                     showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
                         React.createElement(InspectorTabList, null,
                             React.createElement(InspectorTab, null, "Details"),
-                            React.createElement(InspectorTab, null, "Authors")),
+                            onOpenAuthorsModal && React.createElement(InspectorTab, null, "Authors")),
                         React.createElement(InspectorTabPanels, null,
                             React.createElement(AffiliationTabPanel, null,
-                                React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
-                            React.createElement(AffiliationTabPanel, null,
-                                React.createElement(DrawerGroup, { Drawer: 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.createElement(AddUserIcon, { width: 16, height: 16 }) })))),
+                                React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef })),
+                            onOpenAuthorsModal && (React.createElement(AffiliationTabPanel, null,
+                                React.createElement(AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, onOpenAuthorsModal: onOpenAuthorsModal }))))),
                     React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: DialogType.REQUIRED, entityType: "affiliation" }),
                     React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
             React.createElement(FormFooter, { onCancel: handleClose }))));
@@ -407,37 +409,3 @@ const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
   margin-top: 8px;
   margin-bottom: 16px;
 `;
-export const openAffiliationsModal = (pos, view) => {
-    if (!view) {
-        return;
-    }
-    const { state } = view;
-    const props = getEditorProps(state);
-    const contributors = findChildrenAttrsByType(view, schema.nodes.contributor);
-    const componentProps = {
-        affiliations: [],
-        authors: contributors,
-        onSaveAffiliation: (affiliation) => handleSaveAffiliation(view, affiliation, pos),
-        onDeleteAffiliation: (affiliation) => handleDeleteAffiliation(view, affiliation),
-        onUpdateAuthors: (authors) => handleUpdateAuthors(view, authors),
-        addNewAffiliation: true,
-    };
-    const dialog = ReactSubView(props, AffiliationsModal, componentProps, state.doc, () => pos, view);
-    view.focus();
-    document.body.appendChild(dialog);
-};
-export const handleSaveAffiliation = (view, affiliation, affiliationsPos) => {
-    const update = updateNodeAttrs(view, schema.nodes.affiliation, affiliation);
-    if (!update) {
-        const node = schema.nodes.affiliation.create(affiliation);
-        view.dispatch(view.state.tr.insert(affiliationsPos + 1, node));
-    }
-};
-export const handleDeleteAffiliation = (view, affiliation) => {
-    deleteNode(view, affiliation.id);
-};
-export const handleUpdateAuthors = (view, authors) => {
-    authors.forEach((author) => {
-        updateNodeAttrs(view, schema.nodes.contributor, author);
-    });
-};

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

@@ -0,0 +1,15 @@
+import { AffiliationPlaceholderIcon } from '@manuscripts/style-guide';
+import React from 'react';
+import { GenericPanel, ListItem, ListItems, useListSelectedIds, } from '../authors-affiliations/GenericPanel';
+function affiliationSecondaryLine(item) {
+    const line = [item.city, item.county, item.country].filter(Boolean).join(', ');
+    return line || undefined;
+}
+export const AffiliationsPanel = ({ items, selectedItems = [], onSelect, onOpenAffiliationsModal, }) => {
+    const selectedIds = useListSelectedIds(selectedItems);
+    return (React.createElement(GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-panel-empty", isEmpty: items.length === 0, emptyIcon: React.createElement(AffiliationPlaceholderIcon, null), emptyMessage: React.createElement(React.Fragment, null,
+            "There are no affiliations attributed yet!",
+            React.createElement("br", null),
+            "Click \u2018Create New Affiliation\u2019") },
+        React.createElement(ListItems, { "data-cy": "affiliations-panel" }, items.map((item) => (React.createElement(ListItem, { key: item.id, selected: selectedIds.has(item.id), onClick: () => onSelect(item.id), primary: item.institution, secondary: affiliationSecondaryLine(item) }))))));
+};

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

@@ -34,11 +34,10 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
             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/es/components/authors/AuthorsModal.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
+import { AddIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { cloneDeep, isEqual, omit } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -26,18 +26,22 @@ import FormFooter from '../form/FormFooter';
 import { FormPlaceholder } from '../form/FormPlaceholder';
 import { ModalFormActions } from '../form/ModalFormActions';
 import { DrawerGroup } from '../modal-drawer/GenericDrawerGroup';
-import { AffiliationsDrawer } from './AffiliationDrawer';
+import { AffiliationsPanel } from '../affiliations/AffiliationsPanel';
 import { AuthorDetailsForm } from './AuthorDetailsForm';
 import { AuthorList } from './AuthorList';
 import { CreditDrawer } from './CreditDrawer';
 import { useManageAffiliations } from './useManageAffiliations';
 import { useManageCredit } from './useManageCredit';
-import { getEditorProps } from '../../plugins/editor-props';
-import ReactSubView from '../../views/ReactSubView';
-import { deleteNode, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
 export const authorsReducer = arrayReducer((a, b) => a.id === b.id);
-export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
+export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, onOpenAffiliationsModal, onClose, }) => {
     const [isOpen, setOpen] = useState(true);
+    const prevIsOpenRef = useRef(true);
+    useEffect(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            onClose?.();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
     const [isDisableSave, setDisableSave] = useState(true);
     const [isEmailRequired, setEmailRequired] = useState(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
@@ -60,7 +64,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = useState(author);
-    const { showAffiliationDrawer, setShowAffiliationDrawer, selectedAffiliations, setSelectedAffiliations, removeAffiliation, selectAffiliation, affiliations, } = useManageAffiliations(selection, $affiliations);
+    const { selectedAffiliations, setSelectedAffiliations, selectAffiliation, affiliations, } = useManageAffiliations(selection, $affiliations);
     useEffect(() => {
         const currentAuthor = selection;
         const relevantAffiliations = affiliations.filter((item) => currentAuthor?.affiliationIDs?.includes(item.id));
@@ -87,12 +91,10 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             else {
                 updateAffiliationSelection(author);
                 setSelection(author);
-                setShowAffiliationDrawer(false);
                 setNewAuthor(false);
             }
         }
         else {
-            setShowAffiliationDrawer(false);
             updateAffiliationSelection(author);
             setSelection(author);
             setNewAuthor(false);
@@ -133,7 +135,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
                 setSelection(nextAuthor);
                 setNextAuthor(null);
                 setNewAuthor(false);
-                setShowAffiliationDrawer(false);
                 updateAffiliationSelection(nextAuthor);
                 setIsCreatingNewAuthor(false);
             }
@@ -166,7 +167,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        setShowAffiliationDrawer(false);
     };
     const saveAuthor = (values) => {
         if (!values || !selection) {
@@ -185,7 +185,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         setSelection(author);
         setShowConfirmationDialog(false);
         setNewAuthor(false);
-        setShowAffiliationDrawer(false);
         setIsCreatingNewAuthor(false);
         dispatchAuthors({
             type: 'update',
@@ -242,7 +241,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         else {
             createNewAuthor();
-            setShowAffiliationDrawer(false);
         }
     };
     const deleteAuthor = () => {
@@ -311,19 +309,19 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
                         React.createElement(AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(React.Fragment, null,
                     React.createElement(AuthorTabs, null,
-                        React.createElement(ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
+                        React.createElement(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.createElement(InspectorTabList, null,
                             React.createElement(InspectorTab, null, "Details"),
-                            React.createElement(InspectorTab, null, "Affiliations"),
+                            onOpenAffiliationsModal && (React.createElement(InspectorTab, null, "Affiliations")),
                             React.createElement(InspectorTab, null, "Contributions (CRediT)")),
                         React.createElement(InspectorTabPanels, null,
                             React.createElement(AuthorTabPanel, null,
                                 React.createElement(AuthorDetailsForm, { values: normalizeAuthor(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
-                            React.createElement(AuthorTabPanel, null,
-                                React.createElement(DrawerGroup, { Drawer: AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: React.createElement(AddInstitutionIcon, { width: 16, height: 16 }) })),
+                            onOpenAffiliationsModal && (React.createElement(AuthorTabPanel, null,
+                                React.createElement(AffiliationsPanel, { items: affiliations, selectedItems: selectedAffiliations, onSelect: selectAffiliation, onOpenAffiliationsModal: onOpenAffiliationsModal }))),
                             React.createElement(AuthorTabPanel, null,
                                 React.createElement(DrawerGroup, { Drawer: CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
                                         id: r.vocabTerm,
@@ -391,31 +389,3 @@ const StyledModalBody = styled(ModalBody) `
 const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
   margin-bottom: 16px;
 `;
-export const openAuthorsModal = (pos, view) => {
-    if (!view) {
-        return;
-    }
-    const { state } = view;
-    const props = getEditorProps(state);
-    const affiliations = findChildrenAttrsByType(view, schema.nodes.affiliation);
-    const componentProps = {
-        authors: [],
-        affiliations,
-        onSaveAuthor: (contributor) => handleSaveContributor(view, contributor, pos),
-        onDeleteAuthor: (contributor) => handleDeleteContributor(view, contributor),
-        addNewAuthor: true,
-    };
-    const dialog = ReactSubView(props, AuthorsModal, componentProps, state.doc, () => pos, view);
-    view.focus();
-    document.body.appendChild(dialog);
-};
-export const handleSaveContributor = (view, contributor, contributorsPos) => {
-    const update = updateNodeAttrs(view, schema.nodes.contributor, contributor);
-    if (!update) {
-        const node = schema.nodes.contributor.create(contributor);
-        view.dispatch(view.state.tr.insert(contributorsPos + 1, node));
-    }
-};
-export const handleDeleteContributor = (view, contributor) => {
-    deleteNode(view, contributor.id);
-};

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

@@ -0,0 +1,11 @@
+import { AuthorPlaceholderIcon } from '@manuscripts/style-guide';
+import React from 'react';
+import { GenericPanel, ListItem, ListItems, useListSelectedIds, } from '../authors-affiliations/GenericPanel';
+export const AuthorsPanel = ({ items, selectedItems = [], onSelect, onOpenAuthorsModal, }) => {
+    const selectedIds = useListSelectedIds(selectedItems);
+    return (React.createElement(GenericPanel, { title: "Authors", createLabel: "Add New Author", onCreate: onOpenAuthorsModal, createDataCy: "add-authors-link", emptyDataCy: "authors-panel-empty", isEmpty: items.length === 0, emptyIcon: React.createElement(AuthorPlaceholderIcon, null), emptyMessage: React.createElement(React.Fragment, null,
+            "There are no authors attributed yet!",
+            React.createElement("br", null),
+            "Click \u2018Add New Author\u2019") },
+        React.createElement(ListItems, { "data-cy": "authors-panel" }, items.map((item) => (React.createElement(ListItem, { key: item.id, selected: selectedIds.has(item.id), onClick: () => onSelect(item.id), primary: item.label }))))));
+};

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

@@ -1,9 +1,13 @@
-import { useReducer, useState } from 'react';
+import { useEffect, useReducer, useState } from 'react';
 import { arrayReducer } from '../../lib/array-reducer';
 export const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
 export const useManageAffiliations = (selection, $affiliations) => {
-    const [affiliations] = useReducer(affiliationsReducer, $affiliations);
-    const [showAffiliationDrawer, setShowAffiliationDrawer] = useState(false);
+    const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, [
+        ...$affiliations,
+    ]);
+    useEffect(() => {
+        dispatchAffiliations({ type: 'set', state: [...$affiliations] });
+    }, [$affiliations]);
     const [selectedAffiliations, setSelectedAffiliations] = useState([]);
     const removeAffiliation = (affId) => {
         if (!selection) {
@@ -26,8 +30,6 @@ export const useManageAffiliations = (selection, $affiliations) => {
         setSelectedAffiliations(affiliations.filter((item) => newAffiliations.includes(item.id)));
     };
     return {
-        showAffiliationDrawer,
-        setShowAffiliationDrawer,
         selectedAffiliations,
         setSelectedAffiliations,
         removeAffiliation,

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

@@ -0,0 +1,93 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { schema, } from '@manuscripts/transform';
+import React, { useState } from 'react';
+import { getEditorProps } from '../../plugins/editor-props';
+import ReactSubView from '../../views/ReactSubView';
+import { deleteNode, findChildByType, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
+import { AffiliationsModal, } from '../affiliations/AffiliationsModal';
+import { AuthorsModal } from '../authors/AuthorsModal';
+function insertNode(parentType, childType) {
+    return (view, attrs) => {
+        const parent = 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 (!updateNodeAttrs(view, nodeType, attrs)) {
+            insertFn(view, attrs);
+        }
+    };
+}
+const insertAuthorNode = insertNode(schema.nodes.contributors, schema.nodes.contributor);
+const insertAffiliationNode = insertNode(schema.nodes.affiliations, schema.nodes.affiliation);
+const upsertAuthor = upsertNode(schema.nodes.contributor, insertAuthorNode);
+const upsertAffiliation = upsertNode(schema.nodes.affiliation, insertAffiliationNode);
+export const AuthorsAndAffiliationsModals = ({ initialModal, view, author, affiliation, addNewAuthor, addNewAffiliation, }) => {
+    const [showOverlay, setShowOverlay] = useState(false);
+    const [authors, setAuthors] = useState(() => findChildrenAttrsByType(view, schema.nodes.contributor));
+    const [affiliations, setAffiliations] = useState(() => findChildrenAttrsByType(view, schema.nodes.affiliation));
+    const handleOpenOverlay = () => setShowOverlay(true);
+    const handleOverlayClose = () => {
+        setShowOverlay(false);
+        setAuthors(findChildrenAttrsByType(view, schema.nodes.contributor));
+        setAffiliations(findChildrenAttrsByType(view, schema.nodes.affiliation));
+    };
+    const authorsProps = {
+        author,
+        authors,
+        affiliations,
+        addNewAuthor,
+        onSaveAuthor: (a) => upsertAuthor(view, a),
+        onDeleteAuthor: (a) => deleteNode(view, a.id),
+    };
+    const affiliationsProps = {
+        affiliation,
+        authors,
+        affiliations,
+        addNewAffiliation,
+        onSaveAffiliation: (a) => upsertAffiliation(view, a),
+        onDeleteAffiliation: (a) => deleteNode(view, a.id),
+        onUpdateAuthors: (updated) => updated.forEach((a) => updateNodeAttrs(view, schema.nodes.contributor, a)),
+    };
+    if (initialModal === 'authors') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(AuthorsModal, { ...authorsProps, onOpenAffiliationsModal: handleOpenOverlay }),
+            showOverlay && (React.createElement(AffiliationsModal, { ...affiliationsProps, addNewAffiliation: true, onClose: handleOverlayClose }))));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AffiliationsModal, { ...affiliationsProps, onOpenAuthorsModal: handleOpenOverlay }),
+        showOverlay && (React.createElement(AuthorsModal, { ...authorsProps, addNewAuthor: true, onClose: handleOverlayClose }))));
+};
+export const openAuthorsAndAffiliationsModals = (pos, view, initialModal) => {
+    if (!view) {
+        return;
+    }
+    const { state } = view;
+    const props = getEditorProps(state);
+    const componentProps = {
+        initialModal,
+        view: view,
+        addNewAuthor: initialModal === 'authors',
+        addNewAffiliation: initialModal === 'affiliations',
+    };
+    const dialog = ReactSubView(props, AuthorsAndAffiliationsModals, componentProps, state.doc, () => pos, view);
+    view.focus();
+    document.body.appendChild(dialog);
+};