@manuscripts/body-editor 3.17.3 → 3.18.0

package/dist/cjs/plugins/translations.js

@@ -21,8 +21,8 @@ const prosemirror_view_1 = require("prosemirror-view");
 const commands_1 = require("../commands");
 const icons_1 = require("../icons");
 const languages_1 = require("../lib/languages");
-const template_1 = require("../lib/template");
 const navigation_utils_1 = require("../lib/navigation-utils");
+const template_1 = require("../lib/template");
 const createMenuItem = (props, contents, handler, isSelected = false, tabIndex) => {
     const item = document.createElement('div');
     item.className = `menu-item ${isSelected ? 'selected' : ''}`;
@@ -60,10 +60,6 @@ const createLanguageMenu = (props, selectedCode, onSelect) => {
     });
     return { menu, destroy };
 };
-const getInsertionPos = (doc, nodePos) => {
-    const node = doc.nodeAt(nodePos);
-    return node ? nodePos + node.nodeSize : null;
-};
 exports.default = (props) => new prosemirror_state_1.Plugin({
     props: {
         decorations: (state) => {
@@ -74,14 +70,11 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
             const canEditTransGraphicalAbstract = can.editArticle &&
                 (0, template_1.templateAllows)(state, transform_1.schema.nodes.trans_graphical_abstract);
             const widgets = [];
-            state.doc.descendants((node, pos, parent) => {
-                const isAbstractSection = (node.type === transform_1.schema.nodes.section ||
-                    node.type === transform_1.schema.nodes.graphical_abstract_section) &&
-                    parent?.type === transform_1.schema.nodes.abstracts;
+            state.doc.descendants((node, pos) => {
+                const isAbstractSection = (0, transform_1.isAbstractNode)(node) || (0, transform_1.isGraphicalAbstractSectionNode)(node);
                 if (isAbstractSection) {
-                    const isGraphical = node.type === transform_1.schema.nodes.graphical_abstract_section;
                     const category = props.sectionCategories.get(node.attrs.category);
-                    const canEdit = isGraphical
+                    const canEdit = (0, transform_1.isGraphicalAbstractSectionNode)(node)
                         ? canEditTransGraphicalAbstract &&
                             category &&
                             (0, commands_1.insertTransGraphicalAbstract)(category)(state)
@@ -92,19 +85,15 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
                             $span.tabIndex = 0;
                             $span.className = 'add-trans-abstract';
                             $span.title = 'Add translation';
-                            $span.innerHTML = `${icons_1.addAuthorIcon} <span class="add-trans-abstract-text">Add translation</span>`;
+                            $span.innerHTML = `${icons_1.addIcon} <span class="add-trans-abstract-text">Add translation</span>`;
                             const handleActivate = (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
-                                const insertPos = getInsertionPos(view.state.doc, pos);
-                                if (insertPos == null) {
-                                    return;
-                                }
-                                if (isGraphical && category) {
-                                    (0, commands_1.insertTransGraphicalAbstract)(category, insertPos)(view.state, view.dispatch, view);
+                                if ((0, transform_1.isGraphicalAbstractSectionNode)(node) && category) {
+                                    (0, commands_1.insertTransGraphicalAbstract)(category)(view.state, view.dispatch, view);
                                 }
                                 else {
-                                    (0, commands_1.insertTransAbstract)(view.state, view.dispatch, node.attrs.category, insertPos);
+                                    (0, commands_1.insertTransAbstract)(view.state, view.dispatch, node.attrs.category);
                                 }
                             };
                             $span.addEventListener('mousedown', handleActivate);
@@ -113,8 +102,7 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
                         }, { key: `add-trans-${node.attrs.id}-${pos}` }));
                     }
                 }
-                const isTransNode = node.type === transform_1.schema.nodes.trans_abstract ||
-                    node.type === transform_1.schema.nodes.trans_graphical_abstract;
+                const isTransNode = (0, transform_1.isTransAbstractNode)(node) || (0, transform_1.isTransGraphicalAbstractNode)(node);
                 if (isTransNode) {
                     const canEdit = node.type === transform_1.schema.nodes.trans_abstract
                         ? canEditTransAbstract

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.17.3';
+exports.VERSION = '3.18.0';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/bibliography_element.js

@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BibliographyElementBlockView = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const ReferencesEditor_1 = require("../components/references/ReferencesEditor");
 const comments_1 = require("../lib/comments");
@@ -34,6 +35,7 @@ const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const icons_1 = require("../icons");
 class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -138,7 +140,7 @@ class BibliographyElementBlockView extends block_view_1.default {
         const componentProps = {
             items: Array.from(bib.bibliographyItems.values()),
             citationCounts: bib.citationCounts,
-            item: bib.bibliographyItems.get(id),
+            item: id ? bib.bibliographyItems.get(id) : undefined,
             onSave: this.handleSave,
             onDelete: this.handleDelete,
         };
@@ -181,7 +183,18 @@ class BibliographyElementBlockView extends block_view_1.default {
             return;
         }
         this.version = bib.version;
+        this.renderBibs(bib);
+        this.createInlineModalButton();
+        this.updateSelections();
+    }
+    renderBibs(bib) {
         const nodes = new Map();
+        const rids = [];
+        this.view.state.doc.descendants((node) => {
+            if ((0, transform_1.isCitationNode)(node)) {
+                rids.push(...node.attrs.rids);
+            }
+        });
         this.node.descendants((node) => {
             const id = node.attrs.id;
             nodes.set(id, node);
@@ -219,6 +232,12 @@ class BibliographyElementBlockView extends block_view_1.default {
             element.tabIndex = 0;
             const comment = (0, comments_1.createCommentMarker)('div', id);
             element.prepend(comment);
+            if (!rids.includes(id)) {
+                const uncitedMarker = document.createElement('span');
+                uncitedMarker.innerHTML = 'UNCITED';
+                uncitedMarker.classList.add('uncited-reference-marker');
+                element.prepend(uncitedMarker);
+            }
             (0, track_changes_plugin_1.addTrackChangesAttributes)(node.attrs, element);
             (0, track_changes_plugin_1.addTrackChangesClassNames)(node.attrs, element);
             wrapper.append(element);
@@ -236,7 +255,30 @@ class BibliographyElementBlockView extends block_view_1.default {
         else {
             this.container.appendChild(wrapper);
         }
-        this.updateSelections();
+    }
+    createInlineModalButton() {
+        const can = this.props.getCapabilities();
+        if (!can.editCitationsAndRefs) {
+            if (this.inlineModalButton) {
+                this.inlineModalButton.remove();
+                this.inlineModalButton = null;
+            }
+            return;
+        }
+        if (this.inlineModalButton) {
+            return;
+        }
+        const $span = document.createElement('span');
+        $span.tabIndex = 0;
+        $span.className = 'add-new-reference add-trans-abstract';
+        $span.title = 'Add New Reference';
+        $span.innerHTML = `${icons_1.addIcon} <span type="button" tabindex="0" class="add-new-reference-text">Add new reference</span>`;
+        $span.addEventListener('click', (e) => {
+            this.showPopper();
+        });
+        $span.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.showPopper()));
+        this.inlineModalButton = $span;
+        this.dom.appendChild($span);
     }
 }
 exports.BibliographyElementBlockView = BibliographyElementBlockView;

package/dist/cjs/views/figure_element.js

@@ -71,7 +71,7 @@ class FigureElementView extends image_element_1.ImageElementView {
         if (this.props.getCapabilities()?.editArticle) {
             this.addFigureBtn = Object.assign(document.createElement('button'), {
                 className: 'add-button',
-                innerHTML: icons_1.addAuthorIcon,
+                innerHTML: icons_1.addIcon,
                 title: 'Add figure',
             });
             this.addFigureBtn.addEventListener('click', () => this.addFigure());

package/dist/cjs/views/headshot_grid.js

@@ -51,7 +51,7 @@ class HeadshotGridView extends block_view_1.default {
                 this.addHeadshotButton.classList.add('add-headshot-element-button');
                 this.addHeadshotButton.setAttribute('data-cy', 'headshot-add');
                 this.addHeadshotButton.contentEditable = 'false';
-                this.addHeadshotButton.innerHTML = icons_1.addAuthorIcon;
+                this.addHeadshotButton.innerHTML = icons_1.addIcon;
                 const buttonText = document.createElement('span');
                 buttonText.classList.add('add-headshot-element-text');
                 buttonText.innerText = 'Add Headshot';

package/dist/es/commands.js

@@ -717,16 +717,14 @@ export const insertAbstractSection = (category) => (state, dispatch, view) => {
         return false;
     }
     const abstracts = findAbstractsNode(state.doc);
-    const sections = findChildrenByType(abstracts.node, schema.nodes.section);
-    if (sections.some((s) => s.node.attrs.category === category.id)) {
+    const abstractNodes = findChildrenByType(abstracts.node, schema.nodes.abstract);
+    if (abstractNodes.some((s) => s.node.attrs.category === category.id)) {
         return false;
     }
-    const ga = findChildrenByType(state.doc, schema.nodes.graphical_abstract_section)[0];
-    let pos = ga ? ga.pos : abstracts.pos + abstracts.node.content.size + 1;
-    if (category.id === 'abstract') {
-        pos = abstracts.pos + 1;
-    }
-    const node = schema.nodes.section.create({ category: category.id }, [
+    const pos = findInsertionPosition(schema.nodes.abstract, abstracts.node) +
+        abstracts.pos +
+        1;
+    const node = schema.nodes.abstract.create({ category: category.id }, [
         schema.nodes.section_title.create({}, schema.text(category.titles[0])),
         schema.nodes.paragraph.create({ placeholder: 'Type abstract here...' }),
     ]);
@@ -776,9 +774,9 @@ export const insertGraphicalAbstract = (category) => (state, dispatch, view) =>
     if (sections.some((s) => s.node.attrs.category === category.id)) {
         return false;
     }
-    const ga = findChildrenByType(state.doc, schema.nodes.graphical_abstract_section)[0];
-    let pos = abstracts.pos + abstracts.node.content.size + 1;
-    pos = ga && category.id === 'abstract-key-image' ? ga.pos : pos;
+    const pos = findInsertionPosition(schema.nodes.graphical_abstract_section, abstracts.node) +
+        abstracts.pos +
+        1;
     const node = schema.nodes.graphical_abstract_section.createAndFill({ category: category.id }, [
         schema.nodes.section_title.create({}, schema.text(category.titles[0])),
         createAndFillFigureElement(state),
@@ -982,7 +980,7 @@ export const insertBibliographySection = () => {
 export const insertTOCSection = () => {
     return false;
 };
-export const insertTransAbstract = (state, dispatch, category, insertAfterPos) => {
+export const insertTransAbstract = (state, dispatch, category) => {
     if (!templateAllows(state, schema.nodes.trans_abstract)) {
         return false;
     }
@@ -997,16 +995,14 @@ export const insertTransAbstract = (state, dispatch, category, insertAfterPos) =
         category,
     }, [title, paragraph]);
     const abstracts = findAbstractsNode(state.doc);
-    const pos = insertAfterPos != null
-        ? insertAfterPos
-        : abstracts.pos + abstracts.node.nodeSize - 1;
+    const pos = abstracts.node.content.size + abstracts.pos + 1;
     const tr = state.tr.insert(pos, node);
     const selection = TextSelection.create(tr.doc, pos + 1);
     tr.setSelection(selection).scrollIntoView();
     dispatch(tr);
     return true;
 };
-export const insertTransGraphicalAbstract = (category, insertAfterPos) => (state, dispatch, view) => {
+export const insertTransGraphicalAbstract = (category) => (state, dispatch, view) => {
     if (!templateAllows(state, schema.nodes.trans_graphical_abstract)) {
         return false;
     }
@@ -1015,9 +1011,7 @@ export const insertTransGraphicalAbstract = (category, insertAfterPos) => (state
     }
     const lang = state.doc.attrs.primaryLanguageCode || 'en';
     const abstracts = findAbstractsNode(state.doc);
-    const pos = insertAfterPos != null
-        ? insertAfterPos
-        : abstracts.pos + abstracts.node.content.size + 1;
+    const pos = abstracts.node.content.size + abstracts.pos + 1;
     const node = schema.nodes.trans_graphical_abstract.createAndFill({
         lang,
         category: category.id,

package/dist/es/components/references/ReferenceLine.js

@@ -23,8 +23,21 @@ export const Metadata = styled.div `
   margin-top: ${(props) => props.theme.grid.unit}px;
 `;
 export const MetadataContainer = styled.div `
+  position: relative;
   flex: 1;
 `;
-export const ReferenceLine = ({ item }) => (React.createElement(MetadataContainer, null,
+export const ReferenceLine = ({ item, showUncited }) => (React.createElement(MetadataContainer, null,
+    showUncited && React.createElement(UncitedBadge, null, "UNCITED"),
     React.createElement("div", { "data-cy": 'reference-title' }, item.title || item.literal || 'Untitled'),
     React.createElement(Metadata, null, metadata(item))));
+const UncitedBadge = styled.span `
+  padding: 1px 6px;
+  display: flex;
+  margin-bottom: 2px;
+  max-width: max-content;
+  border-radius: 4px;
+  color: #353535;
+  background-color: #f7b314;
+  font-size: 10px;
+  font-weight: 500;
+`;

package/dist/es/components/references/ReferencesModal.js

@@ -1,4 +1,5 @@
-import { AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { AddIcon, AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { generateNodeID, schema, } from '@manuscripts/transform';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -6,135 +7,19 @@ import { ReferenceForm, } from './ReferenceForm/ReferenceForm';
 import { ReferenceLine } from './ReferenceLine';
 import { ImportBibliographyModal } from './ImportBibliographyModal';
 import { ImportSuccessPlaceholder } from './ImportSuccessPlaceholder';
-const ReferencesModalContainer = styled(ModalContainer) `
-  min-width: 960px;
-`;
-const ReferencesSidebar = styled(ModalSidebar) `
-  width: 70%;
-`;
-const ReferencesSidebarContent = styled(SidebarContent) `
-  overflow-y: auto;
-`;
-const ImportFromFileFooter = styled.div `
-  padding: 16px;
-`;
-const ImportFromFileButton = styled.button `
-  display: flex;
-  width: 100%;
-  padding: 8px 24px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 4px;
-  border: 1px dashed #c9c9c9;
-  background: #fafafa;
-  cursor: pointer;
-  font-family: ${(props) => props.theme.font.family.sans};
-  font-size: 14px;
-  color: #353535;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  svg rect {
-    fill: #6e6e6e;
-  }
-`;
-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;
-  }
-`;
+import { normalizeBlblioItem } from '../../lib/normalize';
 const selectionTopOffset = 10;
 const pageSize = 12;
 const topTrigger = 0.2;
 const bottomTrigger = 0.8;
 const dropLimit = 36;
-const normalize = (item) => ({
-    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 const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, handleImport, }) => {
     const [importing, setImporting] = useState(false);
     const [importSuccessCount, setImportSuccessCount] = useState(null);
     const [confirm, setConfirm] = useState(false);
     const valuesRef = useRef(undefined);
     const [selection, setSelection] = useState();
+    const [isNew, setIsNew] = useState(false);
     const selectionRef = useRef(null);
     const sortedItems = useMemo(() => [...items].sort((a, b) => {
         const aUncited = (citationCounts.get(a.id) ?? 0) === 0;
@@ -149,7 +34,17 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
     };
     const selectionIndex = sortedItems.findIndex(isSelected);
     useEffect(() => {
-        setSelection(item);
+        if (item) {
+            setSelection(item);
+            setIsNew(false);
+        }
+        else {
+            setIsNew(true);
+            setSelection({
+                id: generateNodeID(schema.nodes.bibliography_item),
+                type: 'article-journal',
+            });
+        }
     }, [item]);
     useEffect(() => {
         setTimeout(() => {
@@ -199,10 +94,11 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         };
         const currentCitationCount = citationCounts.get(item.id);
         if (currentCitationCount === undefined) {
-            citationCounts.set(item.id, 1);
+            citationCounts.set(item.id, 0);
         }
         onSave(item);
         setSelection(item);
+        setIsNew(false);
         setConfirm(false);
     };
     const handleDelete = () => {
@@ -212,14 +108,18 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         onDelete(selection);
         setSelection(undefined);
     };
+    const hasChanged = () => {
+        const values = valuesRef.current;
+        return (values && selection && !isEqual(values, normalizeBlblioItem(selection)));
+    };
     const clearImportSuccess = () => setImportSuccessCount(null);
     const handleItemClick = (item) => {
         clearImportSuccess();
-        const values = valuesRef.current;
-        if (values && selection && !isEqual(values, normalize(selection))) {
+        if (hasChanged()) {
             setConfirm(true);
             return;
         }
+        setIsNew(false);
         setSelection(item);
     };
     const handleChange = (values) => {
@@ -231,9 +131,6 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         setSelection(undefined);
         setImportSuccessCount(data.length);
     };
-    if (sortedItems.length <= 0) {
-        return React.createElement(React.Fragment, null);
-    }
     return (React.createElement(React.Fragment, null,
         importing && (React.createElement(ImportBibliographyModal, { onCancel: () => setImporting(false), onSave: handleImportSave })),
         React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
@@ -255,15 +152,142 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                         React.createElement(ModalSidebarHeader, null,
                             React.createElement(ModalSidebarTitle, null, "References")),
                         React.createElement(ReferencesSidebarContent, { ref: ref },
-                            React.createElement(ReferencesInnerWrapper, null, sortedItems.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
-                                React.createElement(IconContainer, null,
-                                    React.createElement(CitationCountIcon, null),
-                                    (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
-                                React.createElement(ReferenceLine, { item: item })))))),
+                            React.createElement(NewReferenceButton, { onClick: () => {
+                                    if (hasChanged()) {
+                                        setConfirm(true);
+                                        return;
+                                    }
+                                    setIsNew(true);
+                                    setSelection({
+                                        id: generateNodeID(schema.nodes.bibliography_item),
+                                        type: 'article-journal',
+                                    });
+                                }, className: isNew ? 'selected' : '', disabled: isNew },
+                                React.createElement(AddIcon, null),
+                                React.createElement("span", null, "New Reference")),
+                            React.createElement(ReferencesInnerWrapper, null,
+                                React.createElement(ExistingReferencesHeading, null, "Existing References"),
+                                sortedItems.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
+                                    React.createElement(IconContainer, null,
+                                        React.createElement(CitationCountIconStyled, null),
+                                        (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
+                                    React.createElement(ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item })))))),
                         React.createElement(ImportFromFileFooter, null,
                             React.createElement(ImportFromFileButton, { type: "button", "data-cy": "import-from-file-button", onClick: () => setImporting(true) },
                                 React.createElement(AddAuthorIcon, null),
                                 "Import from file"))),
-                    React.createElement(ScrollableModalContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
+                    React.createElement(ScrollableModalContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalizeBlblioItem(selection), showDelete: !citationCounts.get(selection.id) &&
                             isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
 };
+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 CitationCountIconStyled = styled(CitationCountIcon) ``;
+const ReferenceButton = withNavigableListItem(styled.button `
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  border-radius: 0;
+  text-align: inherit;
+
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+
+  ${CitationCountIconStyled} 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 NewReferenceButton = styled(ReferenceButton) `
+  svg {
+    margin-right: 8px;
+  }
+`;
+const ExistingReferencesHeading = styled.h3 `
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 8px 0 20px;
+  margin: 0;
+  color: #6e6e6e;
+`;
+const ImportFromFileFooter = styled.div `
+  padding: 16px;
+`;
+const ImportFromFileButton = styled.button `
+  display: flex;
+  width: 100%;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px dashed #c9c9c9;
+  background: #fafafa;
+  cursor: pointer;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 14px;
+  color: #353535;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg rect {
+    fill: #6e6e6e;
+  }
+`;

package/dist/es/configs/editor-views.js

@@ -113,6 +113,7 @@ export default (props, dispatch) => {
         headshot_element: headshotElement(props, dispatch),
         headshot_image: headshotImage(props, dispatch),
         abstracts: abstracts(props),
+        abstract: section(props),
         trans_abstract: transAbstract(props),
         trans_graphical_abstract: transGraphicalAbstract(props),
         attachment: attachment(props, dispatch),

package/dist/es/icons.js

@@ -2,7 +2,7 @@ import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, CameraIcon,
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
-export const addAuthorIcon = renderIcon(AddAuthorIcon);
+export const addIcon = renderIcon(AddAuthorIcon);
 export const arrowDown = renderIcon(ArrowDownCircleIcon);
 export const arrowUp = renderIcon(ArrowUpIcon);
 export const alertIcon = renderIcon(AlertIcon);