@manuscripts/body-editor 2.0.9 → 2.0.11

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

@@ -37,6 +37,7 @@ const objects_1 = __importDefault(require("../plugins/objects"));
 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 sections_1 = __importDefault(require("../plugins/sections"));
 const selected_suggestion_1 = __importDefault(require("../plugins/selected-suggestion"));
 const table_footnote_1 = __importDefault(require("../plugins/table-footnote"));
@@ -56,6 +57,7 @@ exports.default = (props) => {
                 ? track_changes_plugin_1.TrackChangesStatus.disabled
                 : track_changes_plugin_1.TrackChangesStatus.enabled,
         }),
+        (0, section_title_1.default)(),
         (0, tables_cursor_fix_1.default)(),
         (0, elements_1.default)(),
         (0, persist_1.default)(),

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

@@ -44,6 +44,7 @@ const paragraph_editable_1 = __importDefault(require("../views/paragraph_editabl
 const placeholder_1 = __importDefault(require("../views/placeholder"));
 const placeholder_element_editable_1 = __importDefault(require("../views/placeholder_element_editable"));
 const pullquote_element_editable_1 = __importDefault(require("../views/pullquote_element_editable"));
+const section_1 = __importDefault(require("../views/section"));
 const section_label_1 = __importDefault(require("../views/section_label"));
 const section_title_editable_1 = __importDefault(require("../views/section_title_editable"));
 const table_cell_1 = __importDefault(require("../views/table_cell"));
@@ -76,6 +77,7 @@ exports.default = (props, dispatch) => {
         paragraph: (0, paragraph_editable_1.default)(props),
         placeholder: (0, placeholder_1.default)(props),
         placeholder_element: (0, placeholder_element_editable_1.default)(props),
+        section: (0, section_1.default)(props),
         pullquote_element: (0, pullquote_element_editable_1.default)(props),
         section_title: (0, section_title_editable_1.default)(props),
         section_label: (0, section_label_1.default)(props),

package/dist/cjs/plugins/section_title.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sectionTitleKey = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const track_changes_utils_1 = require("../lib/track-changes-utils");
+exports.sectionTitleKey = new prosemirror_state_1.PluginKey('sectionNumbering');
+const calculateSectionLevels = (node, startPos, sectionNumberMap, numbering = [0]) => {
+    node.forEach((childNode, offset) => {
+        if (childNode.type === transform_1.schema.nodes.section &&
+            !(0, track_changes_utils_1.isRejectedInsert)(childNode)) {
+            numbering[numbering.length - 1] += 1;
+            const sectionNumber = numbering.join('.');
+            const sectionStartPos = startPos + offset + 1;
+            childNode.forEach((innerChildNode) => {
+                if (innerChildNode.type === transform_1.schema.nodes.section_title) {
+                    sectionNumberMap.set(childNode.attrs.id, sectionNumber);
+                }
+            });
+            calculateSectionLevels(childNode, sectionStartPos, sectionNumberMap, [
+                ...numbering,
+                0,
+            ]);
+        }
+    });
+};
+const getPluginState = (doc) => {
+    const bodyNodes = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.body);
+    const bodyNode = bodyNodes[0];
+    const sectionNumberMap = new Map();
+    calculateSectionLevels(bodyNode.node, bodyNode.pos, sectionNumberMap);
+    return sectionNumberMap;
+};
+exports.default = () => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.sectionTitleKey,
+        state: {
+            init: (_, state) => {
+                return getPluginState(state.doc);
+            },
+            apply: (tr, oldSectionNumberMap, oldState, newState) => {
+                if (tr.docChanged) {
+                    return getPluginState(newState.doc);
+                }
+                return oldSectionNumberMap;
+            },
+        },
+    });
+};

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

package/dist/cjs/views/bibliography_element.js

