@manuscripts/body-editor 3.19.0 → 3.19.1

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

@@ -1,9 +1,10 @@
-import { AddIcon, AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { AddIcon, AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, ButtonGroup, DeleteIcon, LinkIcon, outlineStyle, } from '@manuscripts/style-guide';
+import { Button, IconButton } from '@manuscripts/style-guide/mui';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { ReferenceForm, } from './ReferenceForm/ReferenceForm';
+import styled, { css } from 'styled-components';
+import { ReferenceForm, validateReference, } from './ReferenceForm/ReferenceForm';
 import { ReferenceLine } from './ReferenceLine';
 import { ImportBibliographyModal } from './ImportBibliographyModal';
 import { ImportSuccessPlaceholder } from './ImportSuccessPlaceholder';
@@ -20,6 +21,7 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
     const valuesRef = useRef(undefined);
     const [selection, setSelection] = useState();
     const [isNew, setIsNew] = useState(false);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
     const selectionRef = useRef(null);
     const sortedItems = useMemo(() => [...items].sort((a, b) => {
         const aUncited = (citationCounts.get(a.id) ?? 0) === 0;
@@ -84,6 +86,10 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         const extraKeys = allKeys.filter((key) => !basicProps.includes(key));
         return extraKeys.length > 0;
     };
+    const canDeleteSelectedItem = (selection &&
+        !citationCounts.get(selection.id) &&
+        isNewItem(selection, ['id', 'type'])) ??
+        false;
     const handleSave = (values) => {
         if (!values || !selection) {
             return;
@@ -122,8 +128,13 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         setIsNew(false);
         setSelection(item);
     };
+    const [canSave, setCanSave] = useState(false);
     const handleChange = (values) => {
         valuesRef.current = values;
+        const errors = validateReference(values);
+        const isValid = Object.keys(errors).length === 0;
+        const dirty = actionsRef.current?.isDirty() ?? false;
+        setCanSave(isValid && dirty);
     };
     const handleImportSave = (data) => {
         handleImport(data);
@@ -144,6 +155,19 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                         title: 'Save',
                     },
                 } }),
+            React.createElement(Dialog, { isOpen: showDeleteDialog, category: Category.confirmation, header: "Delete Reference", message: "Are you sure you want to delete this reference from the list?", actions: {
+                    secondary: {
+                        action: () => {
+                            handleDelete();
+                            setShowDeleteDialog(false);
+                        },
+                        title: 'Delete',
+                    },
+                    primary: {
+                        action: () => setShowDeleteDialog(false),
+                        title: 'Cancel',
+                    },
+                } }),
             React.createElement(ReferencesModalContainer, { "data-cy": 'references-editor' },
                 React.createElement(ModalHeader, null,
                     React.createElement(CloseButton, { "data-cy": "modal-close-button", onClick: onCancel })),
@@ -166,18 +190,25 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                                 React.createElement(AddIcon, null),
                                 React.createElement("span", null, "New Reference")),
                             React.createElement(ReferencesInnerWrapper, null,
-                                React.createElement(ExistingReferencesHeading, null, "Existing References"),
+                                sortedItems.length ? (React.createElement(ExistingReferencesHeading, null, "Existing References")) : null,
                                 sortedItems.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
                                     React.createElement(IconContainer, null,
                                         React.createElement(CitationCountIconStyled, null),
                                         (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
-                                    React.createElement(ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item })))))),
+                                    React.createElement(ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item }),
+                                    isSelected(item) && (React.createElement(ButtonGroup, null,
+                                        React.createElement(IconButton, { component: 'a', href: `https://doi.org/${item.DOI}`, target: '_blank', size: 'small' },
+                                            React.createElement(DOILinkIcon, { fill: '#6E6E6E' })),
+                                        React.createElement(IconButton, { disabled: !canDeleteSelectedItem, size: 'small', onClick: () => setShowDeleteDialog(true) },
+                                            React.createElement(DeleteIcon, { fill: '#6E6E6E' }))))))))),
                         React.createElement(ImportFromFileFooter, null,
                             React.createElement(ImportFromFileButton, { type: "button", "data-cy": "import-from-file-button", onClick: () => setImporting(true) },
                                 React.createElement(AddAuthorIcon, null),
                                 "Import from file"))),
