@manuscripts/body-editor 2.0.30 → 2.0.31

package/dist/cjs/assets.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.threeDotIcon = exports.deleteIcon = exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
+exports.sectionCategoryIcon = exports.threeDotIcon = exports.deleteIcon = exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
 exports.editIcon = `
   <svg
     width="14"
@@ -170,3 +170,6 @@ exports.threeDotIcon = ` <svg width="4" height="16" viewBox="0 0 4 16" fill="non
 <circle cx="2" cy="14" r="2" fill="#6E6E6E"></circle>
 </svg>
 `;
+exports.sectionCategoryIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19" fill="none">
+<path d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V16.0505C15.5 17.1991 14.2619 17.9215 13.2619 17.3563L8.73809 14.7994C8.28008 14.5405 7.71992 14.5405 7.26191 14.7994L2.73809 17.3563C1.73815 17.9215 0.5 17.1991 0.5 16.0505V4Z" fill="white" stroke="#6E6E6E"/>
+</svg>`;

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

@@ -38,6 +38,7 @@ const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
 const placeholder_1 = __importDefault(require("../plugins/placeholder"));
 const section_title_1 = __importDefault(require("../plugins/section_title"));
+const section_category_1 = __importDefault(require("../plugins/section-category"));
 const sections_1 = __importDefault(require("../plugins/sections"));
 const selected_suggestion_1 = __importDefault(require("../plugins/selected-suggestion"));
 const table_footnote_1 = __importDefault(require("../plugins/table-footnote"));
