@manuscripts/body-editor 3.13.19 → 3.14.0

package/dist/cjs/commands.js

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = void 0;
+exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.updateSupplementWeblink = exports.insertSupplementWeblink = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = void 0;
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
@@ -312,6 +312,34 @@ const insertSupplement = (file, view, setSelection = true) => {
     return true;
 };
 exports.insertSupplement = insertSupplement;
+const insertSupplementWeblink = (url, title, view) => {
+    const supplement = transform_1.schema.nodes.supplement.createAndFill({
+        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement),
+        href: url
+    }, createAndFillCaption());
+    const tr = view.state.tr;
+    const { pos } = (0, doc_1.upsertSupplementsSection)(tr, supplement);
+    tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr.scrollIntoView());
+    return true;
+};
+exports.insertSupplementWeblink = insertSupplementWeblink;
+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;
+};
+exports.updateSupplementWeblink = updateSupplementWeblink;
 const insertAttachment = (file, state, type, dispatch) => {
     const tr = state.tr;
     const attachments = (0, doc_1.insertAttachmentsNode)(tr);

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

@@ -0,0 +1,75 @@
+"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 () {
+    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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openDeleteSupplementDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const supplements_1 = require("../../lib/supplements");
+const editor_props_1 = require("../../plugins/editor-props");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
+const DeleteSupplementDialog = ({ label, onDelete }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.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',
+            },
+        } }));
+};
+const openDeleteSupplementDialog = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (!node || node.type.name !== 'supplement') {
+        return;
+    }
+    const { state } = view;
+    const props = (0, editor_props_1.getEditorProps)(state);
+    const label = (0, supplements_1.getSupplementDisplayLabel)(node, props.getFiles());
+    const dialog = (0, ReactSubView_1.default)(props, DeleteSupplementDialog, {
+        label,
+        onDelete: () => (0, supplements_1.performDeleteSupplement)(view, pos),
+    }, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+};
+exports.openDeleteSupplementDialog = openDeleteSupplementDialog;

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.leadingHalfLeftIcon = exports.leadingWallpaperIcon = exports.leadingLargeFloatIcon = exports.leadingSmallFloatIcon = exports.leadingHeroImageIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
+exports.webLinkIcon = exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.leadingHalfLeftIcon = exports.leadingWallpaperIcon = exports.leadingLargeFloatIcon = exports.leadingSmallFloatIcon = exports.leadingHeroImageIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = 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");
@@ -31,3 +31,4 @@ exports.leadingHalfLeftIcon = renderIcon(style_guide_1.LeadingHalfLeftIcon);
 exports.fileMainDocumentIcon = renderIcon(style_guide_1.FileMainDocumentIcon);
 exports.tickIcon = renderIcon(style_guide_1.TickIcon);
 exports.ORCIDIcon = renderIcon(style_guide_1.ORCIDIcon);
+exports.webLinkIcon = renderIcon(style_guide_1.WebLinkIcon);

package/dist/cjs/index.js

@@ -32,7 +32,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.affiliationLabel = exports.authorLabel = exports.bibliographyItemTypes = exports.metadata = exports.getClosestMatch = exports.getNewMatch = exports.detectInconsistencyPluginKey = exports.searchReplacePluginKey = exports.bibliographyPluginKey = exports.footnotesPluginKey = exports.objectsPluginKey = exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.openKeyboardShortcuts = exports.KeyboardShortcutsModal = exports.LanguageDropdown = exports.TypeSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.affiliationLabel = exports.authorLabel = exports.bibliographyItemTypes = exports.metadata = exports.getClosestMatch = exports.getNewMatch = exports.detectInconsistencyPluginKey = exports.searchReplacePluginKey = exports.bibliographyPluginKey = exports.footnotesPluginKey = exports.objectsPluginKey = exports.selectedSuggestionKey = exports.allowedHref = exports.PopperManager = exports.CollabProvider = exports.openKeyboardShortcuts = exports.KeyboardShortcutsModal = exports.LanguageDropdown = exports.TypeSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
 __exportStar(require("./commands"), exports);
 var ManuscriptOutline_1 = require("./components/outline/ManuscriptOutline");
 Object.defineProperty(exports, "ManuscriptOutline", { enumerable: true, get: function () { return ManuscriptOutline_1.ManuscriptOutline; } });
