@manuscripts/body-editor 2.7.32-LEAN-4096.0 → 2.7.32

package/dist/cjs/views/figure_element.js

@@ -14,13 +14,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigureElementView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const FigureDropdown_1 = require("../components/views/FigureDropdown");
+const files_1 = require("../lib/files");
+const utils_1 = require("../lib/utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const figure_uploader_1 = require("./figure_uploader");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class FigureElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -35,6 +50,70 @@ class FigureElementView extends block_view_1.default {
             this.container.appendChild(this.contentDOM);
         };
     }
+    updateContents() {
+        var _a;
+        super.updateContents();
+        if (!this.contentDOM) {
+            throw new Error('No contentDOM');
+        }
+        const can = this.props.getCapabilities();
+        let handleUpload = () => {
+        };
+        const hasUploadedImage = !!(0, utils_1.getMatchingChild)(this.node, (node) => node.type === transform_1.schema.nodes.figure && node.attrs.src);
+        const handleAdd = (file) => __awaiter(this, void 0, void 0, function* () {
+            const { state: { tr, schema, selection }, dispatch, } = this.view;
+            const src = file.id;
+            const figure = (0, utils_1.getMatchingChild)(this.node, (node) => node.type === schema.nodes.figure);
+            if (figure === null || figure === void 0 ? void 0 : figure.attrs.src) {
+                const figure = schema.nodes.figure.createAndFill({
+                    src,
+                }, []);
+                let position = 0;
+                this.node.forEach((node, pos) => {
+                    if (node.type === schema.nodes.figure) {
+                        position = pos + node.nodeSize;
+                    }
+                });
+                dispatch(tr.insert(this.getPos() + position + 1, figure));
+            }
+            else if (figure) {
+                tr.setNodeMarkup(this.getPos() + 1, undefined, Object.assign(Object.assign({}, figure.attrs), { src })).setSelection(selection.map(tr.doc, tr.mapping));
+                dispatch(tr);
+            }
+            this.deleteSupplementNode(file);
+        });
+        if (can.uploadFile) {
+            const upload = (file) => __awaiter(this, void 0, void 0, function* () {
+                const result = yield this.props.fileManagement.upload(file);
+                yield handleAdd(result);
+            });
+            handleUpload = (0, figure_uploader_1.figureUploader)(upload);
+        }
+        if (this.props.dispatch && this.props.theme) {
+            const files = this.props.getFiles();
+            const doc = this.view.state.doc;
+            const componentProps = {
+                can: can,
+                files: (0, files_1.groupFiles)(doc, files),
+                onUpload: handleUpload,
+                onAdd: handleAdd,
+                hasUploadedImage: hasUploadedImage,
+            };
+            (_a = this.reactTools) === null || _a === void 0 ? void 0 : _a.remove();
+            this.reactTools = (0, ReactSubView_1.default)(this.props, FigureDropdown_1.FigureElementOptions, componentProps, this.node, this.getPos, this.view);
+            this.dom.insertBefore(this.reactTools, this.dom.firstChild);
+        }
+    }
+    deleteSupplementNode(file) {
+        const tr = this.view.state.tr;
+        this.view.state.doc.descendants((node, pos) => {
+            if (node.type === transform_1.schema.nodes.supplement &&
+                node.attrs.href === file.id) {
+                tr.delete(pos, pos + node.nodeSize);
+            }
+        });
+        this.view.dispatch(tr);
+    }
 }
 exports.FigureElementView = FigureElementView;
 exports.default = (0, creators_1.createNodeView)(FigureElementView);

package/dist/cjs/views/inline_footnote.js

@@ -58,7 +58,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
                     },
                 ],
             };
