@manuscripts/body-editor 3.13.19 → 3.15.0

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

package/dist/cjs/views/caption_title.js

@@ -23,6 +23,7 @@ class CaptionTitleView extends base_node_view_1.BaseNodeView {
         super(...arguments);
         this.initialise = () => {
             this.createDOM();
+            this.updateContents();
         };
     }
     createDOM() {

package/dist/cjs/views/supplement.js

@@ -20,6 +20,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const server_1 = require("react-dom/server");
 const icons_1 = require("../icons");
 const doc_1 = require("../lib/doc");
+const url_1 = require("../lib/url");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 class SupplementView extends base_node_view_1.BaseNodeView {
@@ -143,8 +144,27 @@ class SupplementView extends base_node_view_1.BaseNodeView {
         this.supplementInfoEl = document.createElement('div');
         this.supplementInfoEl.classList.add('supplement-file-info');
         this.supplementInfoEl.contentEditable = 'false';
+        const href = this.node.attrs.href;
+        if ((0, url_1.allowedHref)(href)) {
+            const iconElement = document.createElement('span');
+            iconElement.classList.add('supplement-file-icon');
+            iconElement.innerHTML = icons_1.webLinkIcon;
+            this.supplementInfoEl.appendChild(iconElement);
+            const urlLink = document.createElement('a');
+            urlLink.classList.add('supplement-weblink-url');
+            urlLink.textContent = href;
+            if ((0, url_1.allowedHref)(href)) {
+                urlLink.href = href;
+                urlLink.target = '_blank';
+                urlLink.rel = 'noopener noreferrer';
+            }
+            urlLink.addEventListener('mousedown', (e) => e.stopPropagation());
+            this.supplementInfoEl.appendChild(urlLink);
+            this.dom.appendChild(this.supplementInfoEl);
+            return;
+        }
         const files = this.props.getFiles();
-        const file = files.find((f) => f.id === this.node.attrs.href);
+        const file = files.find((f) => f.id === href);
         if (file) {
             const iconElement = document.createElement('span');
             iconElement.classList.add('supplement-file-icon');

package/dist/es/commands.js

@@ -295,6 +295,32 @@ export const insertSupplement = (file, view, setSelection = true) => {
     view.dispatch(tr.scrollIntoView());
     return true;
 };
+export const insertSupplementWeblink = (url, title, view) => {
+    const supplement = schema.nodes.supplement.createAndFill({
+        id: generateNodeID(schema.nodes.supplement),
+        href: url
+    }, createAndFillCaption());
+    const tr = view.state.tr;
+    const { pos } = upsertSupplementsSection(tr, supplement);
+    tr.setSelection(NodeSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr.scrollIntoView());
+    return true;
+};
+export const updateSupplementWeblink = (pos, url, title, view) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (!node) {
+        return false;
+    }
+    const tr = view.state.tr;
+    tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        href: url,
+        title: title,
+    });
+    view.dispatch(tr);
+    return true;
+};
 export const insertAttachment = (file, state, type, dispatch) => {
     const tr = state.tr;
     const attachments = insertAttachmentsNode(tr);

package/dist/es/components/authors-affiliations/AuthorsAndAffiliationsModals.js

@@ -74,4 +74,5 @@ export const openAuthorsAndAffiliationsModals = (pos, view, initialModal) => {
     const dialog = ReactSubView(props, AuthorsAndAffiliationsModals, componentProps, state.doc, () => pos, view);
     view.focus();
     document.body.appendChild(dialog);
+    return dialog;
 };

package/dist/es/components/cross-ref-check-modal/CrossRefWarningModal.js

@@ -0,0 +1,142 @@
+/*!
+ * © 2026 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.
+ */
+import React, { useState } from 'react';
+import { AttentionOrangeIcon, CloseButton, ModalContainer, ModalHeader, PrimaryButton, StyledModal, TertiaryButton, TextButton, } from '@manuscripts/style-guide';
+import { startCase } from 'lodash';
+import styled from 'styled-components';
+export const CrossRefWarningModal = ({ onClose, xrefs, onConfirm, selectAndScrollTo }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const handleClose = () => {
+        setIsOpen(false);
+        onClose();
+    };
+    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: false, hideOverlay: true },
+        React.createElement(Container, { "data-cy": "cross-reference-warning-modal" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+            React.createElement(Body, null,
+                React.createElement(Title, null,
+                    React.createElement(AttentionOrangeIcon, { width: 24, height: 22 }),
+                    " Delete referenced content?"),
+                React.createElement("p", null, "You are deleting content referenced elsewhere in the document:"),
+                React.createElement(ScrolableItems, null, xrefs.map((group, i) => (React.createElement(XrefGroupDisplay, { key: i, group: group, selectAndScrollTo: selectAndScrollTo })))),
+                React.createElement(Actions, null,
+                    React.createElement(TertiaryButton, { type: "button", onClick: () => handleClose() }, "Cancel"),
+                    React.createElement(PrimaryButton, { "$danger": true, type: "button", onClick: () => {
+                            onConfirm();
+                            setIsOpen(false);
+                        } }, "Delete & remove citation"))))));
+};
+const XrefGroupDisplay = ({ group, selectAndScrollTo }) => {
+    return (React.createElement("div", null,
+        React.createElement("h3", null, group.label),
+        React.createElement(ReferencesList, null, group.xrefs.map(([, pos], i) => {
+            return (React.createElement("li", { key: i },
+                React.createElement(TextButton, { onClick: () => selectAndScrollTo(pos) }, `${startCase(pos.parent.type.name)} - ${pos.parent.textContent}`)));
+        }))));
+};
+const Container = styled(ModalContainer) `
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  right: 0;
+  max-height: calc(50vh - 2rem);
+  min-height: 280px;
+  transform: translate(-50%, 0);
+  max-width: 480px;
+  transition:
+    top 0.2s,
+    transform 0.2s;
+`;
+const Modal = styled(StyledModal) `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1100;
+  color: #6e6e6e;
+  margin: auto;
+
+  &.modal-bottom ${Container} {
+    top: calc(100% - 2rem);
+    transform: translate(-50%, -100%);
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: fixed;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  h3 {
+    font-size: 16px;
+    margin: 0.5em 0;
+  }
+  p {
+    margin: 0.5em 0;
+  }
+`;
+const Body = styled.div `
+  margin: 1.5rem;
+  display: flex;
+  flex-flow: column;
+`;
+const Title = styled.h2 `
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0;
+  color: #353535;
+  svg {
+    vertical-align: text-top;
+  }
+`;
+const ReferencesList = styled.ul `
+  padding: 8px;
+  margin-left: 0;
+  list-style: none;
+  background: #f2f2f2;
+  border: 1px solid #e2e2e2;
+  border-radius: 3px;
+
+  ${TextButton} {
+    margin-left: 0;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    color: #353535;
+    text-overflow: ellipsis;
+  }
+`;
+const Actions = styled.footer `
+  text-align: right;
+  padding-top: 1rem;
+`;
+const ScrolableItems = styled.div `
+  max-height: 16vh;
+  min-height: 100px;
+  overflow-y: auto;
+`;