@@ -75,6 +76,7 @@ exports.default = (props) => {
         (0, table_footnote_1.default)(),
         (0, editor_props_1.default)(props),
         (0, doi_1.default)(),
+        (0, section_category_1.default)(props),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

package/dist/cjs/lib/section-categories.js

@@ -0,0 +1,44 @@
+"use strict";
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCategoryName = exports.isBackMatterSection = exports.isUnique = exports.isEditableSectionCategoryID = exports.uniqueSectionCategories = exports.uneditableSectionCategories = void 0;
+exports.uneditableSectionCategories = [
+    'MPSectionCategory:bibliography',
+    'MPSectionCategory:keywords',
+    'MPSectionCategory:list-of-figures',
+    'MPSectionCategory:list-of-tables',
+    'MPSectionCategory:toc',
+];
+exports.uniqueSectionCategories = [
+    'MPSectionCategory:abstract-graphical',
+    'MPSectionCategory:abstract',
+];
+const isEditableSectionCategoryID = (id) => !exports.uneditableSectionCategories.includes(id);
+exports.isEditableSectionCategoryID = isEditableSectionCategoryID;
+const isUnique = (categoryId) => {
+    return exports.uniqueSectionCategories.includes(categoryId);
+};
+exports.isUnique = isUnique;
+const isBackMatterSection = (groupId) => {
+    return groupId === 'MPSectionCategory:backmatter';
+};
+exports.isBackMatterSection = isBackMatterSection;
+const getCategoryName = (categories, id) => {
+    const category = categories.find((item) => item._id === id);
+    return category ? category.name : '';
+};
+exports.getCategoryName = getCategoryName;

package/dist/cjs/lib/utils.js

@@ -60,7 +60,7 @@ const findParentElement = (selection, validIds) => (0, prosemirror_utils_1.findP
 exports.findParentElement = findParentElement;
 const isChildOfNodeTypes = (doc, pos, parentNodeTypes) => {
     const resolvedPos = doc.resolve(pos);
-    for (let depth = resolvedPos.depth - 1; depth >= 0; depth--) {
+    for (let depth = resolvedPos.depth; depth >= 0; depth--) {
         if (parentNodeTypes.includes(resolvedPos.node(depth).type)) {
             return true;
         }

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

@@ -0,0 +1,17 @@
+"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) => { var _a; return ((_a = exports.sectionCategoryKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations) || prosemirror_view_1.DecorationSet.empty; },
+    },
+});

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

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPluginState = exports.sectionCategoryKey = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const assets_1 = require("../../assets");
+const popper_1 = require("../../lib/popper");
+const section_categories_1 = require("../../lib/section-categories");
+const utils_1 = require("../../lib/utils");
+exports.sectionCategoryKey = new prosemirror_state_1.PluginKey('section-category');
+const popper = new popper_1.PopperManager();
+function changeNodeAttrs(view, node, type, pos) {
+    view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { category: type })));
+}
+function createMenuItem(contents, handler, isDisabled = false, isSelected = false) {
+    const item = document.createElement('button');
+    item.className = `menu-item ${isDisabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}`;
+    item.textContent = contents;
+    item.addEventListener('mousedown', (event) => {
+        handler(event);
+        popper.destroy();
+    });
+    return item;
+}
+function createMenu(view, props, node, pos, currCategory) {
+    const menu = document.createElement('div');
+    menu.className = 'section-category menu';
+    const existingCatsCounted = getExistingCatsCounted(view.state);
+    const categories = getSortedSectionCategories(view.state, node, props.sectionCategories, pos, existingCatsCounted);
+    categories.forEach((category) => {
+        const item = createMenuItem(category.name, () => changeNodeAttrs(view, node, category._id, pos), category.isDisabled, currCategory === category._id);
+        menu.appendChild(item);
+    });
+    document.addEventListener('mousedown', (event) => {
+        if (!menu.contains(event.target)) {
+            popper.destroy();
+        }
+    });
+    return menu;
+}
+function createButton(view, props, node, pos, category, canEdit = true) {
+    const arrow = document.createElement('div');
+    arrow.className = 'section-category popper-arrow';
+    const button = document.createElement('button');
+    button.innerHTML = assets_1.sectionCategoryIcon;
+    button.className = `section-category-button ${category && 'assigned'}`;
+    if (canEdit) {
+        button.addEventListener('mousedown', () => {
+            popper.destroy();
+            const menu = createMenu(view, props, node, pos, category);
+            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 = (0, section_categories_1.getCategoryName)(props.sectionCategories, category);
+            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();
+        });
+    }
+    return button;
+}
+function buildPluginState(state, props) {
+    const decorations = [];
+    const can = props.getCapabilities();
+    state.doc.descendants((node, pos) => {
+        if ((0, transform_1.isSectionNode)(node)) {
+            const attrs = node.attrs;
+            if ((0, section_categories_1.isEditableSectionCategoryID)(attrs.category) &&
+                !(0, section_categories_1.isUnique)(attrs.category)) {
+                decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, (view) => createButton(view, props, node, pos, attrs.category, can === null || can === void 0 ? void 0 : can.editArticle)));
+            }
+        }
+    });
+    return { decorations: prosemirror_view_1.DecorationSet.create(state.doc, decorations) };
+}
+exports.buildPluginState = buildPluginState;
+function getExistingCatsCounted(state) {
+    const existingCatsCounted = {};
+    state.doc.descendants((node) => {
+        var _a;
+        if (node.type.name === 'section' &&
+            ((_a = node.attrs.category) === null || _a === void 0 ? void 0 : _a.startsWith('MPSectionCategory:'))) {
+            existingCatsCounted[node.attrs.category] =
+                (existingCatsCounted[node.attrs.category] || 0) + 1;
+        }
+    });
+    return existingCatsCounted;
+}
+function getSortedSectionCategories(state, container, sectionCategories, pos, existingCatsCounted) {
+    var _a;
+    let groupIDToUse = '';
+    if (container.attrs.category) {
+        const sectionCategory = sectionCategories.find(({ _id }) => _id === container.attrs.category);
+        if (sectionCategory) {
+            groupIDToUse = (_a = sectionCategory.groupIDs) === null || _a === void 0 ? void 0 : _a[0];
+        }
+    }
+    else {
+        const isChildOfBody = (0, utils_1.isChildOfNodeTypes)(state.doc, pos, [
+            transform_1.schema.nodes.body,
+        ]);
+        if (isChildOfBody) {
+            groupIDToUse = 'MPSectionCategory:body';
+        }
+        else {
+            groupIDToUse = 'MPSectionCategory:backmatter';
+        }
+    }
+    if (!groupIDToUse) {
+        return [];
+    }
+    return sectionCategories
+        .filter((category) => { var _a; return (_a = category.groupIDs) === null || _a === void 0 ? void 0 : _a.includes(groupIDToUse); })
+        .map((category) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, category), { isDisabled: Boolean(existingCatsCounted[category._id] &&
+                (0, section_categories_1.isBackMatterSection)((_b = (_a = category.groupIDs) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '')) }));
+    });
+}

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

