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

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

@@ -3,36 +3,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FigureOptions = void 0;
+exports.FigureOptions = exports.FigureElementOptions = 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 FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
+const FigureElementOptions = ({ can, files, onAdd, onUpload, hasUploadedImage, }) => {
     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(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)))),
+            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,
                     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;
@@ -40,7 +54,8 @@ 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 },
-            react_1.default.createElement("div", null, buttonText),
+            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();
@@ -60,6 +75,9 @@ 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;
@@ -101,15 +119,30 @@ 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,7 +34,6 @@ 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"));
@@ -76,7 +75,6 @@ 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,4 +68,3 @@ 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,16 +16,11 @@
  */
 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,
@@ -47,7 +42,6 @@ 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) => {
@@ -156,36 +150,6 @@ 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;
@@ -250,48 +214,22 @@ 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 = (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) => {
+        this.createMenuItem = (contents, handler) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
-            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.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 } = transform_1.schema;
             const insertable = new Set();
@@ -353,8 +291,7 @@ class ContextMenu {
         this.addPopperEventListeners = () => {
             const mouseListener = (event) => {
                 const target = event.target;
-                if (target.classList.contains(exports.contextMenuBtnClass) ||
-                    target.classList.contains(contextSubmenuBtnClass)) {
+                if (target.classList.contains(exports.contextMenuBtnClass)) {
                     return;
                 }
                 window.requestAnimationFrame(() => {
@@ -386,10 +323,6 @@ 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,7 +40,6 @@ 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 = [
@@ -75,8 +74,7 @@ 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;
-        tr.setNodeMarkup(pos, undefined, copy).setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+        const tr = view.state.tr.setNodeMarkup(pos, undefined, copy);
         if (metaNodeTypes.includes(type)) {
             tr.setMeta(updateMetaNode, true);
         }

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.30-LEAN-4096.2';
+exports.VERSION = '2.7.30';
 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.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/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() {
@@ -182,6 +182,7 @@ class BibliographyElementBlockView extends block_view_1.default {
             const comment = (0, comments_1.createCommentMarker)('div', id);
             element.prepend(comment);
             (0, track_changes_utils_1.addTrackChangesAttributes)(node.attrs, element);
+            (0, track_changes_utils_1.addTrackChangesClassNames)(node.attrs, element);
             wrapper.append(element);
         }
         const oldContent = this.container.querySelector('.contents');

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() {

package/dist/cjs/views/figure_editable.js

@@ -27,25 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FigureEditableView = exports.figurePositions = void 0;
+exports.FigureEditableView = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const transform_1 = require("@manuscripts/transform");
-const prosemirror_state_1 = require("prosemirror-state");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
 const FigureDropdown_1 = require("../components/views/FigureDropdown");
 const files_1 = require("../lib/files");
-const view_1 = require("../lib/view");
 const creators_1 = require("./creators");
 const figure_1 = require("./figure");
 const figure_uploader_1 = require("./figure_uploader");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-var figurePositions;
-(function (figurePositions) {
-    figurePositions["left"] = "half-left";
-    figurePositions["right"] = "half-right";
-    figurePositions["default"] = "";
-})(figurePositions = exports.figurePositions || (exports.figurePositions = {}));
 class FigureEditableView extends figure_1.FigureView {
     constructor() {
         super(...arguments);
@@ -54,10 +45,8 @@ class FigureEditableView extends figure_1.FigureView {
             this.updateContents();
         };
         this.setSrc = (src) => {
-            const { tr } = this.view.state;
-            const pos = this.getPos();
-            tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { src: src }));
-            tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+            const { selection, tr } = this.view.state;
+            tr.setNodeMarkup(this.getPos(), undefined, Object.assign(Object.assign({}, this.node.attrs), { src: src })).setSelection(selection.map(tr.doc, tr.mapping));
             this.view.dispatch(tr);
         };
         this.createUnsupportedFormat = (name) => {
@@ -95,75 +84,11 @@ class FigureEditableView extends figure_1.FigureView {
             element.classList.add('figure', 'placeholder');
             const instructions = document.createElement('div');
             instructions.classList.add('instructions');
-            instructions.innerHTML = `
-      <p>Drag or click here to upload image <br>
-      or drag items here from the file inspector tabs <br>
-      <a data-action='open-other-files'>'Other files'</a> | 
-      <a data-action='open-supplement-files'>'Supplements'</a></p>
-    `;
+            instructions.textContent = 'Click to select an image file';
+            instructions.style.pointerEvents = 'none';
             element.appendChild(instructions);
             return element;
         };
-        this.createPositionMenuWrapper = () => {
-            this.positionMenuWrapper = document.createElement('div');
-            this.positionMenuWrapper.classList.add('position-menu');
-            const positionMenuButton = document.createElement('div');
-            positionMenuButton.classList.add('position-menu-button');
-            let icon;
-            switch (this.figurePosition) {
-                case figurePositions.left:
-                    icon = style_guide_1.ImageLeftIcon;
-                    break;
-                case figurePositions.right:
-                    icon = style_guide_1.ImageRightIcon;
-                    break;
-                default:
-                    icon = style_guide_1.ImageDefaultIcon;
-                    break;
-            }
-            if (icon) {
-                positionMenuButton.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(icon));
-            }
-            positionMenuButton.addEventListener('click', this.showPositionMenu);
-            this.positionMenuWrapper.appendChild(positionMenuButton);
-            return this.positionMenuWrapper;
-        };
-        this.showPositionMenu = () => {
-            this.props.popper.destroy();
-            const figure = this.node;
-            const componentProps = {
-                actions: [
-                    {
-                        label: 'Left',
-                        action: () => {
-                            this.props.popper.destroy();
-                            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.left }));
-                        },
-                        icon: 'ImageLeft',
-                        selected: this.figurePosition === figurePositions.left,
-                    },
-                    {
-                        label: 'Default',
-                        action: () => {
-                            this.props.popper.destroy();
-                            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.default }));
-                        },
-                        icon: 'ImageDefault',
-                        selected: !this.figurePosition,
-                    },
-                    {
-                        label: 'Right',
-                        action: () => {
-                            this.props.popper.destroy();
-                            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, Object.assign(Object.assign({}, figure.attrs), { type: figurePositions.right }));
-                        },
-                        icon: 'ImageRight',
-                        selected: this.figurePosition === figurePositions.right,
-                    },
-                ],
-            };
-            this.props.popper.show(this.positionMenuWrapper, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
-        };
     }
     updateContents() {
         var _a;
@@ -172,7 +97,6 @@ class FigureEditableView extends figure_1.FigureView {
         const src = attrs.src;
         const files = this.props.getFiles();
         const file = src && files.filter((f) => f.id === src)[0];
-        this.figurePosition = attrs.type;
         this.container.innerHTML = '';
         const can = this.props.getCapabilities();
         const link = file && this.props.fileManagement.previewLink(file);
@@ -191,14 +115,12 @@ class FigureEditableView extends figure_1.FigureView {
                     this.props.fileManagement.download(file);
                 };
             }
-            handleDetach = () => {
-                this.setSrc('');
-            };
-        }
-        if (can.replaceFile) {
             handleReplace = (file) => {
                 this.setSrc(file.id);
             };
+            handleDetach = () => {
+                this.setSrc('');
+            };
         }
         if (can.uploadFile) {
             const upload = (file) => __awaiter(this, void 0, void 0, function* () {
@@ -206,15 +128,7 @@ class FigureEditableView extends figure_1.FigureView {
                 this.setSrc(result.id);
             });
             handleUpload = (0, figure_uploader_1.figureUploader)(upload);
-            const handlePlaceholderClick = (event) => {
-                const target = event.target;
-                if (target.dataset && target.dataset.action) {
-                    return;
-                }
-                const triggerUpload = (0, figure_uploader_1.figureUploader)(upload);
-                triggerUpload();
-            };
-            img.addEventListener('click', handlePlaceholderClick);
+            img.addEventListener('click', handleUpload);
             img.addEventListener('mouseenter', () => {
                 img.classList.toggle('over', true);
             });
@@ -262,7 +176,6 @@ class FigureEditableView extends figure_1.FigureView {
             this.reactTools = (0, ReactSubView_1.default)(this.props, FigureDropdown_1.FigureOptions, componentProps, this.node, this.getPos, this.view);
             this.dom.insertBefore(this.reactTools, this.dom.firstChild);
         }
-        this.container.appendChild(this.createPositionMenuWrapper());
     }
 }
 exports.FigureEditableView = FigureEditableView;