@@ -73,7 +73,7 @@ class BibliographyElementBlockView extends block_view_1.default {
                 componentProps.actions.push({
                     label: 'Edit',
                     action: () => this.handleEdit(element.id),
-                    icon: 'EditIcon',
+                    icon: 'Edit',
                 });
             }
             componentProps.actions.push({

package/dist/cjs/views/citation_editable.js

@@ -77,11 +77,15 @@ class CitationEditableView extends citation_1.CitationView {
         };
         this.showContextMenu = () => {
             this.props.popper.destroy();
+            const can = this.props.getCapabilities();
+            const actions = [
+                { label: 'Comment', action: this.handleComment, icon: 'AddComment' },
+            ];
+            if (can.editArticle) {
+                actions.unshift({ label: 'Edit', action: this.handleEdit, icon: 'Edit' });
+            }
             const componentProps = {
-                actions: [
-                    { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },
-                    { label: 'Comment', action: this.handleComment, icon: 'AddComment' },
-                ],
+                actions,
             };
             this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
             this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);

package/dist/cjs/views/contributors.js

@@ -205,7 +205,7 @@ class ContributorsView extends block_view_1.default {
                     {
                         label: 'Edit',
                         action: () => this.handleEdit(element.id),
-                        icon: 'EditIcon',
+                        icon: 'Edit',
                     },
                 ],
             };

package/dist/cjs/views/inline_footnote.js

@@ -34,8 +34,23 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.findParentTableElement = () => (0, prosemirror_utils_1.findParentNodeClosestToPos)(this.view.state.doc.resolve(this.getPos()), (node) => node.type === transform_1.schema.nodes.table_element);
+        this.showContextMenu = () => {
+            this.props.popper.destroy();
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.activateGenericFnModal();
+                        },
+                        icon: 'Edit',
+                    },
+                ],
+            };
+            this.props.popper.show(this.dom, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
+        };
         this.handleClick = () => {
-            var _a;
             if ((0, track_changes_utils_1.isDeleted)(this.node)) {
                 return;
             }
@@ -46,21 +61,59 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
                     onAdd: this.onAdd,
                 });
             }
-            else if (!this.activateGenericFnModal()) {
-                if ((_a = this.node.attrs.rids) === null || _a === void 0 ? void 0 : _a.length) {
-                    let nodePos = undefined;
-                    this.view.state.doc.descendants((node, pos) => {
-                        if (node.attrs.id === this.node.attrs.rids[0]) {
-                            nodePos = pos;
-                        }
-                    });
-                    if (nodePos && this.props.dispatch) {
-                        const sel = prosemirror_state_1.TextSelection.near(this.view.state.doc.resolve(nodePos + 1));
-                        this.props.dispatch(this.view.state.tr.setSelection(sel).scrollIntoView());
+            else {
+                this.showContextMenu();
+            }
+        };
+        this.scrollToReferenced = () => {
+            var _a;
+            if ((_a = this.node.attrs.rids) === null || _a === void 0 ? void 0 : _a.length) {
+                let nodePos = undefined;
+                this.view.state.doc.descendants((node, pos) => {
+                    if (node.attrs.id === this.node.attrs.rids[0]) {
+                        nodePos = pos;
                     }
+                });
+                if (nodePos && this.props.dispatch) {
+                    const sel = prosemirror_state_1.TextSelection.near(this.view.state.doc.resolve(nodePos + 1));
+                    this.props.dispatch(this.view.state.tr.setSelection(sel).scrollIntoView());
                 }
             }
         };
+        this.activateGenericFnModal = () => {
+            if (!this.props.getCapabilities().editArticle) {
+                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) => ({
+                        node: n[0],
+                    })),
+                    onCancel: () => {
+                        const { tr } = this.view.state;
+                        if (!this.node.attrs.rids.length) {
+                            this.view.dispatch(tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
+                        }
+                        this.destroy();
+                    },
+                    onAdd: () => {
+                        const footnote = (0, commands_1.createFootnote)(this.view.state, 'footnote');
+                        const tr = (0, commands_1.insertFootnote)(this.view.state, this.view.state.tr, footnote);
+                        tr.setNodeAttribute(tr.mapping.map(this.getPos()), 'rids', [
+                            footnote.attrs.id,
+                        ]);
+                        this.view.dispatch(tr);
+                        this.view.focus();
+                        this.destroy();
+                    },
+                    addNewLabel: 'Replace with new footnote',
+                });
+                return true;
+            }
+            return false;
+        };
         this.updateContents = () => {
             const attrs = this.node.attrs;
             this.dom.setAttribute('rids', attrs.rids.join(','));
@@ -154,39 +207,6 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
         this.popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), style_guide_1.FootnotesSelector, Object.assign(Object.assign({}, defaultModal), modalProps), this.node, this.getPos, this.view, 'footnote-editor');
         this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
     }
-    activateGenericFnModal() {
-        if (!this.props.getCapabilities().editArticle) {
-            return;
-        }
-        const fnState = footnotes_1.footnotesKey.getState(this.view.state);
-        if (fnState && fnState.unusedFootnotes.size > 0) {
-            this.activateModal({
-                notes: Array.from(fnState.unusedFootnotes.values()).map((n) => ({
-                    node: n[0],
-                })),
-                onCancel: () => {
-                    const { tr } = this.view.state;
-                    if (!this.node.attrs.rids.length) {
-                        this.view.dispatch(tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
-                    }
-                    this.destroy();
-                },
-                onAdd: () => {
-                    const footnote = (0, commands_1.createFootnote)(this.view.state, 'footnote');
-                    const tr = (0, commands_1.insertFootnote)(this.view.state, this.view.state.tr, footnote);
-                    tr.setNodeAttribute(tr.mapping.map(this.getPos()), 'rids', [
-                        footnote.attrs.id,
-                    ]);
-                    this.view.dispatch(tr);
-                    this.view.focus();
-                    this.destroy();
-                },
-                addNewLabel: 'Replace with new footnote',
-            });
-            return true;
-        }
-        return false;
-    }
 }
 exports.InlineFootnoteView = InlineFootnoteView;
 exports.default = (0, creators_1.createNodeView)(InlineFootnoteView);

