@manuscripts/body-editor 3.16.0 → 3.16.1

package/dist/es/views/cross_reference_editable.js

@@ -13,10 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { skipTracking } from '@manuscripts/track-changes-plugin';
+import { ContextMenu } from '@manuscripts/style-guide';
+import { isDeleted, skipTracking } from '@manuscripts/track-changes-plugin';
 import { schema } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
 import { CrossReferenceItems } from '../components/views/CrossReferenceItems';
+import { handleComment } from '../lib/comments';
+import { findNodeByID } from '../lib/doc';
+import { getSupplementDisplayLabel } from '../lib/supplements';
 import { objectsKey } from '../plugins/objects';
 import { createEditableNodeView } from './creators';
 import { CrossReferenceView } from './cross_reference';
@@ -31,14 +35,20 @@ export class CrossReferenceEditableView extends CrossReferenceView {
             if (!can?.editArticle || rids.length) {
                 return;
             }
+            this.showPicker();
+        };
+        this.showPicker = () => {
+            const rids = this.node.attrs.rids;
             const componentProps = {
                 handleSelect: this.handleSelect,
                 targets: this.getTargets(),
+                files: this.props.getFiles(),
                 handleCancel: this.handleCancel,
                 currentTargetId: rids[0],
                 currentCustomLabel: this.node.attrs.label,
+                isEdit: rids.length > 0,
             };
-            this.popperContainer = ReactSubView(this.props, CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
+            this.popperContainer = ReactSubView(this.props, CrossReferenceItems, componentProps, this.node, this.getPos, this.view);
             this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto');
         };
@@ -50,15 +60,39 @@ export class CrossReferenceEditableView extends CrossReferenceView {
             this.handleCancel();
         };
         this.getTargets = () => {
-            const excludedTypes = [schema.nodes.image_element.name];
             const targets = objectsKey.getState(this.view.state);
-            return Array.from(targets.values()).filter((t) => !excludedTypes.includes(t.type));
+            const files = this.props.getFiles();
+            const fileMap = new Map(files.map((f) => [f.id, f.name]));
+            const excludedTypes = [schema.nodes.image_element.name];
+            const supplement = schema.nodes.supplement.name;
+            return Array.from(targets.values()).reduce((acc, t) => {
+                if (excludedTypes.includes(t.type)) {
+                    return acc;
+                }
+                if (t.type === supplement && t.href) {
+                    const found = findNodeByID(this.view.state.doc, t.id);
+                    const label = found
+                        ? getSupplementDisplayLabel(found.node, files)
+                        : (fileMap.get(t.href) ?? t.href);
+                    acc.push({ ...t, label, caption: '' });
+                }
+                else {
+                    acc.push(t);
+                }
+                return acc;
+            }, []);
         };
         this.handleCancel = () => {
             if (!this.node.attrs.rids.length) {
                 const { state } = this.view;
                 const pos = this.getPos();
-                const tr = state.tr.delete(pos, pos + this.node.nodeSize);
+                if (pos === undefined) {
+                    return;
+                }
+                const label = this.node.attrs.label;
+                const tr = label
+                    ? state.tr.replaceWith(pos, pos + this.node.nodeSize, state.schema.text(label))
+                    : state.tr.delete(pos, pos + this.node.nodeSize);
                 tr.setSelection(TextSelection.create(tr.doc, pos));
                 skipTracking(tr);
                 this.view.dispatch(tr);
@@ -79,6 +113,63 @@ export class CrossReferenceEditableView extends CrossReferenceView {
             this.view.dispatch(tr.setSelection(selection));
             this.destroy();
         };
+        this.handleClick = () => {
+            if (isDeleted(this.node)) {
+                return;
+            }
+            if (!this.node.attrs.rids.length) {
+                return;
+            }
+            this.showContextMenu();
+        };
+        this.showContextMenu = () => {
+            this.props.popper.destroy();
+            const can = this.props.getCapabilities();
+            const targets = objectsKey.getState(this.view.state);
+            const rid = this.node.attrs.rids[0];
+            const isOrphaned = !targets?.get(rid);
+            const actions = [
+                {
+                    label: 'Comment',
+                    icon: 'AddComment',
+                    action: () => {
+                        this.props.popper.destroy();
+                        handleComment(this.node, this.view);
+                    },
+                },
+                {
+                    label: 'Go to content',
+                    icon: 'Scroll',
+                    action: () => this.navigateToTarget(),
+                    disabled: isOrphaned,
+                },
+            ];
+            if (can?.editArticle) {
+                actions.unshift({
+                    label: 'Edit',
+                    icon: 'Edit',
+                    action: () => this.handleEdit(),
+                    disabled: isOrphaned,
+                });
+            }
+            this.contextMenu = ReactSubView(this.props, ContextMenu, { actions }, this.node, this.getPos, this.view, ['context-menu']);
+            this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+        };
+        this.navigateToTarget = () => {
+            this.props.popper.destroy();
+            const rids = this.node.attrs.rids;
+            if (!rids.length) {
+                return;
+            }
+            this.props.navigate({
+                pathname: this.props.location.pathname,
+                hash: '#' + rids[0],
+            });
+        };
+        this.handleEdit = () => {
+            this.props.popper.destroy();
+            this.showPicker();
+        };
     }
 }
 export default createEditableNodeView(CrossReferenceEditableView);

package/dist/es/views/figure_editable.js

@@ -195,6 +195,9 @@ export class FigureEditableView extends FigureView {
         this.addTools();
     }
     addTools() {
+        if (this.getPos() === undefined) {
+            return;
+        }
         this.manageReactTools();
         const existingDragHandlers = this.container.querySelectorAll('.drag-handler');
         existingDragHandlers.forEach((handler) => handler.remove());

package/dist/types/commands.d.ts

@@ -44,6 +44,7 @@ export declare const findPosBeforeFirstSubsection: ($pos: ManuscriptResolvedPos)
 export declare const insertSectionLabel: (state: ManuscriptEditorState, dispatch?: Dispatch, currentTr?: Transaction) => boolean;
 export declare const insertLink: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertInlineCitation: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
+export declare const canInsertCrossReference: (state: ManuscriptEditorState) => boolean;
 export declare const insertCrossReference: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertInlineEquation: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertTableElementFooter: (tr: Transaction, table: [ManuscriptNode, number]) => {

package/dist/types/components/form/FormFooter.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-declare const FormFooter: ({ onCancel, primaryAction, }: {
+declare const FormFooter: ({ onCancel, primaryAction, cancelLabel, }: {
     onCancel: () => void;
     primaryAction?: React.ReactNode;
+    cancelLabel?: string;
 }) => React.JSX.Element;
 export default FormFooter;

package/dist/types/components/views/CrossReferenceItems.d.ts

@@ -15,12 +15,15 @@
  */
 import { Target } from '@manuscripts/transform';
 import React from 'react';
+import { FileAttachment } from '../../lib/files';
 interface Props {
     targets: Target[];
+    files: FileAttachment[];
     handleSelect: (id: string, customLabel?: string) => void;
     handleCancel: () => void;
     currentTargetId?: string;
     currentCustomLabel?: string;
+    isEdit?: boolean;
 }
 export declare const CrossReferenceItems: React.FC<Props>;
 export {};

package/dist/types/lib/supplements.d.ts

@@ -18,6 +18,7 @@ export type NodeWeblink = {
     node: SupplementNode;
     pos: number;
 };
+export declare const getSupplementCaptionTitle: (node: SupplementNode) => string;
 export declare const getSupplementDisplayLabel: (node: SupplementNode, files: {
     id: string;
     name: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.16.0";
+export declare const VERSION = "3.16.1";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/cross_reference_editable.d.ts

@@ -17,12 +17,18 @@ import { Target } from '@manuscripts/transform';
 import { CrossReferenceView } from './cross_reference';
 export declare class CrossReferenceEditableView extends CrossReferenceView {
     protected popperContainer: HTMLDivElement;
+    protected contextMenu: HTMLElement;
     selectNode: () => void;
+    showPicker: () => void;
     destroy: () => void;
     deselectNode: () => void;
     getTargets: () => Target[];
     handleCancel: () => void;
     handleSelect: (rid: string, label?: string) => Promise<void>;
+    handleClick: () => void;
+    showContextMenu: () => void;
+    private navigateToTarget;
+    private handleEdit;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<CrossReferenceEditableView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,9 +41,9 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.7.0",
+    "@manuscripts/style-guide": "3.7.1",
     "@manuscripts/track-changes-plugin": "2.4.0",
-    "@manuscripts/transform": "4.5.0",
+    "@manuscripts/transform": "4.5.1",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",
@@ -118,4 +118,4 @@
   "engines": {
     "node": ">=22"
   }
-}
+}

package/src/commands.ts

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { isDeleted, skipTracking, skipSelect } from '@manuscripts/track-changes-plugin'
+import {
+  isDeleted,
+  skipTracking,
+  skipSelect,
+} from '@manuscripts/track-changes-plugin'
 import {
   AttachmentNode,
   AwardNode,
@@ -525,7 +529,7 @@ export const insertSupplementWeblink = (
   const supplement = schema.nodes.supplement.createAndFill(
     {
       id: generateNodeID(schema.nodes.supplement),
-      href: url
+      href: url,
     },
     createAndFillCaption()
   ) as SupplementNode
@@ -554,7 +558,7 @@ export const updateSupplementWeblink = (
     ...node.attrs,
     href: url,
     title: title,
-    })
+  })
   view.dispatch(tr)
   return true
 }
@@ -782,21 +786,62 @@ export const insertInlineCitation = (
   return true
 }
 
+export const canInsertCrossReference = (
+  state: ManuscriptEditorState
+): boolean => {
+  if (!canInsert(schema.nodes.cross_reference)(state)) {
+    return false
+  }
+  const { from, to, empty, $from, $to } = state.selection
+  if (empty) {
+    return true
+  }
+  if (!$from.sameParent($to)) {
+    return false
+  }
+  let overlaps = false
+  state.doc.nodesBetween(from, to, (node) => {
+    if (node.isAtom && !node.isText) {
+      overlaps = true
+      return false
+    }
+    return !overlaps
+  })
+  return !overlaps
+}
+
 export const insertCrossReference = (
   state: ManuscriptEditorState,
   dispatch?: Dispatch
 ) => {
+  if (!canInsertCrossReference(state)) {
+    return false
+  }
+
+  const text = selectedText()
+
   const node = state.schema.nodes.cross_reference.create({
+    id: generateNodeID(schema.nodes.cross_reference),
     rids: [],
+    label: text,
   })
 
-  const pos = state.selection.to
+  const { tr } = state
+  let pos: number
+  const isWrap = !state.selection.empty
 
-  const tr = state.tr.insert(pos, node)
+  if (isWrap) {
+    pos = state.selection.from
+    tr.replaceSelectionWith(node)
+  } else {
+    pos = state.selection.to
+    tr.insert(pos, node)
+  }
 
   if (dispatch) {
     const selection = NodeSelection.create(tr.doc, pos)
-    dispatch(tr.setSelection(selection).scrollIntoView())
+    tr.setSelection(selection).scrollIntoView()
+    dispatch(isWrap ? skipTracking(tr) : tr)
   }
 
   return true
@@ -1524,10 +1569,7 @@ export const insertTransGraphicalAbstract =
         lang,
         category: category.id,
       },
-      [
-        schema.nodes.section_title.create(),
-        createAndFillFigureElement(state),
-      ]
+      [schema.nodes.section_title.create(), createAndFillFigureElement(state)]
     ) as TransGraphicalAbstractNode
 
     const tr = state.tr.insert(pos, node)

package/src/components/ChangeHandlingForm.tsx

@@ -17,8 +17,10 @@ import { Form, useFormikContext } from 'formik'
 import React, { MutableRefObject, PropsWithChildren, useEffect } from 'react'
 import styled from 'styled-components'
 
-export interface ChangeHandlingFormProps<Values>
-  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange'> {
+export interface ChangeHandlingFormProps<Values> extends Omit<
+  React.FormHTMLAttributes<HTMLFormElement>,
+  'onChange'
+> {
   onChange: (values: Values) => void
   id?: string
   formRef?: MutableRefObject<HTMLFormElement | null>

package/src/components/form/FormFooter.tsx

@@ -37,14 +37,16 @@ const StyledIconTextButton = styled(IconTextButton)`
 const FormFooter = ({
   onCancel,
   primaryAction,
+  cancelLabel = 'Close',
 }: {
   onCancel: () => void
   primaryAction?: React.ReactNode
+  cancelLabel?: string
 }) => {
   return (
     <Footer>
       <StyledIconTextButton color="secondary" onClick={onCancel}>
-        Close
+        {cancelLabel}
       </StyledIconTextButton>
       {primaryAction}
     </Footer>

package/src/components/keyboard-shortcuts-modal/KeyboardShortcutsModal.tsx

@@ -86,14 +86,11 @@ export const KeyboardShortcutsModal: React.FC<KeyboardShortcutsModalProps> = ({
                 </StyledModalSidebarTitle>
               </StyledModalSidebarHeader>
               <StyledSidebarContent>
-                <ShortcutTabs
-                  selectedIndex={tabIndex}
-                  onChange={setTabIndex}
-                >
+                <ShortcutTabs selectedIndex={tabIndex} onChange={setTabIndex}>
                   <ModalTabsWrapper>
                     <ModalTabs tabLabels={TAB_LABELS} />
                   </ModalTabsWrapper>
-                  
+
                   <InspectorTabPanels>
                     {EDITOR_KEYBOARD_SHORTCUT_TABS.map((tab) => (
                       <ShortcutTabPanel key={tab.id}>
@@ -139,7 +136,8 @@ const ShortcutTabs = styled(InspectorTabs)`
 `
 
 const ModalTabsWrapper = styled('div')`
-  margin: 0 ${(props) => props.theme.grid.unit * 8}px ${(props) => props.theme.grid.unit * 3}px;
+  margin: 0 ${(props) => props.theme.grid.unit * 8}px
+    ${(props) => props.theme.grid.unit * 3}px;
 `
 
 const ShortcutTabPanel = styled(InspectorTabPanel).attrs({
@@ -198,7 +196,8 @@ const Section = styled.section`
 `
 
 const SectionTitle = styled.h3`
-  margin: 0 ${(props) => props.theme.grid.unit * 8}px ${(props) => props.theme.grid.unit * 2}px;
+  margin: 0 ${(props) => props.theme.grid.unit * 8}px
+    ${(props) => props.theme.grid.unit * 2}px;
   font-size: ${(props) => props.theme.font.size.large};
   font-weight: ${(props) => props.theme.font.weight.normal};
   line-height: ${(props) => props.theme.font.lineHeight.large};

package/src/components/toolbar/InsertEmbedDialog.tsx

@@ -93,8 +93,12 @@ export const InsertEmbedDialog: React.FC<InsertEmbedDialogProps> = ({
     () => {
       debounce(async () => {
         if (url && allowedHref(url)) {
-        const html = await getEditorProps(state).fetchOEmbedHtml(url, 368, 217)
-        setOEmbedHTML(html)
+          const html = await getEditorProps(state).fetchOEmbedHtml(
+            url,
+            368,
+            217
+          )
+          setOEmbedHTML(html)
         }
       })
     },

package/src/components/toolbar/type-selector/styles.ts

@@ -18,7 +18,8 @@ import styled from 'styled-components'
 
 import { Option } from './TypeSelector'
 
-const TypeSelect: React.ComponentType<Props<Option, false, GroupBase<Option>>> = Select
+const TypeSelect: React.ComponentType<Props<Option, false, GroupBase<Option>>> =
+  Select
 
 export const StyledSelect = styled(TypeSelect)`
   .type-selector__control:hover {