@manuscripts/body-editor 3.16.0 → 3.16.1

package/src/components/views/CrossReferenceItems.tsx

@@ -15,96 +15,147 @@
  */
 
 import {
-  ButtonGroup,
+  CloseButton,
+  ExpandableSection,
   PrimaryButton,
-  SecondaryButton,
-  TextArea,
-  withFocusTrap,
   withListNavigation,
   withNavigableListItem,
+  FileUnknownIcon,
+  getFileIcon,
+  ArrowDownIcon,
+  StyledModal,
+  ModalContainer,
+  ModalHeader,
+  ModalBody,
+  WebLinkIcon,
 } from '@manuscripts/style-guide'
-import { Target } from '@manuscripts/transform'
-import React, { useEffect, useRef, useState } from 'react'
+import { Target, schema } from '@manuscripts/transform'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
-const Container = withFocusTrap(styled.div`
-  padding: ${(props) => props.theme.grid.unit * 3}px
-    ${(props) => props.theme.grid.unit * 4}px;
-  display: flex;
-  flex-direction: column;
-  max-height: 60vh;
-  overflow: hidden;
-`)
-
-const Actions = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-shrink: 0;
-`
+import { FileAttachment } from '../../lib/files'
+import { allowedHref } from '../../lib/url'
+import { nodeTypeIcon } from '../../node-type-icons'
+import FormFooter from '../form/FormFooter'
 
 const Items = withListNavigation(styled.div`
   flex: 1;
   overflow-y: auto;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
 `)
 
-const CrossReferenceItem = withNavigableListItem(styled.div<{
-  $isSelected: boolean
-}>`
+const CrossReferenceItem = withNavigableListItem(styled.div`
   cursor: pointer;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  background-color: ${(props) =>
-    props.$isSelected
-      ? props.theme.colors.background.selected
-      : props.theme.colors.background.primary};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  background-color: ${(props) => props.theme.colors.background.primary};
   transition: background-color 0.1s;
-  border: solid
-    ${(props) =>
-      props.$isSelected
-        ? props.theme.colors.brand.medium
-        : props.theme.colors.border.secondary};
-  border-width: 1px 0;
-  z-index: ${(props) => (props.$isSelected ? '1' : '0')};
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   &:hover {
-    background-color: ${(props) => props.theme.colors.background.selected};
+    background-color: #f2f2f2;
+  }
+
+  &.active {
+    background-color: #f2f2f2;
+    z-index: 1;
   }
 `)
 
 const Label = styled.span`
   color: ${(props) => props.theme.colors.text.primary};
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  min-width: fit-content;
 `
 
 const Caption = styled.span`
   color: ${(props) => props.theme.colors.text.secondary};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  margin-left: 3.2px;
 `
 
 const Heading = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