package/dist/cjs/views/inline_footnote.js

@@ -85,7 +85,6 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
                 return;
             }
             const fnState = footnotes_1.footnotesKey.getState(this.view.state);
-            console.log(fnState);
             if (fnState) {
                 this.activateModal({
                     notes: Array.from(fnState.unusedFootnotes.values()).map((n) => ({

package/dist/es/assets.js

@@ -167,3 +167,6 @@ export const threeDotIcon = ` <svg width="4" height="16" viewBox="0 0 4 16" fill
 <circle cx="2" cy="14" r="2" fill="#6E6E6E"></circle>
 </svg>
 `;
+export const sectionCategoryIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19" fill="none">
+<path d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V16.0505C15.5 17.1991 14.2619 17.9215 13.2619 17.3563L8.73809 14.7994C8.28008 14.5405 7.71992 14.5405 7.26191 14.7994L2.73809 17.3563C1.73815 17.9215 0.5 17.1991 0.5 16.0505V4Z" fill="white" stroke="#6E6E6E"/>
+</svg>`;

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

@@ -33,6 +33,7 @@ import paragraphs from '../plugins/paragraphs';
 import persist from '../plugins/persist';
 import placeholder from '../plugins/placeholder';
 import section_title from '../plugins/section_title';
+import section_category from '../plugins/section-category';
 import sections from '../plugins/sections';
 import selected_suggestion from '../plugins/selected-suggestion';
 import table_footnote from '../plugins/table-footnote';
@@ -70,6 +71,7 @@ export default (props) => {
         table_footnote(),
         editorProps(props),
         doi(),
+        section_category(props),
     ];
     if (props.collabProvider) {
         allPlugins.push(collab({ version: props.collabProvider.currentVersion }));

package/dist/es/lib/section-categories.js

@@ -0,0 +1,37 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const uneditableSectionCategories = [
+    'MPSectionCategory:bibliography',
+    'MPSectionCategory:keywords',
+    'MPSectionCategory:list-of-figures',
+    'MPSectionCategory:list-of-tables',
+    'MPSectionCategory:toc',
+];
+export const uniqueSectionCategories = [
+    'MPSectionCategory:abstract-graphical',
+    'MPSectionCategory:abstract',
+];
+export const isEditableSectionCategoryID = (id) => !uneditableSectionCategories.includes(id);
+export const isUnique = (categoryId) => {
+    return uniqueSectionCategories.includes(categoryId);
+};
+export const isBackMatterSection = (groupId) => {
+    return groupId === 'MPSectionCategory:backmatter';
+};
+export const getCategoryName = (categories, id) => {
+    const category = categories.find((item) => item._id === id);
+    return category ? category.name : '';
+};

package/dist/es/lib/utils.js

@@ -52,7 +52,7 @@ export const findParentElement = (selection, validIds) => findParentNode((node)
 })(selection);
 export const isChildOfNodeTypes = (doc, pos, parentNodeTypes) => {
     const resolvedPos = doc.resolve(pos);
-    for (let depth = resolvedPos.depth - 1; depth >= 0; depth--) {
+    for (let depth = resolvedPos.depth; depth >= 0; depth--) {
         if (parentNodeTypes.includes(resolvedPos.node(depth).type)) {
             return true;
         }

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

@@ -0,0 +1,14 @@
+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) => { var _a; return ((_a = sectionCategoryKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations) || DecorationSet.empty; },
+    },
+});

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

@@ -0,0 +1,130 @@
+import { isSectionNode, schema } from '@manuscripts/transform';
+import { PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { sectionCategoryIcon } from '../../assets';
+import { PopperManager } from '../../lib/popper';
+import { getCategoryName, isBackMatterSection, isEditableSectionCategoryID, isUnique, } from '../../lib/section-categories';
+import { isChildOfNodeTypes } from '../../lib/utils';
+export const sectionCategoryKey = new PluginKey('section-category');
+const popper = new PopperManager();
+function changeNodeAttrs(view, node, type, pos) {
+    view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { category: type })));
+}
+function createMenuItem(contents, handler, isDisabled = false, isSelected = false) {
+    const item = document.createElement('button');
+    item.className = `menu-item ${isDisabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}`;
+    item.textContent = contents;
+    item.addEventListener('mousedown', (event) => {
+        handler(event);
+        popper.destroy();
+    });
+    return item;
+}
+function createMenu(view, props, node, pos, currCategory) {
+    const menu = document.createElement('div');
+    menu.className = 'section-category menu';
+    const existingCatsCounted = getExistingCatsCounted(view.state);
+    const categories = getSortedSectionCategories(view.state, node, props.sectionCategories, pos, existingCatsCounted);
+    categories.forEach((category) => {
+        const item = createMenuItem(category.name, () => changeNodeAttrs(view, node, category._id, pos), category.isDisabled, currCategory === category._id);
+        menu.appendChild(item);
+    });
+    document.addEventListener('mousedown', (event) => {
+        if (!menu.contains(event.target)) {
+            popper.destroy();
+        }
+    });
+    return menu;
+}
+function createButton(view, props, node, pos, category, canEdit = true) {
+    const arrow = document.createElement('div');
+    arrow.className = 'section-category popper-arrow';
+    const button = document.createElement('button');
+    button.innerHTML = sectionCategoryIcon;
+    button.className = `section-category-button ${category && 'assigned'}`;
+    if (canEdit) {
+        button.addEventListener('mousedown', () => {
+            popper.destroy();
+            const menu = createMenu(view, props, node, pos, category);
+            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 = getCategoryName(props.sectionCategories, category);
+            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();
+        });
+    }
+    return button;
+}
+export function buildPluginState(state, props) {
+    const decorations = [];
+    const can = props.getCapabilities();
+    state.doc.descendants((node, pos) => {
+        if (isSectionNode(node)) {
+            const attrs = node.attrs;
+            if (isEditableSectionCategoryID(attrs.category) &&
+                !isUnique(attrs.category)) {
+                decorations.push(Decoration.widget(pos + 1, (view) => createButton(view, props, node, pos, attrs.category, can === null || can === void 0 ? void 0 : can.editArticle)));
+            }
+        }
+    });
+    return { decorations: DecorationSet.create(state.doc, decorations) };
+}
+function getExistingCatsCounted(state) {
+    const existingCatsCounted = {};
+    state.doc.descendants((node) => {
+        var _a;
+        if (node.type.name === 'section' &&
+            ((_a = node.attrs.category) === null || _a === void 0 ? void 0 : _a.startsWith('MPSectionCategory:'))) {
+            existingCatsCounted[node.attrs.category] =
+                (existingCatsCounted[node.attrs.category] || 0) + 1;
+        }
+    });
+    return existingCatsCounted;
+}
+function getSortedSectionCategories(state, container, sectionCategories, pos, existingCatsCounted) {
+    var _a;
+    let groupIDToUse = '';
+    if (container.attrs.category) {
+        const sectionCategory = sectionCategories.find(({ _id }) => _id === container.attrs.category);
+        if (sectionCategory) {
+            groupIDToUse = (_a = sectionCategory.groupIDs) === null || _a === void 0 ? void 0 : _a[0];
+        }
+    }
+    else {
+        const isChildOfBody = isChildOfNodeTypes(state.doc, pos, [
+            schema.nodes.body,
+        ]);
+        if (isChildOfBody) {
+            groupIDToUse = 'MPSectionCategory:body';
+        }
+        else {
+            groupIDToUse = 'MPSectionCategory:backmatter';
+        }
+    }
+    if (!groupIDToUse) {
+        return [];
+    }
+    return sectionCategories
+        .filter((category) => { var _a; return (_a = category.groupIDs) === null || _a === void 0 ? void 0 : _a.includes(groupIDToUse); })
+        .map((category) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, category), { isDisabled: Boolean(existingCatsCounted[category._id] &&
+                isBackMatterSection((_b = (_a = category.groupIDs) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '')) }));
+    });
+}

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.0.30';
+export const VERSION = '2.0.31';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/inline_footnote.js

@@ -79,7 +79,6 @@ export class InlineFootnoteView extends BaseNodeView {
                 return;
             }
             const fnState = footnotesKey.getState(this.view.state);
-            console.log(fnState);
             if (fnState) {
                 this.activateModal({
                     notes: Array.from(fnState.unusedFootnotes.values()).map((n) => ({

package/dist/types/assets.d.ts

@@ -19,3 +19,4 @@ export declare const editAttrsTrackingIcon = "\n <svg\n    width=\"16\"\n    hei
 export declare const alertIcon = "\n  <svg\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 12 12\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M6 12C2.68629 12 1.18852e-06 9.31371 1.47821e-06 6C1.7679e-06 2.68629 2.68629 1.39444e-07 6 4.29138e-07C9.31371 7.18831e-07 12 2.68629 12 6C12 9.31371 9.31371 12 6 12ZM6.74998 2.99996L6.75 6.37462C6.75 6.78819 6.41522 7.12243 6.00166 7.12334C5.58681 7.12426 5.25001 6.78821 5.25001 6.37335L5.25 3.00082C5.25 2.58629 5.58629 2.25037 6.00082 2.25083C6.4147 2.25128 6.74998 2.58607 6.74998 2.99996ZM6.75 8.99263C6.75 9.46884 6.47288 9.75 5.99853 9.75C5.52419 9.75 5.25 9.47179 5.25 8.99558C5.25 8.51937 5.52421 8.25 5.99855 8.25C6.47289 8.25 6.75 8.51642 6.75 8.99263Z\"\n      fill=\"#FE8F1F\"\n    />\n  </svg>\n";
 export declare const deleteIcon = "\n  <svg\n    width=\"13\"\n    height=\"17\"\n    viewBox=\"0 0 13 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z\"\n    fill=\"#C9C9C9\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z\"\n    fill=\"#C9C9C9\"\n  />\n  <rect\n    y=\"2\"\n    width=\"13\"\n    height=\"3\"\n    rx=\"1.5\"\n    fill=\"#C9C9C9\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z\"\n    fill=\"#C9C9C9\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z\"\n    fill=\"#C9C9C9\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z\"\n    fill=\"white\"\n  />\n</svg>";
 export declare const threeDotIcon = " <svg width=\"4\" height=\"16\" viewBox=\"0 0 4 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"#6E6E6E\"></circle>\n<circle cx=\"2\" cy=\"8\" r=\"2\" fill=\"#6E6E6E\"></circle>\n<circle cx=\"2\" cy=\"14\" r=\"2\" fill=\"#6E6E6E\"></circle>\n</svg>\n";
+export declare const sectionCategoryIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"19\" viewBox=\"0 0 16 19\" fill=\"none\">\n<path d=\"M0.5 4C0.5 2.067 2.067 0.5 4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V16.0505C15.5 17.1991 14.2619 17.9215 13.2619 17.3563L8.73809 14.7994C8.28008 14.5405 7.71992 14.5405 7.26191 14.7994L2.73809 17.3563C1.73815 17.9215 0.5 17.1991 0.5 16.0505V4Z\" fill=\"white\" stroke=\"#6E6E6E\"/>\n</svg>";

package/dist/types/configs/ManuscriptsEditor.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import 'prosemirror-view/style/prosemirror.css';
-import { UserProfile } from '@manuscripts/json-schema';
+import { SectionCategory, UserProfile } from '@manuscripts/json-schema';
 import { Capabilities } from '@manuscripts/style-guide';
 import { ManuscriptNode } from '@manuscripts/transform';
 import { EditorState } from 'prosemirror-state';
@@ -45,6 +45,7 @@ export interface EditorProps {
     userID: string;
     debug: boolean;
     cslProps: CSLProps;
+    sectionCategories: SectionCategory[];
     collabProvider?: CollabProvider;
     navigate: NavigateFunction;
     location: Location;

package/dist/types/lib/section-categories.d.ts

@@ -0,0 +1,22 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { SectionCategory } from '@manuscripts/json-schema';
+export declare const uneditableSectionCategories: string[];
+export declare const uniqueSectionCategories: string[];
+export declare const isEditableSectionCategoryID: (id: string) => boolean;
+export declare const isUnique: (categoryId: string) => boolean;
+export declare const isBackMatterSection: (groupId: string) => boolean;
+export declare const getCategoryName: (categories: SectionCategory[], id: string) => string;

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

@@ -0,0 +1,13 @@
+import { SectionCategory } from '@manuscripts/json-schema';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import { EditorProps } from '../../configs/ManuscriptsEditor';
+export declare const sectionCategoryKey: PluginKey<PluginState>;
+export interface PluginState {
+    decorations: DecorationSet;
+}
+export interface SectionCategoryProps extends EditorProps {
+    sectionCategories: SectionCategory[];
+}
+declare const _default: (props: SectionCategoryProps) => Plugin<PluginState>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import { SectionCategory } from '@manuscripts/json-schema';
+import { EditorState, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import { EditorProps } from '../../configs/ManuscriptsEditor';
+export declare const sectionCategoryKey: PluginKey<PluginState>;
+export interface PluginState {
+    decorations: DecorationSet;
+}
+export interface SectionCategoryProps extends EditorProps {
+    sectionCategories: SectionCategory[];
+}
+export declare function buildPluginState(state: EditorState, props: SectionCategoryProps): PluginState;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.0.30";
+export declare const VERSION = "2.0.31";
 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": "2.0.30",
+  "version": "2.0.31",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@iarna/word-count": "^1.1.2",
-    "@manuscripts/json-schema": "2.2.10",
+    "@manuscripts/json-schema": "2.2.11-LEAN-3647.0",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.0.7",
+    "@manuscripts/style-guide": "2.0.8",
     "@manuscripts/track-changes-plugin": "1.7.17",
-    "@manuscripts/transform": "2.3.25",
+    "@manuscripts/transform": "2.3.26",
     "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
     "codemirror": "^5.58.1",

package/styles/AdvancedEditor.css

@@ -738,4 +738,114 @@ span.accepted .selected-suggestion,
 
 .ProseMirror td:hover > .table-context-menu-button, th:hover > .table-context-menu-button, .open-context-menu {
   visibility: visible !important;
-}
+}
+
+.section-category-button {
+  position: absolute;
+  right: 0;
+  top: 14px;
+  line-height: 1.6;
+  background: unset;
+  border: none;
+  opacity: 0;
+  padding: 0;
+  margin: 0 6px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.section-category-button svg {
+  width: 16px;
+  height: 20px;
+  position: relative;
+}
+
+.section-category-button:not(.assigned) path {
+  fill: #FFE0B2;
+}
+
+.section-category-button.assigned:after {
+  top: 2px;
+  right: 5px;
+  position: absolute;
+  content: '';
+  height: 8px;
+  width: 4px;
+  border-bottom: 2px solid #36B260;
+  border-right: 2px solid #36B260;
+  transform: rotate(45deg);
+}
+
+.ProseMirror .block-container:hover .section-category-button {
+  opacity: 1;
+}
+.section-category.menu {
+  border-radius: 8px;
+  border: 1px solid #E2E2E2;
+  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.30);
+}
+
+.section-category.menu .menu-item {
+  padding: 7px 8px 8px 16px;
+  box-sizing: border-box;
+  min-width: 176px;
+  height: 37px;
+  padding-right: 40px;
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  position: relative;
+  background: none;
+  border: unset;
+  display: flex;
+}
+
+.section-category.menu .menu-item.selected:after {
+  top: 10.5px;
+  right: 19px;
+  position: absolute;
+  content: '';
+  height: 10px;
+  width: 5px;
+  border-bottom: 2px solid #36B260;
+  border-right: 2px solid #36B260;
+  transform: rotate(45deg);
+}
+
+.section-category.menu .menu-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.section-category.tooltip {
+  font-family: 'Lato, sans-serif';
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  background: #E2E2E2;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  color:  #353535;
+  line-height: 16px;
+}
+
+.section-category.tooltip span {
+  color:  #353535;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  margin-left: 3.2px;
+}
+
+.popper[data-popper-placement] .section-category.popper-arrow {
+  border-width: 10px;
+  right: -20px;
+  top: 6px;
+  pointer-events: none;
+}