@manuscripts/body-editor 3.13.18 → 3.14.0

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.18';
+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/hero_image.js

@@ -13,25 +13,71 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { arrowUp } from '../icons';
+import { arrowUp, leadingHalfLeftIcon, leadingHeroImageIcon, leadingLargeFloatIcon, leadingSmallFloatIcon, leadingWallpaperIcon, } from '../icons';
 import { handleEnterKey } from '../lib/navigation-utils';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+const LAYOUT_OPTIONS_CONFIG = [
+    {
+        label: 'Hero Image',
+        icon: leadingHeroImageIcon,
+        attr: 'leading',
+    },
+    {
+        label: 'Float Image - Small',
+        icon: leadingSmallFloatIcon,
+        attr: 'leading-small-float',
+    },
+    {
+        label: 'Float Image - Large',
+        icon: leadingLargeFloatIcon,
+        attr: 'leading-large-float',
+    },
+    {
+        label: 'Wallpaper Image',
+        icon: leadingWallpaperIcon,
+        attr: 'leading-wallpaper',
+    },
+    {
+        label: 'Half Image',
+        icon: leadingHalfLeftIcon,
+        attr: 'leading-half-left',
+    },
+];
 export class HeroImageView extends BlockView {
     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');
@@ -51,10 +97,71 @@ export class HeroImageView extends BlockView {
             heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         };
         heroImageToggleBtn.onclick = handleToggle;
-        heroImageToggleBtn.addEventListener('keydown', handleEnterKey(handleToggle));
+        heroImageToggleBtn.addEventListener('keydown', 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 = 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', 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();
+    }
 }
 export default createNodeView(HeroImageView);

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

@@ -16,6 +16,12 @@ export declare const fileCorruptedIcon: string;
 export declare const draggableIcon: string;
 export declare const translateIcon: string;
 export declare const linkIcon: string;
+export declare const leadingHeroImageIcon: string;
+export declare const leadingSmallFloatIcon: string;
+export declare const leadingLargeFloatIcon: string;
+export declare const leadingWallpaperIcon: string;
+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.18";
+export declare const VERSION = "3.14.0";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -13,15 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FigureElementNode } from '@manuscripts/transform';
+import { HeroImageNode } from '@manuscripts/transform';
 import { Trackable } from '../types';
 import BlockView from './block_view';
-export declare class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
+export declare class HeroImageView extends BlockView<Trackable<HeroImageNode>> {
     private container;
+    private layoutOptions;
+    private abortController;
     private collapsed;
+    private layoutPanelCollapsed;
     ignoreMutation: () => boolean;
     createElement: () => void;
     createPanel(): HTMLDivElement;
+    createLayoutPanel(): HTMLDivElement;
+    createLayoutOptions(): HTMLDivElement;
+    private onSelectOption;
+    destroy(): void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeroImageView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.13.18",
+  "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.5",
+    "@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

@@ -29,12 +29,18 @@ import {
   ImageRightIcon,
   LinkIcon,
   LockIcon,
+  LeadingHalfLeftIcon,
+  LeadingHeroImageIcon,
+  LeadingLargeFloatIcon,
+  LeadingSmallFloatIcon,
+  LeadingWallpaperIcon,
   ORCIDIcon as ORCID,
   PlusIcon,
   ScrollIcon,
   SectionCategoryIcon,
   TickIcon,
   TranslateIcon,
+  WebLinkIcon,
 } from '@manuscripts/style-guide'
 import React, { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
@@ -59,6 +65,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/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()],