npm - @manuscripts/body-editor - Versions diffs - 3.19.1 → 3.19.3 - Mend

@manuscripts/body-editor 3.19.1 → 3.19.3

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 (34) hide show

package/dist/cjs/components/cross-ref-check-modal/CrossRefWarningModal.js +202 -52
package/dist/cjs/components/cross-ref-check-modal/openModal.js +8 -2
package/dist/cjs/lib/utils.js +12 -1
package/dist/cjs/plugins/cross-references.js +37 -14
package/dist/cjs/versions.js +1 -1
package/dist/cjs/views/ReactSubView.js +1 -0
package/dist/cjs/views/cross_reference.js +13 -2
package/dist/cjs/views/cross_reference_editable.js +1 -4
package/dist/es/components/cross-ref-check-modal/CrossRefWarningModal.js +202 -52
package/dist/es/components/cross-ref-check-modal/openModal.js +9 -3
package/dist/es/lib/utils.js +11 -1
package/dist/es/plugins/cross-references.js +37 -15
package/dist/es/versions.js +1 -1
package/dist/es/views/ReactSubView.js +1 -0
package/dist/es/views/cross_reference.js +13 -2
package/dist/es/views/cross_reference_editable.js +1 -4
package/dist/types/components/authors-affiliations/AuthorsAndAffiliationsModals.d.ts +1 -1
package/dist/types/components/cross-ref-check-modal/CrossRefWarningModal.d.ts +4 -2
package/dist/types/components/cross-ref-check-modal/openModal.d.ts +2 -2
package/dist/types/lib/utils.d.ts +4 -0
package/dist/types/plugins/cross-references.d.ts +2 -0
package/dist/types/versions.d.ts +1 -1
package/dist/types/views/ReactSubView.d.ts +5 -2
package/dist/types/views/cross_reference.d.ts +1 -0
package/package.json +2 -2
package/src/components/cross-ref-check-modal/CrossRefWarningModal.tsx +315 -83
package/src/components/cross-ref-check-modal/openModal.ts +14 -4
package/src/lib/utils.ts +24 -0
package/src/plugins/cross-references.ts +41 -13
package/src/versions.ts +1 -1
package/src/views/ReactSubView.tsx +6 -3
package/src/views/cross_reference.ts +14 -2
package/src/views/cross_reference_editable.ts +1 -4
package/styles/Editor.css +12 -0

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

@@ -14,71 +14,148 @@
  * limitations under the License.
  */
-import { ManuscriptNode } from '@manuscripts/transform'
-import React, { useState } from 'react'
 import {
-  AttentionOrangeIcon,
-  CloseButton,
+  ArrowUpIcon,
+  AttentionRedIcon,
+  ButtonGroup,
+  IconButton,
   ModalContainer,
-  ModalHeader,
   PrimaryButton,
+  RadioButton,
   StyledModal,
   TertiaryButton,
-  TextButton,
+  WebLinkIcon,
+  withFocusTrap,
 } from '@manuscripts/style-guide'
-import { ResolvedPos } from 'prosemirror-model'
-import { startCase } from 'lodash'
+import { ManuscriptNode, schema } from '@manuscripts/transform'
+import { NodeType, ResolvedPos } from 'prosemirror-model'
+import React, { useState } from 'react'
+import { getSurroundingText } from '../../lib/utils'
+import { nodeTypeIcon } from '../../node-type-icons'
 import styled from 'styled-components'
 export type XrefGroup = {
   referenced: ManuscriptNode
   label: string
+  caption: string
   xrefs: [ManuscriptNode, ResolvedPos][]
 }