package/dist/cjs/views/section.js

@@ -0,0 +1,79 @@
+"use strict";
+/*!
+ * © 2019 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionView = exports.handleSectionNumbering = void 0;
+const transform_1 = require("@manuscripts/transform");
+const section_title_1 = require("../plugins/section_title");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+const handleSectionNumbering = (sections) => {
+    sections.forEach((sectionNumber, sectionId) => {
+        const section = document.getElementById(sectionId);
+        const sectionTitle = section === null || section === void 0 ? void 0 : section.querySelector('h1');
+        if (sectionTitle) {
+            sectionTitle.dataset.sectionNumber = sectionNumber;
+        }
+    });
+};
+exports.handleSectionNumbering = handleSectionNumbering;
+class SectionView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.elementType = 'section';
+        this.initialise = () => {
+            this.createDOM();
+            this.createElement();
+            this.updateContents();
+        };
+        this.createElement = () => {
+            this.contentDOM = document.createElement(this.elementType);
+            this.dom.appendChild(this.contentDOM);
+        };
+        this.onUpdateContent = () => {
+            const sectionTitleState = section_title_1.sectionTitleKey.getState(this.view.state);
+            const { titleSuppressed, generatedLabel, pageBreakStyle, id, category } = this.node.attrs;
+            const classNames = [];
+            if (titleSuppressed) {
+                classNames.push('title-suppressed');
+            }
+            if (typeof generatedLabel === 'undefined' || generatedLabel) {
+                classNames.push('generated-label');
+            }
+            if (pageBreakStyle === transform_1.PAGE_BREAK_BEFORE ||
+                pageBreakStyle === transform_1.PAGE_BREAK_BEFORE_AND_AFTER) {
+                classNames.push('page-break-before');
+            }
+            if (pageBreakStyle === transform_1.PAGE_BREAK_AFTER ||
+                pageBreakStyle === transform_1.PAGE_BREAK_BEFORE_AND_AFTER) {
+                classNames.push('page-break-after');
+            }
+            if (this.contentDOM) {
+                this.contentDOM.id = id;
+                this.contentDOM.classList.add(...classNames);
+                category && this.contentDOM.setAttribute('data-category', category);
+            }
+            if (sectionTitleState) {
+                (0, exports.handleSectionNumbering)(sectionTitleState);
+            }
+        };
+    }
+}
+exports.SectionView = SectionView;
+exports.default = (0, creators_1.createNodeView)(SectionView);

package/dist/cjs/views/section_title.js

@@ -19,23 +19,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionTitleView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_utils_1 = require("prosemirror-utils");
 const context_menu_1 = require("../lib/context-menu");
+const section_title_1 = require("../plugins/section_title");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 class SectionTitleView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.elementType = 'h1';
-        this.updateContents = () => {
+        this.onUpdateContent = () => {
             const $pos = this.view.state.doc.resolve(this.getPos());
+            const sectionTitleState = section_title_1.sectionTitleKey.getState(this.view.state);
+            const parentSection = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.section);
+            const sectionNumber = sectionTitleState === null || sectionTitleState === void 0 ? void 0 : sectionTitleState.get(parentSection === null || parentSection === void 0 ? void 0 : parentSection.node.attrs.id);
+            const level = $pos.depth > 1 ? $pos.depth - 1 : $pos.depth;
             if (this.node.childCount) {
                 this.contentDOM.classList.remove('empty-node');
             }
             else {
                 this.contentDOM.classList.add('empty-node');
-                const level = $pos.depth > 1 ? $pos.depth - 1 : $pos.depth;
                 this.contentDOM.setAttribute('data-placeholder', `${(0, context_menu_1.sectionLevel)(level)} heading`);
             }
+            if (sectionTitleState) {
+                this.contentDOM.dataset.sectionNumber = sectionNumber;
+                this.contentDOM.dataset.titleLevel = level.toString();
+            }
         };
     }
 }

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

@@ -32,6 +32,7 @@ import objects from '../plugins/objects';
 import paragraphs from '../plugins/paragraphs';
 import persist from '../plugins/persist';
 import placeholder from '../plugins/placeholder';
+import section_title from '../plugins/section_title';
 import sections from '../plugins/sections';
 import selected_suggestion from '../plugins/selected-suggestion';
 import table_footnote from '../plugins/table-footnote';
@@ -51,6 +52,7 @@ export default (props) => {
                 ? TrackChangesStatus.disabled
                 : TrackChangesStatus.enabled,
         }),
+        section_title(),
         table_editing_fix(),
         elements(),
         persist(),

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

@@ -39,6 +39,7 @@ import paragraph from '../views/paragraph_editable';
 import placeholder from '../views/placeholder';
 import placeholderElement from '../views/placeholder_element_editable';
 import pullquoteElement from '../views/pullquote_element_editable';
+import section from '../views/section';
 import sectionLabel from '../views/section_label';
 import sectionTitle from '../views/section_title_editable';
 import tableCell from '../views/table_cell';
@@ -71,6 +72,7 @@ export default (props, dispatch) => {
         paragraph: paragraph(props),
         placeholder: placeholder(props),
         placeholder_element: placeholderElement(props),
+        section: section(props),
         pullquote_element: pullquoteElement(props),
         section_title: sectionTitle(props),
         section_label: sectionLabel(props),

package/dist/es/plugins/section_title.js

@@ -0,0 +1,47 @@
+import { schema } from '@manuscripts/transform';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { findChildrenByType } from 'prosemirror-utils';
+import { isRejectedInsert } from '../lib/track-changes-utils';
+export const sectionTitleKey = new PluginKey('sectionNumbering');
+const calculateSectionLevels = (node, startPos, sectionNumberMap, numbering = [0]) => {
+    node.forEach((childNode, offset) => {
+        if (childNode.type === schema.nodes.section &&
+            !isRejectedInsert(childNode)) {
+            numbering[numbering.length - 1] += 1;
+            const sectionNumber = numbering.join('.');
+            const sectionStartPos = startPos + offset + 1;
+            childNode.forEach((innerChildNode) => {
+                if (innerChildNode.type === schema.nodes.section_title) {
+                    sectionNumberMap.set(childNode.attrs.id, sectionNumber);
+                }
+            });
+            calculateSectionLevels(childNode, sectionStartPos, sectionNumberMap, [
+                ...numbering,
+                0,
+            ]);
+        }
+    });
+};
+const getPluginState = (doc) => {
+    const bodyNodes = findChildrenByType(doc, schema.nodes.body);
+    const bodyNode = bodyNodes[0];
+    const sectionNumberMap = new Map();
+    calculateSectionLevels(bodyNode.node, bodyNode.pos, sectionNumberMap);
+    return sectionNumberMap;
+};
+export default () => {
+    return new Plugin({
+        key: sectionTitleKey,
+        state: {
+            init: (_, state) => {
+                return getPluginState(state.doc);
+            },
+            apply: (tr, oldSectionNumberMap, oldState, newState) => {
+                if (tr.docChanged) {
+                    return getPluginState(newState.doc);
+                }
+                return oldSectionNumberMap;
+            },
+        },
+    });
+};

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.0.9';
+export const VERSION = '2.0.11';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/bibliography_element.js

@@ -67,7 +67,7 @@ export class BibliographyElementBlockView extends BlockView {
                 componentProps.actions.push({
                     label: 'Edit',
                     action: () => this.handleEdit(element.id),
-                    icon: 'EditIcon',
+                    icon: 'Edit',
                 });
             }
             componentProps.actions.push({

package/dist/es/views/citation_editable.js

@@ -71,11 +71,15 @@ export class CitationEditableView extends CitationView {
         };
         this.showContextMenu = () => {
             this.props.popper.destroy();
+            const can = this.props.getCapabilities();
+            const actions = [
+                { label: 'Comment', action: this.handleComment, icon: 'AddComment' },
+            ];
+            if (can.editArticle) {
+                actions.unshift({ label: 'Edit', action: this.handleEdit, icon: 'Edit' });
+            }
             const componentProps = {
-                actions: [
-                    { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },
-                    { label: 'Comment', action: this.handleComment, icon: 'AddComment' },
-                ],
+                actions,
             };
             this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
             this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);

package/dist/es/views/contributors.js

@@ -199,7 +199,7 @@ export class ContributorsView extends BlockView {
                     {
                         label: 'Edit',
                         action: () => this.handleEdit(element.id),
-                        icon: 'EditIcon',
+                        icon: 'Edit',
                     },
                 ],
             };

package/dist/es/views/inline_footnote.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FootnotesSelector } from '@manuscripts/style-guide';
+import { ContextMenu, FootnotesSelector, } from '@manuscripts/style-guide';
 import { schema, } from '@manuscripts/transform';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { findChildrenByType, findParentNodeClosestToPos, } from 'prosemirror-utils';
@@ -28,8 +28,23 @@ export class InlineFootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
         this.findParentTableElement = () => findParentNodeClosestToPos(this.view.state.doc.resolve(this.getPos()), (node) => node.type === schema.nodes.table_element);
+        this.showContextMenu = () => {
+            this.props.popper.destroy();
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => {
+                            this.props.popper.destroy();
+                            this.activateGenericFnModal();
+                        },
+                        icon: 'Edit',
+                    },
+                ],
+            };
+            this.props.popper.show(this.dom, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
+        };
         this.handleClick = () => {
-            var _a;
             if (isDeleted(this.node)) {
                 return;
             }
@@ -40,21 +55,59 @@ export class InlineFootnoteView extends BaseNodeView {
                     onAdd: this.onAdd,
                 });
             }
-            else if (!this.activateGenericFnModal()) {
-                if ((_a = this.node.attrs.rids) === null || _a === void 0 ? void 0 : _a.length) {
-                    let nodePos = undefined;
-                    this.view.state.doc.descendants((node, pos) => {
-                        if (node.attrs.id === this.node.attrs.rids[0]) {
-                            nodePos = pos;
-                        }
-                    });
-                    if (nodePos && this.props.dispatch) {
-                        const sel = TextSelection.near(this.view.state.doc.resolve(nodePos + 1));
-                        this.props.dispatch(this.view.state.tr.setSelection(sel).scrollIntoView());
+            else {
+                this.showContextMenu();
+            }
+        };
+        this.scrollToReferenced = () => {
+            var _a;
+            if ((_a = this.node.attrs.rids) === null || _a === void 0 ? void 0 : _a.length) {
+                let nodePos = undefined;
+                this.view.state.doc.descendants((node, pos) => {
+                    if (node.attrs.id === this.node.attrs.rids[0]) {
+                        nodePos = pos;
                     }
+                });
+                if (nodePos && this.props.dispatch) {
+                    const sel = TextSelection.near(this.view.state.doc.resolve(nodePos + 1));
+                    this.props.dispatch(this.view.state.tr.setSelection(sel).scrollIntoView());
                 }
             }
         };
+        this.activateGenericFnModal = () => {
+            if (!this.props.getCapabilities().editArticle) {
+                return;
+            }
+            const fnState = footnotesKey.getState(this.view.state);
+            console.log(fnState);
+            if (fnState) {
+                this.activateModal({
+                    notes: Array.from(fnState.unusedFootnotes.values()).map((n) => ({
+                        node: n[0],
+                    })),
+                    onCancel: () => {
+                        const { tr } = this.view.state;
+                        if (!this.node.attrs.rids.length) {
+                            this.view.dispatch(tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
+                        }
+                        this.destroy();
+                    },
+                    onAdd: () => {
+                        const footnote = createFootnote(this.view.state, 'footnote');
+                        const tr = insertFootnote(this.view.state, this.view.state.tr, footnote);
+                        tr.setNodeAttribute(tr.mapping.map(this.getPos()), 'rids', [
+                            footnote.attrs.id,
+                        ]);
+                        this.view.dispatch(tr);
+                        this.view.focus();
+                        this.destroy();
+                    },
+                    addNewLabel: 'Replace with new footnote',
+                });
+                return true;
+            }
+            return false;
+        };
         this.updateContents = () => {
             const attrs = this.node.attrs;
             this.dom.setAttribute('rids', attrs.rids.join(','));
@@ -148,38 +201,5 @@ export class InlineFootnoteView extends BaseNodeView {
         this.popperContainer = ReactSubView(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), FootnotesSelector, Object.assign(Object.assign({}, defaultModal), modalProps), this.node, this.getPos, this.view, 'footnote-editor');
         this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
     }
-    activateGenericFnModal() {
-        if (!this.props.getCapabilities().editArticle) {
-            return;
-        }
-        const fnState = footnotesKey.getState(this.view.state);
-        if (fnState && fnState.unusedFootnotes.size > 0) {
-            this.activateModal({
-                notes: Array.from(fnState.unusedFootnotes.values()).map((n) => ({
-                    node: n[0],
-                })),
-                onCancel: () => {
-                    const { tr } = this.view.state;
-                    if (!this.node.attrs.rids.length) {
-                        this.view.dispatch(tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
-                    }
-                    this.destroy();
-                },
-                onAdd: () => {
-                    const footnote = createFootnote(this.view.state, 'footnote');
-                    const tr = insertFootnote(this.view.state, this.view.state.tr, footnote);
-                    tr.setNodeAttribute(tr.mapping.map(this.getPos()), 'rids', [
-                        footnote.attrs.id,
-                    ]);
-                    this.view.dispatch(tr);
-                    this.view.focus();
-                    this.destroy();
-                },
-                addNewLabel: 'Replace with new footnote',
-            });
-            return true;
-        }
-        return false;
-    }
 }
 export default createNodeView(InlineFootnoteView);

package/dist/es/views/section.js

@@ -0,0 +1,71 @@
+/*!
+ * © 2019 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 { PAGE_BREAK_AFTER, PAGE_BREAK_BEFORE, PAGE_BREAK_BEFORE_AND_AFTER, } from '@manuscripts/transform';
+import { sectionTitleKey } from '../plugins/section_title';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+export const handleSectionNumbering = (sections) => {
+    sections.forEach((sectionNumber, sectionId) => {
+        const section = document.getElementById(sectionId);
+        const sectionTitle = section === null || section === void 0 ? void 0 : section.querySelector('h1');
+        if (sectionTitle) {
+            sectionTitle.dataset.sectionNumber = sectionNumber;
+        }
+    });
+};
+export class SectionView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.elementType = 'section';
+        this.initialise = () => {
+            this.createDOM();
+            this.createElement();
+            this.updateContents();
+        };
+        this.createElement = () => {
+            this.contentDOM = document.createElement(this.elementType);
+            this.dom.appendChild(this.contentDOM);
+        };
+        this.onUpdateContent = () => {
+            const sectionTitleState = sectionTitleKey.getState(this.view.state);
+            const { titleSuppressed, generatedLabel, pageBreakStyle, id, category } = this.node.attrs;
+            const classNames = [];
+            if (titleSuppressed) {
+                classNames.push('title-suppressed');
+            }
+            if (typeof generatedLabel === 'undefined' || generatedLabel) {
+                classNames.push('generated-label');
+            }
+            if (pageBreakStyle === PAGE_BREAK_BEFORE ||
+                pageBreakStyle === PAGE_BREAK_BEFORE_AND_AFTER) {
+                classNames.push('page-break-before');
+            }
+            if (pageBreakStyle === PAGE_BREAK_AFTER ||
+                pageBreakStyle === PAGE_BREAK_BEFORE_AND_AFTER) {
+                classNames.push('page-break-after');
+            }
+            if (this.contentDOM) {
+                this.contentDOM.id = id;
+                this.contentDOM.classList.add(...classNames);
+                category && this.contentDOM.setAttribute('data-category', category);
+            }
+            if (sectionTitleState) {
+                handleSectionNumbering(sectionTitleState);
+            }
+        };
+    }
+}
+export default createNodeView(SectionView);

package/dist/es/views/section_title.js

@@ -13,23 +13,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { schema } from '@manuscripts/transform';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { sectionLevel } from '../lib/context-menu';
+import { sectionTitleKey } from '../plugins/section_title';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 export class SectionTitleView extends BlockView {
     constructor() {
         super(...arguments);
         this.elementType = 'h1';
-        this.updateContents = () => {
+        this.onUpdateContent = () => {
             const $pos = this.view.state.doc.resolve(this.getPos());
+            const sectionTitleState = sectionTitleKey.getState(this.view.state);
+            const parentSection = findParentNodeOfTypeClosestToPos($pos, schema.nodes.section);
+            const sectionNumber = sectionTitleState === null || sectionTitleState === void 0 ? void 0 : sectionTitleState.get(parentSection === null || parentSection === void 0 ? void 0 : parentSection.node.attrs.id);
+            const level = $pos.depth > 1 ? $pos.depth - 1 : $pos.depth;
             if (this.node.childCount) {
                 this.contentDOM.classList.remove('empty-node');
             }
             else {
                 this.contentDOM.classList.add('empty-node');
-                const level = $pos.depth > 1 ? $pos.depth - 1 : $pos.depth;
                 this.contentDOM.setAttribute('data-placeholder', `${sectionLevel(level)} heading`);
             }
+            if (sectionTitleState) {
+                this.contentDOM.dataset.sectionNumber = sectionNumber;
+                this.contentDOM.dataset.titleLevel = level.toString();
+            }
         };
     }
 }

package/dist/types/configs/editor-views.d.ts

@@ -316,6 +316,7 @@ declare const _default: (props: EditorProps, dispatch: Dispatch) => {
         destroy: () => void;
         handleDecorations: (decorations: readonly import("prosemirror-view").Decoration[]) => void;
     } & import("../views/placeholder_element").PlaceholderElementView<any>>;
+    section: import("../types").NodeViewCreator<import("../views/section").SectionView<any>>;
     pullquote_element: import("../types").NodeViewCreator<{
         gutterButtons: () => HTMLElement[];
         actionGutterButtons: () => HTMLElement[];

package/dist/types/plugins/section_title.d.ts

@@ -0,0 +1,5 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+export type PluginState = Map<string, string>;
+export declare const sectionTitleKey: PluginKey<PluginState>;
+declare const _default: () => Plugin<PluginState>;
+export default _default;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.0.9";
+export declare const VERSION = "2.0.11";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/inline_footnote.d.ts

@@ -27,9 +27,11 @@ export declare class InlineFootnoteView<PropsType extends InlineFootnoteProps &
     protected popperContainer: HTMLDivElement;
     isSelected(): boolean;
     findParentTableElement: () => ContentNodeWithPos | undefined;
+    showContextMenu: () => void;
     handleClick: () => void;
+    scrollToReferenced: () => void;
     activateModal(modalProps: Partial<ModalProps>): void;
-    activateGenericFnModal(): boolean | undefined;
+    activateGenericFnModal: () => boolean | undefined;
     updateContents: () => void;
     initialise: () => void;
     ignoreMutation: () => boolean;

package/dist/types/views/section.d.ts

@@ -0,0 +1,28 @@
+/*!
+ * © 2019 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 { PluginState } from '../plugins/section_title';
+import { BaseNodeProps } from './base_node_view';
+import BlockView from './block_view';
+export declare const handleSectionNumbering: (sections: PluginState) => void;
+export declare class SectionView<PropsType extends BaseNodeProps> extends BlockView<PropsType> {
+    elementType: string;
+    element: HTMLElement;
+    initialise: () => void;
+    createElement: () => void;
+    onUpdateContent: () => void;
+}
+declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<SectionView<any>>;
+export default _default;

package/dist/types/views/section_title.d.ts

@@ -18,7 +18,7 @@ import BlockView from './block_view';
 export declare class SectionTitleView<PropsType extends BaseNodeProps> extends BlockView<PropsType> {
     contentDOM: HTMLElement;
     elementType: string;
-    updateContents: () => void;
+    onUpdateContent: () => void;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<SectionTitleView<any>>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.10",
     "@manuscripts/library": "1.3.10",
-    "@manuscripts/style-guide": "2.0.1",
+    "@manuscripts/style-guide": "2.0.2",
     "@manuscripts/track-changes-plugin": "1.7.17",
     "@manuscripts/transform": "2.3.21",
     "@popperjs/core": "^2.11.8",
@@ -116,4 +116,4 @@
   "engines": {
     "node": ">=20.16.0"
   }
-}
+}

package/styles/AdvancedEditor.css

@@ -1,147 +1,22 @@
-/* LVL 1 */
-/*
-This level is actually hidden in the editor
-Next levels are shifted 'up' by 1
-*/
-.ProseMirror > div.body > section:not(.toc) {
-  counter-increment: level_1 0;
-}
-
-.ProseMirror > div > .block-section_title > h1 {
-  font-size: 16pt !important;
-  font-style: normal !important;
-  font-weight: bold !important;
-  color: #000 !important;
-  text-align: left;
-  margin-top: 8pt !important;
-  margin-bottom: 5pt !important;
-  line-height: 1.5;
-  text-indent: 0pt;
-  display: inline;
-}
-
-/* LVL 2 */
-.ProseMirror > div.body > section:not(.toc) {
-  counter-increment: level_1;
-  counter-reset: level_2;
-}
-.ProseMirror > div > section > .block-section_title > h1 {
-  font-size: 15.75pt !important;
-  font-style: normal !important;
-  font-weight: bold !important;
-  color: #353535 !important;
-  text-align: left;
-  margin-top: 8pt !important;
-  margin-bottom: 5pt !important;
-  line-height: 24pt;
-  text-indent: 0pt;
-  display: inline;
-}
-.ProseMirror > div.body {
-  counter-reset: level_1;
-}
 .ProseMirror
   > div.body
