@manuscripts/body-editor 3.13.18 → 3.14.0

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

@@ -14,17 +14,55 @@
  * limitations under the License.
  */
 
-import { FigureElementNode } from '@manuscripts/transform'
-
-import { arrowUp } from '../icons'
+import { HeroImageNode } from '@manuscripts/transform'
+
+import {
+  arrowUp,
+  leadingHalfLeftIcon,
+  leadingHeroImageIcon,
+  leadingLargeFloatIcon,
+  leadingSmallFloatIcon,
+  leadingWallpaperIcon,
+} from '../icons'
 import { handleEnterKey } from '../lib/navigation-utils'
 import { Trackable } from '../types'
 import BlockView from './block_view'
 import { createNodeView } from './creators'
 
-export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
+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<Trackable<HeroImageNode>> {
   private container: HTMLElement
+  private layoutOptions: HTMLElement
+  private abortController: AbortController
   private collapsed = false
+  private layoutPanelCollapsed = false
 
   public ignoreMutation = () => true
 
@@ -33,7 +71,17 @@ export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
     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')
@@ -65,12 +113,103 @@ export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
     }
 
     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
+  }
+
+  private onSelectOption = (e: Event) => {
+    const target = e.target as HTMLInputElement
+    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)
+    }
+  }
+
+  destroy() {
+    this.abortController?.abort()
+    super.destroy()
+  }
 }
 
 export default createNodeView(HeroImageView)

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/AdvancedEditor.css

@@ -1754,6 +1754,63 @@ th:hover > .table-context-menu-button,
   border-bottom: 1px solid #c9c9c9;
 }
 
+.ProseMirror .layout-header {
+  font-size: 18px;
+  font-weight: 400;
+  padding: 4px 3px 4px 0;
+  margin: 8px;
+  background: unset;
+  border: none;
+}
+
+.ProseMirror .layout-options-group {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 0;
+  margin: 0 8px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.ProseMirror .layout-option-image {
+  width: 120px;
+  height: 114px;
+  margin-bottom: 8px;
+  border-radius: 5px 5px 9px 9px;
+  border: 1px solid #e2e2e2;
+  background: #fafafa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ProseMirror .layout-options-group .layout-option-label-wrapper {
+  display: flex;
+  width: 120px;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.ProseMirror .layout-options-group input[type="radio"] {
+  accent-color: #1a9bc7;
+  width: 16px;
+  height: 16px;
+}
+
+.ProseMirror .layout-options-group input[type="radio"]:focus-visible {
+  outline: 1px solid var(--focus-outline-color);
+  outline-offset: 2px;
+}
+
+.ProseMirror .layout-option-label {
+  color: #353535;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  user-select: none;
+}
+
 .hero-image-container .figure-block {
   border: none !important;
   padding: 8px;

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;
 }