@manuscripts/body-editor 2.7.29 → 2.7.30-LEAN-4096.2

package/dist/cjs/components/views/FigureDropdown.js

@@ -3,50 +3,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FigureOptions = exports.FigureElementOptions = void 0;
+exports.FigureOptions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const FigureElementOptions = ({ can, files, onAdd, onUpload, hasUploadedImage, }) => {
+const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     const supplements = files.supplements
         .map((s) => s.file)
         .filter((f) => (0, style_guide_1.isImageFile)(f.name));
-    const others = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
-    return (react_1.default.createElement(FilesDropdownWrapper, { onClick: toggleOpen, ref: wrapperRef },
-        react_1.default.createElement(FilesButton, { disabled: hasUploadedImage },
-            react_1.default.createElement(style_guide_1.AttachIcon, null)),
-        isOpen && (react_1.default.createElement(style_guide_1.DropdownList, { direction: 'left', width: 208, height: 187, onClick: toggleOpen, top: 7 },
-            react_1.default.createElement(NestedDropdown, { disabled: !can.replaceFile || supplements.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Supplements', list: react_1.default.createElement(react_1.default.Fragment, null, supplements.map((file) => (react_1.default.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
-                    (0, style_guide_1.getFileIcon)(file.name),
-                    react_1.default.createElement(ListItemText, null, file.name))))) }),
-            react_1.default.createElement(NestedDropdown, { disabled: !can.replaceFile || others.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Other files', list: react_1.default.createElement(react_1.default.Fragment, null, others.map((file) => (react_1.default.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
-                    (0, style_guide_1.getFileIcon)(file.name),
-                    react_1.default.createElement(ListItemText, null, file.name))))) }),
-            react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !can.uploadFile },
-                react_1.default.createElement(style_guide_1.AddIcon, null),
-                " New file...")))));
-};
-exports.FigureElementOptions = FigureElementOptions;
-const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
-    const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     const otherFiles = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
     const showDownload = onDownload && can.downloadFiles;
     const showUpload = onUpload && can.uploadFile;
     const showDetach = onDetach && can.detachFile;
     const showReplace = onReplace && can.replaceFile;
+    const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
         react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
             react_1.default.createElement(style_guide_1.DotsIcon, null)),
         isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
-            react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
-            react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: 'Replace', moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
+                    supplements.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                        (0, style_guide_1.getFileIcon)(file.name),
+                        react_1.default.createElement(ListItemText, null, file.name)))),
                     otherFiles.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
                     react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
                         react_1.default.createElement(style_guide_1.UploadIcon, null),
                         " Upload new...")) }),
+            react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
             react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")))));
 };
 exports.FigureOptions = FigureOptions;