+  font-size: ${(props) => props.theme.font.size.medium};
   font-weight: ${(props) => props.theme.font.weight.bold};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
 `
 
 const Empty = styled.div`
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.text.tertiary};
 `
+
+const GroupExpandableSection = styled(ExpandableSection)`
+  & > div:first-child {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    padding-left: 0;
+    gap: 10px;
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`
 const DefaultLabelWrapper = styled.div`
-  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
 `
 
-const CustomTextArea = styled(TextArea)`
-  width: 100%;
-  height: 75px;
+const ItemIcon = styled.span`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`
+
+const FieldLabel = styled.label`
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  margin-bottom: ${(props) => props.theme.grid.unit}px;
+`
+
+const CustomTextInput = styled.input`
   color: ${(props) => props.theme.colors.text.secondary};
-  background-color: ${(props) =>
-    props.theme.colors.background.primary} !important;
+  background-color: ${(props) => props.theme.colors.background.primary};
   border: 1px solid ${(props) => props.theme.colors.border.secondary};
   border-radius: ${(props) => props.theme.grid.radius.small};
   padding: ${(props) => props.theme.grid.unit * 2}px;
+  &:disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.colors.background.disabled};
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`
+const StyledModalBody = styled(ModalBody)`
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 5}px
+    ${(props) => props.theme.grid.unit * 6}px;
+  max-height: 580px;
+  min-width: 600px;
+  max-width: 600px;
+  overflow: hidden;
 `
 
 // trim a caption, avoiding cutting words
@@ -118,23 +169,54 @@ const trimmedCaption = (caption: string, limit: number): string => {
   return caption.replace(captionSearch, '$1…')
 }
 
+const getTargetIcon = (
+  target: Target,
+  files: FileAttachment[]
+): React.ReactNode => {
+  if (target.type === schema.nodes.supplement.name) {
+    if (target.href && allowedHref(target.href)) {
+      return <WebLinkIcon className="file-icon" />
+    }
+    const fileName =
+      files.find((f) => f.id === target.href)?.name ?? target.label ?? ''
+    return getFileIcon(fileName) ?? <FileUnknownIcon />
+  }
+
+  return nodeTypeIcon(schema.nodes[target.type])
+}
+
+const GROUP_LABELS: Record<string, string> = {
+  figure_element: 'Figures',
+  table_element: 'Tables',
+  equation_element: 'Equations',
+  listing_element: 'Listings',
+  box_element: 'Boxes',
+  embed: 'Media',
+  supplement: 'Supplementary files',
+}
+
 interface Props {
   targets: Target[]
+  files: FileAttachment[]
   handleSelect: (id: string, customLabel?: string) => void
   handleCancel: () => void
   currentTargetId?: string
   currentCustomLabel?: string
+  isEdit?: boolean
 }
 
 export const CrossReferenceItems: React.FC<Props> = ({
   targets,
+  files,
   handleSelect,
   handleCancel,
   currentTargetId,
   currentCustomLabel,
+  isEdit = false,
 }) => {
+  const [isOpen, setIsOpen] = useState(true)
   const [selectedItem, setSelectedItem] = useState<string>('')
-  const customTextRef = useRef<HTMLTextAreaElement>(null)
+  const customTextRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (currentTargetId) {
@@ -142,58 +224,103 @@ export const CrossReferenceItems: React.FC<Props> = ({
     }
   }, [currentTargetId])
 
+  const close = useCallback(() => {
+    setIsOpen(false)
+    handleCancel()
+  }, [handleCancel])
+
+  const grouped = targets.reduce<Record<string, Target[]>>((acc, t) => {
+    ;(acc[t.type] ??= []).push(t)
+    return acc
+  }, {})
+
   return (
-    <Container>
-      <Heading>Insert Cross-reference</Heading>
-
-      <Items>
-        {targets.length ? (
-          targets.map((target) => (
-            <CrossReferenceItem
-              key={target.id}
-              $isSelected={selectedItem === target.id}
-              onClick={() => setSelectedItem(target.id)}
-            >
-              <DefaultLabelWrapper>
-                <Label>{target.label}</Label>
-                <Caption>
-                  {target.caption && ': ' + trimmedCaption(target.caption, 200)}
-                </Caption>
-              </DefaultLabelWrapper>
-              {selectedItem === target.id && (
-                <CustomTextArea
-                  ref={customTextRef}
-                  placeholder={'Or type custom text'}
-                  defaultValue={
-                    currentTargetId &&
-                    currentTargetId === selectedItem &&
-                    currentCustomLabel
-                      ? currentCustomLabel
-                      : ''
-                  }
-                />
-              )}
-            </CrossReferenceItem>
-          ))
-        ) : (
-          <Empty>No cross-reference targets available.</Empty>
-        )}
-      </Items>
-
-      <Actions>
-        <ButtonGroup>
-          <SecondaryButton onClick={handleCancel}>Cancel</SecondaryButton>
-          <PrimaryButton
-            onClick={() =>
-              selectedItem &&
-              handleSelect(selectedItem, customTextRef.current?.value || '')
-            }
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={close}
+      shouldCloseOnOverlayClick={true}
+    >
+      <ModalContainer data-cy="cross-reference-editor">
+        <ModalHeader>
+          <CloseButton onClick={close} />
+        </ModalHeader>
+        <StyledModalBody>
+          <Heading>
+            {isEdit ? 'Edit Cross-reference' : 'Insert Cross-reference'}
+          </Heading>
+
+          <FieldLabel htmlFor="cross-reference-custom-text">
+            Custom display text
+          </FieldLabel>
+          <CustomTextInput
+            ref={customTextRef}
+            id="cross-reference-custom-text"
+            data-cy="cross-reference-custom-text"
+            type="text"
+            placeholder={'Custom display text...'}
             disabled={!selectedItem}
-          >
-            Insert
-          </PrimaryButton>
-        </ButtonGroup>
-      </Actions>
-    </Container>
+            defaultValue={currentCustomLabel ?? ''}
+          />
+
+          <Items>
+            {Object.keys(grouped).length ? (
+              Object.entries(grouped).map(([type, group]) => (
+                <GroupExpandableSection
+                  key={type}
+                  title={GROUP_LABELS[type]}
+                  icon={ArrowDownIcon}
+                >
+                  {group.map((target) => {
+                    const icon = getTargetIcon(target, files)
+
+                    return (
+                      <CrossReferenceItem
+                        key={target.id}
+                        data-cy="cross-reference-item"
+                        className={
+                          selectedItem === target.id ? 'active' : undefined
+                        }
+                        onClick={() => setSelectedItem(target.id)}
+                      >
+                        <DefaultLabelWrapper>
+                          {icon ? <ItemIcon>{icon}</ItemIcon> : null}
+                          <Label>
+                            {target.label}
+                            {target.caption && `:`}
+                          </Label>
+                          <Caption>
+                            {trimmedCaption(target.caption, 200)}
+                          </Caption>
+                        </DefaultLabelWrapper>
+                      </CrossReferenceItem>
+                    )
+                  })}
+                </GroupExpandableSection>
+              ))
+            ) : (
+              <Empty>No cross-reference targets available.</Empty>
+            )}
+          </Items>
+        </StyledModalBody>
+        <FormFooter
+          onCancel={close}
+          cancelLabel="Cancel"
+          primaryAction={
+            <PrimaryButton
+              onClick={() => {
+                if (selectedItem) {
+                  setIsOpen(false)
+                  const customLabel = customTextRef.current?.value
+                  handleSelect(selectedItem, customLabel || '')
+                }
+              }}
+              disabled={!selectedItem}
+            >
+              {isEdit ? 'Update' : 'Insert'}
+            </PrimaryButton>
+          }
+        />
+      </ModalContainer>
+    </StyledModal>
   )
 }

package/src/components/views/DeleteSupplementDialog.tsx

@@ -13,10 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  Category,
-  Dialog,
-} from '@manuscripts/style-guide'
+import { Category, Dialog } from '@manuscripts/style-guide'
 import { ManuscriptEditorView, SupplementNode } from '@manuscripts/transform'
 import React, { useState } from 'react'
 
