@manuscripts/body-editor 3.13.18 → 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.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");
@@ -23,6 +23,12 @@ exports.fileCorruptedIcon = renderIcon(style_guide_1.FileCorruptedIcon);
 exports.draggableIcon = renderIcon(style_guide_1.DraggableIcon);
 exports.translateIcon = renderIcon(style_guide_1.TranslateIcon);
 exports.linkIcon = renderIcon(style_guide_1.LinkIcon);
+exports.leadingHeroImageIcon = renderIcon(style_guide_1.LeadingHeroImageIcon);
+exports.leadingSmallFloatIcon = renderIcon(style_guide_1.LeadingSmallFloatIcon);
+exports.leadingLargeFloatIcon = renderIcon(style_guide_1.LeadingLargeFloatIcon);
+exports.leadingWallpaperIcon = renderIcon(style_guide_1.LeadingWallpaperIcon);
+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.18';
+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/hero_image.js

@@ -23,21 +23,67 @@ const icons_1 = require("../icons");
 const navigation_utils_1 = require("../lib/navigation-utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const LAYOUT_OPTIONS_CONFIG = [
+    {
+        label: 'Hero Image',
+        icon: icons_1.leadingHeroImageIcon,
+        attr: 'leading',
+    },
+    {
+        label: 'Float Image - Small',
+        icon: icons_1.leadingSmallFloatIcon,
+        attr: 'leading-small-float',
+    },
+    {
+        label: 'Float Image - Large',
+        icon: icons_1.leadingLargeFloatIcon,
+        attr: 'leading-large-float',
+    },
+    {
+        label: 'Wallpaper Image',
+        icon: icons_1.leadingWallpaperIcon,
+        attr: 'leading-wallpaper',
+    },
+    {
+        label: 'Half Image',
+        icon: icons_1.leadingHalfLeftIcon,
+        attr: 'leading-half-left',
+    },
+];
 class HeroImageView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.collapsed = false;
+        this.layoutPanelCollapsed = false;
         this.ignoreMutation = () => true;
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block', 'hero-image-container');
             this.dom.appendChild(this.container);
+            this.abortController = new AbortController();
             this.container.appendChild(this.createPanel());
+            this.container.appendChild(this.createLayoutPanel());
+            this.layoutOptions = this.createLayoutOptions();
+            this.layoutOptions.addEventListener('change', this.onSelectOption, {
+                signal: this.abortController.signal,
+            });
+            this.container.appendChild(this.layoutOptions);
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('figure-block', 'hero-image-figure');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.container.appendChild(this.contentDOM);
         };
+        this.onSelectOption = (e) => {
+            const target = e.target;
+            if (target && target.type === 'radio' && target.name === 'layout-option') {
+                const { state, dispatch } = this.view;
+                const tr = state.tr.setNodeMarkup(this.getPos(), undefined, {
+                    ...this.node.attrs,
+                    type: target.value,
+                });
+                dispatch(tr);
+            }
+        };
     }
     createPanel() {
         const panel = document.createElement('div');
@@ -57,11 +103,72 @@ class HeroImageView extends block_view_1.default {
             heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         };
         heroImageToggleBtn.onclick = handleToggle;
-        heroImageToggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle));
+        heroImageToggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle), {
+            signal: this.abortController.signal,
+        });
         panel.appendChild(label);
         panel.appendChild(heroImageToggleBtn);
         return panel;
     }
+    createLayoutPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('panel-header', 'layout-header');
+        const label = document.createElement('span');
+        label.textContent = 'Layout';
+        label.contentEditable = 'false';
+        const toggleBtn = document.createElement('button');
+        toggleBtn.classList.add('toggle-btn', 'button-reset');
+        toggleBtn.innerHTML = icons_1.arrowUp;
+        toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed);
+        const handleToggle = () => {
+            this.layoutPanelCollapsed = !this.layoutPanelCollapsed;
+            if (this.layoutOptions) {
+                this.layoutOptions.style.display = this.layoutPanelCollapsed
+                    ? 'none'
+                    : '';
+            }
+            toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed);
+        };
+        toggleBtn.onclick = handleToggle;
+        toggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle), {
+            signal: this.abortController.signal,
+        });
+        panel.appendChild(label);
+        panel.appendChild(toggleBtn);
+        return panel;
+    }
+    createLayoutOptions() {
+        const can = this.props.getCapabilities();
+        const optionsGroup = document.createElement('div');
+        optionsGroup.className = 'layout-options-group';
+        LAYOUT_OPTIONS_CONFIG.forEach(({ label, icon, attr }) => {
+            const image = document.createElement('span');
+            image.className = 'layout-option-image';
+            image.innerHTML = icon;
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.name = 'layout-option';
+            input.value = attr;
+            input.disabled = !can.editMetadata;
+            input.checked = attr === this.node.attrs.type;
+            const inputLabel = document.createElement('span');
+            inputLabel.className = 'layout-option-label';
+            inputLabel.textContent = label;
+            const wrapper = document.createElement('span');
+            wrapper.className = 'layout-option-label-wrapper';
+            wrapper.append(input, inputLabel);
+            const container = document.createElement('div');
+            container.className = 'layout-option';
+            container.append(image, wrapper);
+            optionsGroup.appendChild(container);
+        });
+        optionsGroup.contentEditable = 'false';
+        return optionsGroup;
+    }
+    destroy() {
+        this.abortController?.abort();
+        super.destroy();
+    }
 }
 exports.HeroImageView = HeroImageView;
 exports.default = (0, creators_1.createNodeView)(HeroImageView);

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, 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));
@@ -20,6 +20,12 @@ export const fileCorruptedIcon = renderIcon(FileCorruptedIcon);
 export const draggableIcon = renderIcon(DraggableIcon);
 export const translateIcon = renderIcon(TranslateIcon);
 export const linkIcon = renderIcon(LinkIcon);
+export const leadingHeroImageIcon = renderIcon(LeadingHeroImageIcon);
+export const leadingSmallFloatIcon = renderIcon(LeadingSmallFloatIcon);
+export const leadingLargeFloatIcon = renderIcon(LeadingLargeFloatIcon);
+export const leadingWallpaperIcon = renderIcon(LeadingWallpaperIcon);
+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()],