-  > section:not(.toc)
-  > .block-section_title
-  > h1::before {
-  content: counter(level_1, decimal) '. ';
+  section:not(.toc) 
+ .block-section_title
+  h1.empty-node[data-placeholder]::before {
+  content: attr(data-section-number) '. ' attr(data-placeholder);
 }
 
 .ProseMirror
   > div.body
-  > section:not(.toc)
-  > .block-section_title
-  > h1.empty-node[data-placeholder]::before {
-  content: counter(level_1, decimal) '. ' attr(data-placeholder);
-}
-/* LVL 3 */
-.ProseMirror > div.body > section > section:not(.toc) {
-  counter-increment: level_2;
-  counter-reset: level_3;
-}
-.ProseMirror > div > section > section > .block-section_title > h1 {
-  font-size: 13.5pt !important;
-  font-style: normal !important;
-  font-weight: 700 !important;
-  color: #353535 !important;
-  text-align: left;
-  margin-top: 8pt !important;
-  margin-bottom: 5pt !important;
-  line-height: 24pt;
-  text-indent: 0pt;
-  display: inline;
-}
-.ProseMirror
-  > div.body
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '. ';
-}
-.ProseMirror
-  > div.body
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1.empty-node[data-placeholder]::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '. '
-    attr(data-placeholder);
-}
-/* LVL 4 */
-.ProseMirror > div.body > section > section > section:not(.toc) {
-  counter-increment: level_3;
-  counter-reset: level_4;
-}
-.ProseMirror > div > section > section > section > .block-section_title > h1 {
-  font-size: 12pt !important;
-  font-style: normal !important;
-  font-weight: bold !important;
-  color: #000 !important;
-  text-align: left;
-  margin-top: 8pt !important;
-  margin-bottom: 5pt !important;
-  line-height: 1.5;
-  text-indent: 0pt;
-  display: inline;
-}
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '. ';
+  section:not(.toc) 
+ .block-section_title
+  h1::before {
+  content: attr(data-section-number) '. ';
 }
 
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1.empty-node[data-placeholder]::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '. ' attr(data-placeholder);
-}
-/* LVL 5 */
-.ProseMirror > div.body > section > section > section > section:not(.toc) {
-  counter-increment: level_4;
-  counter-reset: level_5;
-}
 