-            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.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 = () => {
             if ((0, track_changes_utils_1.isDeleted)(this.node)) {
@@ -94,10 +94,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
             if (!fn) {
                 return [];
             }
-            const rids = this.node.attrs.rids;
-            const footnotes = fn.footnotes
-                .map((n) => n[0])
-                .filter((n) => fn.unusedFootnoteIDs.has(n.attrs.id) || rids.includes(n.attrs.id));
+            const footnotes = fn.footnotes.map((n) => n[0]);
             const props = {
                 footnotes,
                 inlineFootnote: this.node,
@@ -106,7 +103,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
                 onAdd: this.handleAdd,
                 onInsert: this.handleInsert,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, FootnotesSelector_1.FootnotesSelector, props, this.node, this.getPos, this.view, ['footnote-editor']);
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, FootnotesSelector_1.FootnotesSelector, props, this.node, this.getPos, this.view, 'footnote-editor');
             this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.initialise = () => {

package/dist/cjs/views/keyword.js

@@ -58,7 +58,7 @@ class KeywordView extends base_node_view_1.BaseNodeView {
                 keyword: keyword.textContent,
                 handleDelete: handleDelete,
             };
-            this.dialog = (0, ReactSubView_1.default)(this.props, DeleteKeywordDialog_1.DeleteKeywordDialog, componentProps, this.node, this.getPos, this.view, ['keywords-delete']);
+            this.dialog = (0, ReactSubView_1.default)(this.props, DeleteKeywordDialog_1.DeleteKeywordDialog, componentProps, this.node, this.getPos, this.view, 'keywords-delete');
             if (this.dialog) {
                 this.dom.appendChild(this.dialog);
             }

package/dist/cjs/views/keyword_group.js

@@ -37,7 +37,7 @@ class KeywordGroupView extends block_view_1.default {
             this.contentDOM.setAttribute('contenteditable', 'false');
             this.element.appendChild(this.contentDOM);
             if (this.props.getCapabilities().editArticle) {
-                this.addingTools = (0, ReactSubView_1.default)(this.props, AddKeywordInline_1.AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, ['keywords-editor']);
+                this.addingTools = (0, ReactSubView_1.default)(this.props, AddKeywordInline_1.AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-editor');
             }
             if (this.addingTools) {
                 this.element.appendChild(this.addingTools);

package/dist/cjs/views/link_editable.js

@@ -71,7 +71,7 @@ class LinkEditableView extends link_1.LinkView {
                 onRemove: this.handleRemove,
                 onSave: this.handleSave,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, LinkForm_1.LinkForm, componentProps, this.node, this.getPos, this.view, ['link-editor']);
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, LinkForm_1.LinkForm, componentProps, this.node, this.getPos, this.view, 'link-editor');
             this.props.popper.show(this.dom, this.popperContainer, 'bottom');
         };
         this.handleClick = (e) => {

package/dist/cjs/views/table_cell.js

@@ -79,7 +79,7 @@ class TableCellView extends block_view_1.default {
                         contextMenuButton.classList.toggle('open-context-menu');
                     },
                     onCancelColumnDialog: () => this.addOutClickListener(contextMenuButton),
-                }, this.view.state.selection.$from.node(), this.getPos, this.view, ['table-cell-context-menu']);
+                }, this.view.state.selection.$from.node(), this.getPos, this.view, 'table-cell-context-menu');
                 contextMenuButton.classList.toggle('open-context-menu');
                 this.props.popper.show(contextMenuButton, contextMenu, 'right', false);
                 this.addOutClickListener(contextMenuButton);

package/dist/es/commands.js

