@manuscripts/body-editor 3.8.0 → 3.8.2

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

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.8.0';
+export const VERSION = '3.8.2';
 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.8.0";
+export declare const VERSION = "3.8.2";
 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.8.0",
+  "version": "3.8.2",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -40,7 +40,7 @@
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.4.0",
     "@manuscripts/track-changes-plugin": "2.2.3",
-    "@manuscripts/transform": "4.3.14",
+    "@manuscripts/transform": "4.3.15",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

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;