@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/lib/media.ts

@@ -0,0 +1,334 @@
+/*!
+ * © 2019 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,
+} from '@manuscripts/transform'
+
+import { openEmbedDialog } from '../components/toolbar/InsertEmbedDialog'
+import { handleEnterKey } from './navigation-utils'
+import {
+  FigureOptions,
+  FigureOptionsProps,
+} from '../components/views/FigureDropdown'
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import { fileCorruptedIcon } from '../icons'
+import { Trackable } from '../types'
+import ReactSubView from '../views/ReactSubView'
+import { FileAttachment } from './files'
+
+export const createUnsupportedFormat = (
+  filename: string,
+  canEdit: boolean
+): HTMLElement => {
+  const element = document.createElement('div')
+  element.classList.add('figure', 'placeholder')
+
+  const instructions = document.createElement('div')
+  instructions.classList.add('instructions')
+
+  const iconHtml = fileCorruptedIcon
+
+  instructions.innerHTML = `
+    <div>
+      <div class="unsupported-icon-wrapper">${iconHtml}</div>
+      <div>${filename}</div>
+      <div class="unsupported-format-label">
+        Unsupported file format
+      </div>
+      <div>
+        ${canEdit ? 'Click to add media' : 'No media here yet…'}
+      </div>
+    </div>
+  `
+
+  element.appendChild(instructions)
+  return element
+}
+
+export enum MediaType {
+  Media = 'media',
+  Figure = 'figure',
+  ExternalLink = 'external_link',
+}
+
+const MediaLabels: Record<MediaType, string> = {
+  [MediaType.Media]: 'media',
+  [MediaType.Figure]: 'figure',
+  [MediaType.ExternalLink]: 'a file to link',
+}
+
+export const createMediaPlaceholder = (
+  mediaType: MediaType = MediaType.Media,
+  view?: ManuscriptEditorView,
+  getPos?: () => number,
+  props?: EditorProps
+): HTMLElement => {
+  const element = document.createElement('div')
+  element.classList.add('figure', 'placeholder')
+  element.tabIndex = 0
+  const instructions = document.createElement('div')
+  instructions.classList.add('instructions')
+
+  instructions.innerHTML = `
+    <div class="placeholder-content">
+      <p>Drag or click here to upload ${MediaLabels[mediaType]} <br>
+      ${
+        mediaType === MediaType.ExternalLink
+          ? ` or drag items here from the file <a data-action='open-other-files'>'Other files'</a> in the inspector.</p>`
+          : `or drag items here from the file inspector tabs <br>
+      <a data-action='open-other-files'>'Other files'</a> |
+      <a data-action='open-supplement-files'>'Supplements'</a>`
+      }
+
+      ${
+        mediaType === MediaType.Media && view && getPos
+          ? "| <a data-action='add-external-link'>'External link'</a>"
+          : ''
+      }
+      </p>
+    </div>
+  `
+
+  if (mediaType === MediaType.Media && view && getPos) {
+    const embedLink = instructions.querySelector(
+      "[data-action='add-external-link']"
+    ) as HTMLElement
+    embedLink.tabIndex = 0
+    if (embedLink) {
+      embedLink.addEventListener('click', (e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        openEmbedDialog(view, getPos())
+      })
+      embedLink.addEventListener(
+        'keydown',
+        handleEnterKey((e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          openEmbedDialog(view, getPos())
+        })
+      )
+    }
+  }
+
+  const links = instructions.querySelectorAll<HTMLElement>(
+    `[data-action='open-other-files'], [data-action='open-supplement-files'] `
+  )
+  links.forEach((link) => {
+    link.tabIndex = 0
+    link.addEventListener(
+      'keydown',
+      handleEnterKey((event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        props?.onEditorClick(event)
+      })
+    )
+  })
+
+  element.appendChild(instructions)
+  return element
+}
+
+export interface FileHandlers {
+  handleDownload?: () => void
+  handleUpload?: () => void
+  handleReplace?: (file: FileAttachment, isSupplement?: boolean) => void
+  handleReplaceEmbed?: () => void
+  handleDetach?: () => void
+  handleDelete?: () => void
+}
+
+type Handleable = { href?: string; src?: string }
+
+export const createFileHandlers = <T extends Handleable>(
+  attrs: T,
+  fileAttrKey: keyof Handleable,
+  view: ManuscriptEditorView,
+  props: EditorProps,
+  setAttr: (value: string) => void
+): FileHandlers => {
+  const handlers: FileHandlers = {}
+
+  const controlAttr = attrs[fileAttrKey]
+  const files = props.getFiles()
+  const file = controlAttr && files.find((f) => f.id === controlAttr)
+  const can = props.getCapabilities()
+
+  if (controlAttr && file) {
+    handlers.handleDownload = () => {
+      props.fileManagement.download(file)
+    }
+    handlers.handleDetach = () => {
+      setAttr('')
+    }
+  }
+
+  if (can.replaceFile) {
+    handlers.handleReplace = (file: FileAttachment, isSupplement = false) => {
+      setAttr(file.id)
+      if (isSupplement) {
+        const tr = view.state.tr
+        view.state.doc.descendants((node, pos) => {
+          if (node.type === schema.nodes.supplement) {
+            const attr = node.attrs[fileAttrKey]
+            if (attr === file.id) {
+              tr.delete(pos, pos + node.nodeSize)
+              view.dispatch(tr)
+            }
+          }
+
+          if (
+            node.type !== schema.nodes.supplements &&
+            node.type !== schema.nodes.manuscript
+          ) {
+            return false
+          }
+        })
+      }
+    }
+  }
+
+  return handlers
+}
+
+export const createReactTools = <T extends ManuscriptNode>(
+  node: Trackable<T>,
+  view: ManuscriptEditorView,
+  getPos: () => number,
+  props: EditorProps,
+  handlers: FileHandlers,
+  isEmbed: boolean,
+  hasSiblings: () => boolean
+): HTMLDivElement | null => {
+  if (!props.dispatch || !props.theme) {
+    return null
+  }
+
+  const can = props.getCapabilities()
+
+  const componentProps: FigureOptionsProps = {
+    can,
+    getDoc: () => view.state.doc,
+    getFiles: props.getFiles,
+    onDownload: handlers.handleDownload,
+    onUpload: handlers.handleUpload,
+    onDetach: handlers.handleDetach,
+    onReplace: handlers.handleReplace,
+    onReplaceEmbed: handlers.handleReplaceEmbed,
+    onDelete: handlers.handleDelete,
+    isEmbed,
+    hasSiblings,
+  }
+
+  return ReactSubView(props, FigureOptions, componentProps, node, getPos, view)
+}
+
+export const createFileUploader = (
+  handler: (file: File) => Promise<void>,
+  accept = '*/*'
+) => {
+  const handleFileChange = async (e: Event) => {
+    const target = e.target as HTMLInputElement
+    if (target && target.files && target.files.length) {
+      await handler(target.files[0])
+    }
+  }
+
+  const input = document.createElement('input')
+  input.accept = accept
+  input.type = 'file'
+  input.addEventListener('change', handleFileChange)
+
+  return () => input.click()
+}
+
+export const addInteractionHandlers = (
+  element: HTMLElement,
+  uploadFn: (file: File) => Promise<void>,
+  accept = '*/*'
+): void => {
+  const handlePlaceholderInteraction = (target: HTMLElement) => {
+    if (target.dataset && target.dataset.action) {
+      return
+    }
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = accept
+    input.addEventListener('change', async (e) => {
+      const files = (e.target as HTMLInputElement).files
+      if (files && files.length > 0) {
+        await uploadFn(files[0])
+      }
+    })
+    input.click()
+  }
+
+  const handlePlaceholderClick = (event: Event) => {
+    const target = event.target as HTMLElement
+    handlePlaceholderInteraction(target)
+  }
+
+  element.addEventListener('click', handlePlaceholderClick)
+  element.addEventListener(
+    'keydown',
+    handleEnterKey(() => {
+      const target = document.activeElement as HTMLElement
+      handlePlaceholderInteraction(target)
+    })
+  )
+
+  element.addEventListener('mouseenter', () => {
+    element.classList.toggle('over', true)
+  })
+
+  element.addEventListener('mouseleave', () => {
+    element.classList.toggle('over', false)
+  })
+
+  element.addEventListener('dragenter', (event) => {
+    event.preventDefault()
+    element.classList.toggle('over', true)
+  })
+
+  element.addEventListener('dragleave', (event) => {
+    event.preventDefault()
+    element.classList.toggle('over', false)
+  })
+
+  element.addEventListener('dragover', (e) => {
+    const dragEvent = e as DragEvent
+    if (dragEvent.dataTransfer && dragEvent.dataTransfer.items) {
+      for (const item of dragEvent.dataTransfer.items) {
+        if (item.kind === 'file') {
+          e.preventDefault()
+          dragEvent.dataTransfer.dropEffect = 'copy'
+          break
+        }
+      }
+    }
+  })
+
+  element.addEventListener('drop', async (e) => {
+    if (e.dataTransfer && e.dataTransfer.files.length) {
+      e.preventDefault()
+      await uploadFn(e.dataTransfer.files[0])
+    }
+  })
+}

