@manuscripts/body-editor 3.7.29 → 3.8.1

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

@@ -114,8 +114,7 @@ const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSucce
                     affiliation.country ? ', ' : '')),
                 affiliation.country && react_1.default.createElement(react_1.default.Fragment, null, affiliation.country))),
         showSuccessIcon && (react_1.default.createElement(style_guide_1.CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
-            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' }),
-            react_1.default.createElement(style_guide_1.Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' })))));
 };
 exports.AffiliationItem = AffiliationItem;

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

@@ -201,7 +201,6 @@ exports.DraggableAuthor = react_1.default.memo(({ author, isSelected, onClick, o
             react_1.default.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (react_1.default.createElement(AuthorBadge, null,
                 react_1.default.createElement(style_guide_1.CorrespondingAuthorIcon, null))))),
         react_1.default.createElement(AuthorName, { "data-cy": "author-name" }, (0, authors_1.authorLabel)(author)),
-        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
-            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' }),
-            react_1.default.createElement(style_guide_1.Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' })))));
 });

package/dist/cjs/components/references/ImportBibliographyModal.js

@@ -97,38 +97,24 @@ const ImportBibliographyModal = ({ onCancel, onSave }) => {
             react_1.default.createElement(ModalBody, null,
                 react_1.default.createElement(ModalTitle, null, "Import Bibliography"),
                 react_1.default.createElement("p", null,
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "example_bibtex" }, "BibTex"),
+                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleBibtex, "data-tool": true }, "BibTex"),
                     ",",
                     ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "example_pubmed" }, "PubMed"),
+                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": examplePubmed }, "PubMed"),
                     ",",
                     ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "example_ris" }, "RIS"),
+                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleRis }, "RIS"),
                     ",",
                     ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "example_enw" }, "ENW"),
+                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleEnw }, "ENW"),
                     ' ',
                     "and",
                     ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "example_doi" }, "DOI"),
+                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleDoi }, "DOI"),
                     ' ',
                     "formats are supported"),
                 react_1.default.createElement(ImportBibliographyForm_1.ImportBibliographyForm, { onCancel: handleCancel, onSave: handleSave }),