@@ -428,8 +428,8 @@ export const insertInlineFootnote = (state, dispatch) => {
     const tr = state.tr;
     const container = findFootnotesContainerNode(state.doc, pos);
     const fn = getFootnotesElementState(state, container.node.attrs.id);
-    const hasUnusedFootnotes = fn && fn.unusedFootnoteIDs.size > 0;
-    const footnote = !hasUnusedFootnotes && createFootnote();
+    const hasFootnotes = fn && fn.footnotes.filter((fn) => !isDeleted(fn[0])).length > 0;
+    const footnote = !hasFootnotes && createFootnote();
     const node = schema.nodes.inline_footnote.create({
         rids: footnote ? [footnote.attrs.id] : [],
     });

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

@@ -1,39 +1,53 @@
-import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, isImageFile, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
+import { AddIcon, AttachIcon, DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, isImageFile, RoundIconButton, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
-export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
+export const FigureElementOptions = ({ can, files, onAdd, onUpload, hasUploadedImage, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     const supplements = files.supplements
         .map((s) => s.file)
         .filter((f) => isImageFile(f.name));
+    const others = files.others.filter((f) => isImageFile(f.name));
+    return (React.createElement(FilesDropdownWrapper, { onClick: toggleOpen, ref: wrapperRef },
+        React.createElement(FilesButton, { disabled: hasUploadedImage },
+            React.createElement(AttachIcon, null)),
+        isOpen && (React.createElement(DropdownList, { direction: 'left', width: 208, height: 187, onClick: toggleOpen, top: 7 },
+            React.createElement(NestedDropdown, { disabled: !can.replaceFile || supplements.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Supplements', list: React.createElement(React.Fragment, null, supplements.map((file) => (React.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
+                    getFileIcon(file.name),
+                    React.createElement(ListItemText, null, file.name))))) }),
+            React.createElement(NestedDropdown, { disabled: !can.replaceFile || others.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Other files', list: React.createElement(React.Fragment, null, others.map((file) => (React.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
+                    getFileIcon(file.name),
+                    React.createElement(ListItemText, null, file.name))))) }),
+            React.createElement(UploadButton, { onClick: onUpload, disabled: !can.uploadFile },
+                React.createElement(AddIcon, null),
+                " New file...")))));
+};
+export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
+    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     const otherFiles = files.others.filter((f) => 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.createElement(DropdownWrapper, { ref: wrapperRef },
         React.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
             React.createElement(DotsIcon, null)),
         isOpen && (React.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
-            React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: React.createElement(React.Fragment, null,
-                    supplements.map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
-                        getFileIcon(file.name),
-                        React.createElement(ListItemText, null, file.name)))),
+            React.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
+            React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: 'Replace', moveLeft: true, list: React.createElement(React.Fragment, null,
                     otherFiles.map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
                     React.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
                         React.createElement(UploadIcon, null),
                         " Upload new...")) }),
