@manuscripts/body-editor 1.6.10 → 1.6.12

package/dist/es/lib/context-menu.js

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { isInBibliographySection, nodeNames, schema, } from '@manuscripts/transform';
-import { Fragment, Slice } from 'prosemirror-model';
 import { addComment, createBlock } from '../commands';
 import { PopperManager } from './popper';
 const popper = new PopperManager();
@@ -28,118 +27,96 @@ export const sectionLevel = (depth) => {
             return 'Sub' + 'sub'.repeat(depth - 2) + 'section';
     }
 };
+const hasAny = (set, ...items) => {
+    return items.some((i) => set.has(i));
+};
 export class ContextMenu {
     constructor(node, view, getPos, actions = {}) {
-        this.suppressibleAttrs = new Map([
-            ['suppressHeader', 'Header'],
-            ['suppressFooter', 'Footer'],
-        ]);
         this.showAddMenu = (target, after) => {
-            let _after = after;
-            const { nodes } = this.view.state.schema;
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
-            _after = isInBibliographySection($pos) ? false : _after;
-            const insertPos = _after ? $pos.after($pos.depth) : $pos.before($pos.depth);
+            if (isInBibliographySection($pos)) {
+                after = false;
+            }
+            const insertPos = after ? $pos.after($pos.depth) : $pos.before($pos.depth);
             const endPos = $pos.end();
-            const insertableTypes = this.insertableTypes(_after, insertPos, endPos);
-            if (this.showMenuSection(insertableTypes, ['section', 'subsection'])) {
+            const types = this.insertableTypes(after, insertPos, endPos);
+            const insertNode = (type, pos) => {
+                const { state, dispatch } = this.view;
+                if (pos === undefined) {
+                    pos = after ? this.getPos() + this.node.nodeSize : this.getPos();
+                }
+                createBlock(type, pos, state, dispatch);
+            };
+            if (hasAny(types, 'section', 'subsection')) {
                 menu.appendChild(this.createMenuSection((section) => {
-                    const labelPosition = _after ? 'After' : 'Before';
                     const sectionTitle = $pos.node($pos.depth).child(0).textContent;
                     const itemTitle = sectionTitle
                         ? `“${this.trimTitle(sectionTitle, 30)}”`
                         : 'This Section';
-                    const itemLabel = `New ${sectionLevel($pos.depth - 1)} ${labelPosition} ${itemTitle}`;
-                    if (insertableTypes.section) {
-                        section.appendChild(this.createMenuItem(itemLabel, () => {
-                            this.addBlock(nodes.section, _after, insertPos);
+                    if (types.has('section')) {
+                        const labelPosition = after ? 'After' : 'Before';
+                        const level = sectionLevel($pos.depth - 1);
+                        const label = `New ${level} ${labelPosition} ${itemTitle}`;
+                        section.appendChild(this.createMenuItem(label, () => {
+                            insertNode(schema.nodes.section, insertPos);
                             popper.destroy();
                         }));
                     }
-                    if (insertableTypes.subsection) {
-                        const subItemLabel = `New ${sectionLevel($pos.depth)} to ${itemTitle}`;
-                        section.appendChild(this.createMenuItem(subItemLabel, () => {
-                            this.addBlock(nodes.section, _after, endPos);
+                    if (types.has('subsection')) {
+                        const level = sectionLevel($pos.depth);
+                        const label = `New ${level} to ${itemTitle}`;
+                        section.appendChild(this.createMenuItem(label, () => {
+                            insertNode(schema.nodes.section, endPos);
                             popper.destroy();
                         }));
                     }
                 }));
             }
-            if (this.showMenuSection(insertableTypes, [
-                'paragraph',
-                'orderedList',
-                'bulletList',
-            ])) {
+            if (hasAny(types, 'paragraph', 'ordered_list', 'bullet_list')) {
                 menu.appendChild(this.createMenuSection((section) => {
-                    if (insertableTypes.paragraphElement) {
+                    if (types.has('paragraph')) {
                         section.appendChild(this.createMenuItem('Paragraph', () => {
-                            this.addBlock(nodes.paragraph, _after);
+                            insertNode(schema.nodes.paragraph);
                             popper.destroy();
                         }));
                     }
-                    if (insertableTypes.orderedList) {
+                    if (types.has('ordered_list')) {
                         section.appendChild(this.createMenuItem('Numbered List', () => {
-                            this.addBlock(nodes.ordered_list, _after);
+                            insertNode(schema.nodes.ordered_list);
                             popper.destroy();
                         }));
                     }
-                    if (insertableTypes.bulletList) {
+                    if (types.has('bullet_list')) {
                         section.appendChild(this.createMenuItem('Bullet List', () => {
-                            this.addBlock(nodes.bullet_list, _after);
+                            insertNode(schema.nodes.bullet_list);
                             popper.destroy();
                         }));
                     }
                 }));
             }
-            if (this.showMenuSection(insertableTypes, [
-                'figure',
-                'tableElement',
-                'equationElement',
-                'listingElement',
-            ])) {
+            if (hasAny(types, 'figure_element', 'equation_element')) {
                 menu.appendChild(this.createMenuSection((section) => {
-                    if (insertableTypes.figureElement) {
+                    if (types.has('figure_element')) {
                         section.appendChild(this.createMenuItem('Figure Panel', () => {
-                            this.addBlock(nodes.figure_element, _after);
+                            insertNode(schema.nodes.figure_element);
                             popper.destroy();
                         }));
                     }
-                    if (insertableTypes.tableElement) {
-                        section.appendChild(this.createMenuItem('Table', () => {
-                            this.addBlock(nodes.table_element, _after);
-                            popper.destroy();
-                        }));
-                    }
-                    if (insertableTypes.equationElement) {
+                    if (types.has('equation_element')) {
                         section.appendChild(this.createMenuItem('Equation', () => {
-                            this.addBlock(nodes.equation_element, _after);
-                            popper.destroy();
-                        }));
-                    }
-                    if (insertableTypes.listingElement) {
-                        section.appendChild(this.createMenuItem('Listing', () => {
-                            this.addBlock(nodes.listing_element, _after);
+                            insertNode(schema.nodes.equation_element);
                             popper.destroy();
                         }));
                     }
                 }));
             }
-            if (this.showMenuSection(insertableTypes, [
-                'blockquoteElement',
-                'pullquoteElement',
-            ])) {
+            if (hasAny(types, 'blockquote_element')) {
                 menu.appendChild(this.createMenuSection((section) => {
-                    if (insertableTypes.blockquoteElement) {
+                    if (types.has('blockquote_element')) {
                         section.appendChild(this.createMenuItem('Block Quote', () => {
-                            this.addBlock(nodes.blockquote_element, _after);
-                            popper.destroy();
-                        }));
-                    }
-                    if (insertableTypes.pullquoteElement) {
-                        section.appendChild(this.createMenuItem('Pull Quote', () => {
-                            this.addBlock(nodes.pullquote_element, _after);
+                            insertNode(schema.nodes.blockquote_element);
                             popper.destroy();
                         }));
                     }
@@ -156,19 +133,18 @@ export class ContextMenu {
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
-            const nodeType = this.node.type;
-            const nodes = schema.nodes;
-            if (listTypes.includes(nodeType)) {
+            const type = this.node.type;
+            if (listTypes.includes(type)) {
                 menu.appendChild(this.createMenuSection((section) => {
-                    if (nodeType === nodes.bullet_list) {
+                    if (type === schema.nodes.bullet_list) {
                         section.appendChild(this.createMenuItem('Change to Numbered List', () => {
-                            this.changeNodeType(nodes.ordered_list);
+                            this.changeNodeType(schema.nodes.ordered_list);
                             popper.destroy();
                         }));
                     }
-                    if (nodeType === nodes.ordered_list) {
+                    if (type === schema.nodes.ordered_list) {
                         section.appendChild(this.createMenuItem('Change to Bullet List', () => {
-                            this.changeNodeType(nodes.bullet_list);
+                            this.changeNodeType(schema.nodes.bullet_list);
                             popper.destroy();
                         }));
                     }
@@ -184,34 +160,12 @@ export class ContextMenu {
                     }));
                 }));
             }
-            const suppressOptions = this.buildSuppressOptions();
-            if (suppressOptions.length) {
-                menu.appendChild(this.createMenuSection((section) => {
-                    for (const option of suppressOptions) {
-                        const label = option.attrs[option.attr]
-                            ? `Show ${option.label}`
-                            : `Hide ${option.label}`;
-                        section.appendChild(this.createMenuItem(label, () => {
-                            this.toggleNodeAttr(option);
-                            popper.destroy();
-                        }));
-                    }
-                }));
-            }
-            if (nodeType === nodes.paragraph && $pos.parent.type === nodes.section) {
-                menu.appendChild(this.createMenuSection((section) => {
-                    section.appendChild(this.createMenuItem(`Split to New ${sectionLevel($pos.depth)}`, () => {
-                        this.splitSection();
-                        popper.destroy();
-                    }));
-                }));
-            }
-            if (!readonlyTypes.includes(nodeType) &&
+            if (!readonlyTypes.includes(type) &&
                 !readonlyTypes.includes($pos.parent.type)) {
                 menu.appendChild(this.createMenuSection((section) => {
-                    const nodeName = nodeNames.get(nodeType) || '';
+                    const nodeName = nodeNames.get(type) || '';
                     section.appendChild(this.createMenuItem(`Delete ${nodeName}`, () => {
-                        this.deleteNode(nodeType);
+                        this.deleteNode(type);
                         popper.destroy();
                     }));
                 }));
@@ -223,22 +177,6 @@ export class ContextMenu {
             });
             this.addPopperEventListeners();
         };
-        this.addBlock = (nodeType, after, position) => {
-            const { state, dispatch } = this.view;
-            if (position === undefined) {
-                position = after ? this.getPos() + this.node.nodeSize : this.getPos();
-            }
-            createBlock(nodeType, position, state, dispatch);
-        };
-        this.canAddBlock = (nodeType, after, position) => {
-            const { state: { doc }, } = this.view;
-            if (position === undefined) {
-                position = after ? this.getPos() + this.node.nodeSize : this.getPos();
-            }
-            const $position = doc.resolve(position);
-            const index = $position.index();
-            return $position.parent.canReplaceWith(index, index, nodeType);
-        };
         this.createMenuItem = (contents, handler) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
@@ -256,22 +194,37 @@ export class ContextMenu {
             return section;
         };
         this.insertableTypes = (after, insertPos, endPos) => {
-            const { nodes } = this.view.state.schema;
-            return {
-                section: this.canAddBlock(nodes.section, after, insertPos),
-                subsection: this.canAddBlock(nodes.section, after, endPos),
-                paragraphElement: this.canAddBlock(nodes.paragraph, after),
-                orderedList: this.canAddBlock(nodes.ordered_list, after),
-                bulletList: this.canAddBlock(nodes.bullet_list, after),
-                figureElement: this.canAddBlock(nodes.figure_element, after),
-                tableElement: this.canAddBlock(nodes.table_element, after),
-                equationElement: this.canAddBlock(nodes.equation_element, after),
-                listingElement: this.canAddBlock(nodes.listing_element, after),
-                blockquoteElement: this.canAddBlock(nodes.blockquote_element, after),
-                pullquoteElement: this.canAddBlock(nodes.pullquote_element, after),
+            const { nodes } = schema;
+            const insertable = new Set();
+            const doc = this.view.state.doc;
+            const getPos = (pos) => {
+                if (pos === undefined) {
+                    pos = after ? this.getPos() + this.node.nodeSize : this.getPos();
+                }
+                return pos;
+            };
+            const canInsertAt = (type, pos) => {
+                const $pos = doc.resolve(getPos(pos));
+                const index = $pos.index();
+                return $pos.parent.canReplaceWith(index, index, type);
+            };
+            const checkNode = (node, pos) => {
+                canInsertAt(nodes[node], pos) && insertable.add(node);
             };
+            if (canInsertAt(nodes.section, endPos)) {
+                insertable.add('subsection');
+            }
+            checkNode('section', insertPos);
+            checkNode('paragraph');
+            checkNode('ordered_list');
+            checkNode('bullet_list');
+            checkNode('figure_element');
+            checkNode('table_element');
+            checkNode('equation_element');
+            checkNode('blockquote_element');
+            checkNode('pullquote_element');
+            return insertable;
         };
-        this.showMenuSection = (insertableTypes, types) => types.some((type) => insertableTypes[type]);
         this.changeNodeType = (nodeType) => {
             this.view.dispatch(this.view.state.tr.setNodeMarkup(this.getPos(), nodeType, {
                 id: this.node.attrs.id,
@@ -300,41 +253,6 @@ export class ContextMenu {
             }
         };
         this.resolvePos = () => this.view.state.doc.resolve(this.getPos());
-        this.splitSection = () => {
-            const { schema, tr } = this.view.state;
-            const from = this.getPos();
-            const to = from + this.node.nodeSize;
-            const slice = new Slice(Fragment.from([
-                schema.nodes.section.create(),
-                schema.nodes.section.create({}, [
-                    schema.nodes.section_title.create(),
-                    this.node,
-                ]),
-            ]), 1, 1);
-            this.view.dispatch(tr.replaceRange(from, to, slice));
-        };
-        this.toggleNodeAttr = (option) => {
-            const { getPos, attr, attrs } = option;
-            this.view.dispatch(this.view.state.tr.setNodeMarkup(getPos(), undefined, Object.assign(Object.assign({}, attrs), { [attr]: !attrs[attr] })));
-        };
-        this.buildSuppressOptions = () => {
-            const items = [];
-            let attrs = this.node.attrs;
-            if (this.node.attrs.suppressTitle === undefined) {
-                attrs = Object.assign(this.node.attrs, { suppressTitle: false });
-            }
-            for (const [attr, label] of this.suppressibleAttrs.entries()) {
-                if (attr in attrs) {
-                    items.push({
-                        attr,
-                        attrs,
-                        label,
-                        getPos: this.getPos,
-                    });
-                }
-            }
-            return items;
-        };
         this.addPopperEventListeners = () => {
             const mouseListener = () => {
                 window.requestAnimationFrame(() => {
@@ -352,7 +270,7 @@ export class ContextMenu {
             window.addEventListener('keydown', keyListener);
         };
         this.trimTitle = (title, max) => {
-            return title.length > max ? title.substr(0, max) + '…' : title;
+            return title.length > max ? title.substring(0, max) + '…' : title;
         };
         this.node = node;
         this.view = view;