@@ -57,6 +57,9 @@ __exportStar(require("./lib/capabilities"), exports);
 __exportStar(require("./lib/navigation-utils"), exports);
 __exportStar(require("./lib/comments"), exports);
 __exportStar(require("./lib/files"), exports);
+__exportStar(require("./lib/supplements"), exports);
+var url_1 = require("./lib/url");
+Object.defineProperty(exports, "allowedHref", { enumerable: true, get: function () { return url_1.allowedHref; } });
 __exportStar(require("./lib/footnotes"), exports);
 __exportStar(require("./lib/template"), exports);
 __exportStar(require("./lib/doc"), exports);

package/dist/cjs/lib/files.js

@@ -5,6 +5,7 @@ exports.memoGroupFiles = memoGroupFiles;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const track_changes_utils_1 = require("./track-changes-utils");
+const url_1 = require("./url");
 const MISSING_FILE = {
     id: '',
     name: '',
@@ -33,6 +34,7 @@ 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) => {
@@ -95,11 +97,20 @@ const groupFiles = (doc, files) => {
             }
         }
         if (node.type === transform_1.schema.nodes.supplement) {
-            supplements.push({
-                node,
-                pos,
-                file: getFile(node.attrs.href),
-            });
+            const href = node.attrs.href;
+            if ((0, url_1.allowedHref)(href)) {
+                weblinks.push({
+                    node: node,
+                    pos,
+                });
+            }
+            else {
+                supplements.push({
+                    node,
+                    pos,
+                    file: getFile(href),
+                });
+            }
         }
         if (node.type === transform_1.schema.nodes.attachment) {
             attachments.push({
@@ -112,6 +123,7 @@ const groupFiles = (doc, files) => {
     return {
         figures,
         supplements,
+        weblinks,
         attachments,
         linkedFiles,
         others: [...fileMap.values()],

package/dist/cjs/lib/supplements.js

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

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.14.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/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/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.13.19';
+export const VERSION = '3.14.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;

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

@@ -0,0 +1,2 @@
+import { ManuscriptEditorView } from '@manuscripts/transform';
+export declare const openDeleteSupplementDialog: (view: ManuscriptEditorView, pos: number) => void;

package/dist/types/icons.d.ts

@@ -24,3 +24,4 @@ export declare const leadingHalfLeftIcon: string;
 export declare const fileMainDocumentIcon: string;
 export declare const tickIcon: string;
 export declare const ORCIDIcon: string;
+export declare const webLinkIcon: string;

package/dist/types/index.d.ts

@@ -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/types/lib/files.d.ts

@@ -1,4 +1,5 @@
 import { ManuscriptNode } from '@manuscripts/transform';
+import { NodeWeblink } from './supplements';
 export type FileAttachment = {
     id: string;
     name: string;
@@ -18,6 +19,7 @@ export type ElementFiles = {
 export type ManuscriptFiles = {
     figures: ElementFiles[];
     supplements: NodeFile[];
+    weblinks: NodeWeblink[];
     attachments: NodeFile[];
     linkedFiles: NodeFile[];
     others: FileAttachment[];

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

@@ -0,0 +1,30 @@
+/*!
+ * © 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 { ManuscriptEditorView, ManuscriptNode, SupplementNode } from '@manuscripts/transform';
+export type NodeWeblink = {
+    node: SupplementNode;
+    pos: number;
+};
+export declare const getSupplementDisplayLabel: (node: SupplementNode, files: {
+    id: string;
+    name: string;
+}[]) => string;
+export declare const performDeleteSupplement: (view: ManuscriptEditorView, pos: number) => boolean;
+export declare const deleteSupplementAtPos: (doc: ManuscriptNode, from: number, to: number) => {
+    from: number;
+    to: number;
+    deleteWholeSection: boolean;
+};

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.13.19";
+export declare const VERSION = "3.14.0";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.13.19",
+  "version": "3.14.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.6.6",
+    "@manuscripts/style-guide": "3.7.0",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.4.6",
     "@popperjs/core": "2.11.8",

package/src/commands.ts

@@ -517,6 +517,48 @@ export const insertSupplement = (
   return true
 }
 
+export const insertSupplementWeblink = (
+  url: string,
+  title: string,
+  view: ManuscriptEditorView
+) => {
+  const supplement = schema.nodes.supplement.createAndFill(
+    {
+      id: generateNodeID(schema.nodes.supplement),
+      href: url
+    },
+    createAndFillCaption()
+  ) as SupplementNode
+
+  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: number,
+  url: string,
+  title: string,
+  view: ManuscriptEditorView
+) => {
+  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: FileAttachment,
   state: ManuscriptEditorState,

package/src/components/views/DeleteSupplementDialog.tsx

@@ -0,0 +1,88 @@
+/*!
+ * © 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 {
+  Category,
+  Dialog,
+} from '@manuscripts/style-guide'
+import { ManuscriptEditorView, SupplementNode } from '@manuscripts/transform'
+import React, { useState } from 'react'
+
+import {
+  getSupplementDisplayLabel,
+  performDeleteSupplement,
+} from '../../lib/supplements'
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+
+const DeleteSupplementDialog: React.FC<{
+  label: string
+  onDelete: () => void
+}> = ({ label, onDelete }) => {
+  const [isOpen, setOpen] = useState(true)
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      category={Category.confirmation}
+      header='Delete supplement'
+      message='Are you sure you want to delete &ldquo;{label}&rdquo;?'
+      actions={{
+        primary: {
+          action: () => {
+            onDelete()
+            setOpen(false)
+          },
+          title: 'Delete',
+        },
+        secondary: {
+          action: () => setOpen(false),
+          title: 'Cancel',
+        },
+      }}
+    />
+  )
+}
+
+export const openDeleteSupplementDialog = (
+  view: ManuscriptEditorView,
+  pos: number
+) => {
+  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 as SupplementNode,
+    props.getFiles()
+  )
+
+  const dialog = ReactSubView(
+    props,
+    DeleteSupplementDialog,
+    {
+      label,
+      onDelete: () => performDeleteSupplement(view, pos),
+    },
+    state.doc,
+    () => 0,
+    view
+  )
+
+  document.body.appendChild(dialog)
+}

package/src/icons.ts

@@ -40,6 +40,7 @@ import {
   SectionCategoryIcon,
   TickIcon,
   TranslateIcon,
+  WebLinkIcon,
 } from '@manuscripts/style-guide'
 import React, { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
@@ -72,3 +73,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/src/index.ts

@@ -33,6 +33,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/src/lib/files.ts

@@ -13,11 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ManuscriptNode, schema } from '@manuscripts/transform'
+import { ManuscriptNode, schema, SupplementNode } from '@manuscripts/transform'
 import { findChildrenByType } from 'prosemirror-utils'
 
 import { isHidden } from './track-changes-utils'
 
+import { NodeWeblink } from './supplements'
+import { allowedHref } from './url'
+
 export type FileAttachment = {
   id: string
   name: string
@@ -40,6 +43,7 @@ export type ElementFiles = {
 export type ManuscriptFiles = {
   figures: ElementFiles[]
   supplements: NodeFile[]
+  weblinks: NodeWeblink[]
   attachments: NodeFile[]
   linkedFiles: NodeFile[]
   others: FileAttachment[]
@@ -95,6 +99,7 @@ export const groupFiles = (
   const fileMap = new Map(files.map((f) => [f.id, f]))
   const figures: ElementFiles[] = []
   const supplements: NodeFile[] = []
+  const weblinks: NodeWeblink[] = []
   const linkedFiles: NodeFile[] = []
   const attachments: NodeFile[] = []
 
@@ -161,11 +166,19 @@ export const groupFiles = (
       }
     }
     if (node.type === schema.nodes.supplement) {
-      supplements.push({
-        node,
-        pos,
-        file: getFile(node.attrs.href),
-      })
+      const href = node.attrs.href as string
+      if (allowedHref(href)) {
+        weblinks.push({
+          node: node as SupplementNode,
+          pos,
+        })
+      } else {
+        supplements.push({
+          node,
+          pos,
+          file: getFile(href),
+        })
+      }
     }
     if (node.type === schema.nodes.attachment) {
       attachments.push({
@@ -179,6 +192,7 @@ export const groupFiles = (
   return {
     figures,
     supplements,
+    weblinks,
     attachments,
     linkedFiles,
     others: [...fileMap.values()],

package/src/lib/supplements.ts

@@ -0,0 +1,97 @@
+/*!
+ * © 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 {
+  ManuscriptEditorView,
+  ManuscriptNode,
+  schema,
+  SupplementNode,
+} from '@manuscripts/transform'
+import { findChildrenByType, findParentNodeClosestToPos } from 'prosemirror-utils'
+
+import { allowedHref } from './url'
+
+export type NodeWeblink = {
+  node: SupplementNode
+  pos: number
+}
+
+export const getSupplementDisplayLabel = (
+  node: SupplementNode,
+  files: { id: string; name: string }[]
+): string => {
+  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: ManuscriptEditorView,
+  pos: number
+): boolean => {
+  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: ManuscriptNode,
+  from: number,
+  to: number
+) => {
+  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/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.13.19';
+export const VERSION = '3.14.0';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/caption_title.ts

@@ -22,7 +22,9 @@ import { createNodeView } from './creators'
 export class CaptionTitleView extends BaseNodeView<CaptionTitleNode> {
   public initialise = () => {
     this.createDOM()
+    this.updateContents()
   }
+
   protected createDOM() {
     this.dom = document.createElement('label')
     this.dom.className = 'caption-title placeholder'

package/src/views/supplement.ts

@@ -18,12 +18,14 @@ import { getFileIcon } from '@manuscripts/style-guide'
 import { SupplementNode } from '@manuscripts/transform'
 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 { Trackable } from '../types'
 import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
 
+
 export class SupplementView extends BaseNodeView<Trackable<SupplementNode>> {
   private supplementInfoEl: HTMLDivElement
   private static currentDragSupplementId: string | null = null
@@ -188,9 +190,32 @@ export class SupplementView extends BaseNodeView<Trackable<SupplementNode>> {
     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
+    }
+
     // Get the file from the file management system
     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')

package/src/views/supplements.ts

@@ -32,6 +32,7 @@ export class SupplementsView extends BlockView<Trackable<SupplementsNode>> {
     this.toggleButton = document.createElement('button')
     this.toggleButton.classList.add('supplements-toggle-btn', 'button-reset')
     this.toggleButton.innerHTML = arrowUp
+    
     const handleToggle = () => {
       this.collapsed = !this.collapsed
       this.toggleContent()
@@ -62,4 +63,4 @@ export class SupplementsView extends BlockView<Trackable<SupplementsNode>> {
   }
 }
 
-export default createNodeView(SupplementsView)
+export default createNodeView(SupplementsView)

package/styles/Editor.css

@@ -1248,6 +1248,17 @@
   font-size: 14px;
 }
 
+.ProseMirror .supplement-weblink-url {
+  font-size: 14px;
+  color: #20aedf;
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.ProseMirror .supplement-weblink-url:hover {
+  text-decoration: underline;
+}
+
 .ProseMirror .supplements-toggle-btn {
   background: none;
   border: none;
@@ -1300,6 +1311,8 @@
   padding: 8px 12px !important;
   font-size: 14px;
   display: flex;
+  align-items: center;
+  gap: 8px;
   margin-top: -1px;
   color: #6e6e6e !important;
 }