package/dist/es/components/cross-ref-check-modal/openModal.js

@@ -0,0 +1,31 @@
+/*!
+ * © 2026 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.
+ */
+import { getEditorProps } from '../../plugins/editor-props';
+import ReactSubView from '../../views/ReactSubView';
+import { CrossRefWarningModal } from './CrossRefWarningModal';
+export const openCrossRefWarningModal = (view, xrefGroups, onConfirm, onClose, selectAndScrollTo) => {
+    const { state } = view;
+    const props = getEditorProps(state);
+    const componentProps = {
+        xrefs: xrefGroups,
+        onConfirm,
+        onClose,
+        selectAndScrollTo,
+    };
+    const dialog = ReactSubView(props, CrossRefWarningModal, componentProps, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+    return dialog;
+};

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

@@ -0,0 +1,35 @@
+import { Category, Dialog, } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+import { getSupplementDisplayLabel, performDeleteSupplement, } from '../../lib/supplements';
+import { getEditorProps } from '../../plugins/editor-props';
+import ReactSubView from '../../views/ReactSubView';
+const DeleteSupplementDialog = ({ label, onDelete }) => {
+    const [isOpen, setOpen] = useState(true);
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: 'Delete supplement', message: 'Are you sure you want to delete \u201C{label}\u201D?', actions: {
+            primary: {
+                action: () => {
+                    onDelete();
+                    setOpen(false);
+                },
+                title: 'Delete',
+            },
+            secondary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+        } }));
+};
+export const openDeleteSupplementDialog = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (!node || node.type.name !== 'supplement') {
+        return;
+    }
+    const { state } = view;
+    const props = getEditorProps(state);
+    const label = getSupplementDisplayLabel(node, props.getFiles());
+    const dialog = ReactSubView(props, DeleteSupplementDialog, {
+        label,
+        onDelete: () => performDeleteSupplement(view, pos),
+    }, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+};