-                react_1.default.createElement(Example, { id: "example_bibtex", place: "bottom" },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("pre", null, exampleBibtex))),
-                react_1.default.createElement(Example, { id: "example_pubmed", place: "bottom" },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("pre", null, examplePubmed))),
-                react_1.default.createElement(Example, { id: "example_ris", place: "bottom" },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("pre", null, exampleRis))),
-                react_1.default.createElement(Example, { id: "example_enw", place: "bottom" },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("pre", null, exampleEnw))),
-                react_1.default.createElement(Example, { id: "example_doi", place: "bottom" },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("pre", null, exampleDoi)))))));
+                react_1.default.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => (react_1.default.createElement("pre", null, s.content)) })))));
 };
 exports.ImportBibliographyModal = ImportBibliographyModal;
 const ModalBody = styled_components_1.default.div `

package/dist/cjs/components/references/ReferenceForm/ReferenceForm.js

@@ -112,9 +112,8 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                 react_1.default.createElement(style_guide_1.ButtonGroup, null,
                     react_1.default.createElement(style_guide_1.IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
                         react_1.default.createElement(style_guide_1.LinkIcon, null)),
-                    react_1.default.createElement(styled_components_1.DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-id": showDelete ? '' : 'delete-button-tooltip', onClick: () => setShowDeleteDialog(true) },
-                        react_1.default.createElement(style_guide_1.DeleteIcon, null)),
-                    react_1.default.createElement(style_guide_1.Tooltip, { id: "delete-button-tooltip", place: "bottom" }, "Unable to delete because the item is used in the document")),
+                    react_1.default.createElement(styled_components_1.DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-content": "Unable to delete because the item is used in the document", "data-tooltip-hidden": showDelete, onClick: () => setShowDeleteDialog(true) },
+                        react_1.default.createElement(style_guide_1.DeleteIcon, null))),
                 react_1.default.createElement(style_guide_1.ButtonGroup, null,
                     react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
                     react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.isValid || !formik.dirty }, "Save"))),

package/dist/cjs/components/references/ReferencesModal.js

@@ -247,9 +247,8 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
                         react_1.default.createElement(ReferencesInnerWrapper, null, items.slice(startIndex, endIndex + 1).map((item) => (react_1.default.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
                             react_1.default.createElement(IconContainer, null,
                                 react_1.default.createElement(style_guide_1.CitationCountIcon, null),
-                                (citationCounts.get(item.id) || 0) > 0 ? (react_1.default.createElement(CitationCount, { "data-tooltip-id": "citation-count-tooltip" }, citationCounts.get(item.id))) : (react_1.default.createElement(CitationCount, { className: "unused" }, "0"))),
-                            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }))))),
-                        react_1.default.createElement(style_guide_1.Tooltip, { id: "citation-count-tooltip", place: "bottom" }, "Number of times used in the document"))),
+                                (citationCounts.get(item.id) || 0) > 0 ? (react_1.default.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (react_1.default.createElement(CitationCount, { className: "unused" }, "0"))),
+                            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }))))))),
                 react_1.default.createElement(style_guide_1.ScrollableModalContent, null, selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
                         isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))));
 };

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

@@ -48,7 +48,7 @@ const placeholder_1 = __importDefault(require("../plugins/placeholder"));
 const prevent_empty_1 = __importDefault(require("../plugins/prevent-empty"));
 const search_replace_1 = __importDefault(require("../plugins/search-replace"));
 const section_title_1 = __importDefault(require("../plugins/section_title"));
-const section_category_1 = __importDefault(require("../plugins/section-category"));
+const section_category_1 = __importDefault(require("../plugins/section_category"));
 const selected_suggestion_1 = __importDefault(require("../plugins/selected-suggestion"));
 const tables_cursor_fix_1 = __importDefault(require("../plugins/tables-cursor-fix"));
 const rules_1 = __importDefault(require("../rules"));

package/dist/cjs/lib/popper.js

@@ -64,7 +64,8 @@ class PopperManager {
                     this.destroy();
                 }
             };
-            if (contents.classList.contains('context-menu')) {
+            if (contents.classList.contains('context-menu') ||
+                contents.classList.contains('section-category')) {
                 window.addEventListener('click', this.handleDocumentClick);
             }
         });

package/dist/cjs/menus.js

@@ -200,8 +200,7 @@ const getEditorMenus = (editor) => {
                 label: 'Author Notes',
                 isEnabled: true,
                 submenu: categories.map(insertBackmatterSectionMenu),
-                isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.author_notes) ||
-                    !categories.length,
+                isHidden: !categories.length,
             },
             {
                 id: 'insert-section',

package/dist/cjs/plugins/{section-category/section-category-utils.js → section_category.js}

@@ -1,49 +1,64 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildPluginState = buildPluginState;
+exports.sectionCategoryKey = void 0;
 const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const prosemirror_view_1 = require("prosemirror-view");
-const icons_1 = require("../../icons");
-const popper_1 = require("../../lib/popper");
-const popper = new popper_1.PopperManager();
-function createMenuItem(contents, handler, isDisabled = false, isSelected = false) {
+const icons_1 = require("../icons");
+exports.sectionCategoryKey = new prosemirror_state_1.PluginKey('section-category');
+exports.default = (props) => new prosemirror_state_1.Plugin({
+    key: exports.sectionCategoryKey,
+    state: {
+        init: (_, state) => buildPluginState(state, props),
+        apply: (tr, value, oldState, newState) => {
+            if (!tr.docChanged) {
+                return value;
+            }
+            return buildPluginState(newState, props);
+        }
+    },
+    props: {
+        decorations: (state) => exports.sectionCategoryKey.getState(state)?.decorations || prosemirror_view_1.DecorationSet.empty,
+    },
+});
+const createMenuItem = (props, contents, handler, isDisabled, isSelected) => {
     const item = document.createElement('div');
-    item.className = `menu-item ${isDisabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}`;
+    item.classList.add('menu-item');
+    if (isSelected) {
+        item.classList.add('selected');
+    }
+    if (isDisabled) {
+        item.classList.add('disabled');
+    }
     item.textContent = contents;
     item.addEventListener('mousedown', (event) => {
         handler(event);
-        popper.destroy();
+        props.popper.destroy();
     });
     return item;
-}
-function createMenu(currentCategory, categories, usedCategoryIDs, onSelect) {
+};
+const createMenu = (props, currentCategory, categories, usedCategoryIDs, onSelect) => {
     const menu = document.createElement('div');
     menu.className = 'section-category menu';
     categories.forEach((category) => {
-        const item = createMenuItem(category.titles[0], () => onSelect(category), category.isUnique && usedCategoryIDs.has(category.id), currentCategory === category);
+        const item = createMenuItem(props, category.titles[0], () => onSelect(category), category.isUnique && usedCategoryIDs.has(category.id), currentCategory === category);
         menu.appendChild(item);
     });
-    document.addEventListener('mousedown', (event) => {
-        if (!menu.contains(event.target)) {
-            popper.destroy();
-        }
-    });
     return menu;
-}
-function createButton(view, pos, currentCategory, categories, usedCategoryIDs, canEdit = true, disabled) {
+};
+const createButton = (props, view, pos, currentCategory, categories, usedCategoryIDs, canEdit = true, disabled) => {
     const handleSelect = (category) => {
         const tr = view.state.tr;
         tr.setNodeAttribute(pos, 'category', category.id);
         view.dispatch(tr);
     };
-    const arrow = document.createElement('div');
-    arrow.className = 'section-category popper-arrow';
     const button = document.createElement('button');
     button.innerHTML = icons_1.sectionCategoryIcon;
     button.classList.add('section-category-button');
     button.setAttribute('aria-label', 'Section categories menu');
     if (currentCategory) {
+        button.setAttribute('data-tooltip-content', currentCategory.titles[0]);
         button.classList.add('assigned');
     }
     if (disabled) {
@@ -51,38 +66,18 @@ function createButton(view, pos, currentCategory, categories, usedCategoryIDs, c
     }
     else if (canEdit) {
         button.addEventListener('mousedown', () => {
-            popper.destroy();
-            const menu = createMenu(currentCategory, categories, usedCategoryIDs, handleSelect);
-            popper.show(button, menu, 'bottom-end', false, [
-                { name: 'offset', options: { offset: [0, -10] } },
-            ]);
-        });
-    }
-    else {
-        button.addEventListener('mouseenter', () => {
-            const tooltip = document.createElement('div');
-            tooltip.className = 'section-category tooltip';
-            tooltip.textContent = 'Category:';
-            const span = document.createElement('span');
-            span.textContent = currentCategory?.titles[0] || '';
-            tooltip.appendChild(span);
-            tooltip.appendChild(arrow);
-            popper.show(button, tooltip, 'left', false, [
-                { name: 'offset', options: { offset: [0, 10] } },
-                { name: 'arrow', options: { element: arrow } },
-            ]);
-        });
-        button.addEventListener('mouseleave', () => {
-            popper.destroy();
+            const menu = createMenu(props, currentCategory, categories, usedCategoryIDs, handleSelect);
+            props.popper.show(button, menu, 'bottom-end', false);
         });
     }
     return button;
-}
-function buildPluginState(state, props) {
+};
+const buildPluginState = (state, props) => {
     const decorations = [];
     const can = props.getCapabilities();
     const categories = props.sectionCategories;
     const usedCategoryIDs = getUsedSectionCategoryIDs(state);
+    const canEdit = !!can?.editArticle;
     state.doc.descendants((node, pos) => {
         if (node.type === transform_1.schema.nodes.box_element) {
             return false;
@@ -93,17 +88,24 @@ function buildPluginState(state, props) {
             const $pos = state.doc.resolve(pos);
             const group = getGroup($pos);
             const groupCategories = (0, transform_1.getGroupCategories)(categories, group);
-            decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, (view) => createButton(view, pos, category, groupCategories, usedCategoryIDs, can?.editArticle, categories.size === 0)));
+            const numOptions = groupCategories.length;
+            const shouldShow = !!category || (canEdit && numOptions >= 2);
+            if (shouldShow) {
+                const isEditable = canEdit && numOptions >= 2;
+                decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, (view) => createButton(props, view, pos, category, groupCategories, usedCategoryIDs, isEditable, categories.size === 0)));
+            }
             return false;
         }
     });
     return { decorations: prosemirror_view_1.DecorationSet.create(state.doc, decorations) };
-}
+};
 const getUsedSectionCategoryIDs = (state) => {
     const sections = (0, prosemirror_utils_1.findChildrenByType)(state.doc, transform_1.schema.nodes.section);
     const used = new Set();
     sections.forEach(({ node }) => {
-        node.attrs.category && used.add(node.attrs.category);
+        if (node.attrs.category) {
+            used.add(node.attrs.category);
+        }
     });
     return used;
 };

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.7.29';
+exports.VERSION = '3.8.1';
 exports.MATHJAX_VERSION = '3.2.2';

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

@@ -1,4 +1,4 @@
-import { AffiliationIcon, CrclTickAnimation, DeleteIcon, Tooltip, } from '@manuscripts/style-guide';
+import { AffiliationIcon, CrclTickAnimation, DeleteIcon, } from '@manuscripts/style-guide';
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 const AffiliationContainer = styled.div `
@@ -75,7 +75,6 @@ export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, sh
                     affiliation.country ? ', ' : '')),
                 affiliation.country && React.createElement(React.Fragment, null, affiliation.country))),
         showSuccessIcon && (React.createElement(CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
-            React.createElement(DeleteIcon, { fill: '#6E6E6E' }),
-            React.createElement(Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+            React.createElement(DeleteIcon, { fill: '#6E6E6E' })))));
 };

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Avatar, CorrespondingAuthorIcon, CrclTickAnimation, DeleteIcon, DraggableIcon, Tooltip, } from '@manuscripts/style-guide';
+import { Avatar, CorrespondingAuthorIcon, CrclTickAnimation, DeleteIcon, DraggableIcon, } from '@manuscripts/style-guide';
 import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import styled from 'styled-components';