+export type DeleteOption = 'delete-without-ref' | 'delete-with-ref'
 export const CrossRefWarningModal: React.FC<{
   onClose: () => void
   xrefs: XrefGroup[]
-  onConfirm: () => void
+  onConfirm: (deleteOption: DeleteOption) => void
   selectAndScrollTo: ($pos: ResolvedPos) => void
 }> = ({ onClose, xrefs, onConfirm, selectAndScrollTo }) => {
   const [isOpen, setIsOpen] = useState(true)
+  const [deleteOption, setDeleteOption] =
+    useState<DeleteOption>('delete-without-ref')
   const handleClose = () => {
     setIsOpen(false)
     onClose()
   }
+  const [showRef, setShowRef] = useState(false)
+  const [isScrolling, setIsScrolling] = useState(false)
+  const handleSelectAndScrollTo = ($pos: ResolvedPos) => {
+    setIsScrolling(true)
+    selectAndScrollTo($pos)
+  }
+  const toggleReferenceList = () => setShowRef(!showRef)
+  const onChangeDeleteOption = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+    setDeleteOption(value as DeleteOption)
+  }
+  const references = xrefs.flatMap((xrefGroup) =>
+    xrefGroup.xrefs.map((xref) => [...xref])
+  ) as [ManuscriptNode, ResolvedPos][]
+  const elementLabel =
+    xrefs.length === 1 ? xrefs[0].label : `${xrefs.length} elements`
+  const locationWord = references.length === 1 ? 'location' : 'locations'
+  const pronoun = xrefs.length === 1 ? 'it' : 'them'
   return (
     <Modal
       isOpen={isOpen}
+      $isScrolling={isScrolling}
       onRequestClose={() => handleClose()}
       shouldCloseOnOverlayClick={false}
       hideOverlay={true}
     >
-      <Container data-cy="cross-reference-warning-modal">
-        <ModalHeader>
-          <CloseButton
-            onClick={() => handleClose()}
-            data-cy="modal-close-button"
-          />
-        </ModalHeader>
+      <Container
+        $isScrolling={isScrolling}
+        data-cy="cross-reference-warning-modal"
+      >
         <Body>
           <Title>
-            <AttentionOrangeIcon width={24} height={22} /> Delete referenced
-            content?
+            <AttentionRedIcon width={24} height={24} />
+            Confirm Deletion
           </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>
+          <p>
+            <b>{elementLabel}</b> {xrefs.length === 1 ? 'is' : 'are'} actively
+            referenced in{' '}
+            <b>
+              {references.length} {locationWord}
+            </b>{' '}
+            in your document. Deleting {pronoun} will break the following
+            cross-references:
+          </p>
+          <div>
+            <ToggleHeader>
+              <SecondaryBoldHeading>
+                {showRef
+                  ? 'Hide locations'
+                  : `Show ${references.length} location`}
+              </SecondaryBoldHeading>
+              <ToggleButton onClick={toggleReferenceList}>
+                {showRef ? <ArrowUpIcon /> : <ArrowDownIcon />}
+              </ToggleButton>
+            </ToggleHeader>
+            {showRef && (
+              <ListWrapper>
+                {xrefs.length === 1 ? (
+                  <XrefGroupDisplay
+                    label={xrefs[0].label}
+                    xrefs={xrefs[0].xrefs}
+                    selectAndScrollTo={handleSelectAndScrollTo}
+                  />
+                ) : (
+                  <XrefGroupsDisplay
+                    xrefsGroup={xrefs}
+                    selectAndScrollTo={handleSelectAndScrollTo}
+                  />
+                )}
+              </ListWrapper>
+            )}
+          </div>
+          <SelectorContainer>
+            <RadioButton
+              name={'delete-option'}
+              id={'delete-without-ref-option'}
+              value={'delete-without-ref'}
+              label={'Delete but keep referenced text'}
+              checked={deleteOption === 'delete-without-ref'}
+              onChange={onChangeDeleteOption}
+            />
+            <RadioButton
+              name={'delete-option'}
+              id={'delete-with-ref-option'}
+              value={'delete-with-ref'}
+              label={'Delete & remove references'}
+              checked={deleteOption === 'delete-with-ref'}
+              onChange={onChangeDeleteOption}
+            />
+          </SelectorContainer>
+          <ButtonGroup>
             <TertiaryButton type="button" onClick={() => handleClose()}>
               Cancel
             </TertiaryButton>
@@ -86,13 +163,13 @@ export const CrossRefWarningModal: React.FC<{
               $danger={true}
               type="button"
               onClick={() => {
-                onConfirm()
+                onConfirm(deleteOption)
                 setIsOpen(false)
               }}
             >
-              Delete & remove citation
+              Delete
             </PrimaryButton>
-          </Actions>
+          </ButtonGroup>
         </Body>
       </Container>
     </Modal>
@@ -100,45 +177,95 @@ export const CrossRefWarningModal: React.FC<{
 }
 const XrefGroupDisplay: React.FC<{
-  group: XrefGroup
+  label: string
+  xrefs: XrefGroup['xrefs']
+  selectAndScrollTo: ($pos: ResolvedPos) => void
+}> = ({ label, xrefs, selectAndScrollTo }) => {
+  return (
+    <ReferencesList>
+      {xrefs.map(([xrefNode, pos], i) => {
+        const { leftHandText, rightHandText } = getSurroundingText(
+          pos,
+          xrefNode
+        )
+        const derivedLabel = xrefNode.attrs.label || label || '[cross-ref]'
+        return (
+          <ListItem key={i}>
+            <XRefTextContainer>
+              <XRefAdjacentText $direction={'rtl'}>
+                {leftHandText}
+              </XRefAdjacentText>
+              <XRefLabel>{derivedLabel}</XRefLabel>
+              <XRefAdjacentText $direction={'ltr'}>
+                {rightHandText}
+              </XRefAdjacentText>
+            </XRefTextContainer>
+            <ScrollButton $mini={true} onClick={() => selectAndScrollTo(pos)}>
+              Show
+            </ScrollButton>
+          </ListItem>
+        )
+      })}
+    </ReferencesList>
+  )
+}
+const XrefGroupsDisplay: React.FC<{
+  xrefsGroup: XrefGroup[]
   selectAndScrollTo: ($pos: ResolvedPos) => void
-}> = ({ group, selectAndScrollTo }) => {
+}> = ({ xrefsGroup, 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>
+    <ReferencesList>
+      {xrefsGroup.map(({ referenced, label, caption, xrefs }, i) => {
+        const icon = getReferencedIcon(referenced.type)
+        return (
+          <div key={i}>
+            <DarkSecondaryBoldHeading>
+              {icon ? <ItemIcon>{icon}</ItemIcon> : null}
+              {`${label}:`}
+              <CaptionTitle $direction={'ltr'}>{caption}</CaptionTitle>
+            </DarkSecondaryBoldHeading>
+            <XrefGroupDisplay
+              label={label}
+              xrefs={xrefs}
+              selectAndScrollTo={selectAndScrollTo}
+            />
+          </div>
+        )
+      })}
+    </ReferencesList>
   )
 }
-const Container = styled(ModalContainer)`
+const getReferencedIcon = (type: NodeType): React.ReactNode => {
+  if (type === schema.nodes.supplement) {
+    return <WebLinkIcon className="file-icon" />
+  }
+  return nodeTypeIcon(schema.nodes[type.name])
+}
+const Container = styled(ModalContainer)<{ $isScrolling: boolean }>`
   position: absolute;
-  top: 1rem;
-  left: 50%;
-  right: 0;
-  max-height: calc(50vh - 2rem);
+  top: ${({ $isScrolling }) => ($isScrolling ? '1rem' : '30%')};
+  left: ${({ $isScrolling }) =>
+    $isScrolling ? 'calc(100% - 556px - 0rem)' : '50%'};
+  max-height: calc(60vh - 2rem);
   min-height: 280px;
-  transform: translate(-50%, 0);
-  max-width: 480px;
+  transform: ${({ $isScrolling }) =>
+    $isScrolling ? 'translate(0, 0)' : 'translate(-50%, 0)'};
+  max-width: 556px;
   transition:
     top 0.2s,
+    left 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)`
+const Modal = styled(StyledModal)<{ $isScrolling: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
@@ -163,6 +290,8 @@ const Modal = styled(StyledModal)`
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.2);
+    opacity: ${({ $isScrolling }) => ($isScrolling ? 0.15 : 1)};
+    transform: opacity 0.2s;
   }
   h3 {
     font-size: 16px;
@@ -173,11 +302,11 @@ const Modal = styled(StyledModal)`
   }
 `
-const Body = styled.div`
+const Body = withFocusTrap(styled.div`
   margin: 1.5rem;
   display: flex;
   flex-flow: column;
-`
+`)
 const Title = styled.h2`
   font-size: 18px;
@@ -187,37 +316,140 @@ const Title = styled.h2`
   color: #353535;
   svg {
     vertical-align: text-top;
+    margin-right: 8px;
   }
 `
-const ReferencesList = styled.ul`
-  padding: 8px;
-  margin-left: 0;
-  list-style: none;
+const ToggleHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 3px 6px 8px;
+  border-radius: 4px 4px 0 0;
+  border: 1px solid #e2e2e2;
   background: #f2f2f2;
