npm - @manuscripts/body-editor - Versions diffs - 3.14.0 → 3.15.1 - Mend

@manuscripts/body-editor 3.14.0 → 3.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/src/components/cross-ref-check-modal/CrossRefWarningModal.tsx ADDED Viewed

@@ -0,0 +1,223 @@
+/*!
+ * © 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 { ManuscriptNode } from '@manuscripts/transform'
+import React, { useState } from 'react'
+import {
+  AttentionOrangeIcon,
+  CloseButton,
+  ModalContainer,
+  ModalHeader,
+  PrimaryButton,
+  StyledModal,
+  TertiaryButton,
+  TextButton,
+} from '@manuscripts/style-guide'
+import { ResolvedPos } from 'prosemirror-model'
+import { startCase } from 'lodash'
+import styled from 'styled-components'
+export type XrefGroup = {
+  referenced: ManuscriptNode
+  label: string
+  xrefs: [ManuscriptNode, ResolvedPos][]
+}
+export const CrossRefWarningModal: React.FC<{
+  onClose: () => void
+  xrefs: XrefGroup[]
+  onConfirm: () => void
+  selectAndScrollTo: ($pos: ResolvedPos) => void
+}> = ({ onClose, xrefs, onConfirm, selectAndScrollTo }) => {
+  const [isOpen, setIsOpen] = useState(true)
+  const handleClose = () => {
+    setIsOpen(false)
+    onClose()
+  }
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={() => handleClose()}
+      shouldCloseOnOverlayClick={false}
+      hideOverlay={true}
+    >
+      <Container data-cy="cross-reference-warning-modal">
+        <ModalHeader>
+          <CloseButton
+            onClick={() => handleClose()}
+            data-cy="modal-close-button"
+          />
+        </ModalHeader>
+        <Body>
+          <Title>
+            <AttentionOrangeIcon width={24} height={22} /> Delete referenced
+            content?
+          </Title>
+          <p>You are deleting content referenced elsewhere in the document:</p>
+          <ScrolableItems>
+            {xrefs.map((group, i) => (
+              <XrefGroupDisplay
+                key={i}
+                group={group}
+                selectAndScrollTo={selectAndScrollTo}
+              />
+            ))}
+          </ScrolableItems>
+          <Actions>
+            <TertiaryButton type="button" onClick={() => handleClose()}>
+              Cancel
+            </TertiaryButton>
+            <PrimaryButton
+              $danger={true}
+              type="button"
+              onClick={() => {
+                onConfirm()
+                setIsOpen(false)
+              }}
+            >
+              Delete & remove citation
+            </PrimaryButton>
+          </Actions>
+        </Body>
+      </Container>
+    </Modal>
+  )
+}
+const XrefGroupDisplay: React.FC<{
+  group: XrefGroup
+  selectAndScrollTo: ($pos: ResolvedPos) => void
+}> = ({ group, selectAndScrollTo }) => {
+  return (
+    <div>
+      <h3>{group.label}</h3>
+      <ReferencesList>
+        {group.xrefs.map(([, pos], i) => {
+          return (
+            <li key={i}>
+              <TextButton onClick={() => selectAndScrollTo(pos)}>
+                {`${startCase(pos.parent.type.name)} - ${pos.parent.textContent}`}
+              </TextButton>
+            </li>
+          )
+        })}
+      </ReferencesList>
+    </div>
+  )
+}
+const Container = styled(ModalContainer)`
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  right: 0;
+  max-height: calc(50vh - 2rem);
+  min-height: 280px;
+  transform: translate(-50%, 0);
+  max-width: 480px;
+  transition:
+    top 0.2s,
+    transform 0.2s;
+`
+// since we need to scroll inside the editor when this dialog is active, we can't use dialog.showModal()
+// so we recreate the appearance using classic position:fixed/after approach.
+// While showModal doesn't block scrolling - it doesn't allow to focus on the editor and that kills the scrollIntoView
+const Modal = styled(StyledModal)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1100;
+  color: #6e6e6e;
+  margin: auto;
+  &.modal-bottom ${Container} {
+    top: calc(100% - 2rem);
+    transform: translate(-50%, -100%);
+  }
+  &:after {
+    content: '';
+    display: block;
+    position: fixed;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  h3 {
+    font-size: 16px;
+    margin: 0.5em 0;
+  }
+  p {
+    margin: 0.5em 0;
+  }
+`
+const Body = styled.div`
+  margin: 1.5rem;
+  display: flex;
+  flex-flow: column;
+`
+const Title = styled.h2`
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0;
+  color: #353535;
+  svg {
+    vertical-align: text-top;
+  }
+`
+const ReferencesList = styled.ul`
+  padding: 8px;
+  margin-left: 0;
+  list-style: none;
+  background: #f2f2f2;
+  border: 1px solid #e2e2e2;
+  border-radius: 3px;
+  ${TextButton} {
+    margin-left: 0;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    color: #353535;
+    text-overflow: ellipsis;
+  }
+`
+const Actions = styled.footer`
+  text-align: right;
+  padding-top: 1rem;
+`
+const ScrolableItems = styled.div`
+  max-height: 16vh;
+  min-height: 100px;
+  overflow-y: auto;
+`

package/src/components/cross-ref-check-modal/openModal.ts ADDED Viewed

@@ -0,0 +1,50 @@
+/*!
+ * © 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 } from '@manuscripts/transform'
+import { ResolvedPos } from 'prosemirror-model'
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+import { CrossRefWarningModal, XrefGroup } from './CrossRefWarningModal'
+export const openCrossRefWarningModal = (
+  view: ManuscriptEditorView,
+  xrefGroups: XrefGroup[],
+  onConfirm: () => void,
+  onClose: () => void,
+  selectAndScrollTo: ($pos: ResolvedPos) => void
+): HTMLDivElement => {
+  const { state } = view
+  const props = getEditorProps(state)
+  const componentProps = {
+    xrefs: xrefGroups,
+    onConfirm,
+    onClose,
+    selectAndScrollTo,
+  }
+  const dialog = ReactSubView(
+    props,
+    CrossRefWarningModal,
+    componentProps,
+    state.doc,
+    () => 0,
+    view
+  )
+  document.body.appendChild(dialog)
+  return dialog
+}

package/src/components/references/ImportBibliographyForm.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ import {
 } from '@manuscripts/style-guide'
 import { BibliographyItemAttrs } from '@manuscripts/transform'
 import { useFormik } from 'formik'
-import { debounce } from 'lodash'
+import debounce from 'lodash/debounce'
 import React, {
   KeyboardEvent,
   useCallback,

package/src/components/references/ReferenceSearch.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   withFocusTrap,
 } from '@manuscripts/style-guide'
 import { BibliographyItemAttrs } from '@manuscripts/transform'
-import { debounce } from 'lodash'
+import debounce from 'lodash/debounce'
 import React, { useState } from 'react'
 import styled from 'styled-components'

package/src/components/references/ReferencesModal.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ import {
   withNavigableListItem,
 } from '@manuscripts/style-guide'
 import { BibliographyItemAttrs } from '@manuscripts/transform'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'

package/src/plugins/affiliations.ts CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   isContributorNode,
   ManuscriptNode,
 } from '@manuscripts/transform'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'

package/src/plugins/bibliography.ts CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   ManuscriptNode,
 } from '@manuscripts/transform'
 import * as Citeproc from 'citeproc'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'

package/src/plugins/cross-references.ts CHANGED Viewed

@@ -14,24 +14,102 @@
  * limitations under the License.
  */
