@manuscripts/body-editor 3.19.1 → 3.19.3

package/src/versions.ts

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

package/src/views/ReactSubView.tsx

@@ -24,6 +24,8 @@ import { ThemeProvider } from 'styled-components'
 import { EditorProps } from '../configs/ManuscriptsEditor'
 import { Trackable } from '../types'
 
+export type SubViewContainer = HTMLDivElement & { unmount: () => void }
+
 export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
   nodeAttrs: NodeT['attrs']
   setNodeAttrs: (nextAttrs: Partial<NodeT['attrs']>) => void
@@ -32,7 +34,7 @@ export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
     getPos: () => number
     node: ManuscriptNode | Trackable<ManuscriptNode>
   }
-  container: HTMLDivElement
+  container: SubViewContainer
 }
 /*
   This is to render components that affect the Prosemirror Document indirectly. Such as dropdown buttons, inputs, advanced UX elements etc.
@@ -46,8 +48,9 @@ function createSubView<T extends Trackable<ManuscriptNode>>(
   getPos: () => number,
   view: ManuscriptEditorView,
   classNames: string[] = []
-): HTMLDivElement {
-  const container = document.createElement('div')
+): SubViewContainer {
+  const container = document.createElement('div') as SubViewContainer
+  container.unmount = () => root.unmount()
   const Wrapped = createView<T>(
     props,
     Component,

package/src/views/cross_reference.ts

@@ -50,11 +50,17 @@ export class CrossReferenceView
 
     const isSupplement = target?.type === schema.nodes.supplement.name
     const derivedLabel = isSupplement
-      ? target?.caption || target?.label || ''
-      : target?.label || ''
+      ? target?.caption || target?.label || '[cross-ref]'
+      : target?.label || '[cross-ref]'
 
     this.dom.textContent = attrs.label || derivedLabel
     this.dom.addEventListener('click', this.handleClick)
+
+    if (this.isOrphaned()) {
+      this.dom.classList.add('orphaned-cross-reference')
+    } else {
+      this.dom.classList.remove('orphaned-cross-reference')
+    }
   }
 
   public initialise = () => {
@@ -74,6 +80,12 @@ export class CrossReferenceView
       handleEnterKey(() => this.handleClick())
     )
   }
+
+  protected isOrphaned() {
+    const targets = objectsKey.getState(this.view.state) as Map<string, Target>
+    const rid = this.node.attrs.rids[0]
+    return !targets?.get(rid)
+  }
 }
 
 export default createNodeView(CrossReferenceView)

package/src/views/cross_reference_editable.ts

@@ -147,9 +147,7 @@ export class CrossReferenceEditableView extends CrossReferenceView {
 
     const can = this.props.getCapabilities()
 
-    const targets = objectsKey.getState(this.view.state) as Map<string, Target>
-    const rid = this.node.attrs.rids[0]
-    const isOrphaned = !targets?.get(rid)
+    const isOrphaned = this.isOrphaned()
 
     const actions: ContextMenuProps['actions'] = [
       {
@@ -173,7 +171,6 @@ export class CrossReferenceEditableView extends CrossReferenceView {
         label: 'Edit',
         icon: 'Edit',
         action: () => this.handleEdit(),
-        disabled: isOrphaned,
       })
     }
 

package/styles/Editor.css

@@ -300,12 +300,24 @@
   color: inherit;
 }
 
+.ProseMirror .orphaned-cross-reference {
+  text-decoration: underline dotted #f35143;
+}
+
 .ProseMirror .bib-item.ProseMirror-selectednode,
 .ProseMirror .citation.ProseMirror-selectednode,
 .ProseMirror .cross-reference.ProseMirror-selectednode {
   background-color: #bce7f6;
 }
 
+.ProseMirror .cross-reference.selected-cross-reference {
+  border-radius: 4px;
+  outline: 2px solid #FE8F1F;
+  outline-offset: 1.5px;
+  background: #FFF9E5;
+  mix-blend-mode: darken;
+}
+
 .ProseMirror .block-table_element .block-gutter {
   padding-top: 1em;
 }