@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/components/references/ReferenceSearchSection.tsx

@@ -0,0 +1,124 @@
+/*!
+ * © 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 {
+  IconTextButton,
+  TriangleCollapsedIcon,
+  TriangleExpandedIcon,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+
+import {
+  BibliographyItemSearch,
+  BibliographyItemSource,
+} from './BibliographyItemSource'
+import { ReferenceSearchResults } from './ReferenceSearchResults'
+import { ReferenceSearchResultsPlaceholder } from './ReferenceSearchResultsPlaceholder'
+
+const SearchSourceLabel = styled(IconTextButton)`
+  margin: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px
+    ${(props) => props.theme.grid.unit * 2}px;
+  color: ${(props) => props.theme.colors.text.secondary};
+
+  &:hover {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`
+
+type RunningState = {
+  type: 'running'
+  promise: BibliographyItemSearch
+}
+
+type CompletedState = {
+  type: 'completed'
+  items: BibliographyItemAttrs[]
+  total: number
+}
+
+type State = RunningState | CompletedState
+
+export const ReferenceSearchSection: React.FC<{
+  query: string
+  source: BibliographyItemSource
+  isSelected: (item: BibliographyItemAttrs) => boolean
+  onSelect: (item: BibliographyItemAttrs) => void
+}> = ({ query, source, isSelected, onSelect }) => {
+  const [expanded, setExpanded] = useState(true)
+  const [state, setState] = useState<State>()
+  const [limit, setLimit] = useState(3)
+
+  const toggleExpanded = () => {
+    setExpanded((value) => !value)
+  }
+
+  useEffect(() => {
+    const search = async () => {
+      const promise = source.search(query, limit)
+      setState((s) => {
+        if (s?.type === 'running') {
+          s.promise.controller?.abort()
+        }
+        return {
+          type: 'running',
+          promise,
+        }
+      })
+      const response = await promise
+      if (promise.controller?.signal.aborted) {
+        return
+      }
+      setState({
+        type: 'completed',
+        ...response,
+      })
+    }
+    search()
+  }, [source, query, limit])
+
+  const handleShowMore = () => {
+    setLimit(25)
+  }
+
+  return (
+    <>
+      <SearchSourceLabel onClick={toggleExpanded}>
+        {expanded ? (
+          <TriangleExpandedIcon className={'icon'} />
+        ) : (
+          <TriangleCollapsedIcon className={'icon'} />
+        )}
+        {source.label}
+      </SearchSourceLabel>
+
+      {expanded && state?.type === 'running' && (
+        <ReferenceSearchResultsPlaceholder />
+      )}
+      {expanded && state?.type === 'completed' && (
+        <ReferenceSearchResults
+          items={state.items}
+          total={state.total}
+          isSelected={isSelected}
+          onSelect={onSelect}
+          onShowMore={handleShowMore}
+        />
+      )}
+    </>
+  )
+}

package/src/components/references/ReferencesEditor.tsx

@@ -0,0 +1,61 @@
+/*!
+ * © 2024 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 { BibliographyItemAttrs } from '@manuscripts/transform'
+import React, { useReducer, useState } from 'react'
+
+import { attrsReducer } from '../../lib/array-reducer'
+import { cleanItemValues } from '../../lib/utils'
+import { ReferencesModal, ReferencesModalProps } from './ReferencesModal'
+
+export type ReferencesEditorProps = Omit<
+  ReferencesModalProps,
+  'isOpen' | 'onCancel'
+>
+
+const itemsReducer = attrsReducer<BibliographyItemAttrs>()
+
+export const ReferencesEditor: React.FC<ReferencesEditorProps> = (props) => {
+  const [isOpen, setOpen] = useState(true)
+  const [items, dispatch] = useReducer(itemsReducer, props.items)
+
+  const handleSave = (item: BibliographyItemAttrs) => {
+    const cleanedItem = cleanItemValues(item)
+    props.onSave(cleanedItem)
+    dispatch({
+      type: 'update',
+      items: [cleanedItem],
+    })
+  }
+
+  const handleDelete = (item: BibliographyItemAttrs) => {
+    props.onDelete(item)
+    dispatch({
+      type: 'delete',
+      item: item,
+    })
+  }
+
+  return (
+    <ReferencesModal
+      {...props}
+      isOpen={isOpen}
+      onCancel={() => setOpen(false)}
+      items={items}
+      onSave={handleSave}
+      onDelete={handleDelete}
+    />
+  )
+}

package/src/components/references/ReferencesModal.tsx

@@ -0,0 +1,352 @@
+/*!
+ * © 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 {
+  Category,
+  CitationCountIcon,
+  CloseButton,
+  Dialog,
+  ModalBody,
+  ModalContainer,
+  ModalHeader,
+  ModalSidebar,
+  ModalSidebarHeader,
+  ModalSidebarTitle,
+  ScrollableModalContent,
+  SidebarContent,
+  StyledModal,
+  useScrollDetection,
+  withListNavigation,
+  withNavigableListItem,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import { isEqual } from 'lodash'
+import React, { useEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+
+import {
+  ReferenceForm,
+  ReferenceFormActions,
+} from './ReferenceForm/ReferenceForm'
+import { ReferenceLine } from './ReferenceLine'
+
+const ReferencesModalContainer = styled(ModalContainer)`
+  min-width: 960px;
+`
+
+const ReferencesSidebar = styled(ModalSidebar)`
+  width: 70%;
+`
+
+const ReferencesSidebarContent = styled(SidebarContent)`
+  overflow-y: auto;
+`
+
+const ReferencesInnerWrapper = withListNavigation(styled.div`
+  width: 100%;
+  padding: 12px 0;
+`)
+
+const ReferenceButton = withNavigableListItem(styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+
+  path {
+    fill: #c9c9c9;
+  }
+
+  :hover {
+    background: ${(props) => props.theme.colors.background.info};
+  }
+
+  &.selected {
+    background: ${(props) => props.theme.colors.background.info};
+    border-top-color: #bce7f6;
+    border-bottom-color: #bce7f6;
+  }
+
+  .tooltip {
+    max-width: ${(props) => props.theme.grid.unit * 25}px;
+    padding: ${(props) => props.theme.grid.unit * 2}px;
+    border-radius: 6px;
+  }
+`)
+
+const IconContainer = styled.div`
+  padding-right: ${(props) => props.theme.grid.unit * 5}px;
+  position: relative;
+`
+
+const CitationCount = styled.div`
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  color: #ffffff;
+  background-color: #bce7f6;
+  text-align: center;
+  vertical-align: top;
+  top: 0;
+  left: 16px;
+  font-size: 9px;
+
+  &.unused {
+    background-color: #fe8f1f;
+  }
+`
+
+const selectionTopOffset = 10 // to be able to place the selected item in the middle and allow for some scroll at the top
+const pageSize = 12
+const topTrigger = 0.2 // says: notify when x% of the offsetHeight remains hidden at the top
+const bottomTrigger = 0.8 // says: notify when x% of the offsetHeight remains hidden at the bottom
+const dropLimit = 36 // basically maximum amount of items that can exist at the same time
+
+const normalize = (item: BibliographyItemAttrs) => ({
+  id: item.id,
+  type: item.type,
+  author: item.author || [],
+  editor: item.editor || [],
+  issued: item.issued,
+  ['container-title']: item['container-title'] || '',
+  ['collection-title']: item['collection-title'] || '',
+  DOI: item.DOI || '',
+  URL: item.URL || '',
+  volume: item.volume || '',
+  issue: item.issue || '',
+  supplement: item.supplement || '',
+  edition: item.edition || '',
+  page: item.page || '',
+  ['number-of-pages']: item['number-of-pages'] || '',
+  title: item.title || '',
+  literal: item.literal || '',
+  std: item.std || '',
+  publisher: item.publisher || '',
+  ['publisher-place']: item['publisher-place'] || '',
+  event: item.event || '',
+  ['event-place']: item['event-place'] || '',
+  ['event-date']: item['event-date'],
+  institution: item.institution || '',
+  locator: item.locator || '',
+  accessed: item.accessed,
+  comment: item.comment || '',
+})
+
+export interface ReferencesModalProps {
+  isOpen: boolean
+  onCancel: () => void
+  items: BibliographyItemAttrs[]
+  item?: BibliographyItemAttrs
+  citationCounts: Map<string, number>
+  onSave: (item: BibliographyItemAttrs) => void
+  onDelete: (item: BibliographyItemAttrs) => void
+}
+
+export const ReferencesModal: React.FC<ReferencesModalProps> = ({
+  isOpen,
+  onCancel,
+  items,
+  item,
+  citationCounts,
+  onSave,
+  onDelete,
+}) => {
+  const [confirm, setConfirm] = useState(false)
+  const valuesRef = useRef<BibliographyItemAttrs>(undefined)
+
+  const [selection, setSelection] = useState<BibliographyItemAttrs>()
+  const selectionRef = useRef<HTMLDivElement>(null)
+  const isSelected = (item: BibliographyItemAttrs) => {
+    return item.id === selection?.id
+  }
+  const selectionIndex = items.findIndex(isSelected)
+
+  useEffect(() => {
+    setSelection(item)
+  }, [item])
+
+  useEffect(() => {
+    setTimeout(() => {
+      selectionRef.current?.scrollIntoView({
+        block: 'center',
+        behavior: 'auto',
+      })
+    }, 100)
+  }, [selectionIndex])
+
+  const { ref, triggers } = useScrollDetection(topTrigger, bottomTrigger)
+
+  const [startIndex, setStartIndex] = useState(
+    Math.max(0, selectionIndex - selectionTopOffset)
+  )
+  const [endIndex, setEndIndex] = useState(pageSize)
+
+  useEffect(() => {
+    const base = Math.max(0, selectionIndex - selectionTopOffset)
+    setStartIndex(base)
+    setEndIndex(Math.min(items.length - 1, base + pageSize))
+  }, [selectionIndex, items])
+
+  useEffect(() => {
+    if (triggers.top) {
+      const newFirst = Math.max(0, startIndex - pageSize)
+      setStartIndex(newFirst)
+      setEndIndex(Math.min(newFirst + dropLimit, endIndex))
+    }
+    if (triggers.bottom) {
+      const newLast = Math.min(items.length - 1, endIndex + pageSize)
+      setEndIndex(newLast)
+      setStartIndex(Math.max(newLast - dropLimit, startIndex))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [triggers, items])
+
+  const actionsRef = useRef<ReferenceFormActions>(undefined)
+
+  const reset = () => {
+    actionsRef.current?.reset()
+    setConfirm(false)
+  }
+  // Determine if the newly added citation is a new item by checking if it has properties beyond just 'id' and 'type'
+  const isNewItem = (
+    obj: BibliographyItemAttrs,
+    basicProps: string | string[]
+  ) => {
+    const allKeys = Object.keys(obj)
+    const extraKeys = allKeys.filter((key) => !basicProps.includes(key))
+    return extraKeys.length > 0
+  }
+
+  const handleSave = (values: BibliographyItemAttrs | undefined) => {
+    if (!values || !selection) {
+      return
+    }
+    const item = {
+      ...selection,
+      ...values,
+    }
+    // Check if citation count for the new item is undefined, and set it to 1
+    const currentCitationCount = citationCounts.get(item.id)
+
+    if (currentCitationCount === undefined) {
+      citationCounts.set(item.id, 1) // update the citation count in the Map
+    }
+
+    onSave(item)
+    setSelection(item)
+    setConfirm(false)
+  }
+
+  const handleDelete = () => {
+    if (!selection) {
+      return
+    }
+    onDelete(selection)
+    setSelection(undefined)
+  }
+
+  const handleItemClick = (item: BibliographyItemAttrs) => {
+    const values = valuesRef.current
+    if (values && selection && !isEqual(values, normalize(selection))) {
+      setConfirm(true)
+      return
+    }
+    setSelection(item)
+  }
+
+  const handleChange = (values: BibliographyItemAttrs) => {
+    valuesRef.current = values
+  }
+  if (items.length <= 0) {
+    return <></>
+  }
+
+  return (
+    <StyledModal isOpen={isOpen} onRequestClose={onCancel}>
+      <Dialog
+        isOpen={confirm}
+        category={Category.confirmation}
+        header="You've made changes to this option"
+        message="Would you like to save or discard your changes?"
+        actions={{
+          secondary: {
+            action: () => reset(),
+            title: 'Discard',
+          },
+          primary: {
+            action: () => handleSave(valuesRef.current),
+            title: 'Save',
+          },
+        }}
+      />
+      <ReferencesModalContainer data-cy={'references-editor'}>
+        <ModalHeader>
+          <CloseButton onClick={onCancel} />
+        </ModalHeader>
+        <ModalBody>
+          <ReferencesSidebar>
+            <ModalSidebarHeader>
+              <ModalSidebarTitle>References</ModalSidebarTitle>
+            </ModalSidebarHeader>
+            <ReferencesSidebarContent ref={ref}>
+              <ReferencesInnerWrapper>
+                {items.slice(startIndex, endIndex + 1).map((item) => (
+                  <ReferenceButton
+                    key={item.id}
+                    id={item.id}
+                    className={isSelected(item) ? 'selected' : ''}
+                    onClick={() => handleItemClick(item)}
+                    ref={isSelected(item) ? selectionRef : null}
+                  >
+                    <IconContainer>
+                      <CitationCountIcon />
+                      {(citationCounts.get(item.id) || 0) > 0 ? (
+                        <CitationCount data-tooltip-content="Number of times used in the document">
+                          {citationCounts.get(item.id)}
+                        </CitationCount>
+                      ) : (
+                        <CitationCount className="unused">0</CitationCount>
+                      )}
+                    </IconContainer>
+                    <ReferenceLine item={item} />
+                  </ReferenceButton>
+                ))}
+              </ReferencesInnerWrapper>
+            </ReferencesSidebarContent>
+          </ReferencesSidebar>
+          <ScrollableModalContent>
+            {selection && (
+              <ReferenceForm
+                values={normalize(selection)}
+                showDelete={
+                  !citationCounts.get(selection.id) &&
+                  isNewItem(selection, ['id', 'type']) // disable the delete button for the new citations
+                }
+                onChange={handleChange}
+                onCancel={onCancel}
+                onDelete={handleDelete}
+                onSave={handleSave}
+                actionsRef={actionsRef}
+              />
+            )}
+          </ScrollableModalContent>
+        </ModalBody>
+      </ReferencesModalContainer>
+    </StyledModal>
+  )
+}

package/src/components/references/SearchInput.tsx

@@ -0,0 +1,98 @@
+/*!
+ * © 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 { SearchIcon, TextField } from '@manuscripts/style-guide'
+import React, { InputHTMLAttributes, useState } from 'react'
+import styled from 'styled-components'
+
+const SearchContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1 0 auto;
+  position: relative;
+  margin: 12px;
+`
+
+const SearchIconContainer = styled.span`
+  display: flex;
+  left: ${(props) => props.theme.grid.unit * 4}px;
+  position: absolute;
+  z-index: 2;
+
+  path {
+    stroke: ${(props) => props.theme.colors.text.primary};
+  }
+
+  &.active path {
+    stroke: ${(props) => props.theme.colors.brand.medium};
+  }
+`
+
+const SearchTextField = styled(TextField)`
+  -webkit-appearance: textfield;
+  padding-left: ${(props) => props.theme.grid.unit * 11}px;
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`
+
+export const SearchWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
+`
+
+export const SearchInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
+  props
+) => {
+  const [hover, setHover] = useState(false)
+  const [focus, setFocus] = useState(false)
+
+  const onFocus = () => {
+    setFocus(true)
+  }
+  const onBlur = () => {
+    setFocus(false)
+  }
+
+  const onMouseEnter = () => {
+    setHover(true)
+  }
+  const onMouseLeave = () => {
+    setHover(false)
+  }
+
+  return (
+    <SearchContainer
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      <SearchIconContainer className={hover || focus ? 'active' : ''}>
+        <SearchIcon />
+      </SearchIconContainer>
+
+      <SearchTextField
+        {...props}
+        type="search"
+        placeholder="Search"
+        autoComplete="off"
+      />
+    </SearchContainer>
+  )
+}