@@ -54,8 +40,7 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
         react_1.default.createElement(NestedListButton, { onClick: toggleOpen, disabled: disabled },
-            buttonText,
-            " ",
+            react_1.default.createElement("div", null, buttonText),
             react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
         isOpen && (react_1.default.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, onClick: (e) => {
                 toggleOpen();
@@ -75,9 +60,6 @@ const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton)
   margin: ${(props) => props.theme.grid.unit}px;
   visibility: hidden;
   background: white;
-  position: absolute;
-  top: -4px;
-  right: 4%;
 
   &:hover {
     background: #f2fbfc !important;
@@ -119,30 +101,15 @@ const ListItemText = styled_components_1.default.div `
   text-overflow: ellipsis;
   text-align: start;
 `;
-const FilesButton = (0, styled_components_1.default)(style_guide_1.RoundIconButton) `
-  path {
-    stroke: #6e6e6e;
-  }
-
-  &:active,
-  &:focus {
-    path {
-      stroke: #1a9bc7;
-    }
-  }
-`;
-const FilesDropdownWrapper = styled_components_1.default.div `
-  position: absolute;
-  top: 8px;
-  left: 70px;
-  z-index: 1;
-`;
 const NestedListButton = (0, styled_components_1.default)(ListItemButton) `
   width: 100%;
   &:active,
   &:focus {
     background: #f2fbfc;
   }
+  svg {
+    margin-right: 0;
+  }
 `;
 const NestedListDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
   top: 0;

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

@@ -34,6 +34,7 @@ const doi_1 = __importDefault(require("../plugins/doi"));
 const editor_props_1 = __importDefault(require("../plugins/editor-props"));
 const elements_1 = __importDefault(require("../plugins/elements"));
 const footnotes_1 = __importDefault(require("../plugins/footnotes"));
+const inspector_tabs_1 = __importDefault(require("../plugins/inspector-tabs"));
 const objects_1 = __importDefault(require("../plugins/objects"));
 const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
@@ -75,6 +76,7 @@ exports.default = (props) => {
         (0, doi_1.default)(),
         (0, section_category_1.default)(props),
         (0, cross_references_1.default)(),
+        (0, inspector_tabs_1.default)(),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

package/dist/cjs/index.js

@@ -68,3 +68,4 @@ Object.defineProperty(exports, "metadata", { enumerable: true, get: function ()
 var authors_1 = require("./lib/authors");
 Object.defineProperty(exports, "authorLabel", { enumerable: true, get: function () { return authors_1.authorLabel; } });
 Object.defineProperty(exports, "affiliationLabel", { enumerable: true, get: function () { return authors_1.affiliationLabel; } });
+__exportStar(require("./plugins/inspector-tabs"), exports);

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

@@ -16,11 +16,16 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = exports.contextMenuBtnClass = exports.sectionLevel = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
+const react_1 = require("react");
+const server_1 = require("react-dom/server");
 const commands_1 = require("../commands");
+const figure_editable_1 = require("../views/figure_editable");
 const popper_1 = require("./popper");
 const utils_1 = require("./utils");
+const view_1 = require("./view");
 const popper = new popper_1.PopperManager();
 const readonlyTypes = [
     transform_1.schema.nodes.keywords,
@@ -42,6 +47,7 @@ const hasAny = (set, ...items) => {
     return items.some((i) => set.has(i));
 };
 exports.contextMenuBtnClass = 'btn-context-menu';
+const contextSubmenuBtnClass = 'context-submenu-trigger';
 class ContextMenu {
     constructor(node, view, getPos, actions = {}) {
         this.showAddMenu = (target, after) => {
@@ -150,6 +156,36 @@ class ContextMenu {
             const $pos = this.resolvePos();
             const isBox = isBoxElementSectionTitle($pos, this.node);
             const type = isBox ? transform_1.schema.nodes.box_element : this.node.type;
+            if (type === transform_1.schema.nodes.figure_element ||
+                type === transform_1.schema.nodes.image_element) {
+                const figure = (0, utils_1.getMatchingChild)(this.node, (node) => node.type === transform_1.schema.nodes.figure);
+                if (figure) {
+                    const attrType = figure.attrs.type;
+                    const submenuOptions = [
+                        {
+                            title: 'Left',
+                            action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figure_editable_1.figurePositions.left })),
+                            Icon: style_guide_1.ImageLeftIcon,
+                            selected: attrType === figure_editable_1.figurePositions.left,
+                        },
+                        {
+                            title: 'Default',
+                            action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figure_editable_1.figurePositions.default })),
+                            Icon: style_guide_1.ImageDefaultIcon,
+                            selected: !attrType,
+                        },
+                        {
+                            title: 'Right',
+                            action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figure_editable_1.figurePositions.right })),
+                            Icon: style_guide_1.ImageRightIcon,
+                            selected: attrType === figure_editable_1.figurePositions.right,
+                        },
+                    ];
+                    const submenuLabel = 'Position';
+                    const submenu = this.createSubmenu(submenuLabel, submenuOptions);
+                    menu.appendChild(submenu);
+                }
+            }
             if (type === transform_1.schema.nodes.list) {
                 menu.appendChild(this.createMenuSection((section) => {
                     const attrs = this.node.attrs;
@@ -214,22 +250,48 @@ class ContextMenu {
             popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
-        this.createMenuItem = (contents, handler) => {
+        this.createSubmenuTrigger = (contents) => {
+            const item = document.createElement('div');
+            item.className = 'menu-item';
+            const textNode = document.createTextNode(contents);
+            item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.TriangleCollapsedIcon));
+            item.prepend(textNode);
+            item.classList.add(contextSubmenuBtnClass);
+            item.addEventListener('mousedown', this.toggleSubmenu);
+            return item;
+        };
+        this.createMenuItem = (contents, handler, Icon = null, selected = false) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
-            item.textContent = contents;
+            selected && item.classList.add('selected');
+            if (Icon) {
+                item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(Icon));
+            }
+            const textNode = document.createTextNode(contents);
+            item.appendChild(textNode);
             item.addEventListener('mousedown', (event) => {
                 event.preventDefault();
                 handler(event);
             });
             return item;
         };
-        this.createMenuSection = (createMenuItems) => {
+        this.createMenuSection = (createMenuItems, isSubmenu = false) => {
             const section = document.createElement('div');
             section.className = 'menu-section';
+            isSubmenu && section.classList.add('menu');
             createMenuItems(section);
             return section;
         };
+        this.createSubmenu = (submenuLabel, items) => {
+            const submenu = document.createElement('div');
+            submenu.classList.add('menu-section', 'context-submenu');
+            submenu.append(this.createSubmenuTrigger(submenuLabel), this.createMenuSection((section) => {
+                items.forEach(({ title, action, Icon, selected }) => {
+                    section.appendChild(this.createMenuItem(title, action, Icon, selected));
+                });
+            }, true));
+            return submenu;
+        };
         this.insertableTypes = (after, insertPos, endPos) => {
             const { nodes } = transform_1.schema;
             const insertable = new Set();
@@ -291,7 +353,8 @@ class ContextMenu {
         this.addPopperEventListeners = () => {
             const mouseListener = (event) => {
                 const target = event.target;
-                if (target.classList.contains(exports.contextMenuBtnClass)) {
+                if (target.classList.contains(exports.contextMenuBtnClass) ||
+                    target.classList.contains(contextSubmenuBtnClass)) {
                     return;
                 }
                 window.requestAnimationFrame(() => {
@@ -323,6 +386,10 @@ class ContextMenu {
             }
             return this.node;
         };
+        this.toggleSubmenu = (ev) => {
+            const submenu = ev.target.nextElementSibling;
+            submenu === null || submenu === void 0 ? void 0 : submenu.classList.toggle('show');
+        };
         this.node = node;
         this.view = view;
         this.getPos = getPos;

package/dist/cjs/lib/view.js

@@ -40,6 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteNode = exports.updateNodeAttrs = exports.findChildrenAttrsByType = exports.findChildrenByType = exports.findChildByType = exports.findChildByID = void 0;
 const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
 const utils = __importStar(require("prosemirror-utils"));
 const track_changes_utils_1 = require("./track-changes-utils");
 const metaNodeTypes = [
@@ -74,7 +75,8 @@ const updateNodeAttrs = (view, type, attrs) => {
         const copy = (0, track_changes_utils_1.sanitizeAttrsChange)(attrs, child.node.attrs);
         delete copy.dataTracked;
         const pos = child.pos;
-        const tr = view.state.tr.setNodeMarkup(pos, undefined, copy);
+        const tr = view.state.tr;
+        tr.setNodeMarkup(pos, undefined, copy).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
         if (metaNodeTypes.includes(type)) {
             tr.setMeta(updateMetaNode, true);
         }

package/dist/cjs/plugins/inspector-tabs.js

@@ -0,0 +1,84 @@
+"use strict";
+/*!
+ * © 2025 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.InspectorSecondaryTabsFiles = exports.InspectorPrimaryTabs = exports.inspectorTabsKey = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+exports.inspectorTabsKey = new prosemirror_state_1.PluginKey('inspector_tabs');
+var InspectorPrimaryTabs;
+(function (InspectorPrimaryTabs) {
+    InspectorPrimaryTabs[InspectorPrimaryTabs["Comments"] = 0] = "Comments";
+    InspectorPrimaryTabs[InspectorPrimaryTabs["History"] = 1] = "History";
+    InspectorPrimaryTabs[InspectorPrimaryTabs["Files"] = 2] = "Files";
+})(InspectorPrimaryTabs = exports.InspectorPrimaryTabs || (exports.InspectorPrimaryTabs = {}));
+var InspectorSecondaryTabsFiles;
+(function (InspectorSecondaryTabsFiles) {
+    InspectorSecondaryTabsFiles[InspectorSecondaryTabsFiles["SupplementsFiles"] = 1] = "SupplementsFiles";
+    InspectorSecondaryTabsFiles[InspectorSecondaryTabsFiles["OtherFiles"] = 2] = "OtherFiles";
+})(InspectorSecondaryTabsFiles = exports.InspectorSecondaryTabsFiles || (exports.InspectorSecondaryTabsFiles = {}));
+exports.default = () => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.inspectorTabsKey,
+        state: {
+            init: () => ({
+                inspectorOpenTabs: {
+                    primaryTab: null,
+                    secondaryTab: null,
+                },
+            }),
+            apply: (tr, value) => {
+                const meta = tr.getMeta(exports.inspectorTabsKey);
+                if (meta && meta.inspectorOpenTabs !== undefined) {
+                    return Object.assign(Object.assign({}, value), { inspectorOpenTabs: meta.inspectorOpenTabs });
+                }
+                return value;
+            },
+        },
+        props: {
+            handleClick: (view, pos, event) => {
+                const target = event.target;
+                const inspectorOpenTabs = {
+                    primaryTab: null,
+                    secondaryTab: null,
+                };
+                switch (target.dataset.action) {
+                    case 'open-other-files':
+                        event.stopPropagation();
+                        inspectorOpenTabs.primaryTab = InspectorPrimaryTabs.Files;
+                        inspectorOpenTabs.secondaryTab =
+                            InspectorSecondaryTabsFiles.OtherFiles;
+                        break;
+                    case 'open-supplement-files':
+                        event.stopPropagation();
+                        inspectorOpenTabs.primaryTab = InspectorPrimaryTabs.Files;
+                        inspectorOpenTabs.secondaryTab =
+                            InspectorSecondaryTabsFiles.SupplementsFiles;
+                        break;
+                    default:
+                        break;
+                }
+                if (inspectorOpenTabs.primaryTab != null ||
+                    inspectorOpenTabs.secondaryTab != null) {
+                    const tr = view.state.tr.setMeta(exports.inspectorTabsKey, {
+                        inspectorOpenTabs,
+                    });
+                    view.dispatch(tr);
+                }
+                return false;
+            },
+        },
+    });
+};

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.7.29';
+exports.VERSION = '2.7.30-LEAN-4096.2';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/ReactSubView.js

@@ -21,12 +21,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const client_1 = require("react-dom/client");
 const styled_components_1 = require("styled-components");
-function createSubView(props, Component, componentProps, node, getPos, view, classNames = '') {
+function createSubView(props, Component, componentProps, node, getPos, view, classNames = []) {
     const container = document.createElement('div');
     container.classList.add('tools-panel');
-    if (classNames) {
-        container.classList.add(classNames);
-        container.setAttribute('data-cy', classNames);
+    if (classNames.length) {
+        container.classList.add(...classNames);
+        container.setAttribute('data-cy', classNames[0]);
     }
     container.setAttribute('contenteditable', 'false');
     const Wrapped = () => {

package/dist/cjs/views/affiliations.js

@@ -104,7 +104,7 @@ class AffiliationsView extends block_view_1.default {
                     action: () => this.handleEdit(),
                     icon: 'Edit',
                 });
-                this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+                this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
                 return this.contextMenu;
             }
             return undefined;

package/dist/cjs/views/award.js

@@ -80,7 +80,7 @@ class AwardView extends block_view_1.default {
                     },
                 ],
             };
-            this.props.popper.show(this.contentDOM, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
+            this.props.popper.show(this.contentDOM, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']), 'right-start', false);
         };
         this.showAwardModal = (award) => {
             var _a, _b;
@@ -91,7 +91,7 @@ class AwardView extends block_view_1.default {
                 onSaveAward: this.handleSaveAward,
                 onCancelAward: this.handleCancelAward,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, AwardModal_1.AwardModal, componentProps, this.node, this.getPos, this.view, 'award-editor');
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, AwardModal_1.AwardModal, componentProps, this.node, this.getPos, this.view, ['award-editor']);
             this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.showDeleteAwardDialog = () => {
@@ -100,7 +100,7 @@ class AwardView extends block_view_1.default {
             const componentProps = {
                 handleDelete: this.handleDeleteAward,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, DeleteAwardDiaolog_1.DeleteAwardDialog, componentProps, this.node, this.getPos, this.view, 'award-editor');
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, DeleteAwardDiaolog_1.DeleteAwardDialog, componentProps, this.node, this.getPos, this.view, ['award-editor']);
             this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.handleSaveAward = (award) => {

package/dist/cjs/views/bibliography_element.js

@@ -125,7 +125,7 @@ class BibliographyElementBlockView extends block_view_1.default {
             onSave: this.handleSave,
             onDelete: this.handleDelete,
         };
-        this.editor = (0, ReactSubView_1.default)(this.props, ReferencesEditor_1.ReferencesEditor, componentProps, this.node, this.getPos, this.view, 'references-editor');
+        this.editor = (0, ReactSubView_1.default)(this.props, ReferencesEditor_1.ReferencesEditor, componentProps, this.node, this.getPos, this.view, ['references-editor']);
         this.props.popper.show(this.dom, this.editor, 'right');
     }
     handleEdit(citationID) {
@@ -151,7 +151,7 @@ class BibliographyElementBlockView extends block_view_1.default {
             action: () => (0, comments_1.handleComment)(item, this.view),
             icon: 'AddComment',
         });
-        this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+        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(element, this.contextMenu, 'right-start');
     }
     updateContents() {

package/dist/cjs/views/citation_editable.js

@@ -93,7 +93,7 @@ class CitationEditableView extends citation_1.CitationView {
             const componentProps = {
                 actions,
             };
-            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            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);
         };
         this.showPopper = () => {
@@ -121,14 +121,14 @@ class CitationEditableView extends citation_1.CitationView {
                     onCancel: this.handleCancel,
                     canEdit: can.editCitationsAndRefs,
                 };
-                this.editor = (0, ReactSubView_1.default)(this.props, CitationEditor_1.CitationEditor, componentProps, this.node, this.getPos, this.view, 'citation-editor');
+                this.editor = (0, ReactSubView_1.default)(this.props, CitationEditor_1.CitationEditor, componentProps, this.node, this.getPos, this.view, ['citation-editor']);
             }
             else {
                 const componentProps = {
                     rids,
                     items,
                 };
-                this.editor = (0, ReactSubView_1.default)(this.props, CitationViewer_1.CitationViewer, componentProps, this.node, this.getPos, this.view, 'citation-editor');
+                this.editor = (0, ReactSubView_1.default)(this.props, CitationViewer_1.CitationViewer, componentProps, this.node, this.getPos, this.view, ['citation-editor']);
             }
             this.props.popper.show(this.dom, this.editor, 'auto');
         };

package/dist/cjs/views/contributors.js

@@ -138,7 +138,7 @@ class ContributorsView extends block_view_1.default {
                     action: () => this.handleEdit(''),
                     icon: 'Edit',
                 });
-                this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+                this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
                 return this.contextMenu;
             }
             return undefined;
@@ -202,7 +202,7 @@ class ContributorsView extends block_view_1.default {
                     },
                 ],
             };
-            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            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(element, this.contextMenu, 'right-start');
         };
         this.handleEdit = (id, addNew) => {

package/dist/cjs/views/cross_reference_editable.js

@@ -52,7 +52,7 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
                 currentTargetId: rids[0],
                 currentCustomLabel: this.node.attrs.label,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view, 'cross-reference-editor');
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
             this.props.popper.show(this.dom, this.popperContainer, 'auto');
         };
         this.destroy = () => {

package/dist/cjs/views/embed.js

@@ -74,7 +74,7 @@ class EmbedMediaView extends block_view_1.default {
                     },
                 ],
             };
-            preview.appendChild((0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'embed-context-menu'));
+            preview.appendChild((0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['embed-context-menu']));
         };
     }
     updateContents() {