package/src/lib/navigation-utils.ts

@@ -0,0 +1,235 @@
+/*!
+ * © 2025 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 {
+  ManuscriptEditorState,
+  ManuscriptEditorView,
+} from '@manuscripts/transform'
+import { EditorView } from 'prosemirror-view'
+import { Selection } from 'prosemirror-state'
+
+import { Dispatch } from '../commands'
+import { findParentNodeWithIdValue } from './utils'
+
+/**
+ * TODO: Reuse this utility in other areas related to navigation implemented in LEAN-5090
+ * (e.g., inspector components, toolbar and other components with similar navigation patterns)
+ */
+export function focusNextElement(
+  elements: Element[] | HTMLElement[],
+  currentIndex: number,
+  direction: 'forward' | 'backward'
+): void {
+  const nextIndex =
+    direction === 'forward'
+      ? (currentIndex + 1) % elements.length
+      : (currentIndex - 1 + elements.length) % elements.length
+  const nextElement = elements[nextIndex] as HTMLElement
+  nextElement?.focus()
+}
+
+/**
+ * Creates a keydown handler that triggers an action when Enter key is pressed.
+ * Automatically prevents default behavior.
+ */
+export function handleEnterKey(action: (event: KeyboardEvent) => void) {
+  return (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      action(event)
+    }
+  }
+}
+
+// Handles arrow key navigation between elements.
+export function handleArrowNavigation(
+  event: KeyboardEvent,
+  elements: HTMLElement[],
+  currentElement: HTMLElement,
+  keys: {
+    forward: 'ArrowDown' | 'ArrowRight'
+    backward: 'ArrowUp' | 'ArrowLeft'
+  }
+): void {
+  const { forward, backward } = keys
+  if (event.key !== forward && event.key !== backward) {
+    return
+  }
+
+  event.preventDefault()
+  if (elements.length === 0) {
+    return
+  }
+  const currentIndex = elements.indexOf(currentElement)
+  if (currentIndex === -1) {
+    // Focus first element when current element not found
+    elements[0]?.focus()
+    return
+  }
+
+  const direction = event.key === forward ? 'forward' : 'backward'
+  focusNextElement(elements, currentIndex, direction)
+}
+
+type ArrowKey = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight'
+type SupportedKey = ArrowKey | 'Enter' | 'Escape' | 'Tab'
+
+type KeyHandlers = Partial<Record<SupportedKey, (event: KeyboardEvent) => void>>
+
+type NavigationConfig = {
+  /** Array of focusable items within the container */
+  getItems: () => HTMLElement[]
+  /** Arrow key configuration for navigation */
+  arrowKeys: {
+    forward: 'ArrowDown' | 'ArrowRight'
+    backward: 'ArrowUp' | 'ArrowLeft'
+  }
+  /** Optional override for the current focused element */
+  getCurrentElement?: (event: KeyboardEvent) => HTMLElement | null
+}
+
+export type KeyboardInteractionOptions = {
+  /** The container element (menu, dropdown, list, etc.) or window/document */
+  container: HTMLElement | Window | Document
+  /** Optional keyboard navigation capability (within items) */
+  navigation?: NavigationConfig
+  /** Optional custom key handlers */
+  additionalKeys?: KeyHandlers
+}
+
+export function createKeyboardInteraction(
+  options: KeyboardInteractionOptions
+): () => void {
+  const { container, additionalKeys, navigation } = options
+
+  const handleKeydown: EventListener = (event) => {
+    const e = event as KeyboardEvent
+
+    const key = e.key as SupportedKey
+    const handler = additionalKeys?.[key]
+
+    if (handler) {
+      e.preventDefault()
+      handler(e)
+      return
+    }
+
+    // Handle navigation
+    if (!navigation) {
+      return
+    }
+    const { getItems, arrowKeys, getCurrentElement } = navigation
+
+    const currentElement = getCurrentElement
+      ? getCurrentElement(e)
+      : (e.target as HTMLElement)
+
+    if (!currentElement) {
+      return
+    }
+
+    const list = getItems()
+    if (!list.length) {
+      return
+    }
+    handleArrowNavigation(e, list, currentElement, arrowKeys)
+  }
+
+  container.addEventListener('keydown', handleKeydown)
+
+  return () => {
+    container.removeEventListener('keydown', handleKeydown)
+  }
+}
+
+export const focusNearestElement = (
+  state: ManuscriptEditorState,
+  dispatch?: Dispatch,
+  view?: ManuscriptEditorView
+) => {
+  if (!view) {
+    return false
+  }
+  // Only intercept when editor text is the current focus context
+  const active = document.activeElement
+  if (!active || !active.classList.contains('manuscript-editor')) {
+    return false // let browser handle Tab
+  }
+
+  const { from } = view.state.selection
+  const coords = view.coordsAtPos(from)
+  const container = getCursorContainer(view)
+  let target = findNearestTabbable(container, coords.top)
+  // TODO: Consider a more generic solution based on hierarchy-walking to find the nearest tabbable element.
+  // Currently only looks one level up, which is sufficient to resolve focus issue when inside supplement item children.
+  if (!target) {
+    const parent = findParentNodeWithIdValue(view.state.selection)
+
+    const grandparent = parent
+      ? findParentNodeWithIdValue({
+          $from: view.state.doc.resolve(parent.pos),
+        } as Selection)
+      : null
+    if (grandparent) {
+      const dom = view.nodeDOM(grandparent.pos)
+
+      if (dom instanceof HTMLElement) {
+        target = findNearestTabbable(dom, coords.top)
+      }
+    }
+  }
+
+  if (!target) {
+    return false
+  }
+  target.focus()
+  return true
+}
+
+export function getCursorContainer(view: EditorView): HTMLElement {
+  const scoped = findParentNodeWithIdValue(view.state.selection)
+  if (scoped) {
+    const dom = view.nodeDOM(scoped.pos)
+    if (dom instanceof HTMLElement) {
+      return dom
+    }
+  }
+
+  return view.dom as HTMLElement
+}
+
+export function findNearestTabbable(
+  container: HTMLElement,
+  verticalPosition: number
+): HTMLElement | null {
+  const tabbables = container.querySelectorAll<HTMLElement>(
+    'a[href], button, [tabindex]:not([tabindex="-1"])'
+  )
+
+  let target: HTMLElement | null = null
+  let minDistance: number | null = null
+
+  tabbables.forEach((el) => {
+    const rect = el.getBoundingClientRect()
+    const distance = Math.abs(rect.top - verticalPosition)
+    if (minDistance === null || distance < minDistance) {
+      minDistance = distance
+      target = el
+    }
+  })
+
+  return target
+}