-                    React.createElement(ScrollableModalContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalizeBlblioItem(selection), showDelete: !citationCounts.get(selection.id) &&
-                            isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
+                    React.createElement(ReferencesContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalizeBlblioItem(selection), onChange: handleChange, onSave: handleSave, actionsRef: actionsRef }))))),
+                React.createElement(Footer, null,
+                    React.createElement(TertiaryButton, { variant: "tertiary", onClick: onCancel }, "Close"),
+                    React.createElement(Button, { disabled: !canSave, onClick: () => actionsRef.current?.submit() }, "Save Changes"))))));
 };
 const ReferencesModalContainer = styled(ModalContainer) `
   min-width: 960px;
@@ -185,15 +216,19 @@ const ReferencesModalContainer = styled(ModalContainer) `
 const ReferencesSidebar = styled(ModalSidebar) `
   width: 70%;
 `;
+const ReferencesContent = styled(ScrollableModalContent) `
+  padding-top: 32px;
+`;
 const ReferencesSidebarContent = styled(SidebarContent) `
   overflow-y: auto;
+  padding-top: 8px;
 `;
 const ReferencesInnerWrapper = withListNavigation(styled.div `
   width: 100%;
   padding: 12px 0;
 `);
 const CitationCountIconStyled = styled(CitationCountIcon) ``;
