@manuscripts/body-editor 3.2.34 → 3.2.36

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.isCommentingAllowed = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.insertEmbed = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.isCommentingAllowed = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
 exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
@@ -195,15 +195,6 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
     }
 };
 exports.createBlock = createBlock;
-const insertEmbed = (state, dispatch, attrs) => {
-    const position = findBlockInsertPosition(state);
-    if (position === null) {
-        return false;
-    }
-    (0, exports.createBlock)(transform_1.schema.nodes.embed, position, state, dispatch, attrs);
-    return true;
-};
-exports.insertEmbed = insertEmbed;
 const insertInlineTableFootnote = (state, dispatch) => {
     const $pos = state.selection.$to;
     const table = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.table);
@@ -257,6 +248,24 @@ const insertFigure = (file, state, dispatch) => {
     return true;
 };
 exports.insertFigure = insertFigure;
+const insertEmbed = (state, dispatch, attrs) => {
+    const position = findBlockInsertPosition(state);
+    if (position === null) {
+        return false;
+    }
+    const embed = transform_1.schema.nodes.embed.create({
+        ...attrs,
+        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.embed),
+    }, [
+        createAndFillFigcaptionElement(),
+        transform_1.schema.nodes.alt_text.create(),
+        transform_1.schema.nodes.long_desc.create(),
+    ]);
+    const tr = state.tr.insert(position, embed);
+    dispatch && dispatch(tr);
+    return true;
+};
+exports.insertEmbed = insertEmbed;
 const insertTable = (config, state, dispatch) => {
     const pos = findBlockInsertPosition(state);
     if (!pos) {

package/dist/cjs/components/toolbar/InsertEmbedDialog.js

@@ -95,7 +95,7 @@ const InsertEmbedDialog = ({ state, dispatch, pos, }) => {
             setOEmbedHTML(html);
         });
     }, [url]);
