@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/views/FigureDropdown.tsx

@@ -0,0 +1,423 @@
+/*!
+ * © 2022 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  DotsIcon,
+  DropdownList,
+  getFileIcon,
+  IconButton,
+  IconTextButton,
+  TriangleCollapsedIcon,
+  UploadIcon,
+  useDropdown,
+} from '@manuscripts/style-guide'
+import { FigureNode } from '@manuscripts/transform'
+import { Node as ManuscriptNode } from 'prosemirror-model'
+import React, { SyntheticEvent, useCallback, useEffect, useRef } from 'react'
+import styled from 'styled-components'
+
+import { Capabilities } from '../../lib/capabilities'
+import {
+  FileAttachment,
+  ManuscriptFiles,
+  memoGroupFiles,
+} from '../../lib/files'
+import { getMediaTypeInfo } from '../../lib/get-media-type'
+import { createKeyboardInteraction } from '../../lib/navigation-utils'
+import { ReactViewComponentProps } from '../../views/ReactSubView'
+
+// Custom hook for figure dropdown keyboard navigation
+function useDropdownKeyboardNav(
+  isOpen: boolean,
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  onEscape: () => void,
+  onArrowLeft?: () => void
+) {
+  useEffect(() => {
+    const container = containerRef.current
+    if (!isOpen || !container) {
+      return
+    }
+
+    const buttons = Array.from(
+      container.querySelectorAll('button:not([disabled])')
+    ) as HTMLElement[]
+
+    if (buttons.length === 0) {
+      return
+    }
+
+    const removeKeydownListener = createKeyboardInteraction({
+      container: container,
+      navigation: {
+        getItems: () =>
+          Array.from(container.querySelectorAll('button:not([disabled])')),
+        arrowKeys: {
+          forward: 'ArrowDown',
+          backward: 'ArrowUp',
+        },
+      },
+      additionalKeys: {
+        Enter: (e) => (e.target as HTMLElement).click(),
+        Escape: () => onEscape(),
+        ...(onArrowLeft ? { ArrowLeft: () => onArrowLeft() } : {}),
+      },
+    })
+
+    // Focus first button when dropdown opens
+    window.requestAnimationFrame(() => {
+      buttons[0]?.focus()
+    })
+
+    return () => {
+      removeKeydownListener()
+    }
+  }, [isOpen, containerRef, onEscape, onArrowLeft])
+}
+
+export interface FigureDropdownProps {
+  can: Capabilities
+  getFiles: () => FileAttachment[]
+}
+
+export interface FigureOptionsProps extends FigureDropdownProps {
+  onDownload?: () => void
+  onUpload?: () => void
+  onDetach?: () => void
+  onReplace?: (file: FileAttachment, isSupplement?: boolean) => void
+  onReplaceEmbed?: () => void
+  getDoc: () => ManuscriptNode
+  onDelete?: () => void
+  isEmbed: boolean
+  hasSiblings: () => boolean
+}
+
+export interface FigureElementOptionsProps extends FigureDropdownProps {
+  onAdd: (file: FileAttachment) => Promise<void>
+  onUpload: () => void
+  hasUploadedImage: boolean
+}
+
+function getSupplements(
+  getFiles: () => FileAttachment[],
+  getDoc: () => ManuscriptNode,
+  groupFiles: (doc: ManuscriptNode, files: FileAttachment[]) => ManuscriptFiles,
+  isEmbed: boolean
+) {
+  return groupFiles(getDoc(), getFiles())
+    .supplements.map((s) => s.file)
+    .filter((f) => {
+      const mediaInfo = getMediaTypeInfo(f.name)
+      return isEmbed
+        ? mediaInfo.isVideo || mediaInfo.isAudio
+        : mediaInfo.isImage
+    })
+}
+
+function getOtherFiles(
+  getFiles: () => FileAttachment[],
+  getDoc: () => ManuscriptNode,
+  groupFiles: (doc: ManuscriptNode, files: FileAttachment[]) => ManuscriptFiles,
+  isEmbed: boolean
+) {
+  return groupFiles(getDoc(), getFiles()).others.filter((f) => {
+    const mediaInfo = getMediaTypeInfo(f.name)
+    return isEmbed ? mediaInfo.isVideo || mediaInfo.isAudio : mediaInfo.isImage
+  })
+}
+
+type WrappedProps = FigureOptionsProps & ReactViewComponentProps<FigureNode>
+
+export const FigureOptions: React.FC<WrappedProps> = ({
+  can,
+  getDoc,
+  getFiles,
+  onDownload,
+  onUpload,
+  onDetach,
+  onReplace,
+  onReplaceEmbed,
+  onDelete,
+  isEmbed,
+  hasSiblings,
+  container,
+}) => {
+  const { isOpen, toggleOpen, wrapperRef } = useDropdown()
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const showDownload = onDownload && can.downloadFiles
+  const showUpload = onUpload && can.uploadFile
+  const showDetach = onDetach && can.detachFile
+  const showReplace =
+    (onReplace && can.replaceFile) || (onReplaceEmbed && can.editArticle)
+  const replaceBtnText = onDownload ? 'Replace' : 'Choose file'
+  const showDelete = () => {
+    if (!hasSiblings()) {
+      return false
+    }
+    if (onDelete && can.detachFile) {
+      return true
+    }
+    return false
+  }
+
+  useEffect(() => {
+    const activeClass = 'figure-dropdown-active'
+    if (isOpen) {
+      container.classList.add(activeClass)
+    } else {
+      container.classList.remove(activeClass)
+    }
+  }, [isOpen, container.classList])
+
+  useDropdownKeyboardNav(isOpen, dropdownRef, toggleOpen)
+
+  const isEmbedMode = !!onReplaceEmbed
+
+  const groupFiles = memoGroupFiles()
+
+  return (
+    <DropdownWrapper ref={wrapperRef}>
+      <OptionsButton
+        className={'options-button'}
+        onClick={toggleOpen}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            toggleOpen()
+          }
+        }}
+      >
+        <DotsIcon />
+      </OptionsButton>
+      {isOpen && (
+        <OptionsDropdownList
+          direction={'right'}
+          width={128}
+          top={5}
+          ref={dropdownRef}
+        >
+          {showReplace && isEmbedMode && (
+            <ListItemButton onClick={() => onReplaceEmbed && onReplaceEmbed()}>
+              Edit Link
+            </ListItemButton>
+          )}
+          {showReplace && !isEmbedMode && (
+            <NestedDropdown
+              disabled={!showReplace}
+              parentToggleOpen={toggleOpen}
+              buttonText={replaceBtnText}
+              moveLeft
+              list={
+                <>
+                  {getSupplements(getFiles, getDoc, groupFiles, isEmbed).map(
+                    (file, index) => (
+                      <ListItemButton
+                        key={file.id}
+                        id={index.toString()}
+                        onClick={() => onReplace && onReplace(file, true)}
+                      >
+                        {getFileIcon(file.name)}
+                        <ListItemText>{file.name}</ListItemText>
+                      </ListItemButton>
+                    )
+                  )}
+                  {getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map(
+                    (file, index) => (
+                      <ListItemButton
+                        key={file.id}
+                        id={index.toString()}
+                        onClick={() => onReplace && onReplace(file)}
+                      >
+                        {getFileIcon(file.name)}
+                        <ListItemText>{file.name}</ListItemText>
+                      </ListItemButton>
+                    )
+                  )}
+                  {showUpload && (
+                    <UploadButton onClick={onUpload} disabled={!showUpload}>
+                      <UploadIcon /> Upload new...
+                    </UploadButton>
+                  )}
+                </>
+              }
+            />
+          )}
+          {showDownload && (
+            <ListItemButton onClick={onDownload} disabled={!showDownload}>
+              Download
+            </ListItemButton>
+          )}
+          {showDetach && (
+            <ListItemButton onClick={onDetach} disabled={!showDetach}>
+              Detach
+            </ListItemButton>
+          )}
+          {showDelete() && (
+            <ListItemButton onClick={onDelete}>Delete</ListItemButton>
+          )}
+        </OptionsDropdownList>
+      )}
+    </DropdownWrapper>
+  )
+}
+
+const NestedDropdown: React.FC<{
+  parentToggleOpen: (e: SyntheticEvent) => void
+  buttonText: string
+  disabled: boolean
+  list: React.ReactNode
+  moveLeft?: boolean
+}> = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
+  const { isOpen, toggleOpen, wrapperRef } = useDropdown()
+  const nestedListRef = useRef<HTMLDivElement>(null)
+
+  // Handle ArrowLeft to close nested dropdown and focus parent
+  const handleArrowLeft = useCallback(() => {
+    toggleOpen()
+    const parentButton = wrapperRef.current?.querySelector(
+      '.nested-list-button'
+    ) as HTMLElement
+    parentButton?.focus()
+  }, [toggleOpen, wrapperRef])
+
+  // For nested dropdown: Escape and ArrowLeft both close nested menu and return to parent
+  useDropdownKeyboardNav(
+    isOpen,
+    nestedListRef,
+    handleArrowLeft,
+    handleArrowLeft
+  )
+
+  return (
+    <DropdownWrapper ref={wrapperRef}>
+      <NestedListButton
+        className="nested-list-button"
+        onClick={toggleOpen}
+        disabled={disabled}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowRight') {
+            e.preventDefault()
+            toggleOpen()
+          }
+        }}
+      >
+        <div>{buttonText}</div>
+        <TriangleCollapsedIcon />
+      </NestedListButton>
+      {isOpen && (
+        <NestedListDropdownList
+          direction={'right'}
+          moveLeft={moveLeft}
+          width={192}
+          ref={nestedListRef}
+          onClick={(e) => {
+            toggleOpen()
+            parentToggleOpen(e)
+          }}
+        >
+          {list}
+        </NestedListDropdownList>
+      )}
+    </DropdownWrapper>
+  )
+}
+
+const DropdownWrapper = styled.div``
+
+const OptionsDropdownList = styled(DropdownList)`
+  right: 4%;
+`
+
+const OptionsButton = styled(IconButton)`
+  border: 1px solid #e2e2e2 !important;
+  box-sizing: border-box;
+  border-radius: 50%;
+  width: ${(props) => props.theme.grid.unit * 6}px;
+  height: ${(props) => props.theme.grid.unit * 6}px;
+  margin: ${(props) => props.theme.grid.unit}px;
+  visibility: hidden;
+  background: #ffffff;
+
+  &:hover {
+    background: #f2fbfc !important;
+    border: 1px solid #e2e2e2 !important;
+  }
+
+  &:active,
+  &:focus {
+    background: #f2fbfc !important;
+    border: 1px solid #e2e2e2 !important;
+
+    circle {
+      fill: #1a9bc7;
+    }
+  }
+
+  circle {
+    fill: #6e6e6e;
+  }
+`
+
+const ListItemButton = styled(IconTextButton)`
+  padding: 16px 14px;
+  justify-content: space-between;
+  align-items: center;
+
+  :hover,
+  :focus-visible {
+    background: #f2fbfc;
+  }
+
+  &:is([disabled]) {
+    background: #ffffff;
+    color: #353535;
+    opacity: 0.4;
+  }
+`
+
+const ListItemText = styled.div`
+  width: 141px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: start;
+`
+
+const NestedListButton = styled(ListItemButton)`
+  width: 100%;
+  &:active,
+  &:focus,
+  &:focus-visible {
+    background: #f2fbfc;
+  }
+  svg {
+    margin-right: 0;
+  }
+`
+
+const NestedListDropdownList = styled(DropdownList)<{ moveLeft?: boolean }>`
+  top: 0;
+  ${(props) => (props.moveLeft && 'right: 30%;') || 'left: 100%;'}
+`
+
+const UploadButton = styled(IconTextButton)`
+  border-top: 1px solid #f2f2f2;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  justify-content: flex-start;
+
+  &:focus-visible {
+    background: #f2fbfc;
+  }
+`

package/src/components/views/FootnotesSelector.tsx

@@ -0,0 +1,255 @@
+/*!
+ * © 2023 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  AddedIcon,
+  AddIcon,
+  AddNewIcon,
+  ButtonGroup,
+  IconTextButton,
+  PrimaryButton,
+  SecondaryButton,
+  withFocusTrap,
+  withListNavigation,
+  withNavigableListItem,
+} from '@manuscripts/style-guide'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+import { FootnoteNode, InlineFootnoteNode } from '@manuscripts/transform'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+const NotesContainer = styled.div`
+  height: 90vh;
+  max-height: 400px;
+  overflow-y: auto;
+`
+
+const Actions = styled(ButtonGroup)`
+  align-items: center;
+  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
+  display: flex;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+`
+
+const Container = withFocusTrap(styled.div`
+  flex: 1;
+  font-family: ${(props) => props.theme.font.family.sans};
+`)
+
+const AddNewFootnote = styled(ButtonGroup)`
+  button {
+    margin-right: ${(props) => props.theme.grid.unit * 8}px;
+  }
+
+  button:hover,
+  button:active {
+    path {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+    rect {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+  }
+`
+
+export interface FootnotesSelectorProps {
+  footnotes: FootnoteNode[]
+  inlineFootnote?: InlineFootnoteNode
+  labels: Map<string, string>
+  onAdd: () => void
+  onInsert: (notes: FootnoteNode[]) => void
+  onCancel: () => void
+}
+
+export const FootnotesSelector: React.FC<FootnotesSelectorProps> = ({
+  footnotes,
+  inlineFootnote,
+  labels,
+  onAdd,
+  onInsert,
+  onCancel,
+}) => {
+  let selectedNotesMap
+
+  if (inlineFootnote) {
+    const rids = inlineFootnote.attrs.rids
+    const selectedNotes = footnotes.filter((node) =>
+      rids.includes(node.attrs.id)
+    )
+    selectedNotesMap = new Map(
+      selectedNotes.map((node) => [node.attrs.id, node])
+    )
+  }
+
+  const [selections, setSelections] = useState(
+    new Map<string, FootnoteNode>(selectedNotesMap)
+  )
+
+  const toggleSelection = (item: FootnoteNode) => {
+    const id = item.attrs.id
+    if (selections.has(id)) {
+      selections.delete(id)
+      setSelections(new Map([...selections]))
+    } else {
+      selections.set(id, item)
+      setSelections(new Map([...selections]))
+    }
+  }
+
+  const isSelected = (item: FootnoteNode) => {
+    return selections.has(item.attrs.id)
+  }
+
+  const handleClick = () => {
+    return onInsert(footnotes.filter((node) => selections.has(node.attrs.id)))
+  }
+
+  return (
+    <Container>
+      <NotesContainer>
+        <FootnotesList
+          footnotes={footnotes}
+          inlineFootnote={inlineFootnote}
+          labels={labels}
+          isSelected={isSelected}
+          onSelect={toggleSelection}
+        />
+      </NotesContainer>
+      <Actions>
+        <AddNewFootnote>
+          <IconTextButton onClick={onAdd}>
+            <AddNewIcon />
+            Add new
+          </IconTextButton>
+        </AddNewFootnote>
+        <ButtonGroup>
+          <SecondaryButton onClick={onCancel}>Cancel</SecondaryButton>
+          <PrimaryButton
+            onClick={handleClick}
+            disabled={selections.size === 0 && !inlineFootnote}
+          >
+            {inlineFootnote ? 'Update' : 'Insert'}
+          </PrimaryButton>
+        </ButtonGroup>
+      </Actions>
+    </Container>
+  )
+}
+
+const FootnotesList: React.FC<{
+  footnotes: FootnoteNode[]
+  inlineFootnote?: InlineFootnoteNode
+  labels: Map<string, string>
+  isSelected: (item: FootnoteNode) => boolean
+  onSelect: (item: FootnoteNode) => void
+}> = ({ footnotes, inlineFootnote, labels, isSelected, onSelect }) => {
+  const rids = inlineFootnote?.attrs.rids
+  const selectedNotes: FootnoteNode[] = []
+  const remainingNotes: FootnoteNode[] = []
+
+  footnotes.forEach((footnote) => {
+    const isNoteSelected = rids?.includes(footnote.attrs.id)
+    if (isDeleted(footnote)) {
+      return
+    }
+    isNoteSelected
+      ? selectedNotes.push(footnote)
+      : remainingNotes.push(footnote)
+  })
+
+  return (
+    <NotesListContainer>
+      {selectedNotes.map((footnote) => (
+        <FootnoteItem
+          key={footnote.attrs.id}
+          footnote={footnote}
+          label={labels.get(footnote.attrs.id)}
+          isSelected={isSelected}
+          onSelect={onSelect}
+        />
+      ))}
+      {selectedNotes.length > 0 && remainingNotes.length > 0 && <Separator />}
+      {remainingNotes.map((footnote) => (
+        <FootnoteItem
+          key={footnote.attrs.id}
+          footnote={footnote}
+          label={labels.get(footnote.attrs.id)}
+          isSelected={isSelected}
+          onSelect={onSelect}
+        />
+      ))}
+    </NotesListContainer>
+  )
+}
+
+const FootnoteItem: React.FC<{
+  footnote: FootnoteNode
+  label?: string
+  isSelected: (item: FootnoteNode) => boolean
+  onSelect: (item: FootnoteNode) => void
+}> = ({ footnote, label, isSelected, onSelect }) => {
+  return (
+    <FootnoteItemContainer
+      onClick={() => onSelect(footnote)}
+      data-cy="footnote-item"
+    >
+      <StatusIcon>
+        {isSelected(footnote) ? (
+          <AddedIcon data-cy={'plus-icon-ok'} />
+        ) : (
+          <AddIcon data-cy={'plus-icon'} />
+        )}
+      </StatusIcon>
+      <NoteText>{(label ? label + '. ' : '') + footnote.textContent}</NoteText>
+    </FootnoteItemContainer>
+  )
+}
+
+const Separator = styled.div`
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`
+const NotesListContainer = withListNavigation(styled.div`
+  padding: ${(props) => props.theme.grid.unit * 6}px
+    ${(props) => props.theme.grid.unit * 5}px;
+  flex: 1;
+  overflow-y: auto;
+`)
+
+const FootnoteItemContainer = withNavigableListItem(styled.div`
+  cursor: pointer;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+  display: flex;
+`)
+const StatusIcon = styled.div`
+  flex-shrink: 1;
+  margin-right: ${(props) => props.theme.grid.unit * 3}px;
+  margin-left: ${(props) => props.theme.grid.unit}px;
+  height: ${(props) => props.theme.grid.unit * 6}px;
+  width: ${(props) => props.theme.grid.unit * 6}px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`
+const NoteText = styled.div`
+  color: ${(props) => props.theme.colors.text.primary};
+  flex: 1;
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  margin-top: 2px;
+`