@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/components/references/ReferenceForm/config.ts

@@ -0,0 +1,133 @@
+/*!
+ * © 2025 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 { BibliographyItemType } from '@manuscripts/transform'
+
+export const fieldConfigMap: Record<BibliographyItemType, Set<string>> = {
+  'article-journal': new Set([
+    'author',
+    'title',
+    'issued',
+    'container-title',
+    'volume',
+    'issue',
+    'supplement',
+    'page',
+    'locator',
+    'comment',
+    'DOI',
+    'URL',
+  ]),
+  book: new Set([
+    'author',
+    'editor',
+    'title',
+    'issued',
+    'container-title',
+    'collection-title',
+    'volume',
+    'edition',
+    'publisher-place',
+    'publisher',
+    'page',
+    'number-of-pages',
+    'comment',
+    'DOI',
+    'URL',
+  ]),
+  chapter: new Set([
+    'author',
+    'editor',
+    'title',
+    'issued',
+    'container-title',
+    'collection-title',
+    'volume',
+    'edition',
+    'publisher-place',
+    'publisher',
+    'page',
+    'number-of-pages',
+    'comment',
+    'DOI',
+    'URL',
+  ]),
+  confproc: new Set([
+    'author',
+    'title',
+    'issued',
+    'publisher-place',
+    'publisher',
+    'event',
+    'event-date',
+    'event-place',
+    'page',
+    'DOI',
+    'URL',
+  ]),
+  dataset: new Set([
+    'author',
+    'title',
+    'issued',
+    'container-title',
+    'publisher-place',
+    'publisher',
+    'accessed',
+    'comment',
+    'DOI',
+    'URL',
+  ]),
+  preprint: new Set([
+    'author',
+    'title',
+    'issued',
+    'container-title',
+    'locator',
+    'DOI',
+    'URL',
+  ]),
+  standard: new Set(['std', 'URL']),
+  thesis: new Set([
+    'author',
+    'title',
+    'issued',
+    'institution',
+    'number-of-pages',
+    'comment',
+    'DOI',
+    'URL',
+  ]),
+  webpage: new Set([
+    'author',
+    'title',
+    'issued',
+    'publisher-place',
+    'publisher',
+    'accessed',
+    'comment',
+    'URL',
+  ]),
+  other: new Set([
+    'author',
+    'title',
+    'issued',
+    'container-title',
+    'publisher-place',
+    'publisher',
+    'comment',
+    'URL',
+  ]),
+  literal: new Set(['literal']),
+}

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

@@ -0,0 +1,156 @@
+/*!
+ * © 2025 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 {
+  ArrowDownIcon,
+  IconButton,
+  outlineStyle,
+  SecondaryIconButton,
+  TextArea,
+  TextField,
+} from '@manuscripts/style-guide'
+import styled from 'styled-components'
+
+export const Button = styled(IconButton).attrs({
+  defaultColor: true,
+  size: 24,
+})`
+  circle,
+  use {
+    fill: ${(props) => props.theme.colors.brand.default};
+  }
+
+  path {
+    mask: none;
+  }
+`
+
+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;
+`
+
+export const ReferenceTextArea = styled(TextArea)`
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 3}px;
+  height: ${(props) => props.theme.grid.unit * 20}px;
+  resize: none;
+`
+
+export const FormFields = styled.div`
+  flex: 1;
+`
+
+export const DeleteButton = styled(IconButton)`
+  background-color: ${(props) =>
+    props.theme.colors.background.primary} !important;
+  border-color: ${(props) => props.theme.colors.background.primary} !important;
+  .icon_element {
+    fill: ${(props) => (props.disabled && '#c9c9c9') || '#F35143'} !important;
+  }
+`
+
+export const Section = styled.section`
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+  margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
+  overflow: hidden;
+`
+
+export const PersonForm = styled.div`
+  padding: ${(props) => props.theme.grid.unit * 4}px
+    ${(props) => props.theme.grid.unit * 4}px;
+
+  & > div:last-child {
+    margin-bottom: 0;
+  }
+`
+
+export const Title = styled.h4<{
+  isInvalid?: boolean
+}>`
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  padding-right: 0.5rem;
+  background: ${(props) =>
+    props.isInvalid ? props.theme.colors.background.warning : 'transparent'};
+  color: ${(props) =>
+    props.isInvalid ? props.theme.colors.text.warning : 'inherit'};
+`
+
+export const DropdownIndicator = styled(ArrowDownIcon)`
+  border: 0;
+  border-radius: 50%;
+  margin-right: 0.6em;
+  min-width: 20px;
+`
+
+export const ToggleButton = styled.button<{
+  isOpen: boolean
+}>`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 1rem;
+  margin: 0.6em;
+
+  outline: none;
+
+  &:focus {
+    color: ${(props) => props.theme.colors.button.primary.border.hover};
+  }
+
+  svg {
+    transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
+  }
+  ${outlineStyle}
+`
+
+export const RemoveButton = styled(SecondaryIconButton)`
+  border: none;
+  background: transparent;
+  padding: 0;
+  outline: none;
+  svg {
+    path[fill='white'] {
+      fill: white;
+    }
+    rect[fill],
+    path:not([fill='white']) {
+      fill: #f35143;
+    }
+  }
+`

package/src/components/references/ReferenceLine.tsx

@@ -0,0 +1,43 @@
+/*!
+ * © 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 { BibliographyItemAttrs } from '@manuscripts/transform'
+import React from 'react'
+import styled from 'styled-components'
+
+import { metadata } from '../../lib/references'
+
+export const Metadata = styled.div`
+  color: ${(props) => props.theme.colors.text.secondary};
+  flex: 1;
+  font-weight: ${(props) => props.theme.font.weight.light};
+  margin-top: ${(props) => props.theme.grid.unit}px;
+`
+
+export const MetadataContainer = styled.div`
+  flex: 1;
+`
+
+export const ReferenceLine: React.FC<{
+  item: BibliographyItemAttrs
+}> = ({ item }) => (
+  <MetadataContainer>
+    <div data-cy={'reference-title'}>
+      {item.title || item.literal || 'Untitled'}
+    </div>
+    <Metadata>{metadata(item)}</Metadata>
+  </MetadataContainer>
+)

package/src/components/references/ReferenceSearch.tsx

@@ -0,0 +1,163 @@
+/*!
+ * © 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 {
+  AddNewIcon,
+  ButtonGroup,
+  IconTextButton,
+  PrimaryButton,
+  SecondaryButton,
+  UploadIcon,
+  withFocusTrap,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import { debounce } from 'lodash'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+import {
+  BibliographyItemSource,
+  DocumentReferenceSource,
+} from './BibliographyItemSource'
+import { ReferenceSearchSection } from './ReferenceSearchSection'
+import { SearchInput } from './SearchInput'
+
+const ReferenceSearchSectionContainer = styled.div`
+  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 AddReferenceActions = 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 const ReferenceSearch: React.FC<{
+  query?: string
+  sources: BibliographyItemSource[]
+  items: BibliographyItemAttrs[]
+  onAdd: () => void
+  onImport: () => void
+  onCite: (items: BibliographyItemAttrs[]) => void
+  onCancel: () => void
+}> = ({
+  query: initialQuery,
+  sources,
+  items,
+  onAdd,
+  onImport,
+  onCite,
+  onCancel,
+}) => {
+  const [query, setQuery] = useState<string>(initialQuery || '')
+  const [selections, setSelections] = useState(
+    new Map<string, BibliographyItemAttrs>()
+  )
+
+  const toggleSelection = (item: BibliographyItemAttrs) => {
+    const id = item.id
+    if (selections.has(id)) {
+      selections.delete(id)
+      setSelections(new Map([...selections]))
+    } else {
+      selections.set(id, item)
+      setSelections(new Map([...selections]))
+    }
+  }
+
+  const isSelected = (item: BibliographyItemAttrs) => {
+    return selections.has(item.id)
+  }
+
+  const document = new DocumentReferenceSource(items)
+
+  const handleClick = () => {
+    const items = Array.from(selections.values())
+    return onCite(items)
+  }
+
+  const debouncedSetQuery = debounce((e) => {
+    setQuery(e.target.value.trim())
+  }, 800)
+
+  return (
+    <Container data-cy={'reference-finder'}>
+      <SearchInput onChange={debouncedSetQuery} defaultValue={initialQuery} />
+      <ReferenceSearchSectionContainer>
+        <ReferenceSearchSection
+          key={document.id}
+          query={query}
+          source={document}
+          isSelected={isSelected}
+          onSelect={toggleSelection}
+        />
+        {query.length
+          ? sources.map((source) => (
+              <ReferenceSearchSection
+                key={source.id}
+                query={query}
+                source={source}
+                isSelected={isSelected}
+                onSelect={toggleSelection}
+              />
+            ))
+          : ''}
+      </ReferenceSearchSectionContainer>
+      <Actions>
+        <AddReferenceActions>
+          <IconTextButton onClick={onAdd}>
+            <AddNewIcon />
+            Add new
+          </IconTextButton>
+          <IconTextButton onClick={onImport}>
+            <UploadIcon />
+            Import new
+          </IconTextButton>
+        </AddReferenceActions>
+        <ButtonGroup>
+          <SecondaryButton onClick={onCancel}>Close</SecondaryButton>
+          <PrimaryButton onClick={handleClick} disabled={selections.size === 0}>
+            Cite
+          </PrimaryButton>
+        </ButtonGroup>
+      </Actions>
+    </Container>
+  )
+}

package/src/components/references/ReferenceSearchResults.tsx

@@ -0,0 +1,113 @@
+/*!
+ * © 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,
+  SecondaryButton,
+  withListNavigation,
+  withNavigableListItem,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import React, { useRef } from 'react'
+import styled from 'styled-components'
+
+import { ReferenceLine } from './ReferenceLine'
+
+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 MoreButton = styled(SecondaryButton)`
+  font-size: inherit;
+  text-transform: none;
+  text-decoration: underline;
+  border: none;
+  margin-left: ${(props) => props.theme.grid.unit * 4}px;
+  color: ${(props) => props.theme.colors.button.default.color.default};
+`
+
+export const ReferenceSearchResultsContainer = withListNavigation(styled.div`
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+  flex: 1;
+  overflow-y: auto;
+  outline: none;
+`)
+
+export const ReferenceSearchResult = withNavigableListItem(styled.div`
+  cursor: pointer;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+  display: flex;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid #f6f6f6;
+  }
+`)
+
+export const ReferenceSearchResults: React.FC<{
+  items: BibliographyItemAttrs[]
+  total: number
+  isSelected: (item: BibliographyItemAttrs) => boolean
+  onSelect: (item: BibliographyItemAttrs) => void
+  onShowMore: () => void
+}> = ({ items, total, isSelected, onSelect, onShowMore }) => {
+  const list = useRef<HTMLElement>(null)
+  const onExpandReferenceList = () => {
+    const element = list.current
+    if (element) {
+      // this to not lose focus after we expand list
+      element.setAttribute('tabindex', '0')
+      element.focus()
+      element.setAttribute('tabindex', '-1')
+    }
+    onShowMore()
+  }
+
+  return (
+    <ReferenceSearchResultsContainer ref={list}>
+      {items.map((item) => (
+        <ReferenceSearchResult
+          onClick={() => onSelect(item)}
+          key={item.id}
+          data-cy={`${isSelected(item) ? 'selected-reference' : 'reference'}`}
+        >
+          <StatusIcon>
+            {isSelected(item) ? (
+              <AddedIcon width={24} height={24} />
+            ) : (
+              <AddIcon width={24} height={24} />
+            )}
+          </StatusIcon>
+          <ReferenceLine item={item} />
+        </ReferenceSearchResult>
+      ))}
+      {items.length < 25 && total > items.length ? (
+        <MoreButton onClick={onExpandReferenceList} data-cy={'more-button'}>
+          Show more
+        </MoreButton>
+      ) : undefined}
+    </ReferenceSearchResultsContainer>
+  )
+}

package/src/components/references/ReferenceSearchResultsPlaceholder.tsx

@@ -0,0 +1,71 @@
+/*!
+ * © 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 React from 'react'
+import styled from 'styled-components'
+
+import { Metadata, MetadataContainer } from './ReferenceLine'
+import {
+  ReferenceSearchResult,
+  ReferenceSearchResultsContainer,
+} from './ReferenceSearchResults'
+
+const IconPlaceholderContainer = styled.div`
+  width: 36px;
+`
+
+const IconPlaceholder = styled.span`
+  margin-left: 8px;
+`
+
+const MetadataPlaceholder = styled(Metadata)`
+  background: ${(props) => props.theme.colors.text.muted};
+  height: 1.2em;
+`
+
+const TitlePlaceholder = styled.div`
+  background: ${(props) => props.theme.colors.border.primary};
+  height: 1.2em;
+`
+
+const SearchingLabel = styled.div`
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-left: ${(props) => props.theme.grid.unit * 9}px;
+`
+
+const ReferenceSearchResultPlaceholder = styled(ReferenceSearchResult)`
+  opacity: 0.2;
+`
+
+const Placeholder: React.FC = () => (
+  <ReferenceSearchResultPlaceholder>
+    <IconPlaceholderContainer>
+      <IconPlaceholder>...</IconPlaceholder>
+    </IconPlaceholderContainer>
+    <MetadataContainer>
+      <TitlePlaceholder />
+      <MetadataPlaceholder />
+    </MetadataContainer>
+  </ReferenceSearchResultPlaceholder>
+)
+
+export const ReferenceSearchResultsPlaceholder: React.FC = () => (
+  <ReferenceSearchResultsContainer>
+    <SearchingLabel>Searching</SearchingLabel>
+    <Placeholder />
+    <Placeholder />
+    <Placeholder />
+  </ReferenceSearchResultsContainer>
+)