@@ -37,8 +34,8 @@ const DeleteSupplementDialog: React.FC<{
     <Dialog
       isOpen={isOpen}
       category={Category.confirmation}
-      header='Delete supplement'
-      message='Are you sure you want to delete &ldquo;{label}&rdquo;?'
+      header="Delete supplement"
+      message="Are you sure you want to delete &ldquo;{label}&rdquo;?"
       actions={{
         primary: {
           action: () => {

package/src/lib/footnotes.ts

@@ -43,7 +43,9 @@ export const findFootnotesContainerNode = (
   )
 }
 
-export const findParentFootnote: (selection: Selection) => ContentNodeWithPos | undefined = findParentNodeOfType([
+export const findParentFootnote: (
+  selection: Selection
+) => ContentNodeWithPos | undefined = findParentNodeOfType([
   schema.nodes.footnote,
   schema.nodes.general_table_footnote,
 ])

package/src/lib/supplements.ts

@@ -20,7 +20,10 @@ import {
   schema,
   SupplementNode,
 } from '@manuscripts/transform'
-import { findChildrenByType, findParentNodeClosestToPos } from 'prosemirror-utils'
+import {
+  findChildrenByType,
+  findParentNodeClosestToPos,
+} from 'prosemirror-utils'
 
 import { allowedHref } from './url'
 
@@ -29,10 +32,19 @@ export type NodeWeblink = {
   pos: number
 }
 
+export const getSupplementCaptionTitle = (node: SupplementNode): string => {
+  return node.firstChild?.textContent.trim() ?? ''
+}
+
 export const getSupplementDisplayLabel = (
   node: SupplementNode,
   files: { id: string; name: string }[]
 ): string => {
+  const captionTitle = getSupplementCaptionTitle(node)
+  if (captionTitle) {
+    return captionTitle
+  }
+
   const href = node.attrs.href
   if (allowedHref(href)) {
     return href

package/src/lib/utils.ts

@@ -89,15 +89,26 @@ export const getChildOfType = (
 ): boolean =>
   !!getMatchingChild(parent, (node) => node.type.name === nodeType.name, deep)
 
-export const findParentNodeWithId: (selection: Selection) => ContentNodeWithPos | undefined = findParentNode((node) => 'id' in node.attrs)
+export const findParentNodeWithId: (
+  selection: Selection
+) => ContentNodeWithPos | undefined = findParentNode(
+  (node) => 'id' in node.attrs
+)
 
-export const findParentNodeWithIdValue: (selection: Selection) => ContentNodeWithPos | undefined = findParentNode((node) => node.attrs.id)
+export const findParentNodeWithIdValue: (
+  selection: Selection
+) => ContentNodeWithPos | undefined = findParentNode((node) => node.attrs.id)
 
-export const findParentSection: (selection: Selection) => ContentNodeWithPos | undefined = findParentNode((node) =>
+export const findParentSection: (
+  selection: Selection
+) => ContentNodeWithPos | undefined = findParentNode((node) =>
   isSectionNodeType(node.type)
 )
 
-export const findParentElement = (selection: Selection, validIds?: string[]): ContentNodeWithPos | undefined =>
+export const findParentElement = (
+  selection: Selection,
+  validIds?: string[]
+): ContentNodeWithPos | undefined =>
   findParentNode((node) => {
     // if validIds was passed and this element is not in it, then keep looking
     if (validIds && !validIds.includes(node.attrs.id)) {

package/src/menus.tsx

@@ -38,6 +38,7 @@ import {
   insertBoxElement,
   insertContributors,
   insertCrossReference,
+  canInsertCrossReference,
   insertEmbed,
   insertGraphicalAbstract,
   insertHeadshotGrid,
@@ -400,6 +401,44 @@ export const getEditorMenus = (
       {
         role: 'separator',
       },
+      {
+        id: 'insert-citation',
+        label: 'Citation',
+        shortcut: {
+          mac: 'Option+CommandOrControl+C',
+          pc: 'CommandOrControl+Option+C',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.citation)),
+        run: doCommand(insertInlineCitation),
+        isHidden: !templateAllows(state, schema.nodes.citation),
+      },
+      {
+        id: 'insert-cross-reference',
+        label: 'Cross-reference',
+        shortcut: {
+          mac: 'Option+CommandOrControl+R',
+          pc: 'CommandOrControl+Option+R',
+        },
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(canInsertCrossReference),
+        run: doCommand(insertCrossReference),
+        isHidden: !templateAllows(state, schema.nodes.cross_reference),
+      },
+      {
+        id: 'insert-footnote',
+        label: 'Footnote',
+        shortcut: {
+          mac: 'Option+CommandOrControl+F',
+          pc: 'CommandOrControl+Option+F',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.inline_footnote)),
+        run: doCommand(insertInlineFootnote),
+        isHidden: !templateAllows(state, schema.nodes.inline_footnote),
+      },
       {
         id: 'insert-special-character',
         label: 'Special Characters',

package/src/plugins/add-subtitle.ts

@@ -72,23 +72,25 @@ export default (props: EditorProps) =>
             const titleEndPos = titlePos + titleNode.nodeSize
 
             return DecorationSet.create(state.doc, [
-              Decoration.widget(titleEndPos, (view: ManuscriptEditorView) => {
-                return createAddSubtitleButton(() => {
-                  const subtitlesNode = schema.nodes.subtitles.create(
-                    { id: uuidv4() },
-                    [schema.nodes.subtitle.create({ id: uuidv4() })]
-                  )
-                  const pos = findInsertionPosition(
-                    schema.nodes.subtitles,
-                    state.doc
-                  )
-                  const tr = view.state.tr.insert(pos, subtitlesNode)
-                  const subtitlePos = pos + 1
-                  tr.setSelection(TextSelection.create(tr.doc, subtitlePos))
+              Decoration.widget(
+                titleEndPos,
+                (view: ManuscriptEditorView) => {
+                  return createAddSubtitleButton(() => {
+                    const subtitlesNode = schema.nodes.subtitles.create(
+                      { id: uuidv4() },
+                      [schema.nodes.subtitle.create({ id: uuidv4() })]
+                    )
+                    const pos = findInsertionPosition(
+                      schema.nodes.subtitles,
+                      state.doc
+                    )
+                    const tr = view.state.tr.insert(pos, subtitlesNode)
+                    const subtitlePos = pos + 1
+                    tr.setSelection(TextSelection.create(tr.doc, subtitlePos))
 
-                  view.dispatch(tr)
-                  view.focus()
-                })
+                    view.dispatch(tr)
+                    view.focus()
+                  })
                 },
                 { side: -1 }
               ),

package/src/plugins/objects.ts

@@ -60,7 +60,7 @@ export default () => {
             if (id) {
               const target = targets.get(id)
 
-              if (target) {
+              if (target && target.label) {
                 const caption = findChildren(
                   node,
                   (node) =>
@@ -115,11 +115,7 @@ export default () => {
  * Returns the position for a widget decoration when there is no caption.
  * Falls back to the end of the node.
  */
-const getDecorationPos = (
-  target: Target,
-  doc: ManuscriptNode,
-  pos: number
-) => {
+const getDecorationPos = (target: Target, doc: ManuscriptNode, pos: number) => {
   const $pos = doc.resolve(pos + 1)
   return $pos.end()
 }

package/src/toolbar.tsx

@@ -24,6 +24,7 @@ import {
   ToolbarBoldIcon,
   ToolbarBoxedTextIcon,
   ToolbarCitationIcon,
+  ToolbarCrossReferenceIcon,
   ToolbarEquationIcon,
   ToolbarFigureIcon,
   ToolbarIndentIcon,
@@ -47,9 +48,11 @@ import {
   addInlineComment,
   blockActive,
   canInsert,
+  canInsertCrossReference,
   Dispatch,
   insertBlock,
   insertBoxElement,
+  insertCrossReference,
   insertEmbed,
   insertInlineCitation,
   insertLink,
@@ -179,6 +182,12 @@ export const toolbar: ToolbarConfig = {
       isEnabled: isEnabled(canInsert(schema.nodes.highlight_marker)), // TODO: check both ends of selection
       run: addInlineComment,
     },
+    cross_reference: {
+      title: 'Insert cross-reference',
+      content: <ToolbarCrossReferenceIcon />,
+      isEnabled: isEnabled(canInsertCrossReference),
+      run: insertCrossReference,
+    },
     citation: {
       title: 'Insert citation',
       content: <ToolbarCitationIcon />,

package/src/versions.ts

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