@@ -162,7 +162,6 @@ export const DraggableAuthor = React.memo(({ author, isSelected, onClick, onDele
             React.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (React.createElement(AuthorBadge, null,
                 React.createElement(CorrespondingAuthorIcon, null))))),
         React.createElement(AuthorName, { "data-cy": "author-name" }, authorLabel(author)),
-        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
-            React.createElement(DeleteIcon, { fill: '#6E6E6E' }),
-            React.createElement(Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+            React.createElement(DeleteIcon, { fill: '#6E6E6E' })))));
 });

package/dist/es/components/references/ImportBibliographyModal.js

@@ -58,38 +58,24 @@ export const ImportBibliographyModal = ({ onCancel, onSave }) => {
             React.createElement(ModalBody, null,
                 React.createElement(ModalTitle, null, "Import Bibliography"),
                 React.createElement("p", null,
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "example_bibtex" }, "BibTex"),
+                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleBibtex, "data-tool": true }, "BibTex"),
                     ",",
                     ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "example_pubmed" }, "PubMed"),
+                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": examplePubmed }, "PubMed"),
                     ",",
                     ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "example_ris" }, "RIS"),
+                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleRis }, "RIS"),
                     ",",
                     ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "example_enw" }, "ENW"),
+                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleEnw }, "ENW"),
                     ' ',
                     "and",
                     ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "example_doi" }, "DOI"),