+`
+const ListWrapper = styled.div`
   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;
+  border-top: none;
+  max-height: 21vh;
+  min-height: 100px;
+  overflow-y: auto;
+  padding: 12px;
+`
+const ToggleButton = styled(IconButton)`
+  height: 24px;
+  &&:not([disabled]):focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+  svg {
+    width: 12px;
+    height: 7px;
   }
 `
-const Actions = styled.footer`
-  text-align: right;
-  padding-top: 1rem;
+const SecondaryHeading = styled.div`
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  color: #6e6e6e;
+  user-select: none;
 `
-const ScrolableItems = styled.div`
-  max-height: 16vh;
-  min-height: 100px;
-  overflow-y: auto;
+const SecondaryBoldHeading = styled(SecondaryHeading)`
+  font-weight: 700;
+  color: #6e6e6e;
+`
+const DarkSecondaryBoldHeading = styled(SecondaryBoldHeading)`
+  display: flex;
+  padding: 0 4px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  color: #353535;
+  background: #f2f2f2;
+`
+const ItemIcon = styled.span`
+  display: flex;
+  padding-right: 8px;
+  svg {
+    align-self: center;
+  }
+`
+const ReferencesList = styled.ul`
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`
+const ListItem = styled.li`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: solid 1px #e2e2e2;
+  &:last-child {
+    border-bottom: none;
+    padding: 0;
+  }
+`
+const ScrollButton = styled(TertiaryButton)`
+  margin: 0;
+  padding: 4px;
+  font-size: 14px;
+  line-height: 24px;
+  text-decoration-line: underline;
+`
+const XRefTextContainer = styled.div`
+  display: flex;
+  color: #6e6e6e;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`
+const XRefLabel = styled.span`
+  border-radius: 4px;
+  border: 1px solid #fe8f1f;
+  background: #fff9e5;
+  mix-blend-mode: darken;
+`
+const XRefAdjacentText = styled.span<{ $direction: 'rtl' | 'ltr' }>`
+  display: block;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: ${(props) => props.$direction};
+`
+const CaptionTitle = styled(XRefAdjacentText)`
+  max-width: 120px;
+  margin-left: 4px;
+`
+const SelectorContainer = styled.div`
+  display: flex;
+  gap: 24px;
+  padding: 8px 12px 4px 12px;
+  margin: 24px 0;
+  border-radius: 4px;
+  border: 1px solid #fe8f1f;
+  background: #fff9e5;
+`
+const ArrowDownIcon = styled(ArrowUpIcon)`
+  transform: rotate(180deg);
 `

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

