@manuscripts/body-editor 3.18.5 → 3.18.7

package/dist/cjs/components/references/CitationEditor.js

@@ -46,7 +46,7 @@ const array_reducer_1 = require("../../lib/array-reducer");
 const utils_1 = require("../../lib/utils");
 const CitationViewer_1 = require("./CitationViewer");
 const ReferenceLine_1 = require("./ReferenceLine");
-const ReferenceSearch_1 = require("./ReferenceSearch");
+const InsertCitationModal_1 = require("./InsertCitationModal");
 const ReferencesModal_1 = require("./ReferencesModal");
 const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div ``);
 const CitedItemActions = styled_components_1.default.div `
@@ -62,7 +62,7 @@ const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
 `;
 const itemsReducer = (0, array_reducer_1.attrsReducer)();
 const ridsReducer = (0, array_reducer_1.arrayReducer)();
-const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sources, onSave, onDelete, onCite, onUncite, onCancel, canEdit, }) => {
+const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sources, onSave, onDelete, onCite, onUncite, onCancel, canEdit, isNodeDeleted, }) => {
     const [items, dispatchItems] = (0, react_1.useReducer)(itemsReducer, $items);
     const [rids, dispatchRids] = (0, react_1.useReducer)(ridsReducer, $rids);
     const handleSave = (item) => {
@@ -132,13 +132,13 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
         return (react_1.default.createElement(ReferencesModal_1.ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: handleSave, onDelete: handleDelete, handleImport: handleImport }));
     }
     if (searching) {
-        return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { sources: sources, items: items, onAdd: handleAdd, onCite: (items) => {
+        return (react_1.default.createElement(InsertCitationModal_1.InsertCitationModal, { sources: sources, items: items, citationCounts: citationCounts, onAdd: handleAdd, onCite: (items) => {
                 setSearching(false);
                 handleCite(items);
             }, onCancel: () => setSearching(false) }));
     }
-    if (!rids.length) {
-        return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onCite: handleCite, onCancel: onCancel }));
+    if (!rids.length && !isNodeDeleted()) {
+        return (react_1.default.createElement(InsertCitationModal_1.InsertCitationModal, { query: query, sources: sources, items: items, citationCounts: citationCounts, onAdd: handleAdd, onCite: handleCite, onCancel: onCancel }));
     }
     return (react_1.default.createElement(Container, null,
         react_1.default.createElement(style_guide_1.Dialog, { isOpen: deleteDialog.show, category: style_guide_1.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: {

package/dist/cjs/components/references/InsertCitationModal.js

@@ -0,0 +1,142 @@
+"use strict";
+/*!
+ * © 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.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertCitationModal = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CreateModalStyles_1 = require("../form/CreateModalStyles");
+const BibliographyItemSource_1 = require("./BibliographyItemSource");
+const ReferenceSearchSection_1 = require("./ReferenceSearchSection");
+const SearchInput_1 = require("./SearchInput");
+const Container = (0, style_guide_1.withFocusTrap)(style_guide_1.ModalContainer);
+const StyledModalSidebar = (0, styled_components_1.default)(style_guide_1.ModalSidebar) `
+  background: white;
+  width: 44vw;
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  padding: 6px;
+`;
+const StyledSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
+  padding: 0;
+`;
+const InsertCitationButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`;
+const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+`;
+const InsertCitationModal = ({ query: initialQuery, sources, items, citationCounts, onAdd, onCite, onCancel, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const [query, setQuery] = (0, react_1.useState)(initialQuery || '');
+    const [selections, setSelections] = (0, react_1.useState)(new Map());
+    const handleClose = () => {
+        onCancel();
+        setOpen(false);
+    };
+    const toggleSelection = (item) => {
+        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) => {
+        return selections.has(item.id);
+    };
+    const document = new BibliographyItemSource_1.DocumentReferenceSource(items);
+    const handleClick = () => {
+        const items = Array.from(selections.values());
+        return onCite(items);
+    };
+    const debouncedSetQuery = (0, react_1.useMemo)(() => (0, lodash_1.debounce)((e) => {
+        setQuery(e.target.value.trim());
+    }, 800), []);
+    (0, react_1.useEffect)(() => () => debouncedSetQuery.cancel(), [debouncedSetQuery]);
+    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: handleClose, shouldCloseOnOverlayClick: true },
+        react_1.default.createElement(Container, { "data-cy": "reference-finder" },
+            react_1.default.createElement(style_guide_1.ModalHeader, null,
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: handleClose, "data-cy": "modal-close-button" })),
+            react_1.default.createElement(CreateModalStyles_1.StyledModalBody, null,
+                react_1.default.createElement(StyledModalSidebar, null,
+                    react_1.default.createElement(StyledSidebarHeader, null,
+                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Insert Citation")),
+                    react_1.default.createElement(StyledSidebarContent, null,
+                        react_1.default.createElement(SearchInput_1.SearchInput, { onChange: debouncedSetQuery, defaultValue: initialQuery }),
+                        react_1.default.createElement(ReferenceSearchSection_1.ReferenceSearchSection, { key: document.id, query: query, source: document, documentCitationCounts: citationCounts, isSelected: isSelected, onSelect: toggleSelection }),
+                        query.length
+                            ? sources.map((source) => (react_1.default.createElement(ReferenceSearchSection_1.ReferenceSearchSection, { key: source.id, query: query, source: source, isSelected: isSelected, onSelect: toggleSelection })))
+                            : ''),
+                    react_1.default.createElement(Actions, null,
+                        react_1.default.createElement(InsertCitationButton, { onClick: onAdd },
+                            react_1.default.createElement(style_guide_1.AddNewIcon, null),
+                            "Add new"),
+                        react_1.default.createElement(style_guide_1.ButtonGroup, null,
+                            react_1.default.createElement(style_guide_1.TertiaryButton, { onClick: handleClose }, "Cancel"),
+                            react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Insert Citation"))))))));
+};
+exports.InsertCitationModal = InsertCitationModal;

package/dist/cjs/components/references/ReferenceSearchResults.js

@@ -91,7 +91,7 @@ exports.ReferenceSearchResult = (0, style_guide_1.withNavigableListItem)(styled_
     border-bottom: 1px solid #f6f6f6;
   }
 `);
-const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => {
+const ReferenceSearchResults = ({ items, total, documentCitationCounts, isSelected, onSelect, onShowMore, }) => {
     const list = (0, react_1.useRef)(null);
     const onExpandReferenceList = () => {
         const element = list.current;
@@ -105,7 +105,7 @@ const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore
     return (react_1.default.createElement(exports.ReferenceSearchResultsContainer, { ref: list },
         items.map((item) => (react_1.default.createElement(exports.ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
             react_1.default.createElement(StatusIcon, null, isSelected(item) ? (react_1.default.createElement(style_guide_1.AddedIcon, { width: 24, height: 24 })) : (react_1.default.createElement(style_guide_1.AddIcon, { width: 24, height: 24 }))),
-            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item })))),
+            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item, showUncited: documentCitationCounts && !documentCitationCounts.get(item.id) })))),
         items.length < 25 && total > items.length ? (react_1.default.createElement(MoreButton, { onClick: onExpandReferenceList, "data-cy": 'more-button' }, "Show more")) : undefined));
 };
 exports.ReferenceSearchResults = ReferenceSearchResults;

package/dist/cjs/components/references/ReferenceSearchSection.js

@@ -58,16 +58,22 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const ReferenceSearchResults_1 = require("./ReferenceSearchResults");
 const ReferenceSearchResultsPlaceholder_1 = require("./ReferenceSearchResultsPlaceholder");
 const SearchSourceLabel = (0, styled_components_1.default)(style_guide_1.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};
+  height: ${(props) => props.theme.grid.unit * 10}px;
+  background: #f2f2f2;
+  display: flex;
+  justify-content: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2}px;
   }
 `;
-const ReferenceSearchSection = ({ query, source, isSelected, onSelect }) => {
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid #e2e2e2;
+`;
+const ReferenceSearchSection = ({ query, source, documentCitationCounts, isSelected, onSelect }) => {
     const [expanded, setExpanded] = (0, react_1.useState)(true);
     const [state, setState] = (0, react_1.useState)();
     const [limit, setLimit] = (0, react_1.useState)(3);
@@ -100,11 +106,11 @@ const ReferenceSearchSection = ({ query, source, isSelected, onSelect }) => {
     const handleShowMore = () => {
         setLimit(25);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(Container, null,
         react_1.default.createElement(SearchSourceLabel, { onClick: toggleExpanded },
             expanded ? (react_1.default.createElement(style_guide_1.TriangleExpandedIcon, { className: 'icon' })) : (react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, { className: 'icon' })),
             source.label),
         expanded && state?.type === 'running' && (react_1.default.createElement(ReferenceSearchResultsPlaceholder_1.ReferenceSearchResultsPlaceholder, null)),
-        expanded && state?.type === 'completed' && (react_1.default.createElement(ReferenceSearchResults_1.ReferenceSearchResults, { items: state.items, total: state.total, isSelected: isSelected, onSelect: onSelect, onShowMore: handleShowMore }))));
+        expanded && state?.type === 'completed' && (react_1.default.createElement(ReferenceSearchResults_1.ReferenceSearchResults, { items: state.items, total: state.total, documentCitationCounts: documentCitationCounts, isSelected: isSelected, onSelect: onSelect, onShowMore: handleShowMore }))));
 };
 exports.ReferenceSearchSection = ReferenceSearchSection;

package/dist/cjs/components/references/SearchInput.js

@@ -51,16 +51,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInput = exports.SearchWrapper = void 0;
+exports.SearchInput = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const SearchContainer = styled_components_1.default.div `
   align-items: center;
   display: flex;
-  flex: 1 0 auto;
   position: relative;
-  margin: 12px;
 `;
 const SearchIconContainer = styled_components_1.default.span `
   display: flex;
@@ -84,11 +82,6 @@ const SearchTextField = (0, styled_components_1.default)(style_guide_1.TextField
     background-color: ${(props) => props.theme.colors.background.fifth};
   }
 `;
-exports.SearchWrapper = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
-`;
 const SearchInput = (props) => {
     const [hover, setHover] = (0, react_1.useState)(false);
     const [focus, setFocus] = (0, react_1.useState)(false);

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.18.5';
+exports.VERSION = '3.18.7';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/citation_editable.js

@@ -115,6 +115,7 @@ class CitationEditableView extends citation_1.CitationView {
                     onSave: this.handleSave,
                     onDelete: this.handleDelete,
                     onCancel: this.handleCancel,
+                    isNodeDeleted: () => (0, track_changes_plugin_1.isDeleted)(this.node),
                     canEdit: can.editCitationsAndRefs,
                 };
                 this.editor = (0, ReactSubView_1.default)(this.props, CitationEditor_1.CitationEditor, componentProps, this.node, this.getPos, this.view, ['citation-editor']);

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

@@ -7,7 +7,7 @@ import { arrayReducer, attrsReducer } from '../../lib/array-reducer';
 import { cleanItemValues } from '../../lib/utils';
 import { CitedItem, CitedItems } from './CitationViewer';
 import { ReferenceLine } from './ReferenceLine';
-import { ReferenceSearch } from './ReferenceSearch';
+import { InsertCitationModal } from './InsertCitationModal';
 import { ReferencesModal } from './ReferencesModal';
 const Container = withFocusTrap(styled.div ``);
 const CitedItemActions = styled.div `
@@ -23,7 +23,7 @@ const Actions = styled(ButtonGroup) `
 `;
 const itemsReducer = attrsReducer();
 const ridsReducer = arrayReducer();
-export const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sources, onSave, onDelete, onCite, onUncite, onCancel, canEdit, }) => {
+export const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sources, onSave, onDelete, onCite, onUncite, onCancel, canEdit, isNodeDeleted, }) => {
     const [items, dispatchItems] = useReducer(itemsReducer, $items);
     const [rids, dispatchRids] = useReducer(ridsReducer, $rids);
     const handleSave = (item) => {
@@ -93,13 +93,13 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
         return (React.createElement(ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: handleSave, onDelete: handleDelete, handleImport: handleImport }));
     }
     if (searching) {
-        return (React.createElement(ReferenceSearch, { sources: sources, items: items, onAdd: handleAdd, onCite: (items) => {
+        return (React.createElement(InsertCitationModal, { sources: sources, items: items, citationCounts: citationCounts, onAdd: handleAdd, onCite: (items) => {
                 setSearching(false);
                 handleCite(items);
             }, onCancel: () => setSearching(false) }));
     }
-    if (!rids.length) {
-        return (React.createElement(ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onCite: handleCite, onCancel: onCancel }));
+    if (!rids.length && !isNodeDeleted()) {
+        return (React.createElement(InsertCitationModal, { query: query, sources: sources, items: items, citationCounts: citationCounts, onAdd: handleAdd, onCite: handleCite, onCancel: onCancel }));
     }
     return (React.createElement(Container, null,
         React.createElement(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: {

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

@@ -0,0 +1,102 @@
+/*!
+ * © 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, CloseButton, IconTextButton, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, PrimaryButton, SidebarContent, StyledModal, TertiaryButton, withFocusTrap, } from '@manuscripts/style-guide';
+import { debounce } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { StyledModalBody } from '../form/CreateModalStyles';
+import { DocumentReferenceSource, } from './BibliographyItemSource';
+import { ReferenceSearchSection } from './ReferenceSearchSection';
+import { SearchInput } from './SearchInput';
+const Container = withFocusTrap(ModalContainer);
+const StyledModalSidebar = styled(ModalSidebar) `
+  background: white;
+  width: 44vw;
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const StyledSidebarContent = styled(SidebarContent) `
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  padding: 6px;
+`;
+const StyledSidebarHeader = styled(ModalSidebarHeader) `
+  padding: 0;
+`;
+const InsertCitationButton = styled(IconTextButton) `
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`;
+const Actions = styled(ButtonGroup) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+`;
+export const InsertCitationModal = ({ query: initialQuery, sources, items, citationCounts, onAdd, onCite, onCancel, }) => {
+    const [isOpen, setOpen] = useState(true);
+    const [query, setQuery] = useState(initialQuery || '');
+    const [selections, setSelections] = useState(new Map());
+    const handleClose = () => {
+        onCancel();
+        setOpen(false);
+    };
+    const toggleSelection = (item) => {
+        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) => {
+        return selections.has(item.id);
+    };
+    const document = new DocumentReferenceSource(items);
+    const handleClick = () => {
+        const items = Array.from(selections.values());
+        return onCite(items);
+    };
+    const debouncedSetQuery = useMemo(() => debounce((e) => {
+        setQuery(e.target.value.trim());
+    }, 800), []);
+    useEffect(() => () => debouncedSetQuery.cancel(), [debouncedSetQuery]);
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: handleClose, shouldCloseOnOverlayClick: true },
+        React.createElement(Container, { "data-cy": "reference-finder" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: handleClose, "data-cy": "modal-close-button" })),
+            React.createElement(StyledModalBody, null,
+                React.createElement(StyledModalSidebar, null,
+                    React.createElement(StyledSidebarHeader, null,
+                        React.createElement(ModalSidebarTitle, null, "Insert Citation")),
+                    React.createElement(StyledSidebarContent, null,
+                        React.createElement(SearchInput, { onChange: debouncedSetQuery, defaultValue: initialQuery }),
+                        React.createElement(ReferenceSearchSection, { key: document.id, query: query, source: document, documentCitationCounts: citationCounts, isSelected: isSelected, onSelect: toggleSelection }),
+                        query.length
+                            ? sources.map((source) => (React.createElement(ReferenceSearchSection, { key: source.id, query: query, source: source, isSelected: isSelected, onSelect: toggleSelection })))
+                            : ''),
+                    React.createElement(Actions, null,
+                        React.createElement(InsertCitationButton, { onClick: onAdd },
+                            React.createElement(AddNewIcon, null),
+                            "Add new"),
+                        React.createElement(ButtonGroup, null,
+                            React.createElement(TertiaryButton, { onClick: handleClose }, "Cancel"),
+                            React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Insert Citation"))))))));
+};

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

@@ -52,7 +52,7 @@ export const ReferenceSearchResult = withNavigableListItem(styled.div `
     border-bottom: 1px solid #f6f6f6;
   }
 `);
-export const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => {
+export const ReferenceSearchResults = ({ items, total, documentCitationCounts, isSelected, onSelect, onShowMore, }) => {
     const list = useRef(null);
     const onExpandReferenceList = () => {
         const element = list.current;
@@ -66,6 +66,6 @@ export const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onS
     return (React.createElement(ReferenceSearchResultsContainer, { ref: list },
         items.map((item) => (React.createElement(ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
             React.createElement(StatusIcon, null, isSelected(item) ? (React.createElement(AddedIcon, { width: 24, height: 24 })) : (React.createElement(AddIcon, { width: 24, height: 24 }))),
-            React.createElement(ReferenceLine, { item: item })))),
+            React.createElement(ReferenceLine, { item: item, showUncited: documentCitationCounts && !documentCitationCounts.get(item.id) })))),
         items.length < 25 && total > items.length ? (React.createElement(MoreButton, { onClick: onExpandReferenceList, "data-cy": 'more-button' }, "Show more")) : undefined));
 };

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

@@ -19,16 +19,22 @@ import styled from 'styled-components';
 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};
+  height: ${(props) => props.theme.grid.unit * 10}px;
+  background: #f2f2f2;
+  display: flex;
+  justify-content: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2}px;
   }
 `;
-export const ReferenceSearchSection = ({ query, source, isSelected, onSelect }) => {
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid #e2e2e2;
+`;
+export const ReferenceSearchSection = ({ query, source, documentCitationCounts, isSelected, onSelect }) => {
     const [expanded, setExpanded] = useState(true);
     const [state, setState] = useState();
     const [limit, setLimit] = useState(3);
@@ -61,10 +67,10 @@ export const ReferenceSearchSection = ({ query, source, isSelected, onSelect })
     const handleShowMore = () => {
         setLimit(25);
     };
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(Container, null,
         React.createElement(SearchSourceLabel, { onClick: toggleExpanded },
             expanded ? (React.createElement(TriangleExpandedIcon, { className: 'icon' })) : (React.createElement(TriangleCollapsedIcon, { className: 'icon' })),
             source.label),
         expanded && state?.type === 'running' && (React.createElement(ReferenceSearchResultsPlaceholder, null)),
-        expanded && state?.type === 'completed' && (React.createElement(ReferenceSearchResults, { items: state.items, total: state.total, isSelected: isSelected, onSelect: onSelect, onShowMore: handleShowMore }))));
+        expanded && state?.type === 'completed' && (React.createElement(ReferenceSearchResults, { items: state.items, total: state.total, documentCitationCounts: documentCitationCounts, isSelected: isSelected, onSelect: onSelect, onShowMore: handleShowMore }))));
 };

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

@@ -19,9 +19,7 @@ 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;
@@ -45,11 +43,6 @@ const SearchTextField = styled(TextField) `
     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 = (props) => {
     const [hover, setHover] = useState(false);
     const [focus, setFocus] = useState(false);

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.18.5';
+export const VERSION = '3.18.7';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/citation_editable.js

@@ -109,6 +109,7 @@ export class CitationEditableView extends CitationView {
                     onSave: this.handleSave,
                     onDelete: this.handleDelete,
                     onCancel: this.handleCancel,
+                    isNodeDeleted: () => isDeleted(this.node),
                     canEdit: can.editCitationsAndRefs,
                 };
                 this.editor = ReactSubView(this.props, CitationEditor, componentProps, this.node, this.getPos, this.view, ['citation-editor']);

package/dist/types/components/references/CitationEditor.d.ts

@@ -12,6 +12,7 @@ export interface CitationEditorProps {
     onSave: (item: BibliographyItemAttrs[]) => void;
     onDelete: (item: BibliographyItemAttrs) => void;
     onCancel: () => void;
+    isNodeDeleted: () => boolean;
     canEdit: boolean;
 }
 export declare const CitationEditor: React.FC<CitationEditorProps>;

package/dist/types/components/references/{ReferenceSearch.d.ts → InsertCitationModal.d.ts}

@@ -16,10 +16,11 @@
 import { BibliographyItemAttrs } from '@manuscripts/transform';
 import React from 'react';
 import { BibliographyItemSource } from './BibliographyItemSource';
-export declare const ReferenceSearch: React.FC<{
+export declare const InsertCitationModal: React.FC<{
     query?: string;
     sources: BibliographyItemSource[];
     items: BibliographyItemAttrs[];
+    citationCounts: Map<string, number>;
     onAdd: () => void;
     onCite: (items: BibliographyItemAttrs[]) => void;
     onCancel: () => void;

package/dist/types/components/references/ReferenceSearchResults.d.ts

@@ -38,6 +38,7 @@ export declare const ReferenceSearchResult: import("styled-components/dist/types
 export declare const ReferenceSearchResults: React.FC<{
     items: BibliographyItemAttrs[];
     total: number;
+    documentCitationCounts?: Map<string, number>;
     isSelected: (item: BibliographyItemAttrs) => boolean;
     onSelect: (item: BibliographyItemAttrs) => void;
     onShowMore: () => void;

package/dist/types/components/references/ReferenceSearchSection.d.ts

@@ -19,6 +19,7 @@ import { BibliographyItemSource } from './BibliographyItemSource';
 export declare const ReferenceSearchSection: React.FC<{
     query: string;
     source: BibliographyItemSource;
+    documentCitationCounts?: Map<string, number>;
     isSelected: (item: BibliographyItemAttrs) => boolean;
     onSelect: (item: BibliographyItemAttrs) => void;
 }>;

package/dist/types/components/references/SearchInput.d.ts

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 import React, { InputHTMLAttributes } from 'react';
-export declare const SearchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const SearchInput: React.FC<InputHTMLAttributes<HTMLInputElement>>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.18.5";
+export declare const VERSION = "3.18.7";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.18.5",
+  "version": "3.18.7",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.7.3",
+    "@manuscripts/style-guide": "3.7.4",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.5.7",
     "@popperjs/core": "2.11.8",