@manuscripts/body-editor 2.7.28 → 2.7.30-LEAN-4096.0

package/dist/cjs/views/figure_editable.js

@@ -27,16 +27,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FigureEditableView = void 0;
+exports.FigureEditableView = exports.figurePositions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
 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);
@@ -84,11 +92,75 @@ class FigureEditableView extends figure_1.FigureView {
             element.classList.add('figure', 'placeholder');
             const instructions = document.createElement('div');
             instructions.classList.add('instructions');
-            instructions.textContent = 'Click to select an image file';
-            instructions.style.pointerEvents = 'none';
+            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>
+    `;
             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;
@@ -97,6 +169,7 @@ 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);
@@ -115,20 +188,30 @@ class FigureEditableView extends figure_1.FigureView {
                     this.props.fileManagement.download(file);
                 };
             }
-            handleReplace = (file) => {
-                this.setSrc(file.id);
-            };
             handleDetach = () => {
                 this.setSrc('');
             };
         }
+        if (can.replaceFile) {
+            handleReplace = (file) => {
+                this.setSrc(file.id);
+            };
+        }
         if (can.uploadFile) {
             const upload = (file) => __awaiter(this, void 0, void 0, function* () {
                 const result = yield this.props.fileManagement.upload(file);
                 this.setSrc(result.id);
             });
             handleUpload = (0, figure_uploader_1.figureUploader)(upload);
-            img.addEventListener('click', handleUpload);
+            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('mouseenter', () => {
                 img.classList.toggle('over', true);
             });
@@ -176,6 +259,7 @@ 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;

package/dist/cjs/views/figure_element.js

@@ -14,28 +14,13 @@
  * 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);
@@ -50,70 +35,6 @@ 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)) {
@@ -106,7 +106,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/components/affiliations/AffiliationItem.js

@@ -63,10 +63,10 @@ export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, sh
             block: 'nearest',
         });
     }
-    return (React.createElement(AffiliationContainer, { onClick: onClick, className: isSelected ? 'active' : '', ref: ref },
+    return (React.createElement(AffiliationContainer, { "data-cy": "affiliation-item", onClick: onClick, className: isSelected ? 'active' : '', ref: ref },
         React.createElement(AffiliationIcon, { opacity: showSuccessIcon ? 0.05 : 1, style: { minWidth: 24, minHeight: 24 } }),
         React.createElement(AffiliationBox, null,
-            React.createElement(AffiliationName, null, affiliation.institution),
+            React.createElement(AffiliationName, { "data-cy": "affiliation-name" }, affiliation.institution),
             React.createElement(AffiliationDetails, null,
                 affiliation.city && (React.createElement(React.Fragment, null,
                     affiliation.city,

package/dist/es/components/affiliations/AffiliationsModal.js

@@ -355,7 +355,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
         }
     };
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
-        React.createElement(ModalContainer, null,
+        React.createElement(ModalContainer, { "data-cy": "affiliations-modal" },
             React.createElement(ModalHeader, null,
                 React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
             React.createElement(StyledModalBody, null,
@@ -378,9 +378,9 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                             React.createElement(AffiliateButton, { onClick: () => setShowAuthorDrawer(true), "data-cy": "affiliate-authors-button" },
                                 React.createElement(AddUserIcon, { width: 16, height: 16 }),
                                 "Affiliate Authors")),
-                        React.createElement(SelectedItemsBox, { items: selectedAuthors, onRemove: (id) => {
+                        React.createElement(SelectedItemsBox, { "data-cy": "affiliation-authors", items: selectedAuthors, onRemove: (id) => {
                                 setSelectedIds((prev) => prev.filter((authorId) => authorId !== id));
                             }, placeholder: "No authors assigned" })),
-                    showAuthorDrawer && (React.createElement(Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: 'Affiliation Details', message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
+                    showAuthorDrawer && (React.createElement(Drawer, { items: authorItems, selectedIds: selectedIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
             React.createElement(FormFooter, { onCancel: handleClose }))));
 };

package/dist/es/components/authors/AuthorsModal.js

@@ -432,7 +432,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
     };
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
-        React.createElement(ModalContainer, null,
+        React.createElement(ModalContainer, { "data-cy": "authors-modal" },
             React.createElement(ModalHeader, null,
                 React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
             React.createElement(StyledModalBody, null,
@@ -459,7 +459,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
                             React.createElement(AffiliateButton, { onClick: () => setShowAffiliationDrawer(true), "data-cy": "affiliate-authors-button" },
                                 React.createElement(AddInstitutionIcon, { width: 16, height: 16 }),
                                 "Assign Institutions")),
-                        React.createElement(SelectedItemsBox, { items: selectedAffiliations, onRemove: handleRemoveAffiliation, placeholder: "No institutions assigned" })),
-                    showAffiliationDrawer && (React.createElement(Drawer, { items: affiliationItems, selectedIds: selectedAffiliationIds, title: "Authors", onSelect: handleAffiliationSelect, onBack: () => setShowAffiliationDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "author", title: 'Author Details', message: 'Select an author from the list to display their details here.', placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
+                        React.createElement(SelectedItemsBox, { "data-cy": "author-affiliations", items: selectedAffiliations, onRemove: handleRemoveAffiliation, placeholder: "No institutions assigned" })),
+                    showAffiliationDrawer && (React.createElement(Drawer, { items: affiliationItems, selectedIds: selectedAffiliationIds, title: "Authors", onSelect: handleAffiliationSelect, onBack: () => setShowAffiliationDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
             React.createElement(FormFooter, { onCancel: handleClose }))));
 };

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

@@ -1,26 +1,6 @@
-import { AddIcon, AttachIcon, DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, isImageFile, RoundIconButton, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
+import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, isImageFile, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
-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));
@@ -28,26 +8,26 @@ export const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onRe
     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(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
-            React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: 'Replace', moveLeft: true, list: React.createElement(React.Fragment, null,
+            React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, 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 },
-            buttonText,
-            " ",
+            React.createElement("div", null, buttonText),
             React.createElement(TriangleCollapsedIcon, null)),
         isOpen && (React.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, onClick: (e) => {
                 toggleOpen();
@@ -67,9 +47,6 @@ 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;
@@ -111,30 +88,15 @@ 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,6 +29,7 @@ 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';
@@ -70,6 +71,7 @@ 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,3 +39,4 @@ 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,11 +13,16 @@
  * 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, } from '../commands';
+import { figurePositions } from '../views/figure_editable';
 import { PopperManager } from './popper';
-import { isChildOfNodeTypes, isSelectionInNode } from './utils';
+import { getMatchingChild, isChildOfNodeTypes, isSelectionInNode, } from './utils';
+import { updateNodeAttrs } from './view';
 const popper = new PopperManager();
 const readonlyTypes = [
     schema.nodes.keywords,
@@ -38,6 +43,7 @@ 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, actions = {}) {
         this.showAddMenu = (target, after) => {
@@ -146,6 +152,36 @@ 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;
@@ -210,22 +246,48 @@ export 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 = 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) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
-            item.textContent = contents;
+            selected && item.classList.add('selected');
+            if (Icon) {
+                item.innerHTML = renderToStaticMarkup(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 } = schema;
             const insertable = new Set();
@@ -287,7 +349,8 @@ export class ContextMenu {
         this.addPopperEventListeners = () => {
             const mouseListener = (event) => {
                 const target = event.target;
-                if (target.classList.contains(contextMenuBtnClass)) {
+                if (target.classList.contains(contextMenuBtnClass) ||
+                    target.classList.contains(contextSubmenuBtnClass)) {
                     return;
                 }
                 window.requestAnimationFrame(() => {
@@ -319,6 +382,10 @@ 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;