@manuscripts/body-editor 3.5.12 → 3.5.13

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fileMainDocumentIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
+exports.fileMainDocumentIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.addBtnIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -22,4 +22,5 @@ exports.imageDefaultIcon = (0, server_1.renderToStaticMarkup)((0, react_1.create
 exports.fileCorruptedIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.FileCorruptedIcon));
 exports.draggableIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.DraggableIcon));
 exports.translateIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.TranslateIcon));
+exports.linkIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.LinkIcon));
 exports.fileMainDocumentIcon = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.FileMainDocumentIcon));

package/dist/cjs/lib/media.js

@@ -18,7 +18,7 @@ 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;
+exports.addInteractionHandlers = exports.createFileUploader = exports.createReactTools = exports.createFileHandlers = exports.createMediaPlaceholder = exports.MediaType = exports.createUnsupportedFormat = void 0;
 const transform_1 = require("@manuscripts/transform");
 const InsertEmbedDialog_1 = require("../components/toolbar/InsertEmbedDialog");
 const FigureDropdown_1 = require("../components/views/FigureDropdown");
@@ -46,25 +46,38 @@ const createUnsupportedFormat = (filename, canEdit) => {
     return element;
 };
 exports.createUnsupportedFormat = createUnsupportedFormat;
-const createMediaPlaceholder = (mediaType = 'media', view, getPos) => {
+var MediaType;
+(function (MediaType) {
+    MediaType["Media"] = "media";
+    MediaType["Figure"] = "figure";
+    MediaType["ExternalLink"] = "external_link";
+})(MediaType || (exports.MediaType = MediaType = {}));
+const MediaLabels = {
+    [MediaType.Media]: 'media',
+    [MediaType.Figure]: 'figure',
+    [MediaType.ExternalLink]: 'a file to link',
+};
+const createMediaPlaceholder = (mediaType = 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>
+      <p>Drag or click here to upload ${MediaLabels[mediaType]} <br>
+      ${mediaType === MediaType.ExternalLink
+        ? ` or drag items here from the file <a data-action='open-other-files'>'Other files'</a> in the inspector.</p>`
+        : `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='open-supplement-files'>'Supplements'</a>`}
+
+      ${mediaType === MediaType.Media && view && getPos
         ? "| <a data-action='add-external-link'>'External link'</a>"
         : ''}
       </p>
     </div>
   `;
-    if (mediaType === 'media' && view && getPos) {
+    if (mediaType === MediaType.Media && view && getPos) {
         const embedLink = instructions.querySelector("[data-action='add-external-link']");
         if (embedLink) {
             embedLink.addEventListener('click', (e) => {

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

package/dist/cjs/views/embed.js

@@ -164,7 +164,7 @@ class EmbedView extends block_view_1.default {
         const href = this.node.attrs.href;
         let object;
         if (!href) {
-            object = (0, media_1.createMediaPlaceholder)('media', this.view, this.getPos);
+            object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos);
         }
         else if (this.isUploadedFile()) {
             const files = this.props.getFiles();
@@ -178,14 +178,14 @@ class EmbedView extends block_view_1.default {
                     : (0, media_1.createUnsupportedFormat)(file.name, this.props.getCapabilities().editArticle);
             }
             else {
-                object = (0, media_1.createMediaPlaceholder)('media', this.view, this.getPos);
+                object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos);
             }
         }
         else if (this.isEmbedLink()) {
             object = await this.createEmbedPreview();
         }
         else {
-            object = (0, media_1.createMediaPlaceholder)('media', this.view, this.getPos);
+            object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos);
         }
         const can = this.props.getCapabilities();
         if (can.uploadFile && object.classList.contains('placeholder')) {

package/dist/cjs/views/figure_editable.js

@@ -53,7 +53,7 @@ class FigureEditableView extends figure_1.FigureView {
             return img;
         };
         this.createPlaceholder = () => {
-            return (0, media_1.createMediaPlaceholder)('figure');
+            return (0, media_1.createMediaPlaceholder)(media_1.MediaType.Figure);
         };
     }
     initialise() {

package/dist/cjs/views/image_element.js

@@ -14,39 +14,6 @@
  * 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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -54,11 +21,12 @@ 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 icons_1 = require("../icons");
+const media_1 = require("../lib/media");
 const position_menu_1 = require("../lib/position-menu");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
-const ReactSubView_1 = __importStar(require("./ReactSubView"));
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 var figurePositions;
 (function (figurePositions) {
     figurePositions["left"] = "half-left";
@@ -70,6 +38,15 @@ class ImageElementView extends block_view_1.default {
         super(...arguments);
         this.isEditingExtLink = false;
         this.ignoreMutation = () => true;
+        this.upload = async (file) => {
+            const result = await this.props.fileManagement.upload(file);
+            if (!result) {
+                return;
+            }
+            this.setIsEditingExtLink(false);
+            this.setExtLink({ extLink: result.id });
+            this.updateContents();
+        };
         this.showPositionMenu = () => {
             const firstFigure = this.getFirstFigure();
             if (!firstFigure) {
@@ -110,6 +87,26 @@ class ImageElementView extends block_view_1.default {
             };
             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);
         };
+        this.removeExtLink = () => {
+            this.setExtLink({ extLink: '' });
+        };
+        this.setExtLink = (newAttrs) => {
+            this.setIsEditingExtLink(false);
+            const { tr } = this.view.state;
+            const pos = this.getPos();
+            tr.setNodeMarkup(pos, undefined, {
+                ...this.node.attrs,
+                ...newAttrs,
+            });
+            this.view.dispatch(tr);
+        };
+        this.setIsEditingExtLink = (val) => {
+            this.isEditingExtLink = val;
+        };
+    }
+    initialise() {
+        super.initialise();
+        this.upload = this.upload.bind(this);
     }
     createDOM() {
         super.createDOM();
@@ -133,9 +130,7 @@ class ImageElementView extends block_view_1.default {
     updateContents() {
         super.updateContents();
         this.addTools();
-        if (this.node.type === transform_1.schema.nodes.image_element) {
-            this.addExternalLinkedFileEditor();
-        }
+        this.addExternalLinkedFileEditor();
     }
     addTools() {
         this.addPositionMenu();
@@ -201,25 +196,80 @@ class ImageElementView extends block_view_1.default {
         this.view.dispatch(tr);
         this.figurePosition = position;
     }
+    createDnDPlaceholder() {
+        const can = this.props.getCapabilities();
+        const label = document.createElement('div');
+        label.classList.add('accessibility_element_label');
+        label.innerText = 'Link';
+        const container = document.createElement('div');
+        container.classList.add('ext-link-editor-placeholder-container');
+        const placeholder = (0, media_1.createMediaPlaceholder)(media_1.MediaType.ExternalLink);
+        const closeButton = document.createElement('button');
+        closeButton.classList.add('close-button');
+        closeButton.setAttribute('aria-label', 'Close');
+        closeButton.addEventListener('click', () => {
+            this.setIsEditingExtLink(false);
+            this.updateContents();
+        });
+        container.append(placeholder, closeButton);
+        this.extLinkEditorContainer.append(label, container);
+        if (can.uploadFile) {
+            (0, media_1.addInteractionHandlers)(placeholder, this.upload, '*/*');
+        }
+    }
+    createAddLinkButton() {
+        const button = document.createElement('div');
+        button.innerHTML = icons_1.linkIcon;
+        const buttonText = document.createElement('span');
+        buttonText.textContent = 'Add link';
+        button.appendChild(buttonText);
+        button.setAttribute('aria-label', 'Add linked file');
+        button.classList.add('icon-button');
+        button.addEventListener('click', () => {
+            this.setIsEditingExtLink(true);
+            this.updateContents();
+        });
+        this.extLinkEditorContainer.appendChild(button);
+    }
+    createLinkedFile() {
+        const extLink = this.node.attrs.extLink;
+        const files = this.props.getFiles();
+        const file = extLink ? files.find((f) => f.id === extLink) : undefined;
+        const fileName = file ? `${file.name.trim()}` : 'File does not exist.';
+        const div = document.createElement('div');
+        div.classList.add('linked-file-info');
+        div.innerHTML = `<p>${icons_1.linkIcon} <span>${fileName}</span></p>`;
+        const removeButton = document.createElement('button');
+        removeButton.classList.add('icon-button', 'remove-button');
+        removeButton.setAttribute('aria-label', 'Remove link');
+        removeButton.innerHTML = icons_1.deleteIcon;
+        removeButton.addEventListener('click', () => {
+            this.isEditingExtLink = false;
+            this.removeExtLink();
+        });
+        div.appendChild(removeButton);
+        this.extLinkEditorContainer.appendChild(div);
+    }
     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;
-            });
+        if (this.node.type === transform_1.schema.nodes.image_element) {
+            this.extLinkEditorContainer = this.container.querySelector('.ext-link-editor-container');
+            if (this.extLinkEditorContainer) {
+                this.extLinkEditorContainer.innerHTML = '';
+            }
+            else {
+                this.extLinkEditorContainer = document.createElement('div');
+                this.extLinkEditorContainer.classList.add('ext-link-editor-container');
+            }
+            if (!this.isEditingExtLink && !this.node.attrs.extLink) {
+                this.createAddLinkButton();
+            }
+            if (this.isEditingExtLink && !this.node.attrs.extLink) {
+                this.createDnDPlaceholder();
+            }
+            if (this.node.attrs.extLink) {
+                this.createLinkedFile();
+            }
+            this.subcontainer.appendChild(this.extLinkEditorContainer);
         }
     }
 }

package/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, TranslateIcon, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, PlusIcon, ScrollIcon, SectionCategoryIcon, TranslateIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
@@ -19,4 +19,5 @@ export const imageDefaultIcon = renderToStaticMarkup(createElement(ImageDefaultI
 export const fileCorruptedIcon = renderToStaticMarkup(createElement(FileCorruptedIcon));
 export const draggableIcon = renderToStaticMarkup(createElement(DraggableIcon));
 export const translateIcon = renderToStaticMarkup(createElement(TranslateIcon));
+export const linkIcon = renderToStaticMarkup(createElement(LinkIcon));
 export const fileMainDocumentIcon = renderToStaticMarkup(createElement(FileMainDocumentIcon));

package/dist/es/lib/media.js

@@ -39,25 +39,38 @@ export const createUnsupportedFormat = (filename, canEdit) => {
     element.appendChild(instructions);
     return element;
 };
-export const createMediaPlaceholder = (mediaType = 'media', view, getPos) => {
+export var MediaType;
+(function (MediaType) {
+    MediaType["Media"] = "media";
+    MediaType["Figure"] = "figure";
+    MediaType["ExternalLink"] = "external_link";
+})(MediaType || (MediaType = {}));
+const MediaLabels = {
+    [MediaType.Media]: 'media',
+    [MediaType.Figure]: 'figure',
+    [MediaType.ExternalLink]: 'a file to link',
+};
+export const createMediaPlaceholder = (mediaType = 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>
+      <p>Drag or click here to upload ${MediaLabels[mediaType]} <br>
+      ${mediaType === MediaType.ExternalLink
+        ? ` or drag items here from the file <a data-action='open-other-files'>'Other files'</a> in the inspector.</p>`
+        : `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='open-supplement-files'>'Supplements'</a>`}
+
+      ${mediaType === MediaType.Media && view && getPos
         ? "| <a data-action='add-external-link'>'External link'</a>"
         : ''}
       </p>
     </div>
   `;
-    if (mediaType === 'media' && view && getPos) {
+    if (mediaType === MediaType.Media && view && getPos) {
         const embedLink = instructions.querySelector("[data-action='add-external-link']");
         if (embedLink) {
             embedLink.addEventListener('click', (e) => {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.5.12';
+export const VERSION = '3.5.13';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/embed.js

@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
 import { NodeSelection } from 'prosemirror-state';
 import { NoPreviewMessageWithLink, openEmbedDialog, } from '../components/toolbar/InsertEmbedDialog';
 import { getMediaTypeInfo } from '../lib/get-media-type';
-import { addInteractionHandlers, createFileHandlers, createFileUploader, createMediaPlaceholder, createReactTools, createUnsupportedFormat, } from '../lib/media';
+import { addInteractionHandlers, createFileHandlers, createFileUploader, createMediaPlaceholder, createReactTools, createUnsupportedFormat, MediaType, } from '../lib/media';
 import { getOEmbedHTML } from '../lib/oembed';
 import { allowedHref } from '../lib/url';
 import BlockView from './block_view';
@@ -158,7 +158,7 @@ export class EmbedView extends BlockView {
         const href = this.node.attrs.href;
         let object;
         if (!href) {
-            object = createMediaPlaceholder('media', this.view, this.getPos);
+            object = createMediaPlaceholder(MediaType.Media, this.view, this.getPos);
         }
         else if (this.isUploadedFile()) {
             const files = this.props.getFiles();
@@ -172,14 +172,14 @@ export class EmbedView extends BlockView {
                     : createUnsupportedFormat(file.name, this.props.getCapabilities().editArticle);
             }
             else {
-                object = createMediaPlaceholder('media', this.view, this.getPos);
+                object = createMediaPlaceholder(MediaType.Media, this.view, this.getPos);
             }
         }
         else if (this.isEmbedLink()) {
             object = await this.createEmbedPreview();
         }
         else {
-            object = createMediaPlaceholder('media', this.view, this.getPos);
+            object = createMediaPlaceholder(MediaType.Media, this.view, this.getPos);
         }
         const can = this.props.getCapabilities();
         if (can.uploadFile && object.classList.contains('placeholder')) {

package/dist/es/views/figure_editable.js

@@ -17,7 +17,7 @@ import { schema } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { draggableIcon } from '../icons';
-import { addInteractionHandlers, createFileHandlers, createFileUploader, createMediaPlaceholder, createReactTools, createUnsupportedFormat, } from '../lib/media';
+import { addInteractionHandlers, createFileHandlers, createFileUploader, createMediaPlaceholder, createReactTools, createUnsupportedFormat, MediaType, } from '../lib/media';
 import { isDeleted } from '../lib/track-changes-utils';
 import { createEditableNodeView } from './creators';
 import { FigureView } from './figure';
@@ -50,7 +50,7 @@ export class FigureEditableView extends FigureView {
             return img;
         };
         this.createPlaceholder = () => {
-            return createMediaPlaceholder('figure');
+            return createMediaPlaceholder(MediaType.Figure);
         };
     }
     initialise() {

package/dist/es/views/image_element.js

@@ -15,11 +15,12 @@
  */
 import { ContextMenu } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
-import { ExtLinkEditor, } from '../components/views/ExtLinkEditor';
+import { deleteIcon, linkIcon } from '../icons';
+import { addInteractionHandlers, createMediaPlaceholder, MediaType, } from '../lib/media';
 import { createPositionMenuWrapper } from '../lib/position-menu';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
-import ReactSubView, { createSubViewAsync } from './ReactSubView';
+import ReactSubView from './ReactSubView';
 export var figurePositions;
 (function (figurePositions) {
     figurePositions["left"] = "half-left";
@@ -31,6 +32,15 @@ export class ImageElementView extends BlockView {
         super(...arguments);
         this.isEditingExtLink = false;
         this.ignoreMutation = () => true;
+        this.upload = async (file) => {
+            const result = await this.props.fileManagement.upload(file);
+            if (!result) {
+                return;
+            }
+            this.setIsEditingExtLink(false);
+            this.setExtLink({ extLink: result.id });
+            this.updateContents();
+        };
         this.showPositionMenu = () => {
             const firstFigure = this.getFirstFigure();
             if (!firstFigure) {
@@ -71,6 +81,26 @@ export class ImageElementView extends BlockView {
             };
             this.props.popper.show(this.positionMenuWrapper, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
         };
+        this.removeExtLink = () => {
+            this.setExtLink({ extLink: '' });
+        };
+        this.setExtLink = (newAttrs) => {
+            this.setIsEditingExtLink(false);
+            const { tr } = this.view.state;
+            const pos = this.getPos();
+            tr.setNodeMarkup(pos, undefined, {
+                ...this.node.attrs,
+                ...newAttrs,
+            });
+            this.view.dispatch(tr);
+        };
+        this.setIsEditingExtLink = (val) => {
+            this.isEditingExtLink = val;
+        };
+    }
+    initialise() {
+        super.initialise();
+        this.upload = this.upload.bind(this);
     }
     createDOM() {
         super.createDOM();
@@ -94,9 +124,7 @@ export class ImageElementView extends BlockView {
     updateContents() {
         super.updateContents();
         this.addTools();
-        if (this.node.type === schema.nodes.image_element) {
-            this.addExternalLinkedFileEditor();
-        }
+        this.addExternalLinkedFileEditor();
     }
     addTools() {
         this.addPositionMenu();
@@ -162,25 +190,80 @@ export class ImageElementView extends BlockView {
         this.view.dispatch(tr);
         this.figurePosition = position;
     }
+    createDnDPlaceholder() {
+        const can = this.props.getCapabilities();
+        const label = document.createElement('div');
+        label.classList.add('accessibility_element_label');
+        label.innerText = 'Link';
+        const container = document.createElement('div');
+        container.classList.add('ext-link-editor-placeholder-container');
+        const placeholder = createMediaPlaceholder(MediaType.ExternalLink);
+        const closeButton = document.createElement('button');
+        closeButton.classList.add('close-button');
+        closeButton.setAttribute('aria-label', 'Close');
+        closeButton.addEventListener('click', () => {
+            this.setIsEditingExtLink(false);
+            this.updateContents();
+        });
+        container.append(placeholder, closeButton);
+        this.extLinkEditorContainer.append(label, container);
+        if (can.uploadFile) {
+            addInteractionHandlers(placeholder, this.upload, '*/*');
+        }
+    }
+    createAddLinkButton() {
+        const button = document.createElement('div');
+        button.innerHTML = linkIcon;
+        const buttonText = document.createElement('span');
+        buttonText.textContent = 'Add link';
+        button.appendChild(buttonText);
+        button.setAttribute('aria-label', 'Add linked file');
+        button.classList.add('icon-button');
+        button.addEventListener('click', () => {
+            this.setIsEditingExtLink(true);
+            this.updateContents();
+        });
+        this.extLinkEditorContainer.appendChild(button);
+    }
+    createLinkedFile() {
+        const extLink = this.node.attrs.extLink;
+        const files = this.props.getFiles();
+        const file = extLink ? files.find((f) => f.id === extLink) : undefined;
+        const fileName = file ? `${file.name.trim()}` : 'File does not exist.';
+        const div = document.createElement('div');
+        div.classList.add('linked-file-info');
+        div.innerHTML = `<p>${linkIcon} <span>${fileName}</span></p>`;
+        const removeButton = document.createElement('button');
+        removeButton.classList.add('icon-button', 'remove-button');
+        removeButton.setAttribute('aria-label', 'Remove link');
+        removeButton.innerHTML = deleteIcon;
+        removeButton.addEventListener('click', () => {
+            this.isEditingExtLink = false;
+            this.removeExtLink();
+        });
+        div.appendChild(removeButton);
+        this.extLinkEditorContainer.appendChild(div);
+    }
     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;
-            });
+        if (this.node.type === schema.nodes.image_element) {
+            this.extLinkEditorContainer = this.container.querySelector('.ext-link-editor-container');
+            if (this.extLinkEditorContainer) {
+                this.extLinkEditorContainer.innerHTML = '';
+            }
+            else {
+                this.extLinkEditorContainer = document.createElement('div');
+                this.extLinkEditorContainer.classList.add('ext-link-editor-container');
+            }
+            if (!this.isEditingExtLink && !this.node.attrs.extLink) {
+                this.createAddLinkButton();
+            }
+            if (this.isEditingExtLink && !this.node.attrs.extLink) {
+                this.createDnDPlaceholder();
+            }
+            if (this.node.attrs.extLink) {
+                this.createLinkedFile();
+            }
+            this.subcontainer.appendChild(this.extLinkEditorContainer);
         }
     }
 }

package/dist/types/icons.d.ts

@@ -15,4 +15,5 @@ export declare const imageDefaultIcon: string;
 export declare const fileCorruptedIcon: string;
 export declare const draggableIcon: string;
 export declare const translateIcon: string;
+export declare const linkIcon: string;
 export declare const fileMainDocumentIcon: string;

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

@@ -18,7 +18,12 @@ import { EditorProps } from '../configs/ManuscriptsEditor';
 import { Trackable } from '../types';
 import { FileAttachment } from './files';
 export declare const createUnsupportedFormat: (filename: string, canEdit: boolean) => HTMLElement;
-export declare const createMediaPlaceholder: (mediaType?: "media" | "figure", view?: ManuscriptEditorView, getPos?: () => number) => HTMLElement;
+export declare enum MediaType {
+    Media = "media",
+    Figure = "figure",
+    ExternalLink = "external_link"
+}
+export declare const createMediaPlaceholder: (mediaType?: MediaType, view?: ManuscriptEditorView, getPos?: () => number) => HTMLElement;
 export interface FileHandlers {
     handleDownload?: () => void;
     handleUpload?: () => void;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.5.12";
+export declare const VERSION = "3.5.13";
 export declare const MATHJAX_VERSION = "3.2.2";