@manuscripts/body-editor 3.12.17 → 3.12.20

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);
@@ -186,7 +185,7 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
         case transform_1.schema.nodes.listing_element:
             node = transform_1.schema.nodes.listing_element.create({}, [
                 transform_1.schema.nodes.listing.create(),
-                createAndFillFigcaptionElement(),
+                ...createAndFillCaption(),
             ]);
             break;
         case transform_1.schema.nodes.equation_element:
@@ -257,10 +256,7 @@ 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(),
-        ]),
+        transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
     ]);
     const tr = state.tr.insert(position, element);
     dispatch(tr);
@@ -276,7 +272,7 @@ const insertEmbed = (state, dispatch, attrs) => {
         ...attrs,
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.embed),
     }, [
-        createAndFillFigcaptionElement(),
+        ...createAndFillCaption(),
         transform_1.schema.nodes.alt_text.create(),
         transform_1.schema.nodes.long_desc.create(),
     ]);
@@ -302,12 +298,7 @@ const insertSupplement = (file, view) => {
     const supplement = transform_1.schema.nodes.supplement.createAndFill({
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement),
         href: file.id,
-    }, [
-        transform_1.schema.nodes.figcaption.create({}, [
-            transform_1.schema.nodes.caption_title.create(),
-            transform_1.schema.nodes.caption.create(),
-        ]),
-    ]);
+    }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = (0, doc_1.upsertSupplementsSection)(tr, supplement);
     tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
@@ -590,7 +581,7 @@ 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) {
@@ -748,7 +739,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 +761,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;
 };
@@ -1124,7 +1115,7 @@ const createAndFillTableElement = (attrs, config = DEFAULT_TABLE_CONFIG) => {
         ...attrs,
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.table_element),
     }, [
-        createAndFillFigcaptionElement(),
+        transform_1.schema.nodes.caption_title.create(),
         transform_1.schema.nodes.table.create({}, tableRows),
         transform_1.schema.nodes.alt_text.create(),
         transform_1.schema.nodes.long_desc.create(),
@@ -1136,21 +1127,22 @@ const createAndFillFigureElement = (attrs) => transform_1.schema.nodes.figure_el
     ...attrs,
     id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.figure_element),
 }, [
-    transform_1.schema.nodes.figure.create({}, [transform_1.schema.nodes.figcaption.create()]),
-    createAndFillFigcaptionElement(),
+    transform_1.schema.nodes.figure.create(),
+    transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
     transform_1.schema.nodes.alt_text.create(),
     transform_1.schema.nodes.long_desc.create(),
     transform_1.schema.nodes.listing.create(),
 ]);
-const createAndFillFigcaptionElement = () => transform_1.schema.nodes.figcaption.create({}, [
+const createAndFillCaption = () => [
     transform_1.schema.nodes.caption_title.create(),
-    transform_1.schema.nodes.caption.create(),
-]);
+    transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
+];
 const createImageElement = (attrs) => transform_1.schema.nodes.image_element.create({
     ...attrs,
     id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.image_element),
 }, [
     transform_1.schema.nodes.figure.create(),
+    transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
     transform_1.schema.nodes.alt_text.create(),
     transform_1.schema.nodes.long_desc.create(),
 ]);
@@ -1158,7 +1150,7 @@ const createEmbedElement = (attrs) => transform_1.schema.nodes.embed.create({
     ...attrs,
     id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.embed),
 }, [
-    createAndFillFigcaptionElement(),
+    ...createAndFillCaption(),
     transform_1.schema.nodes.alt_text.create(),
     transform_1.schema.nodes.long_desc.create(),
 ]);

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,