@manuscripts/body-editor 3.2.36 → 3.3.0

package/dist/cjs/components/DragAndDropUploader.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragAndDropUploader = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DragAndDropUploader = ({ upload, onUploadError, allowedFileTypes, maxFileSizeMB, }) => {
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const validateFile = (file) => {
+        if (!file) {
+            onUploadError('No file selected.');
+            return false;
+        }
+        if (allowedFileTypes && allowedFileTypes.length > 0) {
+            if (!allowedFileTypes.includes(file.type)) {
+                onUploadError(`Invalid file type. Allowed types: ${allowedFileTypes.join(', ')}`);
+                return false;
+            }
+        }
+        if (maxFileSizeMB && file.size > maxFileSizeMB * 1024 * 1024) {
+            onUploadError(`File size exceeds limit of ${maxFileSizeMB} MB.`);
+            return false;
+        }
+        return true;
+    };
+    const processFiles = async (files) => {
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (validateFile(file)) {
+                try {
+                    setIsUploading(true);
+                    await upload(file);
+                }
+                catch (error) {
+                    onUploadError('Upload failed. Please try again.');
+                    console.error('Upload error:', error);
+                }
+                finally {
+                    setIsUploading(false);
+                }
+            }
+        }
+        else {
+            onUploadError('No file selected or dropped.');
+        }
+    };
+    const handleDragOver = (e) => {
+        if (e.dataTransfer && e.dataTransfer.items) {
+            for (const item of e.dataTransfer.items) {
+                if (item.kind === 'file' && item.type.startsWith('image/')) {
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'copy';
+                }
+            }
+        }
+    };
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        await processFiles(e.dataTransfer.files);
+    };
+    const handleFileChange = async (e) => {
+        await processFiles(e.target.files);
+    };
+    const handleAreaClick = (event) => {
+        const target = event.target;
+        if (target.dataset && target.dataset.action) {
+            return;
+        }
+        fileInputRef.current?.click();
+    };
+    return (react_1.default.createElement(DragAndDropContainer, { onDragOver: handleDragOver, onDrop: !isUploading ? handleDrop : undefined, onClick: !isUploading ? handleAreaClick : undefined, tabIndex: isUploading ? -1 : 0, "aria-label": "Drag and drop area for file upload, or click to open file dialog.", role: "button", onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                fileInputRef.current?.click();
+            }
+        } },
+        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, "aria-hidden": "true" }),
+        react_1.default.createElement("p", null,
+            "Drag or click here to upload a file to link",
+            react_1.default.createElement("br", null),
+            "or drag items here from the file",
+            ' ',
+            react_1.default.createElement("span", { "data-action": "open-other-files" }, "'Other files'"),
+            " in the inspector.")));
+};
+exports.DragAndDropUploader = DragAndDropUploader;
+const DragAndDropContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  border: 1px dashed ${(props) => props.theme.colors.border.secondary};
+  border-radius: 8px;
+  background-color: ${(props) => props.theme.colors.background.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
+  font-size: ${(props) => props.theme.font.size.normal};
+
+  input[type='file'] {
+    display: none;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    text-align: center;
+  }
+  span {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;

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

@@ -0,0 +1,127 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtLinkEditor = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DragAndDropUploader_1 = require("../DragAndDropUploader");
+const ExtLinkEditor = ({ node, nodePos, view, editorProps, isEditing, setIsEditing, }) => {
+    const [uploadError, setUploadError] = (0, react_1.useState)(null);
+    const fileManagement = editorProps.fileManagement;
+    const extLink = node.attrs.extLink;
+    const files = editorProps.getFiles();
+    const file = extLink ? files.find((f) => f.id === extLink) : undefined;
+    const onUpdate = (newAttrs) => {
+        const tr = view.state.tr.setNodeMarkup(nodePos, undefined, {
+            ...node.attrs,
+            ...newAttrs,
+        });
+        view.dispatch(tr);
+    };
+    const handleFileUpload = async (file) => {
+        setUploadError(null);
+        const result = await fileManagement.upload(file);
+        if (!result) {
+            handleUploadError('File upload failed');
+            return;
+        }
+        setIsEditing(false);
+        onUpdate({ extLink: result.id });
+    };
+    const handleUploadError = (message) => {
+        setUploadError(message);
+    };
+    const handleRemove = () => {
+        setUploadError(null);
+        onUpdate({ extLink: '' });
+        setIsEditing(false);
+    };
+    return (react_1.default.createElement("div", null,
+        !isEditing && !extLink && (react_1.default.createElement(style_guide_1.IconTextButton, { onClick: () => setIsEditing(true), "aria-label": "Add linked file" },
+            react_1.default.createElement(style_guide_1.LinkIcon, null),
+            "Add link")),
+        isEditing && !extLink && (react_1.default.createElement("div", null,
+            react_1.default.createElement(ExtLinkEditorLabel, null, "Link"),
+            react_1.default.createElement(ExtLinkEditorContainer, null,
+                react_1.default.createElement(DragAndDropUploader_1.DragAndDropUploader, { upload: handleFileUpload, onUploadError: handleUploadError }),
+                react_1.default.createElement(CloseUploaderButton, { onClick: () => setIsEditing(false) })))),
+        extLink && (react_1.default.createElement(LinkedFileInfoBox, null,
+            react_1.default.createElement("p", null,
+                react_1.default.createElement(style_guide_1.LinkIcon, null),
+                file ? file.name : 'File does not exist.'),
+            react_1.default.createElement(style_guide_1.IconButton, { onClick: handleRemove, "aria-label": "Remove linked file" },
+                react_1.default.createElement(style_guide_1.DeleteIcon, null)))),
+        uploadError && (react_1.default.createElement("div", null,
+            react_1.default.createElement("p", { className: "font-semibold" }, "Error:"),
+            react_1.default.createElement("p", null, uploadError)))));
+};
+exports.ExtLinkEditor = ExtLinkEditor;
+const ExtLinkEditorLabel = styled_components_1.default.div `
+  color: var(--label-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.369px;
+  margin-top: 12px;
+  cursor: pointer;
+`;
+const ExtLinkEditorContainer = styled_components_1.default.div `
+  position: relative;
+`;
+const LinkedFileInfoBox = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background-color: ${(props) => props.theme.colors.background.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  border-radius: 8px;
+
+  p {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    font-size: ${(props) => props.theme.font.size.medium};
+  }
+`;
+const CloseUploaderButton = (0, styled_components_1.default)(style_guide_1.CloseButton) `
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
+
+  position: absolute;
+  top: -8px;
+  right: -8px;
+`;

package/dist/cjs/lib/files.js

@@ -31,6 +31,7 @@ const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];
     const supplements = [];
+    const linkedFiles = [];
     const attachments = [];
     const getFile = (href) => {
         const file = fileMap.get(href);
@@ -67,6 +68,15 @@ const groupFiles = (doc, files) => {
         if (figureTypes.includes(node.type)) {
             figures.push(getFigureElementFiles(node, pos));
         }
+        if (node.type === transform_1.schema.nodes.image_element) {
+            if (node.attrs.extLink) {
+                linkedFiles.push({
+                    node,
+                    pos,
+                    file: getFile(node.attrs.extLink),
+                });
+            }
+        }
         if (node.type === transform_1.schema.nodes.supplement) {
             supplements.push({
                 node,
@@ -86,6 +96,7 @@ const groupFiles = (doc, files) => {
         figures,
         supplements,
         attachments,
+        linkedFiles,
         others: [...fileMap.values()],
     };
 };

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 = '3.2.36';
+exports.VERSION = '3.3.0';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/ReactSubView.js

@@ -18,11 +18,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSubViewAsync = void 0;
 const react_1 = __importDefault(require("react"));
+const react_dom_1 = require("react-dom");
 const client_1 = require("react-dom/client");
 const styled_components_1 = require("styled-components");
 function createSubView(props, Component, componentProps, node, getPos, view, classNames = []) {
     const container = document.createElement('div');
+    const Wrapped = createView(props, Component, componentProps, node, getPos, view, classNames, container);
+    const root = (0, client_1.createRoot)(container);
+    root.render(react_1.default.createElement(Wrapped, null));
+    return container;
+}
+function createView(props, Component, componentProps, node, getPos, view, classNames = [], container) {
     container.classList.add('tools-panel');
     if (classNames.length) {
         container.classList.add(...classNames);
@@ -41,8 +49,21 @@ function createSubView(props, Component, componentProps, node, getPos, view, cla
         return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: props.theme },
             react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
     };
+    return Wrapped;
+}
+function createSubViewAsync(props, Component, componentProps, node, getPos, view, classNames = []) {
+    const container = document.createElement('div');
+    const Wrapped = createView(props, Component, componentProps, node, getPos, view, classNames, container);
     const root = (0, client_1.createRoot)(container);
-    root.render(react_1.default.createElement(Wrapped, null));
-    return container;
+    const res = new Promise((resolve) => {
+        queueMicrotask(() => {
+            (0, react_dom_1.flushSync)(() => {
+                root.render(react_1.default.createElement(Wrapped, null));
+            });
+            resolve(container);
+        });
+    });
+    return res;
 }
+exports.createSubViewAsync = createSubViewAsync;
 exports.default = createSubView;

package/dist/cjs/views/accessibility_element.js

@@ -27,6 +27,7 @@ class AccessibilityElementView extends block_view_1.default {
     createElement() {
         super.createElement();
         this.contentDOM.className = 'accessibility_element_input';
+        this.contentDOM.setAttribute('contenteditable', 'true');
     }
 }
 exports.AccessibilityElementView = AccessibilityElementView;

package/dist/cjs/views/image_element.js

@@ -14,6 +14,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -21,10 +44,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageElementView = exports.figurePositions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
+const ExtLinkEditor_1 = require("../components/views/ExtLinkEditor");
 const position_menu_1 = require("../lib/position-menu");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
-const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+const ReactSubView_1 = __importStar(require("./ReactSubView"));
 var figurePositions;
 (function (figurePositions) {
     figurePositions["left"] = "half-left";
@@ -34,6 +58,7 @@ var figurePositions;
 class ImageElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
+        this.isEditingExtLink = false;
         this.ignoreMutation = () => true;
         this.showPositionMenu = () => {
             const firstFigure = this.getFirstFigure();
@@ -83,17 +108,24 @@ class ImageElementView extends block_view_1.default {
     createElement() {
         this.container = document.createElement('div');
         this.container.classList.add('block');
-        this.container.setAttribute('contenteditable', 'true');
+        this.container.setAttribute('contenteditable', 'false');
         this.dom.appendChild(this.container);
-        this.contentDOM = document.createElement('figure');
-        this.contentDOM.classList.add('figure-block');
+        this.subcontainer = document.createElement('div');
+        this.subcontainer.classList.add('figure-block-group');
+        this.contentDOM = document.createElement('div');
+        this.contentDOM.setAttribute('contenteditable', 'false');
         this.contentDOM.setAttribute('id', this.node.attrs.id);
-        this.container.appendChild(this.contentDOM);
+        this.contentDOM.classList.add('figure-block');
+        this.subcontainer.appendChild(this.contentDOM);
+        this.container.appendChild(this.subcontainer);
         this.addTools();
     }
     updateContents() {
         super.updateContents();
         this.addTools();
+        if (this.node.type === transform_1.schema.nodes.image_element) {
+            this.addExternalLinkedFileEditor();
+        }
     }
     addTools() {
         this.addPositionMenu();
@@ -159,6 +191,27 @@ class ImageElementView extends block_view_1.default {
         this.view.dispatch(tr);
         this.figurePosition = position;
     }
+    addExternalLinkedFileEditor() {
+        if (this.props.dispatch && this.props.theme) {
+            const componentProps = {
+                node: this.node,
+                nodePos: this.getPos(),
+                view: this.view,
+                editorProps: this.props,
+                isEditing: this.isEditingExtLink,
+                setIsEditing: (val) => {
+                    this.isEditingExtLink = val;
+                    this.updateContents();
+                },
+            };
+            return (0, ReactSubView_1.createSubViewAsync)(this.props, ExtLinkEditor_1.ExtLinkEditor, componentProps, this.node, this.getPos, this.view, ['ext-link-editor-container']).then((elem) => {
+                this.extLinkEditorContainer?.remove();
+                this.extLinkEditorContainer = elem;
+                this.subcontainer?.appendChild(this.extLinkEditorContainer);
+                return;
+            });
+        }
+    }
 }
 exports.ImageElementView = ImageElementView;
 exports.default = (0, creators_1.createNodeView)(ImageElementView);

package/dist/es/components/DragAndDropUploader.js

@@ -0,0 +1,108 @@
+import React, { useRef, useState, } from 'react';
+import styled from 'styled-components';
+export const DragAndDropUploader = ({ upload, onUploadError, allowedFileTypes, maxFileSizeMB, }) => {
+    const [isUploading, setIsUploading] = useState(false);
+    const fileInputRef = useRef(null);
+    const validateFile = (file) => {
+        if (!file) {
+            onUploadError('No file selected.');
+            return false;
+        }
+        if (allowedFileTypes && allowedFileTypes.length > 0) {
+            if (!allowedFileTypes.includes(file.type)) {
+                onUploadError(`Invalid file type. Allowed types: ${allowedFileTypes.join(', ')}`);
+                return false;
+            }
+        }
+        if (maxFileSizeMB && file.size > maxFileSizeMB * 1024 * 1024) {
+            onUploadError(`File size exceeds limit of ${maxFileSizeMB} MB.`);
+            return false;
+        }
+        return true;
+    };
+    const processFiles = async (files) => {
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (validateFile(file)) {
+                try {
+                    setIsUploading(true);
+                    await upload(file);
+                }
+                catch (error) {
+                    onUploadError('Upload failed. Please try again.');
+                    console.error('Upload error:', error);
+                }
+                finally {
+                    setIsUploading(false);
+                }
+            }
+        }
+        else {
+            onUploadError('No file selected or dropped.');
+        }
+    };
+    const handleDragOver = (e) => {
+        if (e.dataTransfer && e.dataTransfer.items) {
+            for (const item of e.dataTransfer.items) {
+                if (item.kind === 'file' && item.type.startsWith('image/')) {
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'copy';
+                }
+            }
+        }
+    };
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        await processFiles(e.dataTransfer.files);
+    };
+    const handleFileChange = async (e) => {
+        await processFiles(e.target.files);
+    };
+    const handleAreaClick = (event) => {
+        const target = event.target;
+        if (target.dataset && target.dataset.action) {
+            return;
+        }
+        fileInputRef.current?.click();
+    };
+    return (React.createElement(DragAndDropContainer, { onDragOver: handleDragOver, onDrop: !isUploading ? handleDrop : undefined, onClick: !isUploading ? handleAreaClick : undefined, tabIndex: isUploading ? -1 : 0, "aria-label": "Drag and drop area for file upload, or click to open file dialog.", role: "button", onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                fileInputRef.current?.click();
+            }
+        } },
+        React.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, "aria-hidden": "true" }),
+        React.createElement("p", null,
+            "Drag or click here to upload a file to link",
+            React.createElement("br", null),
+            "or drag items here from the file",
+            ' ',
+            React.createElement("span", { "data-action": "open-other-files" }, "'Other files'"),
+            " in the inspector.")));
+};
+const DragAndDropContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  border: 1px dashed ${(props) => props.theme.colors.border.secondary};
+  border-radius: 8px;
+  background-color: ${(props) => props.theme.colors.background.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
+  font-size: ${(props) => props.theme.font.size.normal};
+
+  input[type='file'] {
+    display: none;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    text-align: center;
+  }
+  span {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;

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

@@ -0,0 +1,97 @@
+import { CloseButton, DeleteIcon, IconButton, IconTextButton, LinkIcon, } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DragAndDropUploader } from '../DragAndDropUploader';
+export const ExtLinkEditor = ({ node, nodePos, view, editorProps, isEditing, setIsEditing, }) => {
+    const [uploadError, setUploadError] = useState(null);
+    const fileManagement = editorProps.fileManagement;
+    const extLink = node.attrs.extLink;
+    const files = editorProps.getFiles();
+    const file = extLink ? files.find((f) => f.id === extLink) : undefined;
+    const onUpdate = (newAttrs) => {
+        const tr = view.state.tr.setNodeMarkup(nodePos, undefined, {
+            ...node.attrs,
+            ...newAttrs,
+        });
+        view.dispatch(tr);
+    };
+    const handleFileUpload = async (file) => {
+        setUploadError(null);
+        const result = await fileManagement.upload(file);
+        if (!result) {
+            handleUploadError('File upload failed');
+            return;
+        }
+        setIsEditing(false);
+        onUpdate({ extLink: result.id });
+    };
+    const handleUploadError = (message) => {
+        setUploadError(message);
+    };
+    const handleRemove = () => {
+        setUploadError(null);
+        onUpdate({ extLink: '' });
+        setIsEditing(false);
+    };
+    return (React.createElement("div", null,
+        !isEditing && !extLink && (React.createElement(IconTextButton, { onClick: () => setIsEditing(true), "aria-label": "Add linked file" },
+            React.createElement(LinkIcon, null),
+            "Add link")),
+        isEditing && !extLink && (React.createElement("div", null,
+            React.createElement(ExtLinkEditorLabel, null, "Link"),
+            React.createElement(ExtLinkEditorContainer, null,
+                React.createElement(DragAndDropUploader, { upload: handleFileUpload, onUploadError: handleUploadError }),
+                React.createElement(CloseUploaderButton, { onClick: () => setIsEditing(false) })))),
+        extLink && (React.createElement(LinkedFileInfoBox, null,
+            React.createElement("p", null,
+                React.createElement(LinkIcon, null),
+                file ? file.name : 'File does not exist.'),
+            React.createElement(IconButton, { onClick: handleRemove, "aria-label": "Remove linked file" },
+                React.createElement(DeleteIcon, null)))),
+        uploadError && (React.createElement("div", null,
+            React.createElement("p", { className: "font-semibold" }, "Error:"),
+            React.createElement("p", null, uploadError)))));
+};
+const ExtLinkEditorLabel = styled.div `
+  color: var(--label-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.369px;
+  margin-top: 12px;
+  cursor: pointer;
+`;
+const ExtLinkEditorContainer = styled.div `
+  position: relative;
+`;
+const LinkedFileInfoBox = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background-color: ${(props) => props.theme.colors.background.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  border-radius: 8px;
+
+  p {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    font-size: ${(props) => props.theme.font.size.medium};
+  }
+`;
+const CloseUploaderButton = styled(CloseButton) `
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
+
+  position: absolute;
+  top: -8px;
+  right: -8px;
+`;

package/dist/es/lib/files.js

@@ -27,6 +27,7 @@ export const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];
     const supplements = [];
+    const linkedFiles = [];
     const attachments = [];
     const getFile = (href) => {
         const file = fileMap.get(href);
@@ -63,6 +64,15 @@ export const groupFiles = (doc, files) => {
         if (figureTypes.includes(node.type)) {
             figures.push(getFigureElementFiles(node, pos));
         }
+        if (node.type === schema.nodes.image_element) {
+            if (node.attrs.extLink) {
+                linkedFiles.push({
+                    node,
+                    pos,
+                    file: getFile(node.attrs.extLink),
+                });
+            }
+        }
         if (node.type === schema.nodes.supplement) {
             supplements.push({
                 node,
@@ -82,6 +92,7 @@ export const groupFiles = (doc, files) => {
         figures,
         supplements,
         attachments,
+        linkedFiles,
         others: [...fileMap.values()],
     };
 };

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.2.36';
+export const VERSION = '3.3.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/ReactSubView.js

@@ -14,10 +14,17 @@
  * limitations under the License.
  */
 import React from 'react';
+import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from 'styled-components';
 function createSubView(props, Component, componentProps, node, getPos, view, classNames = []) {
     const container = document.createElement('div');
+    const Wrapped = createView(props, Component, componentProps, node, getPos, view, classNames, container);
+    const root = createRoot(container);
+    root.render(React.createElement(Wrapped, null));
+    return container;
+}
+function createView(props, Component, componentProps, node, getPos, view, classNames = [], container) {
     container.classList.add('tools-panel');
     if (classNames.length) {
         container.classList.add(...classNames);
@@ -36,8 +43,20 @@ function createSubView(props, Component, componentProps, node, getPos, view, cla
         return (React.createElement(ThemeProvider, { theme: props.theme },
             React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
     };
+    return Wrapped;
+}
+export function createSubViewAsync(props, Component, componentProps, node, getPos, view, classNames = []) {
+    const container = document.createElement('div');
+    const Wrapped = createView(props, Component, componentProps, node, getPos, view, classNames, container);
     const root = createRoot(container);
-    root.render(React.createElement(Wrapped, null));
-    return container;
+    const res = new Promise((resolve) => {
+        queueMicrotask(() => {
+            flushSync(() => {
+                root.render(React.createElement(Wrapped, null));
+            });
+            resolve(container);
+        });
+    });
+    return res;
 }
 export default createSubView;

package/dist/es/views/accessibility_element.js

@@ -21,6 +21,7 @@ export class AccessibilityElementView extends BlockView {
     createElement() {
         super.createElement();
         this.contentDOM.className = 'accessibility_element_input';
+        this.contentDOM.setAttribute('contenteditable', 'true');
     }
 }
 export default createNodeView(AccessibilityElementView);

package/dist/es/views/image_element.js

@@ -15,10 +15,11 @@
  */
 import { ContextMenu } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
+import { ExtLinkEditor, } from '../components/views/ExtLinkEditor';
 import { createPositionMenuWrapper } from '../lib/position-menu';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
-import ReactSubView from './ReactSubView';
+import ReactSubView, { createSubViewAsync } from './ReactSubView';
 export var figurePositions;
 (function (figurePositions) {
     figurePositions["left"] = "half-left";
@@ -28,6 +29,7 @@ export var figurePositions;
 export class ImageElementView extends BlockView {
     constructor() {
         super(...arguments);
+        this.isEditingExtLink = false;
         this.ignoreMutation = () => true;
         this.showPositionMenu = () => {
             const firstFigure = this.getFirstFigure();
@@ -77,17 +79,24 @@ export class ImageElementView extends BlockView {
     createElement() {
         this.container = document.createElement('div');
         this.container.classList.add('block');
-        this.container.setAttribute('contenteditable', 'true');
+        this.container.setAttribute('contenteditable', 'false');
         this.dom.appendChild(this.container);
-        this.contentDOM = document.createElement('figure');
-        this.contentDOM.classList.add('figure-block');
+        this.subcontainer = document.createElement('div');
+        this.subcontainer.classList.add('figure-block-group');
+        this.contentDOM = document.createElement('div');
+        this.contentDOM.setAttribute('contenteditable', 'false');
         this.contentDOM.setAttribute('id', this.node.attrs.id);
-        this.container.appendChild(this.contentDOM);
+        this.contentDOM.classList.add('figure-block');
+        this.subcontainer.appendChild(this.contentDOM);
+        this.container.appendChild(this.subcontainer);
         this.addTools();
     }
     updateContents() {
         super.updateContents();
         this.addTools();
+        if (this.node.type === schema.nodes.image_element) {
+            this.addExternalLinkedFileEditor();
+        }
     }
     addTools() {
         this.addPositionMenu();
@@ -153,5 +162,26 @@ export class ImageElementView extends BlockView {
         this.view.dispatch(tr);
         this.figurePosition = position;
     }
+    addExternalLinkedFileEditor() {
+        if (this.props.dispatch && this.props.theme) {
+            const componentProps = {
+                node: this.node,
+                nodePos: this.getPos(),
+                view: this.view,
+                editorProps: this.props,
+                isEditing: this.isEditingExtLink,
+                setIsEditing: (val) => {
+                    this.isEditingExtLink = val;
+                    this.updateContents();
+                },
+            };
+            return createSubViewAsync(this.props, ExtLinkEditor, componentProps, this.node, this.getPos, this.view, ['ext-link-editor-container']).then((elem) => {
+                this.extLinkEditorContainer?.remove();
+                this.extLinkEditorContainer = elem;
+                this.subcontainer?.appendChild(this.extLinkEditorContainer);
+                return;
+            });
+        }
+    }
 }
 export default createNodeView(ImageElementView);

package/dist/types/components/DragAndDropUploader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DragAndDropUploaderProps {
+    upload: (file: File) => Promise<void>;
+    onUploadError: (message: string) => void;
+    allowedFileTypes?: string[];
+    maxFileSizeMB?: number;
+}
+export declare const DragAndDropUploader: React.FC<DragAndDropUploaderProps>;
+export {};

package/dist/types/components/views/ExtLinkEditor.d.ts

@@ -0,0 +1,13 @@
+import { ManuscriptNode } from '@manuscripts/transform';
+import { EditorView } from 'prosemirror-view';
+import React from 'react';
+import { EditorProps } from '../../configs/ManuscriptsEditor';
+export interface ExtLinkEditorProps {
+    node: ManuscriptNode;
+    nodePos: number;
+    view: EditorView;
+    editorProps: EditorProps;
+    isEditing: boolean;
+    setIsEditing: (val: boolean) => void;
+}
+export declare const ExtLinkEditor: React.FC<ExtLinkEditorProps>;

package/dist/types/lib/files.d.ts

@@ -19,6 +19,7 @@ export type ManuscriptFiles = {
     figures: ElementFiles[];
     supplements: NodeFile[];
     attachments: NodeFile[];
+    linkedFiles: NodeFile[];
     others: FileAttachment[];
 };
 export type Upload = (file: File) => Promise<FileAttachment>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.2.36";
+export declare const VERSION = "3.3.0";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/ReactSubView.d.ts

@@ -28,4 +28,5 @@ export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
     container: HTMLDivElement;
 }
 declare function createSubView<T extends Trackable<ManuscriptNode>>(props: EditorProps, Component: React.FC<any>, componentProps: object, node: T, getPos: () => number, view: ManuscriptEditorView, classNames?: string[]): HTMLDivElement;
+export declare function createSubViewAsync<T extends Trackable<ManuscriptNode>>(props: EditorProps, Component: React.FC<any>, componentProps: object, node: T, getPos: () => number, view: ManuscriptEditorView, classNames?: string[]): Promise<HTMLDivElement>;
 export default createSubView;

package/dist/types/views/image_element.d.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FigureElementNode } from '@manuscripts/transform';
+import { ImageElementNode } from '@manuscripts/transform';
 import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare enum figurePositions {
@@ -21,10 +21,13 @@ export declare enum figurePositions {
     right = "half-right",
     default = ""
 }
-export declare class ImageElementView extends BlockView<Trackable<FigureElementNode>> {
+export declare class ImageElementView extends BlockView<Trackable<ImageElementNode>> {
     container: HTMLElement;
+    subcontainer: HTMLElement;
+    extLinkEditorContainer: HTMLDivElement;
     private positionMenuWrapper;
     private figurePosition;
+    private isEditingExtLink;
     ignoreMutation: () => boolean;
     createDOM(): void;
     createElement(): void;
@@ -35,6 +38,7 @@ export declare class ImageElementView extends BlockView<Trackable<FigureElementN
     private getAllFigures;
     private showPositionMenu;
     private updateAllFiguresPosition;
+    private addExternalLinkedFileEditor;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<ImageElementView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.2.36",
+  "version": "3.3.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -38,9 +38,9 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@manuscripts/json-schema": "2.2.12",
-    "@manuscripts/style-guide": "3.1.7",
+    "@manuscripts/style-guide": "3.2.0",
     "@manuscripts/track-changes-plugin": "2.0.9",
-    "@manuscripts/transform": "4.2.10",
+    "@manuscripts/transform": "4.2.11",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/styles/AdvancedEditor.css

@@ -129,8 +129,8 @@
   border: 1px solid #f2f2f2;
   border-radius: 4px;
 
-  padding: 4pt !important;
-  gap: 4pt !important;
+  padding: 8px;
+  gap: 8px !important;
 
   grid-template-columns: repeat(3, auto) !important;
   grid-template-rows: repeat(1, minmax(min-content, max-content)) [caption listing] auto !important;
@@ -140,6 +140,27 @@
   justify-self: center;
   position: relative;
 }
+.ProseMirror .figure-block-group {
+  width: 100%;
+  border: 1px solid #f2f2f2;
+  border-radius: 4px;
+  position: relative;
+  padding: 8px;
+  gap: 8px !important;
+
+  grid-template-columns: repeat(3, auto) !important;
+  grid-template-rows: repeat(1, minmax(min-content, max-content)) [caption listing] auto !important;
+}
+
+.ProseMirror .figure-block-group .figure-block {
+  border: none;
+  border-radius: 0;
+  position: static;
+  padding: 0;
+  margin: 0 !important;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+}
 
 .ProseMirror .figure-group {
   border: 1px solid #f2f2f2;
@@ -267,8 +288,12 @@
   padding: 16px 32px;
 }
 
-.ProseMirror .figure.placeholder a {
+.ProseMirror a[data-action] {
   text-decoration: underline;
+  cursor: pointer;
+}
+.ProseMirror a[data-action]:hover {
+  text-decoration: none;
 }
 
 .ProseMirror .figure.placeholder.over {
@@ -345,7 +370,9 @@
   text-align: center !important;
 }
 
-.ProseMirror .block-figure_element .position-menu, .ProseMirror .block-image_element .position-menu, .ProseMirror .block-embed .position-menu {
+.ProseMirror .block-figure_element .position-menu,
+.ProseMirror .block-image_element .position-menu, 
+ProseMirror .block-embed .position-menu {
   position: absolute;
   top: 15px;
   right: 35px;
@@ -371,9 +398,8 @@
   align-items: center;
   pointer-events: auto;
   transition: opacity 0.2s;
-  background-color:  #FAFAFA;
-  border: 1px solid #F2F2F2;
-
+  background-color: #fafafa;
+  border: 1px solid #f2f2f2;
 }
 .ProseMirror .figure-block .figure:hover .drag-handler {
   opacity: 1;
@@ -382,13 +408,17 @@
 /* Drop area blue dotted outline */
 .ProseMirror .figure-block .figure.drop-target-above,
 .ProseMirror .figure-block .figure.drop-target-below {
-  border: 2px dotted #20AEDF !important;
+  border: 2px dotted #20aedf !important;
   transition: border 0.2s, box-shadow 0.2s;
   position: relative;
 }
 
-.ProseMirror .figure-block .figure.drop-target-above::before { top: 0; }
-.ProseMirror .figure-block .figure.drop-target-below::after { bottom: 0; }
+.ProseMirror .figure-block .figure.drop-target-above::before {
+  top: 0;
+}
+.ProseMirror .figure-block .figure.drop-target-below::after {
+  bottom: 0;
+}
 
 .ProseMirror .figure.dragging {
   opacity: 0.6;
@@ -1052,8 +1082,12 @@ figure.block:has(.equation.selected-suggestion) {
   .block,
 .tracking-visible
   .selected-suggestion[data-track-op='move'][data-track-status='pending']
-  .block , .block:has(figure.selected-suggestion, [data-track-op='move'][data-track-status='pending']){
-    box-shadow: inset 3px 0 0 var(--updated-border-color) ;
+  .block,
+.block:has(
+    figure.selected-suggestion,
+    [data-track-op='move'][data-track-status='pending']
+  ) {
+  box-shadow: inset 3px 0 0 var(--updated-border-color);
 }
 
 .tracking-visible .selected-suggestion[data-track-op='set_attrs'] .block,
@@ -1527,7 +1561,8 @@ th:hover > .table-context-menu-button,
   justify-content: center;
 }
 
-.ProseMirror .accessibility_element {
+.ProseMirror .accessibility_element,
+.ProseMirror .ext-link-editor-container {
   margin-top: 12px;
   grid-column-start: 1;
   grid-column-end: -1;
@@ -1535,10 +1570,15 @@ th:hover > .table-context-menu-button,
   display: none;
 }
 
-.ProseMirror .show_accessibility_element .accessibility_element {
+.ProseMirror .show_accessibility_element .accessibility_element,
+.ProseMirror .show_accessibility_element .ext-link-editor-container {
   display: block;
 }
 
+.ProseMirror .ext-link-editor-container {
+  position: static;
+}
+
 .ProseMirror .accessibility_element_label {
   color: var(--label-color);
   font-size: 18px;
@@ -1550,6 +1590,11 @@ th:hover > .table-context-menu-button,
   cursor: pointer;
 }
 
+.ProseMirror .accessibility_element_input:focus,
+.ProseMirror .accessibility_element_input:focus-visible {
+  outline: none;
+}
+
 .ProseMirror .accessibility_element_input {
   border-radius: 4px;
   border: 1px solid var(--accepted-bg-color);

package/styles/Editor.css

@@ -329,6 +329,7 @@
 }
 
 .block-image_element .figure-label {
+  display: block;
   text-align: center;
   grid-column-start: 1;
   grid-column-end: -1;