-import { schema } from '@manuscripts/transform'
-import { isEqual } from 'lodash'
-import { Node } from 'prosemirror-model'
-import { Plugin } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
+import {
+  ManuscriptEditorView,
+  ManuscriptNode,
+  schema,
+  Target,
+} from '@manuscripts/transform'
+import { trackChangesPluginKey } from '@manuscripts/track-changes-plugin'
+import isEqual from 'lodash/isEqual'
+import { Node, ResolvedPos } from 'prosemirror-model'
+import { NodeSelection, Plugin, Transaction } from 'prosemirror-state'
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
+import { XrefGroup } from '../components/cross-ref-check-modal/CrossRefWarningModal'
+import { openCrossRefWarningModal } from '../components/cross-ref-check-modal/openModal'
 import { objectsKey } from './objects'
+let modalActive = false
+let modalElement: HTMLDivElement | null = null
 export default () => {
+  let view: ManuscriptEditorView | null = null
   return new Plugin({
+    view(editorView) {
+      view = editorView as ManuscriptEditorView
+      return {
+        update(v) {
+          view = v as ManuscriptEditorView
+        },
+        destroy() {
+          view = null
+        },
+      }
+    },
+    filterTransaction(tr, state) {
+      // plugins working with content silently are not the subject to a warning. Especially the Collab plugin!
+      if (
+        !view ||
+        !tr.docChanged ||
+        tr.getMeta(trackChangesPluginKey) ||
+        tr.getMeta('addToHistory') === false
+      ) {
+        return true
+      }
+      // Block doc-changing transactions while modal is active - freezing to stabilize doc so same steps can be applied onConfirm
+      if (modalActive) {
+        return false
+      }
+      const targets = objectsKey.getState(state) as Map<string, Target>
+      const xrefGroups = createXrefGroups(targets, state.doc, tr.doc)
+      // Orphaned rids were already broken before this transaction — allow
+      if (xrefGroups.length === 0) {
+        return true
+      }
+      // Block the transaction and show a warning modal
+      modalActive = true
+      const cleanup = () => {
+        modalActive = false
+        if (modalElement) {
+          modalElement.classList.remove('modal-bottom')
+          modalElement.remove()
+          modalElement = null
+        }
+      }
+      const deletedIds = new Set(
+        xrefGroups.map((g) => g.referenced.attrs.id as string)
+      )
+      const onClose = () => {
+        cleanup()
+      }
+      if (view) {
+        modalElement = openCrossRefWarningModal(
+          view,
+          xrefGroups,
+          onConfirmCreator(view, cleanup, deletedIds, tr),
+          onClose,
+          selectAndScrollToCreator(view)
+        )
+      }
+      return false
+    },
     state: {
       init() {
-        // Initialize decorations with an empty set
         return DecorationSet.empty
       },
       apply(tr, oldDecorationSet, oldState, newState) {
         let decoSet = oldDecorationSet
-        // Check if document or targets have changed
         const oldTargets = objectsKey.getState(oldState)
         const newTargets = objectsKey.getState(newState)
         if (tr.docChanged && !isEqual(oldTargets, newTargets)) {
@@ -68,3 +146,151 @@ function createDecorations(doc: Node): Decoration[] {
   })
   return decorations
 }
+function createXrefGroups(
+  targets: Map<string, Target>,
+  stateDoc: ManuscriptNode,
+  resultDoc: ManuscriptNode
+) {
+  const newIds = new Set<string>()
+  const xrefRids = new Set<string>()
+  const xrefGroups: XrefGroup[] = []
+  resultDoc.descendants((node) => {
+    if (node.attrs.id) {
+      newIds.add(node.attrs.id)
+    }
+    if (node.type === schema.nodes.cross_reference) {
+      for (const rid of node.attrs.rids as string[]) {
+        xrefRids.add(rid)
+      }
+    }
+  })
+  // Find xref rids that point to ids no longer present in the resulting doc
+  const orphanedRids = new Set<string>()
+  for (const rid of xrefRids) {
+    if (!newIds.has(rid)) {
+      orphanedRids.add(rid)
+    }
+  }
+  // No broken xrefs — allow the transaction
+  if (orphanedRids.size === 0) {
+    return []
+  }
+  // collect the referenced nodes and their xrefs with resolved positions for the modal.
+  const referencedNodes = new Map<string, ManuscriptNode>()
+  const xrefsByRid = new Map<string, [ManuscriptNode, ResolvedPos][]>()
+  stateDoc.descendants((node, pos) => {
+    const id = node.attrs.id
+    if (id && orphanedRids.has(id)) {
+      referencedNodes.set(id, node as ManuscriptNode)
+    }
+    if (node.type === schema.nodes.cross_reference) {
+      for (const rid of node.attrs.rids as string[]) {
+        if (orphanedRids.has(rid)) {
+          let entries = xrefsByRid.get(rid)
+          if (!entries) {
+            entries = []
+            xrefsByRid.set(rid, entries)
+          }
+          entries.push([node as ManuscriptNode, stateDoc.resolve(pos)])
+        }
+      }
+    }
+  })
+  for (const [id, referenced] of referencedNodes) {
+    const xrefs = xrefsByRid.get(id)
+    if (xrefs?.length) {
+      const label = targets.get(referenced.attrs.id)?.label || ''
+      xrefGroups.push({ referenced, label, xrefs })
+    }
+  }
+  return xrefGroups
+}
+const onConfirmCreator =
+  (
+    view: EditorView,
+    cleanup: () => void,
+    deletedIds: Set<string>,
+    tr: Transaction
+  ) =>
+  () => {
+    cleanup()
+    if (!view) {
+      return
+    }
+    // Replay the intercepted transaction's steps on the current state
+    const newTr = view.state.tr
+    for (const step of tr.steps) {
+      const result = step.apply(newTr.doc)
+      if (result.failed) {
+        console.warn(
+          'Cross-ref deletion warning: could not replay step —',
+          result.failed
+        )
+        return
+      }
+      newTr.step(step)
+    }
+    // Remove cross-references that pointed to the now-deleted nodes.
+    // Collect positions in reverse order so deletions don't shift
+    // positions of earlier entries.
+    const xrefPositions: { from: number; to: number }[] = []
+    newTr.doc.descendants((node, pos) => {
+      if (node.type === schema.nodes.cross_reference) {
+        const rids = node.attrs.rids as string[]
+        if (rids.some((rid) => deletedIds.has(rid))) {
+          xrefPositions.push({ from: pos, to: pos + node.nodeSize })
+        }
+      }
+    })
+    for (let i = xrefPositions.length - 1; i >= 0; i--) {
+      const { from, to } = xrefPositions[i]
+      newTr.delete(from, to)
+    }
+    view.dispatch(newTr)
+  }
+const selectAndScrollToCreator = (view: EditorView) => ($pos: ResolvedPos) => {
+  if (!view) {
+    return
+  }
+  const selTr = view.state.tr
+  selTr.setSelection(NodeSelection.create(view.state.doc, $pos.pos))
+  view.focus()
+  view.dispatch(selTr)
+  // Standard PM's scrollIntoView doesn't allow placement control - hence switching to native DOM's peer method.
+  let scrollable = view.dom.parentElement
+  while (
+    scrollable != null &&
+    scrollable.scrollHeight <= scrollable.clientHeight
+  ) {
+    scrollable = scrollable.parentElement
+  }
+  if (!scrollable) {
+    return // will need more advance handling not to overlap if there is no scroll. The plethora of edge-cases suggest that the warning shouldn't be overlapping the editor really
+  }
+  const coords = view.coordsAtPos($pos.pos)
+  const containerRect = scrollable.getBoundingClientRect()
+  const offsetInContainer =
+    coords.top - containerRect.top + scrollable.scrollTop
+  const containerHeight = scrollable.clientHeight
+  // We want the element at 75% of the container (middle of bottom half)
+  const scrollTo = offsetInContainer - containerHeight * 0.75
+  if (scrollTo < 0) {
+    // Element is too close to the top of the document to scroll into
+    // the bottom half — move the modal to the bottom instead.
+    modalElement?.classList.add('modal-bottom')
+    scrollable.scrollTo({ top: 0, behavior: 'smooth' })
+  } else {
+    modalElement?.classList.remove('modal-bottom')
+    scrollable.scrollTo({ top: scrollTo, behavior: 'smooth' })
+  }
+}

package/src/plugins/footnotes.ts CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   ManuscriptNode,
   schema,
 } from '@manuscripts/transform'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
 import { findChildrenByType } from 'prosemirror-utils'
 import { Decoration, DecorationSet } from 'prosemirror-view'

package/src/versions.ts CHANGED Viewed

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

package/src/views/embed.ts CHANGED Viewed

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { EmbedNode } from '@manuscripts/transform'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { NodeSelection } from 'prosemirror-state'
 import {

package/src/views/footnote.ts CHANGED Viewed

@@ -18,7 +18,7 @@ import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
 import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
 import { FootnoteNode, ManuscriptNode, schema } from '@manuscripts/transform'
-import { isEqual } from 'lodash'
+import isEqual from 'lodash/isEqual'
 import { NodeSelection, Transaction } from 'prosemirror-state'
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'