@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/references/BibliographyItemSource.ts

@@ -0,0 +1,80 @@
+/*!
+ * © 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 * as fuzzysort from 'fuzzysort'
+
+export interface BibliographyItemSource {
+  id: string
+  label: string
+  search: (query: string, limit: number) => BibliographyItemSearch
+}
+
+export class BibliographyItemSearch extends Promise<BibliographyItems> {
+  controller?: AbortController
+
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    executor: (resolve: any, reject: any) => void,
+    controller?: AbortController
+  ) {
+    super(executor)
+    this.controller = controller
+  }
+}
+
+export type BibliographyItems = {
+  items: BibliographyItemAttrs[]
+  total: number
+}
+
+export class DocumentReferenceSource implements BibliographyItemSource {
+  public id = 'document'
+  public label = 'Document'
+  private items: BibliographyItemAttrs[]
+
+  constructor(items: BibliographyItemAttrs[]) {
+    this.items = items
+  }
+
+  search(query: string, limit: number): BibliographyItemSearch {
+    if (!query) {
+      return BibliographyItemSearch.resolve({
+        items: [...this.items].slice(0, limit),
+        total: this.items.length,
+      })
+    }
+
+    const index = [...this.items].map((i) => {
+      return {
+        item: i,
+        title: i.title,
+        authors: i.author?.map((a) => `${a.given} ${a.family}`).join(', '),
+      }
+    })
+
+    const results = fuzzysort.go(query, index, {
+      keys: ['title', 'authors'],
+      limit: limit,
+      threshold: -1000,
+    })
+
+    return BibliographyItemSearch.resolve({
+      items: results.map((r) => r.obj.item),
+      total: results.total,
+    })
+  }
+}

package/src/components/references/CitationEditor.tsx

@@ -0,0 +1,301 @@
+/*!
+ * © 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 {
+  ButtonGroup,
+  Category,
+  DeleteSolidIcon,
+  Dialog,
+  EditIcon,
+  IconButton,
+  PrimaryButton,
+  SecondaryButton,
+  withFocusTrap,
+} from '@manuscripts/style-guide'
+import {
+  BibliographyItemAttrs,
+  generateNodeID,
+  schema,
+} from '@manuscripts/transform'
+import React, { useMemo, useReducer, useState } from 'react'
+import styled from 'styled-components'
+
+import { arrayReducer, attrsReducer } from '../../lib/array-reducer'
+import { cleanItemValues } from '../../lib/utils'
+import { BibliographyItemSource } from './BibliographyItemSource'
+import { CitedItem, CitedItems } from './CitationViewer'
+import { ImportBibliographyModal } from './ImportBibliographyModal'
+import { ReferenceLine } from './ReferenceLine'
+import { ReferenceSearch } from './ReferenceSearch'
+import { ReferencesModal } from './ReferencesModal'
+
+const Container = withFocusTrap(styled.div``)
+
+const CitedItemActions = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+
+  svg.remove-icon {
+    color: #6e6e6e;
+  }
+`
+
+const ActionButton = styled(IconButton).attrs({
+  size: 24,
+})`
+  :disabled {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    color: rgb(255, 255, 255);
+    path,
+    g {
+      fill: ${(props) => props.theme.colors.background.tertiary} !important;
+    }
+  }
+  :not(:disabled):focus,
+  :not(:disabled):hover {
+    path,
+    g {
+      fill: ${(props) => props.theme.colors.brand.medium} !important;
+    }
+  }
+`
+
+const EditReferenceButton = styled(ActionButton)`
+  margin-right: ${(props) => props.theme.grid.unit * 3}px;
+`
+
+const Actions = styled(ButtonGroup)`
+  margin: ${(props) => props.theme.grid.unit * 4}px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`
+export interface CitationEditorProps {
+  query?: string
+  rids: string[]
+  items: BibliographyItemAttrs[]
+  citationCounts: Map<string, number>
+  sources: BibliographyItemSource[]
+  onCite: (items: BibliographyItemAttrs[]) => void
+  onUncite: (id: string) => void
+  onSave: (item: BibliographyItemAttrs) => void
+  onDelete: (item: BibliographyItemAttrs) => void
+  onCancel: () => void
+  canEdit: boolean
+}
+
+const itemsReducer = attrsReducer<BibliographyItemAttrs>()
+const ridsReducer = arrayReducer<string>()
+
+export const CitationEditor: React.FC<CitationEditorProps> = ({
+  query,
+  rids: $rids,
+  items: $items,
+  citationCounts,
+  sources,
+  onSave,
+  onDelete,
+  onCite,
+  onUncite,
+  onCancel,
+  canEdit,
+}) => {
+  const [items, dispatchItems] = useReducer(itemsReducer, $items)
+  const [rids, dispatchRids] = useReducer(ridsReducer, $rids)
+  const handleSave = (item: BibliographyItemAttrs) => {
+    const cleanedItem = cleanItemValues(item)
+    onSave(cleanedItem)
+    dispatchItems({
+      type: 'update',
+      items: [cleanedItem],
+    })
+    if (!rids.includes(item.id)) {
+      handleCite([item])
+    }
+  }
+
+  const handleDelete = (item: BibliographyItemAttrs) => {
+    onDelete(item)
+    dispatchItems({
+      type: 'delete',
+      item,
+    })
+  }
+  const handleCite = (items: BibliographyItemAttrs[]) => {
+    onCite(items)
+    dispatchRids({
+      type: 'update',
+      items: items.map((i) => i.id),
+    })
+  }
+  const handleUncite = (rid: string) => {
+    onUncite(rid)
+    dispatchRids({
+      type: 'delete',
+      item: rid,
+    })
+  }
+
+  const [deleteDialog, setDeleteDialog] = useState<{
+    show: boolean
+    id?: string
+  }>({ show: false })
+
+  const [editingForm, setEditingForm] = useState<{
+    show: boolean
+    item?: BibliographyItemAttrs
+  }>({
+    show: false,
+  })
+
+  const [searching, setSearching] = useState(false)
+  const [importing, setImporting] = useState(false)
+
+  const handleAdd = () => {
+    setSearching(false)
+    const item: BibliographyItemAttrs = {
+      id: generateNodeID(schema.nodes.bibliography_item),
+      type: 'article-journal',
+    }
+    dispatchItems({
+      type: 'update',
+      items: [item, ...items],
+    })
+    setEditingForm({ show: true, item: item })
+  }
+
+  const handleImport = () => {
+    setSearching(false)
+    setImporting(true)
+  }
+  const handleSaveImport = (data: BibliographyItemAttrs[]) => {
+    data.forEach((item) => {
+      const newItem = { ...item }
+      newItem.id = generateNodeID(schema.nodes.bibliography_item)
+      handleSave(newItem)
+      handleCite([newItem])
+    })
+  }
+
+  const cited = useMemo(() => {
+    return rids.flatMap((rid) => items.filter((i) => i.id === rid))
+  }, [rids, items])
+
+  if (editingForm.show) {
+    return (
+      <ReferencesModal
+        isOpen={editingForm.show}
+        onCancel={() => setEditingForm({ show: false })}
+        items={items}
+        citationCounts={citationCounts}
+        item={editingForm.item}
+        onSave={handleSave}
+        onDelete={handleDelete}
+      />
+    )
+  }
+
+  if (importing) {
+    return (
+      <ImportBibliographyModal
+        onCancel={() => setImporting(false)}
+        onSave={handleSaveImport}
+      />
+    )
+  }
+  if (searching) {
+    return (
+      <ReferenceSearch
+        sources={sources}
+        items={items}
+        onAdd={handleAdd}
+        onImport={handleImport}
+        onCite={(items) => {
+          setSearching(false)
+          handleCite(items)
+        }}
+        onCancel={() => setSearching(false)}
+      />
+    )
+  }
+  if (!rids.length) {
+    return (
+      <ReferenceSearch
+        query={query}
+        sources={sources}
+        items={items}
+        onAdd={handleAdd}
+        onImport={handleImport}
+        onCite={handleCite}
+        onCancel={onCancel}
+      />
+    )
+  }
+  return (
+    <Container>
+      <Dialog
+        isOpen={deleteDialog.show}
+        category={Category.confirmation}
+        header="Remove cited item"
+        message="Are you sure you want to remove this cited item? It will still exist in the reference list."
+        actions={{
+          secondary: {
+            action: () => {
+              if (deleteDialog.id) {
+                handleUncite(deleteDialog.id)
+                setDeleteDialog({ show: false })
+              }
+            },
+            title: 'Remove',
+          },
+          primary: {
+            action: () => setDeleteDialog({ show: false }),
+            title: 'Cancel',
+          },
+        }}
+      />
+      <CitedItems>
+        {cited.map((item) => (
+          <CitedItem key={item.id}>
+            <ReferenceLine item={item} />
+            <CitedItemActions>
+              <EditReferenceButton
+                value={item.id}
+                disabled={!canEdit}
+                onClick={() => setEditingForm({ show: true, item: item })}
+              >
+                <EditIcon />
+              </EditReferenceButton>
+              <ActionButton
+                disabled={!canEdit}
+                onClick={() => setDeleteDialog({ show: true, id: item.id })}
+              >
+                <DeleteSolidIcon className={'remove-icon'} />
+              </ActionButton>
+            </CitedItemActions>
+          </CitedItem>
+        ))}
+      </CitedItems>
+      <Actions>
+        <SecondaryButton onClick={onCancel}>Done</SecondaryButton>
+        <PrimaryButton disabled={!canEdit} onClick={() => setSearching(true)}>
+          Add Citation
+        </PrimaryButton>
+      </Actions>
+    </Container>
+  )
+}

package/src/components/references/CitationViewer.tsx

@@ -0,0 +1,62 @@
+/*!
+ * © 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, { useMemo } from 'react'
+import styled from 'styled-components'
+
+import { ReferenceLine } from './ReferenceLine'
+
+export const CitedItems = styled.div`
+  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+  font-family: ${(props) => props.theme.font.family.sans};
+  max-height: 70vh;
+  min-height: 100px;
+  overflow-y: auto;
+`
+
+export const CitedItem = styled.div`
+  display: flex;
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${(props) => props.theme.colors.border.secondary};
+  }
+`
+
+export interface CitationViewerProps {
+  rids: string[]
+  items: BibliographyItemAttrs[]
+}
+
+export const CitationViewer: React.FC<CitationViewerProps> = ({
+  rids,
+  items,
+}) => {
+  const cited = useMemo(() => {
+    return rids.flatMap((rid) => items.filter((i) => i.id === rid))
+  }, [rids, items])
+
+  return (
+    <CitedItems>
+      {cited.map((item) => (
+        <CitedItem key={item.id}>
+          <ReferenceLine item={item} />
+        </CitedItem>
+      ))}
+    </CitedItems>
+  )
+}

package/src/components/references/ImportBibliographyForm.tsx

@@ -0,0 +1,232 @@
+/*!
+ * © 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 {
+  FormActionsBar,
+  FormRow,
+  Label,
+  outlineStyle,
+  PrimaryButton,
+  SecondaryButton,
+  TextArea,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import { useFormik } from 'formik'
+import { debounce } from 'lodash'
+import React, {
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import styled, { css } from 'styled-components'
+
+import { importBibliographyItems } from '../../lib/references'
+import { ReferenceLine } from './ReferenceLine'
+
+export interface ImportBibFormProps {
+  onCancel: () => void
+  onSave: (data: BibliographyItemAttrs[]) => void
+}
+
+export const ImportBibliographyForm = ({
+  onCancel,
+  onSave,
+}: ImportBibFormProps) => {
+  const [dragging, setDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const formik = useFormik({
+    initialValues: {
+      content: '',
+      err: '',
+      data: [],
+    },
+    onSubmit: (values, { setSubmitting }) => {
+      onSave(values.data)
+      setSubmitting(false)
+    },
+    onReset: onCancel,
+  })
+
+  const setDataField = useCallback(async (fileContent: string) => {
+    const NO_CITATION = 'No citation available'
+    const ERROR_CITATION = 'Error generating citation'
+    try {
+      if (!fileContent.trim()) {
+        formik.setFieldValue('err', NO_CITATION)
+        formik.setFieldValue('data', [])
+        return
+      }
+      const data = await importBibliographyItems(fileContent.trim())
+      formik.setFieldValue('data', data ? data : [])
+      formik.setFieldValue('err', '')
+    } catch (error) {
+      console.error('Citation generation error:', error)
+      formik.setFieldValue('err', ERROR_CITATION)
+      formik.setFieldValue('data', [])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const debouncedGenerateData = useMemo(
+    () => debounce(setDataField, 300),
+    [setDataField]
+  )
+
+  useEffect(() => {
+    debouncedGenerateData(formik.values.content)
+  }, [debouncedGenerateData, formik.values.content])
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setDragging(false)
+    const file = event.dataTransfer.files[0]
+    if (file) {
+      readFileContent(file)
+    }
+  }
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      readFileContent(file)
+    }
+  }
+
+  const readFileContent = (file: File) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (e.target?.result) {
+        formik.setFieldValue('content', e.target.result)
+      }
+    }
+    reader.readAsText(file)
+  }
+
+  const handleOnKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      fileInputRef?.current?.click()
+    }
+  }
+
+  return (
+    <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+      <FormRow>
+        <DropContainer
+          tabIndex={0}
+          role="button"
+          onDrop={handleDrop}
+          onDragOver={(e) => {
+            e.preventDefault()
+            setDragging(true)
+          }}
+          onDragLeave={() => setDragging(false)}
+          onKeyDown={handleOnKeyDown}
+          active={dragging}
+        >
+          <input
+            id="file"
+            name="file"
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            style={{ display: 'none' }}
+          />
+          <Label htmlFor="file">
+            Drag & Drop or Click here to upload a file.
+          </Label>
+        </DropContainer>
+      </FormRow>
+      <FormRow>
+        <Label htmlFor="content">
+          Alternatively, you can directly Copy&Paste below, the text of the
+          bibliography items.
+        </Label>
+        <TextArea
+          id="content"
+          name="content"
+          rows={6}
+          value={formik.values.content}
+          onChange={formik.handleChange}
+        ></TextArea>
+      </FormRow>
+
+      <Preview>
+        {formik.values.err}
+        {formik.values.data.map((item: BibliographyItemAttrs) => (
+          <ReferenceLine item={item} key={item.id} />
+        ))}
+      </Preview>
+
+      <FormActionsBar>
+        <SecondaryButton type="reset">Cancel</SecondaryButton>
+        <PrimaryButton
+          type="submit"
+          disabled={
+            !formik.dirty || formik.isSubmitting || !formik.values.data.length
+          }
+        >
+          Save
+        </PrimaryButton>
+      </FormActionsBar>
+    </form>
+  )
+}
+
+const Preview = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => 4 * props.theme.grid.unit}px;
+  min-height: 50px;
+  margin-top: ${(props) => 4 * props.theme.grid.unit}px;
+  margin-bottom: ${(props) => props.theme.grid.unit}px;
+`
+
+const activeBoxStyle = css`
+  background: #f2fbfc;
+  border: 1px dashed #bce7f6;
+`
+
+const DropContainer = styled.div<{ active: boolean }>`
+  background: ${(props) => props.theme.colors.background.secondary};
+  border: 1px dashed ${(props) => props.theme.colors.border.secondary};
+  box-sizing: border-box;
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  cursor: pointer;
+  ${({ active }) => active && activeBoxStyle};
+
+  &:hover {
+    ${activeBoxStyle}
+  }
+
+  & label {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.large};
+    font-family: ${(props) => props.theme.font.family.Lato};
+    color: ${(props) => props.theme.colors.text.onLight};
+  }
+
+  ${outlineStyle}
+`