-.ProseMirror
-  > div
-  > section
-  > section
-  > section
-  > section
-  > .block-section_title
-  > h1 {
-  font-size: 12pt !important;
+.ProseMirror > div .block-section_title > h1 {
+  font-size: 16pt !important;
   font-style: normal !important;
   font-weight: bold !important;
   color: #000 !important;
@@ -152,147 +27,20 @@ Next levels are shifted 'up' by 1
   text-indent: 0pt;
   display: inline;
 }
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '.' counter(level_4, decimal) '. ';
-}
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1.empty-node[data-placeholder]::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '.' counter(level_4, decimal) '. '
-    attr(data-placeholder);
-}
-/* LVL 6 */
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section
-  > section:not(.toc) {
-  counter-increment: level_5;
-  counter-reset: level_6;
-}
-.ProseMirror
-  > div
-  > section
-  > section
-  > section
-  > section
-  > section
-  > .block-section_title
-  > h1 {
+.ProseMirror .block-section_title h1[data-title-level] {
   font-size: 12pt !important;
-  font-style: normal !important;
-  font-weight: bold !important;
-  color: #000 !important;
-  text-align: left;
-  margin-top: 8pt !important;
-  margin-bottom: 5pt !important;
-  line-height: 1.5;
-  text-indent: 0pt;
-  display: inline;
 }
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '.' counter(level_4, decimal) '.'
-    counter(level_5, decimal) '. ';
-}
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1.empty-node[data-placeholder]::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '.' counter(level_4, decimal) '.'
-    counter(level_5, decimal) '. ' attr(data-placeholder);
-}
-/* LVL 7 */
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section
-  > section
-  > section:not(.toc) {
-  counter-increment: level_6;
-  counter-reset: level_7;
-}
-.ProseMirror
-  > div
-  > section
-  > section
-  > section
-  > section
-  > section
-  > .block-section_title
-  > h1 {
-  font-size: 12pt !important;
-  font-style: normal !important;
-  font-weight: bold !important;
-  color: #000 !important;
-  text-align: left;
-  margin-top: 8pt !important;
-  margin-bottom: 5pt !important;
-  line-height: 1.5;
-  text-indent: 0pt;
-  display: inline;
-}
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '.' counter(level_4, decimal) '.'
-    counter(level_5, decimal) '.' counter(level_6, decimal) '. ';
+
+.ProseMirror .block-section_title h1[data-title-level='1'] {
+  font-size: 16pt !important;
 }