-    const operation = pos ? 'Update' : 'Insert';
+    const operation = pos !== undefined && attrs?.href ? 'Update' : 'Insert';
     return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
         react_1.default.createElement(DialogContainer, { "data-cy": "media-editor" },
             react_1.default.createElement(HeaderContainer, null,

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

@@ -31,20 +31,35 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const files_1 = require("../../lib/files");
-function getSupplements(getFiles, getDoc, groupFiles) {
+const get_media_type_1 = require("../../lib/get-media-type");
+function getSupplements(getFiles, getDoc, groupFiles, isEmbed, currentFileHref) {
     return groupFiles(getDoc(), getFiles())
         .supplements.map((s) => s.file)
-        .filter((f) => (0, style_guide_1.isImageFile)(f.name));
+        .filter((f) => {
+        if (currentFileHref && f.id === currentFileHref) {
+            return false;
+        }
+        const mediaInfo = (0, get_media_type_1.getMediaTypeInfo)(f.name);
+        return isEmbed
+            ? mediaInfo.isVideo || mediaInfo.isAudio
+            : mediaInfo.isImage;
+    });
 }
-function getOtherFiles(getFiles, getDoc, groupFiles) {
-    return groupFiles(getDoc(), getFiles()).others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
+function getOtherFiles(getFiles, getDoc, groupFiles, isEmbed, currentFileHref) {
+    return groupFiles(getDoc(), getFiles()).others.filter((f) => {
+        if (currentFileHref && f.id === currentFileHref) {
+            return false;
+        }
+        const mediaInfo = (0, get_media_type_1.getMediaTypeInfo)(f.name);
+        return isEmbed ? mediaInfo.isVideo || mediaInfo.isAudio : mediaInfo.isImage;
+    });
 }
-const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onDelete, hasSiblings, container, }) => {
+const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onReplaceEmbed, onDelete, isEmbed, hasSiblings, container, currentFileHref, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     const showDownload = onDownload && can.downloadFiles;
     const showUpload = onUpload && can.uploadFile;
     const showDetach = onDetach && can.detachFile;
-    const showReplace = onReplace && can.replaceFile;
+    const showReplace = (onReplace && can.replaceFile) || (onReplaceEmbed && can.editArticle);
     const replaceBtnText = onDownload ? 'Replace' : 'Choose file';
     const showDelete = () => {
         if (!hasSiblings()) {
@@ -64,23 +79,25 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
             container.classList.remove(activeClass);
         }
     }, [isOpen, container.classList]);
+    const isEmbedMode = !!onReplaceEmbed;
     const groupFiles = (0, files_1.memoGroupFiles)();
     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,
-                    getSupplements(getFiles, getDoc, groupFiles).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
+            showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
+            showReplace && !isEmbedMode && (react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
+                    getSupplements(getFiles, getDoc, groupFiles, isEmbed, currentFileHref).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
-                    getOtherFiles(getFiles, getDoc, groupFiles).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed, currentFileHref).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 },
+                    showUpload && (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"),
+                        " Upload new..."))) })),
+            showDownload && (react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download")),
+            showDetach && (react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")),
             showDelete() && (react_1.default.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
 };
 exports.FigureOptions = FigureOptions;

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

@@ -61,7 +61,7 @@ exports.default = (props, dispatch) => {
         cross_reference: (0, cross_reference_editable_1.default)(props, dispatch),
         contributors: (0, contributors_1.default)(props, dispatch),
         affiliations: (0, affiliations_1.default)(props, dispatch),
-        embed: (0, embed_1.default)(props),
+        embed: (0, embed_1.default)(props, dispatch),
         equation: (0, equation_editable_1.default)(props),
         equation_element: (0, equation_element_editable_1.default)(props),
         figure: (0, figure_editable_1.default)(props, dispatch),

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __exportStar(require("./lib/comments"), exports);
 __exportStar(require("./lib/files"), exports);
 __exportStar(require("./lib/footnotes"), exports);
 __exportStar(require("./lib/doc"), exports);
+__exportStar(require("./lib/media"), exports);
 __exportStar(require("./plugins/comments"), exports);
 var selected_suggestion_1 = require("./plugins/selected-suggestion");
 Object.defineProperty(exports, "selectedSuggestionKey", { enumerable: true, get: function () { return selected_suggestion_1.selectedSuggestionKey; } });
@@ -57,6 +58,7 @@ __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./lib/track-changes-utils"), exports);
 __exportStar(require("./useEditor"), exports);
 __exportStar(require("./lib/math"), exports);
+__exportStar(require("./lib/get-media-type"), exports);
 var objects_1 = require("./plugins/objects");
 Object.defineProperty(exports, "objectsPluginKey", { enumerable: true, get: function () { return objects_1.objectsKey; } });
 var footnotes_1 = require("./plugins/footnotes");

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

@@ -22,10 +22,9 @@ 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 image_element_1 = require("../views/image_element");
 const popper_1 = require("./popper");
+const position_menu_1 = require("./position-menu");
 const utils_1 = require("./utils");
-const view_1 = require("./view");
 const popper = new popper_1.PopperManager();
 const readonlyTypes = [
     transform_1.schema.nodes.keywords,
@@ -159,35 +158,7 @@ class ContextMenu {
                 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, {
-                                ...figure.attrs,
-                                type: image_element_1.figurePositions.left,
-                            }),
-                            Icon: style_guide_1.ImageLeftIcon,
-                            selected: attrType === image_element_1.figurePositions.left,
-                        },
-                        {
-                            title: 'Default',
-                            action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: image_element_1.figurePositions.default,
-                            }),
-                            Icon: style_guide_1.ImageDefaultIcon,
-                            selected: !attrType,
-                        },
-                        {
-                            title: 'Right',
-                            action: () => (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.figure, {
-                                ...figure.attrs,
-                                type: image_element_1.figurePositions.right,
-                            }),
-                            Icon: style_guide_1.ImageRightIcon,
-                            selected: attrType === image_element_1.figurePositions.right,
-                        },
-                    ];
+                    const submenuOptions = (0, position_menu_1.createPositionOptions)(transform_1.schema.nodes.figure, figure, attrType, this.view);
                     const submenuLabel = 'Position';
                     const submenu = this.createSubmenu(submenuLabel, submenuOptions);
                     menu.appendChild(submenu);
@@ -314,12 +285,17 @@ class ContextMenu {
             item.addEventListener('mousedown', this.toggleSubmenu);
             return item;
         };
-        this.createMenuItem = (contents, handler, Icon = null, selected = false) => {
+        this.createMenuItem = (contents, handler, IconComponent = null, selected = false) => {
             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));
+            if (IconComponent) {
+                if (typeof IconComponent === 'string') {
+                    item.innerHTML = IconComponent;
+                }
+                else {
+                    item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(IconComponent));
+                }
             }
             const textNode = document.createTextNode(contents);
             item.appendChild(textNode);
