npm - @manuscripts/body-editor - Versions diffs - 3.19.0 → 3.19.2 - Mend

@manuscripts/body-editor 3.19.0 → 3.19.2

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 (53) 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/components/references/ReferenceForm/ReferenceForm.js +22 -40
package/dist/cjs/components/references/ReferenceForm/styled-components.js +1 -13
package/dist/cjs/components/references/ReferencesEditor.js +26 -1
package/dist/cjs/components/references/ReferencesModal.js +71 -7
package/dist/cjs/lib/utils.js +12 -1
package/dist/cjs/menus.js +12 -0
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/components/references/ReferenceForm/ReferenceForm.js +21 -40
package/dist/es/components/references/ReferenceForm/styled-components.js +0 -12
package/dist/es/components/references/ReferencesEditor.js +21 -0
package/dist/es/components/references/ReferencesModal.js +73 -9
package/dist/es/lib/utils.js +11 -1
package/dist/es/menus.js +12 -0
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/components/references/ReferenceForm/ReferenceForm.d.ts +3 -3
package/dist/types/components/references/ReferenceForm/styled-components.d.ts +0 -1
package/dist/types/components/references/ReferencesEditor.d.ts +3 -0
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/components/references/ReferenceForm/ReferenceForm.tsx +21 -82
package/src/components/references/ReferenceForm/styled-components.ts +0 -13
package/src/components/references/ReferencesEditor.tsx +38 -0
package/src/components/references/ReferencesModal.tsx +116 -14
package/src/lib/utils.ts +24 -0
package/src/lib/view.ts +1 -0
package/src/menus.tsx +12 -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/components/references/ReferenceForm/ReferenceForm.tsx CHANGED Viewed

@@ -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>