@@ -19,12 +19,16 @@ import { ResolvedPos } from 'prosemirror-model'
 import { getEditorProps } from '../../plugins/editor-props'
 import ReactSubView from '../../views/ReactSubView'
-import { CrossRefWarningModal, XrefGroup } from './CrossRefWarningModal'
+import {
+  CrossRefWarningModal,
+  DeleteOption,
+  XrefGroup,
+} from './CrossRefWarningModal'
 export const openCrossRefWarningModal = (
   view: ManuscriptEditorView,
   xrefGroups: XrefGroup[],
-  onConfirm: () => void,
+  onConfirm: (deleteOption: DeleteOption) => void,
   onClose: () => void,
   selectAndScrollTo: ($pos: ResolvedPos) => void
 ): HTMLDivElement => {
@@ -32,8 +36,14 @@ export const openCrossRefWarningModal = (
   const props = getEditorProps(state)
   const componentProps = {
     xrefs: xrefGroups,
-    onConfirm,
-    onClose,
+    onConfirm: (deleteOption: DeleteOption) => {
+      dialog.unmount()
+      onConfirm(deleteOption)
+    },
+    onClose: () => {
+      dialog.unmount()
+      onClose()
+    },
     selectAndScrollTo,
   }

package/src/lib/utils.ts CHANGED Viewed

@@ -33,6 +33,7 @@ import {
 import { EditorState, Selection } from 'prosemirror-state'
 import {
   ContentNodeWithPos,
+  findChildren,
   findChildrenByType,
   findParentNode,
   findParentNodeOfTypeClosestToPos,
@@ -332,3 +333,26 @@ export const getLastTitleNode = (state: ManuscriptEditorState) => {
   const titleNode = findChildrenByType(state.doc, state.schema.nodes.title)[0]
   return titleNode
 }
+export const getSurroundingText = (pos: ResolvedPos, node: ManuscriptNode) => {
+  const nodeContent = findChildren(
+    pos.node(),
+    (child) => child.attrs.id === node.attrs.id
+  )[0]
+  const content = pos.node().content
+  const MAX_LENGTH = 40
+  const nodeStart = nodeContent.pos
+  const nodeEnd = nodeContent.pos + node.nodeSize
+  const leftHandText = content.textBetween(
+    nodeStart > MAX_LENGTH ? nodeStart - MAX_LENGTH : 0,
+    nodeStart
+  )
+  const rightHandText = content.textBetween(
+    nodeEnd,
+    Math.min(nodeEnd + MAX_LENGTH, content.size)
+  )
+  return { leftHandText, rightHandText }
+}

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

@@ -20,18 +20,28 @@ import {
   schema,
   Target,
 } from '@manuscripts/transform'
-import { trackChangesPluginKey } from '@manuscripts/track-changes-plugin'
+import {
+  trackChangesPluginKey,
+  TrackChangesAction,
+} 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 {
+  DeleteOption,
+  XrefGroup,
+} from '../components/cross-ref-check-modal/CrossRefWarningModal'
 import { openCrossRefWarningModal } from '../components/cross-ref-check-modal/openModal'
 import { objectsKey } from './objects'
+export const DELETE_WITHOUT_REF = 'delete-without-ref'
+export const SELECTED_CROSS_REF_CLASS = 'selected-cross-reference'
 let modalActive = false
 let modalElement: HTMLDivElement | null = null
+let scrollTargetEl: HTMLElement | null = null
 export default () => {
   let view: ManuscriptEditorView | null = null
@@ -55,7 +65,10 @@ export default () => {
         !view ||
         !tr.docChanged ||
         tr.getMeta(trackChangesPluginKey) ||
-        tr.getMeta('addToHistory') === false
+        tr.getMeta(TrackChangesAction.refreshChanges) ||
+        tr.getMeta('addToHistory') === false ||
+        tr.getMeta('collab$') ||
+        tr.getMeta(DELETE_WITHOUT_REF)
       ) {
         return true
       }
@@ -81,6 +94,9 @@ export default () => {
           modalElement.remove()
           modalElement = null
         }
+        if (scrollTargetEl) {
+          scrollTargetEl.classList.remove(SELECTED_CROSS_REF_CLASS)
+        }
       }
       const deletedIds = new Set(
@@ -206,7 +222,8 @@ function createXrefGroups(
     const xrefs = xrefsByRid.get(id)
     if (xrefs?.length) {
       const label = targets.get(referenced.attrs.id)?.label || ''
-      xrefGroups.push({ referenced, label, xrefs })
+      const caption = targets.get(referenced.attrs.id)?.caption || ''
+      xrefGroups.push({ referenced, label, caption, xrefs })
     }
   }
   return xrefGroups
@@ -219,7 +236,7 @@ const onConfirmCreator =
     deletedIds: Set<string>,
     tr: Transaction
   ) =>
-  () => {
+  (deleteOption: DeleteOption) => {
     cleanup()
     if (!view) {
       return
@@ -237,21 +254,25 @@ const onConfirmCreator =
       }
       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 }[] = []
+    if (deleteOption === 'delete-with-ref') {
+      // 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)
+        const { from, to } = xrefPositions[i]
+        newTr.delete(from, to)
+      }
+    } else {
+      newTr.setMeta(DELETE_WITHOUT_REF, true)
     }
     view.dispatch(newTr)
   }
@@ -263,7 +284,6 @@ const selectAndScrollToCreator = (view: EditorView) => ($pos: ResolvedPos) => {
   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
@@ -293,4 +313,12 @@ const selectAndScrollToCreator = (view: EditorView) => ($pos: ResolvedPos) => {
     modalElement?.classList.remove('modal-bottom')
     scrollable.scrollTo({ top: scrollTo, behavior: 'smooth' })
   }
+  const dom = view.nodeDOM($pos.pos)
+  if (dom && dom instanceof HTMLElement) {
+    dom.classList.add(SELECTED_CROSS_REF_CLASS)
+    if (scrollTargetEl && scrollTargetEl !== dom) {
+      scrollTargetEl?.classList.remove(SELECTED_CROSS_REF_CLASS)
+    }
+    scrollTargetEl = dom
+  }
 }