@@ -340,8 +316,8 @@ class ContextMenu {
             const submenu = document.createElement('div');
             submenu.classList.add('context-submenu');
             submenu.append(this.createSubmenuTrigger(submenuLabel), this.createMenuSection((section) => {
-                items.forEach(({ title, action, Icon, selected }) => {
-                    section.appendChild(this.createMenuItem(title, action, Icon, selected));
+                items.forEach(({ title, action, IconComponent, selected }) => {
+                    section.appendChild(this.createMenuItem(title, action, IconComponent, selected));
                 });
             }, true));
             return submenu;

package/dist/cjs/lib/get-media-type.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMediaTypeInfo = void 0;
+const getMediaTypeInfo = (filenameOrFile) => {
+    const filename = typeof filenameOrFile === 'string'
+        ? filenameOrFile
+        : filenameOrFile?.name || '';
+    const extension = filename.toLowerCase().split('.').pop()?.trim() || '';
+    const videoExtensions = new Set([
+        'mp4',
+        'webm',
+        'avi',
+        'mov',
+        'mkv',
+        'flv',
+        'wmv',
+        'mpg',
+        'mpeg',
+    ]);
+    const audioExtensions = new Set([
+        'mp3',
+        'wav',
+        'aac',
+        'ogg',
+        'flac',
+        'm4a',
+        'wma',
+    ]);
+    const imageExtensions = new Set([
+        'jpg',
+        'jpeg',
+        'png',
+        'gif',
+        'bmp',
+        'svg',
+        'webp',
+        'tiff',
+        'tif',
+    ]);
+    let mimetype;
+    let mimeSubtype;
+    if (typeof filenameOrFile !== 'string' && filenameOrFile?.type) {
+        const [type, subtype] = filenameOrFile.type.split('/');
+        if (type && subtype && ['video', 'audio', 'image'].includes(type)) {
+            mimetype = type;
+            mimeSubtype = subtype;
+        }
+    }
+    if (!mimetype || !mimeSubtype) {
+        if (videoExtensions.has(extension)) {
+            mimetype = 'video';
+            mimeSubtype = extension === 'mov' ? 'quicktime' : extension;
+        }
+        else if (audioExtensions.has(extension)) {
+            mimetype = 'audio';
+            mimeSubtype = extension === 'm4a' ? 'mp4' : extension;
+        }
+        else if (imageExtensions.has(extension)) {
+            mimetype = 'image';
+            mimeSubtype = extension === 'jpg' ? 'jpeg' : extension;
+        }
+    }
+    const isVideo = mimetype === 'video' || videoExtensions.has(extension);
+    const isAudio = mimetype === 'audio' || audioExtensions.has(extension);
+    const isImage = mimetype === 'image' || imageExtensions.has(extension);
+    const isSupported = isVideo || isAudio || isImage;
+    return {
+        extension,
+        isVideo,
+        isAudio,
+        isImage,
+        isSupported,
+        mimetype,
+        mimeSubtype,
+    };
+};
+exports.getMediaTypeInfo = getMediaTypeInfo;

package/dist/cjs/lib/media.js

@@ -0,0 +1,207 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addInteractionHandlers = exports.createFileUploader = exports.createReactTools = exports.createFileHandlers = exports.createMediaPlaceholder = exports.createUnsupportedFormat = void 0;
+const transform_1 = require("@manuscripts/transform");
+const InsertEmbedDialog_1 = require("../components/toolbar/InsertEmbedDialog");
+const FigureDropdown_1 = require("../components/views/FigureDropdown");
+const icons_1 = require("../icons");
+const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
+const createUnsupportedFormat = (filename, canEdit) => {
+    const element = document.createElement('div');
+    element.classList.add('figure', 'placeholder');
+    const instructions = document.createElement('div');
+    instructions.classList.add('instructions');
+    const iconHtml = icons_1.fileCorruptedIcon;
+    instructions.innerHTML = `
+    <div>
+      <div class="unsupported-icon-wrapper">${iconHtml}</div>
+      <div>${filename}</div>
+      <div class="unsupported-format-label">
+        Unsupported file format
+      </div>
+      <div>
+        ${canEdit ? 'Click to add media' : 'No media here yet…'}
+      </div>
+    </div>
+  `;
+    element.appendChild(instructions);
+    return element;
+};
+exports.createUnsupportedFormat = createUnsupportedFormat;
+const createMediaPlaceholder = (mediaType = 'media', view, getPos) => {
+    const element = document.createElement('div');
+    element.classList.add('figure', 'placeholder');
+    const instructions = document.createElement('div');
+    instructions.classList.add('instructions');
+    const uploadText = mediaType === 'media' ? 'media' : 'image';
+    instructions.innerHTML = `
+    <div class="placeholder-content">
+      <p>Drag or click here to upload ${uploadText} <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>
+      ${mediaType === 'media' && view && getPos
+        ? "| <a data-action='add-external-link'>'External link'</a>"
+        : ''}
+      </p>
+    </div>
+  `;
+    if (mediaType === 'media' && view && getPos) {
+        const embedLink = instructions.querySelector("[data-action='add-external-link']");
+        if (embedLink) {
+            embedLink.addEventListener('click', (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                (0, InsertEmbedDialog_1.openEmbedDialog)(view, getPos());
+            });
+        }
+    }
+    element.appendChild(instructions);
+    return element;
+};
+exports.createMediaPlaceholder = createMediaPlaceholder;
+const createFileHandlers = (node, view, getPos, props, setHref) => {
+    const handlers = {};
+    const href = node.attrs.href;
+    const files = props.getFiles();
+    const file = href && files.find((f) => f.id === href);
+    const can = props.getCapabilities();
+    if (href && file) {
+        handlers.handleDownload = () => {
+            props.fileManagement.download(file);
+        };
+        handlers.handleDetach = () => {
+            setHref('');
+        };
+    }
+    if (can.replaceFile) {
+        handlers.handleReplace = (file, isSupplement = false) => {
+            setHref(file.id);
+            if (isSupplement) {
+                const tr = view.state.tr;
+                view.state.doc.descendants((node, pos) => {
+                    if (node.type === transform_1.schema.nodes.supplement) {
+                        const href = node.attrs.href;
+                        if (href === file.id) {
+                            tr.delete(pos, pos + node.nodeSize);
+                            view.dispatch(tr);
+                        }
+                    }
+                    if (node.type !== transform_1.schema.nodes.supplements &&
+                        node.type !== transform_1.schema.nodes.manuscript) {
+                        return false;
+                    }
+                });
+            }
+        };
+    }
+    return handlers;
+};
+exports.createFileHandlers = createFileHandlers;
+const createReactTools = (node, view, getPos, props, handlers, isEmbed, hasSiblings) => {
+    if (!props.dispatch || !props.theme) {
+        return null;
+    }
+    const can = props.getCapabilities();
+    const currentFileHref = node.attrs.href;
+    const componentProps = {
+        can,
+        getDoc: () => view.state.doc,
+        getFiles: props.getFiles,
+        onDownload: handlers.handleDownload,
+        onUpload: handlers.handleUpload,
+        onDetach: handlers.handleDetach,
+        onReplace: handlers.handleReplace,
+        onReplaceEmbed: handlers.handleReplaceEmbed,
+        onDelete: handlers.handleDelete,
+        isEmbed,
+        hasSiblings,
+        currentFileHref,
+    };
+    return (0, ReactSubView_1.default)(props, FigureDropdown_1.FigureOptions, componentProps, node, getPos, view);
+};
+exports.createReactTools = createReactTools;
+const createFileUploader = (handler, accept = '*/*') => {
+    const handleFileChange = async (e) => {
+        const target = e.target;
+        if (target && target.files && target.files.length) {
+            await handler(target.files[0]);
+        }
+    };
+    const input = document.createElement('input');
+    input.accept = accept;
+    input.type = 'file';
+    input.addEventListener('change', handleFileChange);
+    return () => input.click();
+};
+exports.createFileUploader = createFileUploader;
+const addInteractionHandlers = (element, uploadFn, accept = '*/*') => {
+    const handlePlaceholderClick = (event) => {
+        const target = event.target;
+        if (target.dataset && target.dataset.action) {
+            return;
+        }
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = accept;
+        input.addEventListener('change', async (e) => {
+            const files = e.target.files;
+            if (files && files.length > 0) {
+                await uploadFn(files[0]);
+            }
+        });
+        input.click();
+    };
+    element.addEventListener('click', handlePlaceholderClick);
+    element.addEventListener('mouseenter', () => {
+        element.classList.toggle('over', true);
+    });
+    element.addEventListener('mouseleave', () => {
+        element.classList.toggle('over', false);
+    });
+    element.addEventListener('dragenter', (event) => {
+        event.preventDefault();
+        element.classList.toggle('over', true);
+    });
+    element.addEventListener('dragleave', (event) => {
+        event.preventDefault();
+        element.classList.toggle('over', false);
+    });
+    element.addEventListener('dragover', (e) => {
+        const dragEvent = e;
+        if (dragEvent.dataTransfer && dragEvent.dataTransfer.items) {
+            for (const item of dragEvent.dataTransfer.items) {
+                if (item.kind === 'file') {
+                    e.preventDefault();
+                    dragEvent.dataTransfer.dropEffect = 'copy';
+                    break;
+                }
+            }
+        }
+    });
+    element.addEventListener('drop', async (e) => {
+        if (e.dataTransfer && e.dataTransfer.files.length) {
+            e.preventDefault();
+            await uploadFn(e.dataTransfer.files[0]);
+        }
+    });
+};
+exports.addInteractionHandlers = addInteractionHandlers;

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

@@ -0,0 +1,122 @@
+"use strict";
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPositionMenuWrapper = exports.setElementPositionAlignment = exports.showPositionMenu = exports.createPopperMenuPositionOptions = exports.createPositionOptions = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const icons_1 = require("../icons");
+const image_element_1 = require("../views/image_element");
+const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
+const view_1 = require("./view");
+const createPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
+    const createAction = (position) => () => {
+        onComplete?.();
+        (0, view_1.updateNodeAttrs)(view, nodeType, {
+            ...node.attrs,
+            type: position,
+        });
+    };
+    return [
+        {
+            title: 'Left',
+            action: createAction(image_element_1.figurePositions.left),
+            IconComponent: icons_1.imageLeftIcon,
+            iconName: 'ImageLeft',
+            selected: currentPosition === image_element_1.figurePositions.left,
+        },
+        {
+            title: 'Center',
+            action: createAction(image_element_1.figurePositions.default),
+            IconComponent: icons_1.imageDefaultIcon,
+            iconName: 'ImageDefault',
+            selected: !currentPosition,
+        },
+        {
+            title: 'Right',
+            action: createAction(image_element_1.figurePositions.right),
+            IconComponent: icons_1.imageRightIcon,
+            iconName: 'ImageRight',
+            selected: currentPosition === image_element_1.figurePositions.right,
+        },
+    ];
+};
+exports.createPositionOptions = createPositionOptions;
+const createPopperMenuPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
+    return (0, exports.createPositionOptions)(nodeType, node, currentPosition, view, onComplete).map((option) => ({
+        label: option.title,
+        action: option.action,
+        icon: option.iconName,
+        selected: option.selected,
+    }));
+};
+exports.createPopperMenuPositionOptions = createPopperMenuPositionOptions;
+const showPositionMenu = (nodeType, node, currentPosition, positionMenuWrapper, view, getPos, props) => {
+    props.popper.destroy();
+    const options = (0, exports.createPopperMenuPositionOptions)(nodeType, node, currentPosition, view, () => props.popper.destroy());
+    const componentProps = {
+        actions: options,
+    };
+    props.popper.show(positionMenuWrapper, (0, ReactSubView_1.default)(props, style_guide_1.ContextMenu, componentProps, node, getPos, view, [
+        'context-menu',
+        'position-menu',
+    ]), 'left', false);
+};
+exports.showPositionMenu = showPositionMenu;
+const setElementPositionAlignment = (element, position) => {
+    switch (position) {
+        case image_element_1.figurePositions.left:
+            element.setAttribute('data-alignment', 'left');
+            break;
+        case image_element_1.figurePositions.right:
+            element.setAttribute('data-alignment', 'right');
+            break;
+        default:
+            element.removeAttribute('data-alignment');
+            break;
+    }
+};
+exports.setElementPositionAlignment = setElementPositionAlignment;
+const createPositionMenuWrapper = (currentPosition, onClick, props) => {
+    const can = props.getCapabilities();
+    const positionMenuWrapper = document.createElement('div');
+    positionMenuWrapper.classList.add('position-menu');
+    const positionMenuButton = document.createElement('div');
+    positionMenuButton.classList.add('position-menu-button');
+    let icon;
+    switch (currentPosition) {
+        case image_element_1.figurePositions.left:
+            icon = icons_1.imageLeftIcon;
+            break;
+        case image_element_1.figurePositions.right:
+            icon = icons_1.imageRightIcon;
+            break;
+        default:
+            icon = icons_1.imageDefaultIcon;
+            break;
+    }
+    if (icon) {
+        positionMenuButton.innerHTML = icon;
+    }
+    if (can.editArticle) {
+        positionMenuButton.addEventListener('click', onClick);
+    }
+    positionMenuWrapper.appendChild(positionMenuButton);
+    return positionMenuWrapper;
+};
+exports.createPositionMenuWrapper = createPositionMenuWrapper;