-const ReferenceButton = withNavigableListItem(styled.button `
+const referenceButtonStyles = css `
   cursor: pointer;
   display: flex;
   width: 100%;
@@ -205,6 +240,7 @@ const ReferenceButton = withNavigableListItem(styled.button `
   border: none;
   border-radius: 0;
   text-align: inherit;
+  color: #353535;
 
   padding: ${(props) => props.theme.grid.unit * 4}px 0;
   border-top: 1px solid transparent;
@@ -229,6 +265,12 @@ const ReferenceButton = withNavigableListItem(styled.button `
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
+`;
+const ReferenceButton = withNavigableListItem(styled.div.attrs({
+    role: 'button',
+    tabIndex: 0,
+}) `
+  ${referenceButtonStyles}
 `);
 const IconContainer = styled.div `
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
@@ -251,10 +293,14 @@ const CitationCount = styled.div `
     background-color: #fe8f1f;
   }
 `;
-const NewReferenceButton = styled(ReferenceButton) `
+const NewReferenceButton = styled.button `
+  ${referenceButtonStyles}
+
   svg {
     margin-right: 8px;
   }
+
+  ${outlineStyle}
 `;
 const ExistingReferencesHeading = styled.h3 `
   font-size: 18px;
@@ -291,3 +337,21 @@ const ImportFromFileButton = styled.button `
     fill: #6e6e6e;
   }
 `;
+const Footer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 32px;
+  gap: 16px;
+`;
+const TertiaryButton = styled(Button) `
+  &.MuiButton-textSecondary {
+    color: #0d79d0;
+
+    &:hover {
+      background-color: rgba(13, 121, 208, 0.04);
+    }
+  }
+`;
+const DOILinkIcon = styled(LinkIcon) `
+  transform: rotate(-45deg);
+`;

package/dist/es/menus.js

@@ -26,6 +26,7 @@ import { templateAllows } from './lib/template';
 import { isEditAllowed } from './lib/utils';
 import { getEditorProps } from './plugins/editor-props';
 import { openInsertAwardModal } from './components/awards/AwardModal';
+import { openReferencesEditor } from './components/references/ReferencesEditor';
 export const getEditorMenus = (editor) => {
     const { isCommandValid, state, view } = editor;
     const doCommand = (command) => () => editor.doCommand(command);
@@ -563,6 +564,17 @@ export const getEditorMenus = (editor) => {
                 run: doCommand(insertInlineCitation),
                 isHidden: !templateAllows(state, schema.nodes.citation),
             },
+            {
+                id: 'insert-reference-section',
+                label: 'New reference',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+N',
+                    pc: 'CommandOrControl+Option+N',
+                },
+                isEnabled: isEditAllowed(state),
+                run: doCommand(openReferencesEditor),
+                isHidden: !templateAllows(state, schema.nodes.bibliography_item),
+            },
             {
                 id: 'insert-cross-reference',
                 label: 'Cross-reference',

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.19.0';
+export const VERSION = '3.19.1';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/components/references/ReferenceForm/ReferenceForm.d.ts

@@ -17,13 +17,13 @@ import { BibliographyItemAttrs } from '@manuscripts/transform';
 import React, { MutableRefObject } from 'react';
 export interface ReferenceFormActions {
     reset: () => void;
+    submit: () => void;
+    isDirty: () => boolean;
 }
+export declare const validateReference: (values: BibliographyItemAttrs) => Partial<BibliographyItemAttrs>;
 export declare const ReferenceForm: React.FC<{
     values: BibliographyItemAttrs;
-    showDelete: boolean;
     onChange: (values: BibliographyItemAttrs) => void;
-    onCancel: () => void;
-    onDelete: () => void;
     onSave: (values: BibliographyItemAttrs) => void;
     actionsRef?: MutableRefObject<ReferenceFormActions | undefined>;
 }>;

package/dist/types/components/references/ReferenceForm/styled-components.d.ts

@@ -243,7 +243,6 @@ export declare const Button: import("styled-components/dist/types").IStyledCompo
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "$defaultColor" | "$size">>> & string;
-export declare const Actions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ReferenceTextField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("@manuscripts/style-guide").TextFieldProps> & import("@manuscripts/style-guide").TextFieldProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("@manuscripts/style-guide").TextFieldProps> & import("@manuscripts/style-guide").TextFieldProps, never>>, "as" | "forwardedAs"> & {
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;

package/dist/types/components/references/ReferencesEditor.d.ts

@@ -1,7 +1,10 @@
 import { BibliographyItemAttrs } from '@manuscripts/transform';
 import React from 'react';
 import { ReferencesModalProps } from './ReferencesModal';
+import { EditorState, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 export type ReferencesEditorProps = Omit<ReferencesModalProps, 'isOpen' | 'onCancel' | 'handleImport' | 'onSave'> & {
     onSave: (item: BibliographyItemAttrs[]) => void;
 };
 export declare const ReferencesEditor: React.FC<ReferencesEditorProps>;
+export declare const openReferencesEditor: (state: EditorState, _?: (tr: Transaction) => void, view?: EditorView) => boolean;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.19.0";
+export declare const VERSION = "3.19.1";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "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.8.0",
+    "@manuscripts/style-guide": "3.8.1",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.5.7",
     "@popperjs/core": "2.11.8",

package/src/components/references/ReferenceForm/ReferenceForm.tsx

@@ -16,15 +16,7 @@
 
 import {
   AddAuthorIcon,
-  ButtonGroup,
-  Category,
-  DeleteIcon,
-  Dialog,
-  IconButton,
-  LinkIcon,
   OptionType,
-  PrimaryButton,
-  SecondaryButton,
   SelectField,
   Label,
   FormRow,
@@ -42,9 +34,7 @@ import { shouldRenderField } from '../../../lib/utils'
 import { ChangeHandlingForm } from '../../ChangeHandlingForm'
 import { PersonDropDown } from './PersonDropDown'
 import {
-  Actions,
   Button,
-  DeleteButton,
   FormFields,
   ReferenceTextArea,
   ReferenceTextField,
@@ -58,22 +48,33 @@ const bibliographyItemTypeOptions: OptionType[] = bibliographyItemTypes.map(
 )
 export interface ReferenceFormActions {
   reset: () => void
+  submit: () => void
+  isDirty: () => boolean
+}
+
+export const validateReference = (values: BibliographyItemAttrs) => {
+  const errors: Partial<BibliographyItemAttrs> = {}
+
+  if (values.type === 'literal') {
+    if (!values.literal?.trim()) {
+      errors.literal = 'Literal is required for unstructured references'
+    }
+  } else {
+    if (!values.title?.trim()) {
+      errors.title = 'Title is required'
+    }
+  }
+  return errors
 }
 
 export const ReferenceForm: React.FC<{
   values: BibliographyItemAttrs
-  showDelete: boolean
   onChange: (values: BibliographyItemAttrs) => void
-  onCancel: () => void
-  onDelete: () => void
   onSave: (values: BibliographyItemAttrs) => void
   actionsRef?: MutableRefObject<ReferenceFormActions | undefined>
 }> = ({
   values,
-  showDelete,
   onChange,
-  onDelete,
-  onCancel,
   onSave,
   actionsRef,
 }) => {
@@ -88,28 +89,15 @@ export const ReferenceForm: React.FC<{
     }
   }, [values])
 
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-
-  const validateReference = (values: BibliographyItemAttrs) => {
-    const errors: Partial<BibliographyItemAttrs> = {}
-
-    if (values.type === 'literal') {
-      if (!values.literal?.trim()) {
-        errors.literal = 'Literal is required for unstructured references'
-      }
-    } else {
-      if (!values.title?.trim()) {
-        errors.title = 'Title is required'
-      }
-    }
-    return errors
-  }
-
   if (actionsRef && !actionsRef.current) {
     actionsRef.current = {
       reset: () => {
         formRef.current?.resetForm()
       },
+      submit: () => {
+        formRef.current?.submitForm()
+      },
+      isDirty: () => formRef.current?.dirty ?? false,
     }
   }
 
@@ -124,55 +112,6 @@ export const ReferenceForm: React.FC<{
       {(formik) => {
         return (
           <ChangeHandlingForm onChange={onChange}>
-            <Dialog
-              isOpen={showDeleteDialog}
-              category={Category.confirmation}
-              header="Delete Reference"
-              message="Are you sure you want to delete this reference from the list?"
-              actions={{
-                secondary: {
-                  action: () => {
-                    onDelete()
-                    setShowDeleteDialog(false)
-                  },
-                  title: 'Delete',
-                },
-                primary: {
-                  action: () => setShowDeleteDialog(false),
-                  title: 'Cancel',
-                },
-              }}
-            />
-            <Actions>
-              <ButtonGroup>
-                <IconButton
-                  as="a"
-                  href={`https://doi.org/${formik.values.DOI}`}
-                  target={'_blank'}
-                >
-                  <LinkIcon />
-                </IconButton>
-                <DeleteButton
-                  $defaultColor
-                  disabled={!showDelete}
-                  data-tooltip-content="Unable to delete because the item is used in the document"
-                  data-tooltip-hidden={showDelete}
-                  onClick={() => setShowDeleteDialog(true)}
-                >
-                  <DeleteIcon />
-                </DeleteButton>
-              </ButtonGroup>
-              <ButtonGroup>
-                <SecondaryButton onClick={onCancel}>Cancel</SecondaryButton>
-                <PrimaryButton
-                  type="submit"
-                  disabled={!formik.isValid || !formik.dirty}
-                >
-                  Save
-                </PrimaryButton>
-              </ButtonGroup>
-            </Actions>
-
             <FormFields ref={fieldsRef}>
               <FormRow>
                 <Label htmlFor={'citation-item-type'}>Type</Label>

package/src/components/references/ReferenceForm/styled-components.ts

@@ -37,19 +37,6 @@ export const Button = styled(IconButton).attrs({
   }
 `
 
-export const Actions = styled.div`
-  flex-shrink: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .tooltip {
-    max-width: ${(props) => props.theme.grid.unit * 39}px;
-    padding: ${(props) => props.theme.grid.unit * 2}px;
-    border-radius: 6px;
-  }
-`
-
 export const ReferenceTextField = styled(TextField)`
   padding: ${(props) => props.theme.grid.unit * 2}px
     ${(props) => props.theme.grid.unit * 3}px;

package/src/components/references/ReferencesEditor.tsx

@@ -23,6 +23,12 @@ import React, { useEffect, useReducer, useState } from 'react'
 import { attrsReducer } from '../../lib/array-reducer'
 import { cleanItemValues } from '../../lib/utils'
 import { ReferencesModal, ReferencesModalProps } from './ReferencesModal'
+import { getEditorProps } from '../../plugins/editor-props'
+import { deleteNode, saveBibliographyItem } from '../../lib/view'
+import ReactSubView from '../../views/ReactSubView'
+import { EditorState, Transaction } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { getBibliographyPluginState } from '../../plugins/bibliography'
 
 export type ReferencesEditorProps = Omit<
   ReferencesModalProps,
@@ -88,3 +94,35 @@ export const ReferencesEditor: React.FC<ReferencesEditorProps> = (props) => {
     />
   )
 }
+
+export const openReferencesEditor = (
+  state: EditorState,
+  _?: (tr: Transaction) => void,
+  view?: EditorView
+) => {
+  if (!view) {
+    return false
+  }
+
+  const props = getEditorProps(state)
+  const bib = getBibliographyPluginState(view.state)
+
+  const componentProps: ReferencesEditorProps = {
+    items: bib ? Array.from(bib.bibliographyItems.values()) : [],
+    citationCounts: new Map<string, number>(bib?.citationCounts),
+    onDelete: (item) => deleteNode(view, item.id),
+    onSave: (item) => saveBibliographyItem(view, item),
+  }
+
+  const referencesEditor = ReactSubView(
+    props,
+    ReferencesEditor,
+    componentProps,
+    state.doc,
+    () => 0,
+    view
+  )
+  view.focus()
+  document.body.appendChild(referencesEditor)
+  return true
+}