-            React.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
             React.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")))));
 };
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
         React.createElement(NestedListButton, { onClick: toggleOpen, disabled: disabled },
-            React.createElement("div", null, buttonText),
+            buttonText,
+            " ",
             React.createElement(TriangleCollapsedIcon, null)),
         isOpen && (React.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, onClick: (e) => {
                 toggleOpen();
@@ -53,6 +67,9 @@ const OptionsButton = styled(IconButton) `
   margin: ${(props) => props.theme.grid.unit}px;
   visibility: hidden;
   background: white;
+  position: absolute;
+  top: -4px;
+  right: 4%;
 
   &:hover {
     background: #f2fbfc !important;
@@ -94,15 +111,30 @@ const ListItemText = styled.div `
   text-overflow: ellipsis;
   text-align: start;
 `;
+const FilesButton = styled(RoundIconButton) `
+  path {
+    stroke: #6e6e6e;
+  }
+
+  &:active,
+  &:focus {
+    path {
+      stroke: #1a9bc7;
+    }
+  }
+`;
+const FilesDropdownWrapper = styled.div `
+  position: absolute;
+  top: 8px;
+  left: 70px;
+  z-index: 1;
+`;
 const NestedListButton = styled(ListItemButton) `
   width: 100%;
   &:active,
   &:focus {
     background: #f2fbfc;
   }
-  svg {
-    margin-right: 0;
-  }
 `;
 const NestedListDropdownList = styled(DropdownList) `
   top: 0;

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

@@ -29,7 +29,6 @@ import doi from '../plugins/doi';
 import editorProps from '../plugins/editor-props';
 import elements from '../plugins/elements';
 import footnotes from '../plugins/footnotes';
-import inspector_tabs from '../plugins/inspector-tabs';
 import objects from '../plugins/objects';
 import paragraphs from '../plugins/paragraphs';
 import persist from '../plugins/persist';
@@ -71,7 +70,6 @@ export default (props) => {
         doi(),
         section_category(props),
         cross_references(),
-        inspector_tabs(),
     ];
     if (props.collabProvider) {
         allPlugins.push(collab({ version: props.collabProvider.currentVersion }));

package/dist/es/index.js

@@ -39,4 +39,3 @@ export { footnotesKey as footnotesPluginKey } from './plugins/footnotes';
 export { bibliographyKey as bibliographyPluginKey } from './plugins/bibliography';
 export { metadata } from './lib/references';
 export { authorLabel, affiliationLabel, } from './lib/authors';
-export * from './plugins/inspector-tabs';

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

@@ -13,16 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, TriangleCollapsedIcon, } from '@manuscripts/style-guide';
 import { getListType, isInBibliographySection, isSectionTitleNode, nodeNames, schema, } from '@manuscripts/transform';
 import { findChildrenByType } from 'prosemirror-utils';
-import { createElement } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { addNodeComment, createBlock, findPosBeforeFirstSubsection, insertGeneralTableFootnote, insertInlineTableFootnote, isCommentingAllowed, } from '../commands';
-import { figurePositions } from '../views/figure_editable';
 import { PopperManager } from './popper';
-import { getMatchingChild, isChildOfNodeTypes, isSelectionInNode, } from './utils';
-import { updateNodeAttrs } from './view';
+import { isChildOfNodeTypes, isSelectionInNode } from './utils';
 const popper = new PopperManager();
 const readonlyTypes = [
     schema.nodes.keywords,
@@ -43,7 +38,6 @@ const hasAny = (set, ...items) => {
     return items.some((i) => set.has(i));
 };
 export const contextMenuBtnClass = 'btn-context-menu';
-const contextSubmenuBtnClass = 'context-submenu-trigger';
 export class ContextMenu {
     constructor(node, view, getPos) {
         this.showAddMenu = (target, after) => {
@@ -152,36 +146,6 @@ export class ContextMenu {
             const $pos = this.resolvePos();
             const isBox = isBoxElementSectionTitle($pos, this.node);
             const type = isBox ? schema.nodes.box_element : this.node.type;
-            if (type === schema.nodes.figure_element ||
-                type === schema.nodes.image_element) {
-                const figure = getMatchingChild(this.node, (node) => node.type === schema.nodes.figure);
-                if (figure) {
-                    const attrType = figure.attrs.type;
-                    const submenuOptions = [
-                        {
-                            title: 'Left',
-                            action: () => updateNodeAttrs(this.view, schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.left })),
-                            Icon: ImageLeftIcon,
-                            selected: attrType === figurePositions.left,
-                        },
-                        {
-                            title: 'Default',
-                            action: () => updateNodeAttrs(this.view, schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.default })),
-                            Icon: ImageDefaultIcon,
-                            selected: !attrType,
-                        },
-                        {
-                            title: 'Right',
-                            action: () => updateNodeAttrs(this.view, schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.right })),
-                            Icon: ImageRightIcon,
-                            selected: attrType === figurePositions.right,
-                        },
-                    ];
-                    const submenuLabel = 'Position';
-                    const submenu = this.createSubmenu(submenuLabel, submenuOptions);
-                    menu.appendChild(submenu);
-                }
-            }
             if (type === schema.nodes.list) {
                 menu.appendChild(this.createMenuSection((section) => {
                     const attrs = this.node.attrs;
@@ -245,48 +209,22 @@ export class ContextMenu {
             popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
-        this.createSubmenuTrigger = (contents) => {
-            const item = document.createElement('div');
-            item.className = 'menu-item';
-            const textNode = document.createTextNode(contents);
-            item.innerHTML = renderToStaticMarkup(createElement(TriangleCollapsedIcon));
-            item.prepend(textNode);
-            item.classList.add(contextSubmenuBtnClass);
-            item.addEventListener('mousedown', this.toggleSubmenu);
-            return item;
-        };
-        this.createMenuItem = (contents, handler, Icon = null, selected = false) => {
+        this.createMenuItem = (contents, handler) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
-            selected && item.classList.add('selected');
-            if (Icon) {
-                item.innerHTML = renderToStaticMarkup(createElement(Icon));
-            }
-            const textNode = document.createTextNode(contents);
-            item.appendChild(textNode);
+            item.textContent = contents;
             item.addEventListener('mousedown', (event) => {
                 event.preventDefault();
                 handler(event);
             });
             return item;
         };
-        this.createMenuSection = (createMenuItems, isSubmenu = false) => {
+        this.createMenuSection = (createMenuItems) => {
             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 } = schema;
             const insertable = new Set();
@@ -348,8 +286,7 @@ export class ContextMenu {
         this.addPopperEventListeners = () => {
             const mouseListener = (event) => {
                 const target = event.target;
-                if (target.classList.contains(contextMenuBtnClass) ||
-                    target.classList.contains(contextSubmenuBtnClass)) {
+                if (target.classList.contains(contextMenuBtnClass)) {
                     return;
                 }
                 window.requestAnimationFrame(() => {
@@ -381,10 +318,6 @@ export 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/es/lib/view.js

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { schema, } from '@manuscripts/transform';
-import { NodeSelection } from 'prosemirror-state';
 import * as utils from 'prosemirror-utils';
 import { isHidden, sanitizeAttrsChange } from './track-changes-utils';
 const metaNodeTypes = [
@@ -45,8 +44,7 @@ export const updateNodeAttrs = (view, type, attrs) => {
         const copy = sanitizeAttrsChange(attrs, child.node.attrs);
         delete copy.dataTracked;
         const pos = child.pos;
-        const tr = view.state.tr;
-        tr.setNodeMarkup(pos, undefined, copy).setSelection(NodeSelection.create(tr.doc, pos));
+        const tr = view.state.tr.setNodeMarkup(pos, undefined, copy);
         if (metaNodeTypes.includes(type)) {
             tr.setMeta(updateMetaNode, true);
         }

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.7.32-LEAN-4096.0';
+export const VERSION = '2.7.32';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/ReactSubView.js

@@ -16,12 +16,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '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.length) {
-        container.classList.add(...classNames);
-        container.setAttribute('data-cy', classNames[0]);
+    if (classNames) {
+        container.classList.add(classNames);
+        container.setAttribute('data-cy', classNames);
     }
     container.setAttribute('contenteditable', 'false');
     const Wrapped = () => {

package/dist/es/views/affiliations.js

@@ -98,7 +98,7 @@ export class AffiliationsView extends BlockView {
                     action: () => this.handleEdit(),
                     icon: 'Edit',
                 });
-                this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
+                this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
                 return this.contextMenu;
             }
             return undefined;

package/dist/es/views/award.js

@@ -74,7 +74,7 @@ export class AwardView extends BlockView {
                     },
                 ],
             };
-            this.props.popper.show(this.contentDOM, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']), 'right-start', false);
+            this.props.popper.show(this.contentDOM, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
         };
         this.showAwardModal = (award) => {
             var _a, _b;
@@ -85,7 +85,7 @@ export class AwardView extends BlockView {
                 onSaveAward: this.handleSaveAward,
                 onCancelAward: this.handleCancelAward,
             };
-            this.popperContainer = ReactSubView(this.props, AwardModal, componentProps, this.node, this.getPos, this.view, ['award-editor']);
+            this.popperContainer = ReactSubView(this.props, AwardModal, componentProps, this.node, this.getPos, this.view, 'award-editor');
             this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.showDeleteAwardDialog = () => {
@@ -94,7 +94,7 @@ export class AwardView extends BlockView {
             const componentProps = {
                 handleDelete: this.handleDeleteAward,
             };
-            this.popperContainer = ReactSubView(this.props, DeleteAwardDialog, componentProps, this.node, this.getPos, this.view, ['award-editor']);
+            this.popperContainer = ReactSubView(this.props, 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/es/views/bibliography_element.js

@@ -119,7 +119,7 @@ export class BibliographyElementBlockView extends BlockView {
             onSave: this.handleSave,
             onDelete: this.handleDelete,
         };
-        this.editor = ReactSubView(this.props, ReferencesEditor, componentProps, this.node, this.getPos, this.view, ['references-editor']);
+        this.editor = ReactSubView(this.props, ReferencesEditor, componentProps, this.node, this.getPos, this.view, 'references-editor');
         this.props.popper.show(this.dom, this.editor, 'right');
     }
     handleEdit(citationID) {
@@ -145,7 +145,7 @@ export class BibliographyElementBlockView extends BlockView {
             action: () => handleComment(item, this.view),
             icon: 'AddComment',
         });
-        this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
+        this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
         this.props.popper.show(element, this.contextMenu, 'right-start');
     }
     updateContents() {

package/dist/es/views/citation_editable.js

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

package/dist/es/views/contributors.js

@@ -132,7 +132,7 @@ export class ContributorsView extends BlockView {
                     action: () => this.handleEdit(''),
                     icon: 'Edit',
                 });
-                this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
+                this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
                 return this.contextMenu;
             }
             return undefined;
@@ -196,7 +196,7 @@ export class ContributorsView extends BlockView {
                     },
                 ],
             };
-            this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu']);
+            this.contextMenu = ReactSubView(this.props, 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/es/views/cross_reference_editable.js

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

package/dist/es/views/embed.js

@@ -68,7 +68,7 @@ export class EmbedMediaView extends BlockView {
                     },
                 ],
             };
-            preview.appendChild(ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['embed-context-menu']));
+            preview.appendChild(ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'embed-context-menu'));
         };
     }
     updateContents() {