package/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, CameraIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, LeadingHalfLeftIcon, LeadingHeroImageIcon, LeadingLargeFloatIcon, LeadingSmallFloatIcon, LeadingWallpaperIcon, ORCIDIcon as ORCID, PlusIcon, ScrollIcon, SectionCategoryIcon, TickIcon, TranslateIcon, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, CameraIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, LeadingHalfLeftIcon, LeadingHeroImageIcon, LeadingLargeFloatIcon, LeadingSmallFloatIcon, LeadingWallpaperIcon, ORCIDIcon as ORCID, PlusIcon, ScrollIcon, SectionCategoryIcon, TickIcon, TranslateIcon, WebLinkIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
@@ -28,3 +28,4 @@ export const leadingHalfLeftIcon = renderIcon(LeadingHalfLeftIcon);
 export const fileMainDocumentIcon = renderIcon(FileMainDocumentIcon);
 export const tickIcon = renderIcon(TickIcon);
 export const ORCIDIcon = renderIcon(ORCID);
+export const webLinkIcon = renderIcon(WebLinkIcon);

package/dist/es/index.js

@@ -29,6 +29,8 @@ export * from './lib/capabilities';
 export * from './lib/navigation-utils';
 export * from './lib/comments';
 export * from './lib/files';
+export * from './lib/supplements';
+export { allowedHref } from './lib/url';
 export * from './lib/footnotes';
 export * from './lib/template';
 export * from './lib/doc';

package/dist/es/lib/files.js

@@ -1,6 +1,7 @@
 import { schema } from '@manuscripts/transform';
 import { findChildrenByType } from 'prosemirror-utils';
 import { isHidden } from './track-changes-utils';