+                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleDoi }, "DOI"),
                     ' ',
                     "formats are supported"),
                 React.createElement(ImportBibliographyForm, { onCancel: handleCancel, onSave: handleSave }),
-                React.createElement(Example, { id: "example_bibtex", place: "bottom" },
-                    React.createElement("div", null,
-                        React.createElement("pre", null, exampleBibtex))),
-                React.createElement(Example, { id: "example_pubmed", place: "bottom" },
-                    React.createElement("div", null,
-                        React.createElement("pre", null, examplePubmed))),
-                React.createElement(Example, { id: "example_ris", place: "bottom" },
-                    React.createElement("div", null,
-                        React.createElement("pre", null, exampleRis))),
-                React.createElement(Example, { id: "example_enw", place: "bottom" },
-                    React.createElement("div", null,
-                        React.createElement("pre", null, exampleEnw))),
-                React.createElement(Example, { id: "example_doi", place: "bottom" },
-                    React.createElement("div", null,
-                        React.createElement("pre", null, exampleDoi)))))));
+                React.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => (React.createElement("pre", null, s.content)) })))));
 };
 const ModalBody = styled.div `
   box-sizing: border-box;

package/dist/es/components/references/ReferenceForm/ReferenceForm.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddAuthorIcon, ButtonGroup, Category, DeleteIcon, Dialog, IconButton, LinkIcon, PrimaryButton, SecondaryButton, SelectField, Tooltip, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, ButtonGroup, Category, DeleteIcon, Dialog, IconButton, LinkIcon, PrimaryButton, SecondaryButton, SelectField, } from '@manuscripts/style-guide';
 import { Field, FieldArray, Formik } from 'formik';
 import React, { useEffect, useRef, useState } from 'react';
 import { bibliographyItemTypes } from '../../../lib/references';
@@ -76,9 +76,8 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
                 React.createElement(ButtonGroup, null,
                     React.createElement(IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
                         React.createElement(LinkIcon, null)),
-                    React.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-id": showDelete ? '' : 'delete-button-tooltip', onClick: () => setShowDeleteDialog(true) },
-                        React.createElement(DeleteIcon, null)),
-                    React.createElement(Tooltip, { id: "delete-button-tooltip", place: "bottom" }, "Unable to delete because the item is used in the document")),
+                    React.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-content": "Unable to delete because the item is used in the document", "data-tooltip-hidden": showDelete, onClick: () => setShowDeleteDialog(true) },
+                        React.createElement(DeleteIcon, null))),
                 React.createElement(ButtonGroup, null,
                     React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
                     React.createElement(PrimaryButton, { type: "submit", disabled: !formik.isValid || !formik.dirty }, "Save"))),

package/dist/es/components/references/ReferencesModal.js

@@ -1,4 +1,4 @@
-import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, Tooltip, useScrollDetection, } from '@manuscripts/style-guide';
+import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, } from '@manuscripts/style-guide';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -208,9 +208,8 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                         React.createElement(ReferencesInnerWrapper, null, items.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
                             React.createElement(IconContainer, null,
                                 React.createElement(CitationCountIcon, null),
-                                (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-id": "citation-count-tooltip" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
-                            React.createElement(ReferenceLine, { item: item }))))),
-                        React.createElement(Tooltip, { id: "citation-count-tooltip", place: "bottom" }, "Number of times used in the document"))),
+                                (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
+                            React.createElement(ReferenceLine, { item: item }))))))),
                 React.createElement(ScrollableModalContent, null, selection && (React.createElement(ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
                         isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))));
 };

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

@@ -43,7 +43,7 @@ import placeholder from '../plugins/placeholder';
 import prevent_empty from '../plugins/prevent-empty';
 import search_replace from '../plugins/search-replace';
 import section_title from '../plugins/section_title';
-import section_category from '../plugins/section-category';
+import section_category from '../plugins/section_category';
 import selected_suggestion from '../plugins/selected-suggestion';
 import table_editing_fix from '../plugins/tables-cursor-fix';
 import rules from '../rules';

package/dist/es/lib/popper.js

@@ -61,7 +61,8 @@ export class PopperManager {
                     this.destroy();
                 }
             };
-            if (contents.classList.contains('context-menu')) {
+            if (contents.classList.contains('context-menu') ||
+                contents.classList.contains('section-category')) {
                 window.addEventListener('click', this.handleDocumentClick);
             }
         });

package/dist/es/menus.js

@@ -197,8 +197,7 @@ export const getEditorMenus = (editor) => {
                 label: 'Author Notes',
                 isEnabled: true,
                 submenu: categories.map(insertBackmatterSectionMenu),
-                isHidden: !templateAllows(state, schema.nodes.author_notes) ||
-                    !categories.length,
+                isHidden: !categories.length,
             },
             {
                 id: 'insert-section',

package/dist/es/plugins/{section-category/section-category-utils.js → section_category.js}

@@ -1,46 +1,61 @@
 import { getGroupCategories, isSectionNode, schema, } from '@manuscripts/transform';
+import { Plugin, PluginKey } from 'prosemirror-state';
 import { findChildrenByType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { sectionCategoryIcon } from '../../icons';
-import { PopperManager } from '../../lib/popper';
-const popper = new PopperManager();
-function createMenuItem(contents, handler, isDisabled = false, isSelected = false) {
+import { sectionCategoryIcon } from '../icons';
+export const sectionCategoryKey = new PluginKey('section-category');
+export default (props) => new Plugin({
+    key: sectionCategoryKey,
+    state: {
+        init: (_, state) => buildPluginState(state, props),
+        apply: (tr, value, oldState, newState) => {
+            if (!tr.docChanged) {
+                return value;
+            }
+            return buildPluginState(newState, props);
+        }
+    },
+    props: {
+        decorations: (state) => sectionCategoryKey.getState(state)?.decorations || DecorationSet.empty,
+    },
+});
+const createMenuItem = (props, contents, handler, isDisabled, isSelected) => {
     const item = document.createElement('div');
-    item.className = `menu-item ${isDisabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}`;
+    item.classList.add('menu-item');
+    if (isSelected) {
+        item.classList.add('selected');
+    }
+    if (isDisabled) {
+        item.classList.add('disabled');
+    }
     item.textContent = contents;
     item.addEventListener('mousedown', (event) => {
         handler(event);
-        popper.destroy();
+        props.popper.destroy();
     });
     return item;
-}
-function createMenu(currentCategory, categories, usedCategoryIDs, onSelect) {
+};
+const createMenu = (props, currentCategory, categories, usedCategoryIDs, onSelect) => {
     const menu = document.createElement('div');
     menu.className = 'section-category menu';
     categories.forEach((category) => {
-        const item = createMenuItem(category.titles[0], () => onSelect(category), category.isUnique && usedCategoryIDs.has(category.id), currentCategory === category);
+        const item = createMenuItem(props, category.titles[0], () => onSelect(category), category.isUnique && usedCategoryIDs.has(category.id), currentCategory === category);
         menu.appendChild(item);
     });
-    document.addEventListener('mousedown', (event) => {
-        if (!menu.contains(event.target)) {
-            popper.destroy();
-        }
-    });
     return menu;
-}
-function createButton(view, pos, currentCategory, categories, usedCategoryIDs, canEdit = true, disabled) {
+};
+const createButton = (props, view, pos, currentCategory, categories, usedCategoryIDs, canEdit = true, disabled) => {
     const handleSelect = (category) => {
         const tr = view.state.tr;
         tr.setNodeAttribute(pos, 'category', category.id);
         view.dispatch(tr);
     };
-    const arrow = document.createElement('div');
-    arrow.className = 'section-category popper-arrow';
     const button = document.createElement('button');
     button.innerHTML = sectionCategoryIcon;
     button.classList.add('section-category-button');
     button.setAttribute('aria-label', 'Section categories menu');
     if (currentCategory) {
+        button.setAttribute('data-tooltip-content', currentCategory.titles[0]);
         button.classList.add('assigned');
     }
     if (disabled) {
@@ -48,38 +63,18 @@ function createButton(view, pos, currentCategory, categories, usedCategoryIDs, c
     }
     else if (canEdit) {
         button.addEventListener('mousedown', () => {
-            popper.destroy();
-            const menu = createMenu(currentCategory, categories, usedCategoryIDs, handleSelect);
-            popper.show(button, menu, 'bottom-end', false, [
-                { name: 'offset', options: { offset: [0, -10] } },
-            ]);
-        });
-    }
-    else {
-        button.addEventListener('mouseenter', () => {
-            const tooltip = document.createElement('div');
-            tooltip.className = 'section-category tooltip';
-            tooltip.textContent = 'Category:';
-            const span = document.createElement('span');
-            span.textContent = currentCategory?.titles[0] || '';
-            tooltip.appendChild(span);
-            tooltip.appendChild(arrow);
-            popper.show(button, tooltip, 'left', false, [
-                { name: 'offset', options: { offset: [0, 10] } },
-                { name: 'arrow', options: { element: arrow } },
-            ]);
-        });
-        button.addEventListener('mouseleave', () => {
-            popper.destroy();
+            const menu = createMenu(props, currentCategory, categories, usedCategoryIDs, handleSelect);
+            props.popper.show(button, menu, 'bottom-end', false);
         });
     }
     return button;
-}
-export function buildPluginState(state, props) {
+};
+const buildPluginState = (state, props) => {
     const decorations = [];
     const can = props.getCapabilities();
     const categories = props.sectionCategories;
     const usedCategoryIDs = getUsedSectionCategoryIDs(state);
+    const canEdit = !!can?.editArticle;
     state.doc.descendants((node, pos) => {
         if (node.type === schema.nodes.box_element) {
             return false;
@@ -90,17 +85,24 @@ export function buildPluginState(state, props) {
             const $pos = state.doc.resolve(pos);
             const group = getGroup($pos);
             const groupCategories = getGroupCategories(categories, group);
-            decorations.push(Decoration.widget(pos + 1, (view) => createButton(view, pos, category, groupCategories, usedCategoryIDs, can?.editArticle, categories.size === 0)));
+            const numOptions = groupCategories.length;
+            const shouldShow = !!category || (canEdit && numOptions >= 2);
+            if (shouldShow) {
+                const isEditable = canEdit && numOptions >= 2;
+                decorations.push(Decoration.widget(pos + 1, (view) => createButton(props, view, pos, category, groupCategories, usedCategoryIDs, isEditable, categories.size === 0)));
+            }
             return false;
         }
     });
     return { decorations: DecorationSet.create(state.doc, decorations) };
-}
+};
 const getUsedSectionCategoryIDs = (state) => {
     const sections = findChildrenByType(state.doc, schema.nodes.section);
     const used = new Set();
     sections.forEach(({ node }) => {
-        node.attrs.category && used.add(node.attrs.category);
+        if (node.attrs.category) {
+            used.add(node.attrs.category);
+        }
     });
     return used;
 };

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.7.29';
+export const VERSION = '3.8.1';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/plugins/{section-category/index.d.ts → section_category.d.ts}

@@ -1,6 +1,6 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { DecorationSet } from 'prosemirror-view';
-import { EditorProps } from '../../configs/ManuscriptsEditor';
+import { EditorProps } from '../configs/ManuscriptsEditor';
 export declare const sectionCategoryKey: PluginKey<PluginState>;
 export interface PluginState {
     decorations: DecorationSet;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.7.29";
+export declare const VERSION = "3.8.1";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.7.29",
+  "version": "3.8.1",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -38,7 +38,7 @@
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
     "@manuscripts/json-schema": "2.2.12",
-    "@manuscripts/style-guide": "3.3.15",
+    "@manuscripts/style-guide": "3.4.0",
     "@manuscripts/track-changes-plugin": "2.2.3",
     "@manuscripts/transform": "4.3.14",
     "@popperjs/core": "2.11.8",

package/dist/cjs/plugins/section-category/index.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sectionCategoryKey = void 0;
-const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_view_1 = require("prosemirror-view");
-const section_category_utils_1 = require("./section-category-utils");
-exports.sectionCategoryKey = new prosemirror_state_1.PluginKey('section-category');
-exports.default = (props) => new prosemirror_state_1.Plugin({
-    key: exports.sectionCategoryKey,
-    state: {
-        init: (_, state) => (0, section_category_utils_1.buildPluginState)(state, props),
-        apply: (tr, value, oldState, newState) => (0, section_category_utils_1.buildPluginState)(newState, props),
-    },
-    props: {
-        decorations: (state) => exports.sectionCategoryKey.getState(state)?.decorations || prosemirror_view_1.DecorationSet.empty,
-    },
-});

package/dist/es/plugins/section-category/index.js

@@ -1,14 +0,0 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { DecorationSet } from 'prosemirror-view';
-import { buildPluginState } from './section-category-utils';
-export const sectionCategoryKey = new PluginKey('section-category');
-export default (props) => new Plugin({
-    key: sectionCategoryKey,
-    state: {
-        init: (_, state) => buildPluginState(state, props),
-        apply: (tr, value, oldState, newState) => buildPluginState(newState, props),
-    },
-    props: {
-        decorations: (state) => sectionCategoryKey.getState(state)?.decorations || DecorationSet.empty,
-    },
-});

package/dist/types/plugins/section-category/section-category-utils.d.ts

@@ -1,4 +0,0 @@
-import { EditorState } from 'prosemirror-state';
-import { EditorProps } from '../../configs/ManuscriptsEditor';
-import { PluginState } from './index';
-export declare function buildPluginState(state: EditorState, props: EditorProps): PluginState;