-.ProseMirror
-  > div.body
-  > section
-  > section
-  > section
-  > section
-  > section
-  > section:not(.toc)
-  > .block-section_title
-  > h1.empty-node[data-placeholder]::before {
-  content: counter(level_1, decimal) '.' counter(level_2, decimal) '.'
-    counter(level_3, decimal) '.' counter(level_4, decimal) '.'
-    counter(level_5, decimal) '.' counter(level_6, decimal) '. '
-    attr(data-placeholder);
+
+.ProseMirror .block-section_title h1[data-title-level='2'] {
+  font-size: 13.5pt !important;
 }
+
+
+
 .ProseMirror div.backmatter::before {
   content: '';
   border-bottom: 1px dashed #c9c9c9;

package/styles/Editor.css

@@ -593,8 +593,13 @@
   display: grid;
   grid-template-columns: 52px auto 52px;
 }
+.ProseMirror .block-container.block-section {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto;
+}
 
-.ProseMirror .block-container:hover {
+.ProseMirror .block-container:not(.block-section):hover {
   z-index: 2;
 }
 
@@ -649,7 +654,7 @@
   margin-top: 16px;
 }
 
-.ProseMirror .block-container:hover .block-gutter {
+.ProseMirror .block-container:not(.block-section):hover .block-gutter {
   opacity: 1;
   z-index: 2;
 }