package/src/lib/normalize.ts

@@ -0,0 +1,70 @@
+/*!
+ * © 2025 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 { generateNodeID, Nodes, schema } from '@manuscripts/transform'
+
+import { AffiliationAttrs, ContributorAttrs } from './authors'
+
+const trim = (value: string | undefined) => (value ?? '').trim()
+
+export const normalizeAffiliation = (
+  a: AffiliationAttrs
+): AffiliationAttrs => ({
+  ...a,
+  institution: trim(a.institution),
+  department: trim(a.department),
+  addressLine1: trim(a.addressLine1),
+  addressLine2: trim(a.addressLine2),
+  addressLine3: trim(a.addressLine3),
+  postCode: trim(a.postCode),
+  country: trim(a.country),
+  county: trim(a.county),
+  city: trim(a.city),
+  email: a.email ?? { href: '', text: '' },
+})
+
+export const normalizeAuthor = (author: ContributorAttrs) => {
+  const basic: ContributorAttrs = {
+    id: author.id,
+    role: trim(author.role),
+    affiliationIDs: (author.affiliationIDs || []).sort(),
+    given: trim(author.given),
+    family: trim(author.family),
+    email: trim(author.email),
+    isCorresponding: author.isCorresponding || false,
+    ORCID: trim(author.ORCID),
+    isAuthenticated: author.isAuthenticated || false,
+    priority: author.priority,
+    isJointContributor: author.isJointContributor || false,
+    degrees: Array.isArray(author.degrees) ? author.degrees : [],
+    footnoteIDs: author.footnoteIDs || [],
+    correspIDs: author.correspIDs || [],
+    prefix: trim(author.prefix),
+    suffix: trim(author.suffix),
+    creditRoles: Array.isArray(author.creditRoles) ? author.creditRoles : [],
+  }
+
+  return basic
+}
+
+type WithID = { id: string | undefined }
+
+export const checkID = <T extends WithID>(attrs: T, nodeType: Nodes) => {
+  return {
+    ...attrs,
+    id: attrs.id || generateNodeID(schema.nodes[nodeType]),
+  }
+}