+import { allowedHref } from './url';
 const MISSING_FILE = {
     id: '',
     name: '',
@@ -29,6 +30,7 @@ export const groupFiles = (doc, files) => {
     const fileMap = new Map(files.map((f) => [f.id, f]));
     const figures = [];
     const supplements = [];
+    const weblinks = [];
     const linkedFiles = [];
     const attachments = [];
     const getFile = (href) => {
@@ -91,11 +93,20 @@ export const groupFiles = (doc, files) => {
             }
         }
         if (node.type === schema.nodes.supplement) {
-            supplements.push({
-                node,
-                pos,
-                file: getFile(node.attrs.href),
-            });
+            const href = node.attrs.href;
+            if (allowedHref(href)) {
+                weblinks.push({
+                    node: node,
+                    pos,
+                });
+            }
+            else {
+                supplements.push({
+                    node,
+                    pos,
+                    file: getFile(href),
+                });
+            }
         }
         if (node.type === schema.nodes.attachment) {
             attachments.push({
@@ -108,6 +119,7 @@ export const groupFiles = (doc, files) => {
     return {
         figures,
         supplements,
+        weblinks,
         attachments,
         linkedFiles,
         others: [...fileMap.values()],

package/dist/es/lib/supplements.js

@@ -0,0 +1,55 @@
+/*!
+ * © 2026 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.
+ */
+import { schema, } from '@manuscripts/transform';
+import { findChildrenByType, findParentNodeClosestToPos } from 'prosemirror-utils';
+import { allowedHref } from './url';
+export const getSupplementDisplayLabel = (node, files) => {
+    const href = node.attrs.href;
+    if (allowedHref(href)) {
+        return href;
+    }
+    const file = files.find((f) => f.id === href);
+    return file?.name ?? 'Untitled supplement';
+};
+export const performDeleteSupplement = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (!node || node.type !== schema.nodes.supplement) {
+        return false;
+    }
+    const from = pos;
+    const to = from + node.nodeSize;
+    const { from: deleteFrom, to: deleteTo } = deleteSupplementAtPos(view.state.doc, from, to);
+    view.dispatch(view.state.tr.delete(deleteFrom, deleteTo));
+    return true;
+};
+export const deleteSupplementAtPos = (doc, from, to) => {
+    const resolvedPos = doc.resolve(from);
+    const supplementsNodeWithPos = findParentNodeClosestToPos(resolvedPos, (node) => node.type === schema.nodes.supplements);
+    if (!supplementsNodeWithPos) {
+        return { from, to, deleteWholeSection: false };
+    }
+    const { node: supplementsNode, pos: supplementsPos } = supplementsNodeWithPos;
+    const supplements = findChildrenByType(supplementsNode, schema.nodes.supplement);
+    const isDeletingLastSupplement = supplements.length === 1;
+    if (isDeletingLastSupplement) {
+        return {
+            from: supplementsPos,
+            to: supplementsPos + supplementsNode.nodeSize,
+            deleteWholeSection: true,
+        };
+    }
+    return { from, to, deleteWholeSection: false };
+};

package/dist/es/plugins/cross-references.js

@@ -13,13 +13,62 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { schema } from '@manuscripts/transform';
+import { schema, } from '@manuscripts/transform';
+import { trackChangesPluginKey } from '@manuscripts/track-changes-plugin';
 import { isEqual } from 'lodash';
-import { Plugin } from 'prosemirror-state';
+import { NodeSelection, Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { openCrossRefWarningModal } from '../components/cross-ref-check-modal/openModal';
 import { objectsKey } from './objects';
+let modalActive = false;
+let modalElement = null;
 export default () => {
+    let view = null;
     return new Plugin({
+        view(editorView) {
+            view = editorView;
+            return {
+                update(v) {
+                    view = v;
+                },
+                destroy() {
+                    view = null;
+                },
+            };
+        },
+        filterTransaction(tr, state) {
+            if (!view ||
+                !tr.docChanged ||
+                tr.getMeta(trackChangesPluginKey) ||
+                tr.getMeta('addToHistory') === false) {
+                return true;
+            }
+            if (modalActive) {
+                return false;
+            }
+            const targets = objectsKey.getState(state);
+            const xrefGroups = createXrefGroups(targets, state.doc, tr.doc);
+            if (xrefGroups.length === 0) {
+                return true;
+            }
+            modalActive = true;
+            const cleanup = () => {
+                modalActive = false;
+                if (modalElement) {
+                    modalElement.classList.remove('modal-bottom');
+                    modalElement.remove();
+                    modalElement = null;
+                }
+            };
+            const deletedIds = new Set(xrefGroups.map((g) => g.referenced.attrs.id));
+            const onClose = () => {
+                cleanup();
+            };
+            if (view) {
+                modalElement = openCrossRefWarningModal(view, xrefGroups, onConfirmCreator(view, cleanup, deletedIds, tr), onClose, selectAndScrollToCreator(view));
+            }
+            return false;
+        },
         state: {
             init() {
                 return DecorationSet.empty;
@@ -53,3 +102,114 @@ function createDecorations(doc) {
     });
     return decorations;
 }
+function createXrefGroups(targets, stateDoc, resultDoc) {
+    const newIds = new Set();
+    const xrefRids = new Set();
+    const xrefGroups = [];
+    resultDoc.descendants((node) => {
+        if (node.attrs.id) {
+            newIds.add(node.attrs.id);
+        }
+        if (node.type === schema.nodes.cross_reference) {
+            for (const rid of node.attrs.rids) {
+                xrefRids.add(rid);
+            }
+        }
+    });
+    const orphanedRids = new Set();
+    for (const rid of xrefRids) {
+        if (!newIds.has(rid)) {
+            orphanedRids.add(rid);
+        }
+    }
+    if (orphanedRids.size === 0) {
+        return [];
+    }
+    const referencedNodes = new Map();
+    const xrefsByRid = new Map();
+    stateDoc.descendants((node, pos) => {
+        const id = node.attrs.id;
+        if (id && orphanedRids.has(id)) {
+            referencedNodes.set(id, node);
+        }
+        if (node.type === schema.nodes.cross_reference) {
+            for (const rid of node.attrs.rids) {
+                if (orphanedRids.has(rid)) {
+                    let entries = xrefsByRid.get(rid);
+                    if (!entries) {
+                        entries = [];
+                        xrefsByRid.set(rid, entries);
+                    }
+                    entries.push([node, stateDoc.resolve(pos)]);
+                }
+            }
+        }
+    });
+    for (const [id, referenced] of referencedNodes) {
+        const xrefs = xrefsByRid.get(id);
+        if (xrefs?.length) {
+            const label = targets.get(referenced.attrs.id)?.label || '';
+            xrefGroups.push({ referenced, label, xrefs });
+        }
+    }
+    return xrefGroups;
+}
+const onConfirmCreator = (view, cleanup, deletedIds, tr) => () => {
+    cleanup();
+    if (!view) {
+        return;
+    }
+    const newTr = view.state.tr;
+    for (const step of tr.steps) {
+        const result = step.apply(newTr.doc);
+        if (result.failed) {
+            console.warn('Cross-ref deletion warning: could not replay step —', result.failed);
+            return;
+        }
+        newTr.step(step);
+    }
+    const xrefPositions = [];
+    newTr.doc.descendants((node, pos) => {
+        if (node.type === schema.nodes.cross_reference) {
+            const rids = node.attrs.rids;
+            if (rids.some((rid) => deletedIds.has(rid))) {
+                xrefPositions.push({ from: pos, to: pos + node.nodeSize });
+            }
+        }
+    });
+    for (let i = xrefPositions.length - 1; i >= 0; i--) {
+        const { from, to } = xrefPositions[i];
+        newTr.delete(from, to);
+    }
+    view.dispatch(newTr);
+};
+const selectAndScrollToCreator = (view) => ($pos) => {
+    if (!view) {
+        return;
+    }
+    const selTr = view.state.tr;
+    selTr.setSelection(NodeSelection.create(view.state.doc, $pos.pos));
+    view.focus();
+    view.dispatch(selTr);
+    let scrollable = view.dom.parentElement;
+    while (scrollable != null &&
+        scrollable.scrollHeight <= scrollable.clientHeight) {
+        scrollable = scrollable.parentElement;
+    }
+    if (!scrollable) {
+        return;
+    }
+    const coords = view.coordsAtPos($pos.pos);
+    const containerRect = scrollable.getBoundingClientRect();
+    const offsetInContainer = coords.top - containerRect.top + scrollable.scrollTop;
+    const containerHeight = scrollable.clientHeight;
+    const scrollTo = offsetInContainer - containerHeight * 0.75;
+    if (scrollTo < 0) {
+        modalElement?.classList.add('modal-bottom');
+        scrollable.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    else {
+        modalElement?.classList.remove('modal-bottom');
+        scrollable.scrollTo({ top: scrollTo, behavior: 'smooth' });
+    }
+};

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.13.19';
+export const VERSION = '3.15.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/caption_title.js

@@ -20,6 +20,7 @@ export class CaptionTitleView extends BaseNodeView {
         super(...arguments);
         this.initialise = () => {
             this.createDOM();
+            this.updateContents();
         };
     }
     createDOM() {

package/dist/es/views/supplement.js

@@ -15,8 +15,9 @@
  */
 import { getFileIcon } from '@manuscripts/style-guide';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { draggableIcon } from '../icons';
+import { draggableIcon, webLinkIcon } from '../icons';
 import { findNodeByID } from '../lib/doc';
+import { allowedHref } from '../lib/url';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 export class SupplementView extends BaseNodeView {
@@ -140,8 +141,27 @@ export class SupplementView extends BaseNodeView {
         this.supplementInfoEl = document.createElement('div');
         this.supplementInfoEl.classList.add('supplement-file-info');
         this.supplementInfoEl.contentEditable = 'false';
+        const href = this.node.attrs.href;
+        if (allowedHref(href)) {
+            const iconElement = document.createElement('span');
+            iconElement.classList.add('supplement-file-icon');
+            iconElement.innerHTML = webLinkIcon;
+            this.supplementInfoEl.appendChild(iconElement);
+            const urlLink = document.createElement('a');
+            urlLink.classList.add('supplement-weblink-url');
+            urlLink.textContent = href;
+            if (allowedHref(href)) {
+                urlLink.href = href;
+                urlLink.target = '_blank';
+                urlLink.rel = 'noopener noreferrer';
+            }
+            urlLink.addEventListener('mousedown', (e) => e.stopPropagation());
+            this.supplementInfoEl.appendChild(urlLink);
+            this.dom.appendChild(this.supplementInfoEl);
+            return;
+        }
         const files = this.props.getFiles();
-        const file = files.find((f) => f.id === this.node.attrs.href);
+        const file = files.find((f) => f.id === href);
         if (file) {
             const iconElement = document.createElement('span');
             iconElement.classList.add('supplement-file-icon');

package/dist/types/commands.d.ts

@@ -34,6 +34,8 @@ export declare const insertFigure: (file: FileAttachment, state: ManuscriptEdito
 export declare const insertEmbed: (state: ManuscriptEditorState, dispatch?: Dispatch, attrs?: Attrs) => boolean;
 export declare const insertTable: (config: TableConfig, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertSupplement: (file: FileAttachment, view: ManuscriptEditorView, setSelection?: boolean) => boolean;
+export declare const insertSupplementWeblink: (url: string, title: string, view: ManuscriptEditorView) => boolean;
+export declare const updateSupplementWeblink: (pos: number, url: string, title: string, view: ManuscriptEditorView) => boolean;
 export declare const insertAttachment: (file: FileAttachment, state: ManuscriptEditorState, type: string, dispatch?: Dispatch) => boolean;
 export declare const insertBlock: (nodeType: ManuscriptNodeType) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const deleteBlock: (typeToDelete: string) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;