@manuscripts/body-editor 3.17.2 → 3.17.3

package/dist/cjs/commands.js

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.canInsertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.updateSupplementWeblink = exports.insertSupplementWeblink = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = void 0;
+exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.canInsertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.updateSupplementWeblink = exports.convertLinkToSupplementWeblink = exports.insertSupplementWeblink = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = void 0;
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
@@ -325,6 +325,28 @@ const insertSupplementWeblink = (url, title, view) => {
     return true;
 };
 exports.insertSupplementWeblink = insertSupplementWeblink;
+const convertLinkToSupplementWeblink = (pos, node, view) => {
+    const href = node.attrs.href;
+    if (!href) {
+        return false;
+    }
+    const text = node.textContent.trim();
+    const id = (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement);
+    const supplement = transform_1.schema.nodes.supplement.createAndFill({ id, href }, createAndFillCaption());
+    const crossReference = transform_1.schema.nodes.cross_reference.create({
+        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.cross_reference),
+        rids: [id],
+        label: text,
+    });
+    const tr = view.state.tr;
+    tr.replaceWith(pos, pos + node.nodeSize, crossReference);
+    (0, doc_1.upsertSupplementsSection)(tr, supplement);
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr);
+    return true;
+};
+exports.convertLinkToSupplementWeblink = convertLinkToSupplementWeblink;
 const updateSupplementWeblink = (pos, url, title, view) => {
     const node = view.state.doc.nodeAt(pos);
     if (!node) {

package/dist/cjs/components/references/ReferenceSearch.js

@@ -89,7 +89,7 @@ const AddReferenceActions = (0, styled_components_1.default)(style_guide_1.Butto
     }
   }
 `;
-const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel, }) => {
+const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel }) => {
     const [query, setQuery] = (0, react_1.useState)(initialQuery || '');
     const [selections, setSelections] = (0, react_1.useState)(new Map());
     const toggleSelection = (item) => {

package/dist/cjs/lib/__tests__/plugins.test.js

@@ -17,7 +17,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const userProfile = {
     _id: 'MPUserProfile:1',
     userID: 'MPUser:1',
-    connectID: 'connectID1'
+    connectID: 'connectID1',
 };
 const history = (0, history_1.createMemoryHistory)();
 const buildProps = (doc) => ({

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.17.2';
+exports.VERSION = '3.17.3';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/link_editable.js

@@ -19,14 +19,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkEditableView = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
+const commands_1 = require("../commands");
 const LinkForm_1 = require("../components/views/LinkForm");
 const url_1 = require("../lib/url");
 const creators_1 = require("./creators");
 const link_1 = require("./link");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 class LinkEditableView extends link_1.LinkView {
     constructor() {
         super(...arguments);
@@ -41,7 +43,7 @@ class LinkEditableView extends link_1.LinkView {
             this.dom.addEventListener('click', this.handleClick);
         };
         this.selectNode = () => {
-            if (!(0, track_changes_plugin_1.isDeleted)(this.node)) {
+            if (!(0, track_changes_plugin_1.isDeleted)(this.node) && !this.node.attrs.href) {
                 this.showForm();
             }
         };
@@ -51,6 +53,50 @@ class LinkEditableView extends link_1.LinkView {
         this.deselectNode = () => {
             this.closeForm();
         };
+        this.showContextMenu = () => {
+            if (!this.props.getCapabilities().editArticle) {
+                return;
+            }
+            this.closeForm();
+            const href = this.node.attrs.href;
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: this.handleEdit,
+                        icon: 'Edit',
+                    },
+                    {
+                        label: 'Convert to Weblink',
+                        action: this.handleConvertToWebLink,
+                        icon: 'ConvertToWebLink',
+                    },
+                    {
+                        label: 'Open Link',
+                        action: this.handleOpenLink,
+                        icon: 'ExternalLink',
+                        disabled: !(0, url_1.allowedHref)(href),
+                    },
+                ],
+            };
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'link-context-menu']);
+            this.props.popper.show(this.dom, this.popperContainer, 'bottom');
+        };
+        this.handleEdit = () => {
+            this.closeForm();
+            this.showForm();
+        };
+        this.handleConvertToWebLink = () => {
+            this.closeForm();
+            (0, commands_1.convertLinkToSupplementWeblink)(this.getPos(), this.node, this.view);
+        };
+        this.handleOpenLink = () => {
+            const href = this.node.attrs.href;
+            if ((0, url_1.allowedHref)(href)) {
+                window.open(href, '_blank', 'noopener,noreferrer');
+            }
+            this.closeForm();
+        };
         this.showForm = () => {
             if (!this.props.getCapabilities().editArticle) {
                 return;
@@ -71,9 +117,14 @@ class LinkEditableView extends link_1.LinkView {
             this.props.popper.show(this.dom, this.popperContainer, 'bottom');
         };
         this.handleClick = (e) => {
-            if (this.props.getCapabilities().editArticle) {
-                e.preventDefault();
+            if (!this.props.getCapabilities().editArticle) {
+                return;
+            }
+            e.preventDefault();
+            if ((0, track_changes_plugin_1.isDeleted)(this.node) || !this.node.attrs.href) {
+                return;
             }
+            this.showContextMenu();
         };
         this.handleCancel = () => {
             const attrs = this.node.attrs;

package/dist/es/commands.js

@@ -307,6 +307,27 @@ export const insertSupplementWeblink = (url, title, view) => {
     view.dispatch(tr.scrollIntoView());
     return true;
 };
+export const convertLinkToSupplementWeblink = (pos, node, view) => {
+    const href = node.attrs.href;
+    if (!href) {
+        return false;
+    }
+    const text = node.textContent.trim();
+    const id = generateNodeID(schema.nodes.supplement);
+    const supplement = schema.nodes.supplement.createAndFill({ id, href }, createAndFillCaption());
+    const crossReference = schema.nodes.cross_reference.create({
+        id: generateNodeID(schema.nodes.cross_reference),
+        rids: [id],
+        label: text,
+    });
+    const tr = view.state.tr;
+    tr.replaceWith(pos, pos + node.nodeSize, crossReference);
+    upsertSupplementsSection(tr, supplement);
+    tr.setSelection(TextSelection.create(tr.doc, pos));
+    view.focus();
+    view.dispatch(tr);
+    return true;
+};
 export const updateSupplementWeblink = (pos, url, title, view) => {
     const node = view.state.doc.nodeAt(pos);
     if (!node) {

package/dist/es/components/references/ReferenceSearch.js

@@ -50,7 +50,7 @@ const AddReferenceActions = styled(ButtonGroup) `
     }
   }
 `;
-export const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel, }) => {
+export const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel }) => {
     const [query, setQuery] = useState(initialQuery || '');
     const [selections, setSelections] = useState(new Map());
     const toggleSelection = (item) => {

package/dist/es/lib/__tests__/plugins.test.js

@@ -12,7 +12,7 @@ import { defaultTheme } from '@manuscripts/style-guide';
 const userProfile = {
     _id: 'MPUserProfile:1',
     userID: 'MPUser:1',
-    connectID: 'connectID1'
+    connectID: 'connectID1',
 };
 const history = createMemoryHistory();
 const buildProps = (doc) => ({

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.17.2';
+export const VERSION = '3.17.3';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/link_editable.js

@@ -13,14 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ContextMenu } from '@manuscripts/style-guide';
+import { isDeleted } from '@manuscripts/track-changes-plugin';
 import { schema } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
+import { convertLinkToSupplementWeblink } from '../commands';
 import { LinkForm, } from '../components/views/LinkForm';
 import { allowedHref } from '../lib/url';
 import { createEditableNodeView } from './creators';
 import { LinkView } from './link';
 import ReactSubView from './ReactSubView';
-import { isDeleted } from '@manuscripts/track-changes-plugin';
 export class LinkEditableView extends LinkView {
     constructor() {
         super(...arguments);
@@ -35,7 +37,7 @@ export class LinkEditableView extends LinkView {
             this.dom.addEventListener('click', this.handleClick);
         };
         this.selectNode = () => {
-            if (!isDeleted(this.node)) {
+            if (!isDeleted(this.node) && !this.node.attrs.href) {
                 this.showForm();
             }
         };
@@ -45,6 +47,50 @@ export class LinkEditableView extends LinkView {
         this.deselectNode = () => {
             this.closeForm();
         };
+        this.showContextMenu = () => {
+            if (!this.props.getCapabilities().editArticle) {
+                return;
+            }
+            this.closeForm();
+            const href = this.node.attrs.href;
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: this.handleEdit,
+                        icon: 'Edit',
+                    },
+                    {
+                        label: 'Convert to Weblink',
+                        action: this.handleConvertToWebLink,
+                        icon: 'ConvertToWebLink',
+                    },
+                    {
+                        label: 'Open Link',
+                        action: this.handleOpenLink,
+                        icon: 'ExternalLink',
+                        disabled: !allowedHref(href),
+                    },
+                ],
+            };
+            this.popperContainer = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'link-context-menu']);
+            this.props.popper.show(this.dom, this.popperContainer, 'bottom');
+        };
+        this.handleEdit = () => {
+            this.closeForm();
+            this.showForm();
+        };
+        this.handleConvertToWebLink = () => {
+            this.closeForm();
+            convertLinkToSupplementWeblink(this.getPos(), this.node, this.view);
+        };
+        this.handleOpenLink = () => {
+            const href = this.node.attrs.href;
+            if (allowedHref(href)) {
+                window.open(href, '_blank', 'noopener,noreferrer');
+            }
+            this.closeForm();
+        };
         this.showForm = () => {
             if (!this.props.getCapabilities().editArticle) {
                 return;
@@ -65,9 +111,14 @@ export class LinkEditableView extends LinkView {
             this.props.popper.show(this.dom, this.popperContainer, 'bottom');
         };
         this.handleClick = (e) => {
-            if (this.props.getCapabilities().editArticle) {
-                e.preventDefault();
+            if (!this.props.getCapabilities().editArticle) {
+                return;
+            }
+            e.preventDefault();
+            if (isDeleted(this.node) || !this.node.attrs.href) {
+                return;
             }
+            this.showContextMenu();
         };
         this.handleCancel = () => {
             const attrs = this.node.attrs;

package/dist/types/commands.d.ts

@@ -35,6 +35,7 @@ export declare const insertEmbed: (state: ManuscriptEditorState, dispatch?: Disp
 export declare const insertTable: (config: TableConfig, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertSupplement: (file: FileAttachment, view: ManuscriptEditorView, setSelection?: boolean) => boolean;
 export declare const insertSupplementWeblink: (url: string, title: string, view: ManuscriptEditorView) => boolean;
+export declare const convertLinkToSupplementWeblink: (pos: number, node: ManuscriptNode, view: ManuscriptEditorView) => boolean;
 export declare const updateSupplementWeblink: (pos: number, url: string, title: string, view: ManuscriptEditorView) => boolean;
 export declare const insertAttachment: (file: FileAttachment, state: ManuscriptEditorState, type: string, dispatch?: Dispatch) => boolean;
 export declare const insertBlock: (nodeType: ManuscriptNodeType) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.17.2";
+export declare const VERSION = "3.17.3";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -23,6 +23,10 @@ export declare class LinkEditableView extends LinkView {
     selectNode: () => void;
     destroy: () => void;
     deselectNode: () => void;
+    private showContextMenu;
+    private handleEdit;
+    private handleConvertToWebLink;
+    private handleOpenLink;
     private showForm;
     private handleClick;
     private handleCancel;
@@ -31,5 +35,5 @@ export declare class LinkEditableView extends LinkView {
     private removeLink;
     private closeForm;
 }
-declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<LinkEditableView>;
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("../commands").Dispatch) => import("../types").NodeViewCreator<LinkEditableView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.17.2",
+  "version": "3.17.3",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@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.1",
+    "@manuscripts/style-guide": "3.7.2",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.5.2",
     "@popperjs/core": "2.11.8",

package/src/commands.ts

@@ -543,6 +543,40 @@ export const insertSupplementWeblink = (
   return true
 }
 
+export const convertLinkToSupplementWeblink = (
+  pos: number,
+  node: ManuscriptNode,
+  view: ManuscriptEditorView
+) => {
+  const href = node.attrs.href
+  if (!href) {
+    return false
+  }
+
+  const text = node.textContent.trim()
+  const id = generateNodeID(schema.nodes.supplement)
+
+  const supplement = schema.nodes.supplement.createAndFill(
+    { id, href },
+    createAndFillCaption()
+  ) as SupplementNode
+
+  const crossReference = schema.nodes.cross_reference.create({
+    id: generateNodeID(schema.nodes.cross_reference),
+    rids: [id],
+    label: text,
+  })
+
+  const tr = view.state.tr
+  tr.replaceWith(pos, pos + node.nodeSize, crossReference)
+  upsertSupplementsSection(tr, supplement)
+  tr.setSelection(TextSelection.create(tr.doc, pos))
+
+  view.focus()
+  view.dispatch(tr)
+  return true
+}
+
 export const updateSupplementWeblink = (
   pos: number,
   url: string,

package/src/components/references/ReferenceSearch.tsx

@@ -75,14 +75,7 @@ export const ReferenceSearch: React.FC<{
   onAdd: () => void
   onCite: (items: BibliographyItemAttrs[]) => void
   onCancel: () => void
-}> = ({
-  query: initialQuery,
-  sources,
-  items,
-  onAdd,
-  onCite,
-  onCancel,
-}) => {
+}> = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel }) => {
   const [query, setQuery] = useState<string>(initialQuery || '')
   const [selections, setSelections] = useState(
     new Map<string, BibliographyItemAttrs>()

package/src/lib/__tests__/plugins.test.ts

@@ -34,7 +34,7 @@ import { defaultTheme } from '@manuscripts/style-guide'
 const userProfile: UserProfile = {
   _id: 'MPUserProfile:1',
   userID: 'MPUser:1',
-  connectID: 'connectID1'
+  connectID: 'connectID1',
 }
 
 const history = createMemoryHistory()

package/src/versions.ts

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

package/src/views/link_editable.ts

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
+import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
 import { schema } from '@manuscripts/transform'
 import { TextSelection } from 'prosemirror-state'
 
+import { convertLinkToSupplementWeblink } from '../commands'
 import {
   LinkForm,
   LinkFormProps,
@@ -26,7 +29,6 @@ import { allowedHref } from '../lib/url'
 import { createEditableNodeView } from './creators'
 import { LinkView } from './link'
 import ReactSubView from './ReactSubView'
-import { isDeleted } from '@manuscripts/track-changes-plugin'
 
 export class LinkEditableView extends LinkView {
   protected popperContainer: HTMLDivElement
@@ -59,7 +61,7 @@ export class LinkEditableView extends LinkView {
   }
 
   public selectNode = () => {
-    if (!isDeleted(this.node)) {
+    if (!isDeleted(this.node) && !this.node.attrs.href) {
       this.showForm()
     }
   }
@@ -72,6 +74,67 @@ export class LinkEditableView extends LinkView {
     this.closeForm()
   }
 
+  private showContextMenu = () => {
+    if (!this.props.getCapabilities().editArticle) {
+      return
+    }
+
+    this.closeForm()
+
+    const href = this.node.attrs.href
+
+    const componentProps: ContextMenuProps = {
+      actions: [
+        {
+          label: 'Edit',
+          action: this.handleEdit,
+          icon: 'Edit',
+        },
+        {
+          label: 'Convert to Weblink',
+          action: this.handleConvertToWebLink,
+          icon: 'ConvertToWebLink',
+        },
+        {
+          label: 'Open Link',
+          action: this.handleOpenLink,
+          icon: 'ExternalLink',
+          disabled: !allowedHref(href),
+        },
+      ],
+    }
+
+    this.popperContainer = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu', 'link-context-menu']
+    )
+
+    this.props.popper.show(this.dom, this.popperContainer, 'bottom')
+  }
+
+  private handleEdit = () => {
+    this.closeForm()
+    this.showForm()
+  }
+
+  private handleConvertToWebLink = () => {
+    this.closeForm()
+    convertLinkToSupplementWeblink(this.getPos(), this.node, this.view)
+  }
+
+  private handleOpenLink = () => {
+    const href = this.node.attrs.href
+    if (allowedHref(href)) {
+      window.open(href, '_blank', 'noopener,noreferrer')
+    }
+    this.closeForm()
+  }
+
   private showForm = () => {
     if (!this.props.getCapabilities().editArticle) {
       return
@@ -106,9 +169,15 @@ export class LinkEditableView extends LinkView {
   }
 
   private handleClick = (e: Event) => {
-    if (this.props.getCapabilities().editArticle) {
-      e.preventDefault()
+    if (!this.props.getCapabilities().editArticle) {
+      return
+    }
+    e.preventDefault()
+
+    if (isDeleted(this.node) || !this.node.attrs.href) {
+      return
     }
+    this.showContextMenu()
   }
 
   private handleCancel = () => {