@manuscripts/body-editor 3.17.5 → 3.18.0

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

@@ -29,9 +29,22 @@ exports.Metadata = styled_components_1.default.div `
   margin-top: ${(props) => props.theme.grid.unit}px;
 `;
 exports.MetadataContainer = styled_components_1.default.div `
+  position: relative;
   flex: 1;
 `;
-const ReferenceLine = ({ item }) => (react_1.default.createElement(exports.MetadataContainer, null,
+const ReferenceLine = ({ item, showUncited }) => (react_1.default.createElement(exports.MetadataContainer, null,
+    showUncited && react_1.default.createElement(UncitedBadge, null, "UNCITED"),
     react_1.default.createElement("div", { "data-cy": 'reference-title' }, item.title || item.literal || 'Untitled'),
     react_1.default.createElement(exports.Metadata, null, (0, references_1.metadata)(item))));
 exports.ReferenceLine = ReferenceLine;
+const UncitedBadge = styled_components_1.default.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/cjs/components/references/ReferencesModal.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReferencesModal = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
 const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -45,135 +46,19 @@ const ReferenceForm_1 = require("./ReferenceForm/ReferenceForm");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ImportBibliographyModal_1 = require("./ImportBibliographyModal");
 const ImportSuccessPlaceholder_1 = require("./ImportSuccessPlaceholder");
-const ReferencesModalContainer = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
-  min-width: 960px;
-`;
-const ReferencesSidebar = (0, styled_components_1.default)(style_guide_1.ModalSidebar) `
-  width: 70%;
-`;
-const ReferencesSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
-  overflow-y: auto;
-`;
-const ImportFromFileFooter = styled_components_1.default.div `
-  padding: 16px;
-`;
-const ImportFromFileButton = styled_components_1.default.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 = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
-  width: 100%;
-  padding: 12px 0;
-`);
-const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.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_components_1.default.div `
-  padding-right: ${(props) => props.theme.grid.unit * 5}px;
-  position: relative;
-`;
-const CitationCount = styled_components_1.default.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 normalize_1 = require("../../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 || '',
-});
 const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, handleImport, }) => {
     const [importing, setImporting] = (0, react_1.useState)(false);
     const [importSuccessCount, setImportSuccessCount] = (0, react_1.useState)(null);
     const [confirm, setConfirm] = (0, react_1.useState)(false);
     const valuesRef = (0, react_1.useRef)(undefined);
     const [selection, setSelection] = (0, react_1.useState)();
+    const [isNew, setIsNew] = (0, react_1.useState)(false);
     const selectionRef = (0, react_1.useRef)(null);
     const sortedItems = (0, react_1.useMemo)(() => [...items].sort((a, b) => {
         const aUncited = (citationCounts.get(a.id) ?? 0) === 0;
@@ -188,7 +73,17 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
     };
     const selectionIndex = sortedItems.findIndex(isSelected);
     (0, react_1.useEffect)(() => {
-        setSelection(item);
+        if (item) {
+            setSelection(item);
+            setIsNew(false);
+        }
+        else {
+            setIsNew(true);
+            setSelection({
+                id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.bibliography_item),
+                type: 'article-journal',
+            });
+        }
     }, [item]);
     (0, react_1.useEffect)(() => {
         setTimeout(() => {
@@ -238,10 +133,11 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
         };
         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 = () => {
@@ -251,14 +147,18 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
         onDelete(selection);
         setSelection(undefined);
     };
+    const hasChanged = () => {
+        const values = valuesRef.current;
+        return (values && selection && !(0, isEqual_1.default)(values, (0, normalize_1.normalizeBlblioItem)(selection)));
+    };
     const clearImportSuccess = () => setImportSuccessCount(null);
     const handleItemClick = (item) => {
         clearImportSuccess();
-        const values = valuesRef.current;
-        if (values && selection && !(0, isEqual_1.default)(values, normalize(selection))) {
+        if (hasChanged()) {
             setConfirm(true);
             return;
         }
+        setIsNew(false);
         setSelection(item);
     };
     const handleChange = (values) => {
@@ -270,9 +170,6 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
         setSelection(undefined);
         setImportSuccessCount(data.length);
     };
-    if (sortedItems.length <= 0) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         importing && (react_1.default.createElement(ImportBibliographyModal_1.ImportBibliographyModal, { onCancel: () => setImporting(false), onSave: handleImportSave })),
         react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
@@ -294,16 +191,143 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
                         react_1.default.createElement(style_guide_1.ModalSidebarHeader, null,
                             react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "References")),
                         react_1.default.createElement(ReferencesSidebarContent, { ref: ref },
-                            react_1.default.createElement(ReferencesInnerWrapper, null, sortedItems.slice(startIndex, endIndex + 1).map((item) => (react_1.default.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
-                                react_1.default.createElement(IconContainer, null,
-                                    react_1.default.createElement(style_guide_1.CitationCountIcon, null),
-                                    (citationCounts.get(item.id) || 0) > 0 ? (react_1.default.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (react_1.default.createElement(CitationCount, { className: "unused" }, "0"))),
-                                react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item })))))),
+                            react_1.default.createElement(NewReferenceButton, { onClick: () => {
+                                    if (hasChanged()) {
+                                        setConfirm(true);
+                                        return;
+                                    }
+                                    setIsNew(true);
+                                    setSelection({
+                                        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.bibliography_item),
+                                        type: 'article-journal',
+                                    });
+                                }, className: isNew ? 'selected' : '', disabled: isNew },
+                                react_1.default.createElement(style_guide_1.AddIcon, null),
+                                react_1.default.createElement("span", null, "New Reference")),
+                            react_1.default.createElement(ReferencesInnerWrapper, null,
+                                react_1.default.createElement(ExistingReferencesHeading, null, "Existing References"),
+                                sortedItems.slice(startIndex, endIndex + 1).map((item) => (react_1.default.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
+                                    react_1.default.createElement(IconContainer, null,
+                                        react_1.default.createElement(CitationCountIconStyled, null),
+                                        (citationCounts.get(item.id) || 0) > 0 ? (react_1.default.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (react_1.default.createElement(CitationCount, { className: "unused" }, "0"))),
+                                    react_1.default.createElement(ReferenceLine_1.ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item })))))),
                         react_1.default.createElement(ImportFromFileFooter, null,
                             react_1.default.createElement(ImportFromFileButton, { type: "button", "data-cy": "import-from-file-button", onClick: () => setImporting(true) },
                                 react_1.default.createElement(style_guide_1.AddAuthorIcon, null),
                                 "Import from file"))),
-                    react_1.default.createElement(style_guide_1.ScrollableModalContent, null, importSuccessCount !== null ? (react_1.default.createElement(ImportSuccessPlaceholder_1.ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
+                    react_1.default.createElement(style_guide_1.ScrollableModalContent, null, importSuccessCount !== null ? (react_1.default.createElement(ImportSuccessPlaceholder_1.ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: (0, normalize_1.normalizeBlblioItem)(selection), showDelete: !citationCounts.get(selection.id) &&
                             isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
 };
 exports.ReferencesModal = ReferencesModal;
+const ReferencesModalContainer = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
+  min-width: 960px;
+`;
+const ReferencesSidebar = (0, styled_components_1.default)(style_guide_1.ModalSidebar) `
+  width: 70%;
+`;
+const ReferencesSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
+  overflow-y: auto;
+`;
+const ReferencesInnerWrapper = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
+  width: 100%;
+  padding: 12px 0;
+`);
+const CitationCountIconStyled = (0, styled_components_1.default)(style_guide_1.CitationCountIcon) ``;
+const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.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_components_1.default.div `
+  padding-right: ${(props) => props.theme.grid.unit * 5}px;
+  position: relative;
+`;
+const CitationCount = styled_components_1.default.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 = (0, styled_components_1.default)(ReferenceButton) `
+  svg {
+    margin-right: 8px;
+  }
+`;
+const ExistingReferencesHeading = styled_components_1.default.h3 `
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 8px 0 20px;
+  margin: 0;
+  color: #6e6e6e;
+`;
+const ImportFromFileFooter = styled_components_1.default.div `
+  padding: 16px;
+`;
+const ImportFromFileButton = styled_components_1.default.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/cjs/icons.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.webLinkIcon = exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.leadingHalfLeftIcon = exports.leadingWallpaperIcon = exports.leadingLargeFloatIcon = exports.leadingSmallFloatIcon = exports.leadingHeroImageIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
+exports.webLinkIcon = exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.leadingHalfLeftIcon = exports.leadingWallpaperIcon = exports.leadingLargeFloatIcon = exports.leadingSmallFloatIcon = exports.leadingHeroImageIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addIcon = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
 const renderIcon = (c) => (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(c));
-exports.addAuthorIcon = renderIcon(style_guide_1.AddAuthorIcon);
+exports.addIcon = renderIcon(style_guide_1.AddAuthorIcon);
 exports.arrowDown = renderIcon(style_guide_1.ArrowDownCircleIcon);
 exports.arrowUp = renderIcon(style_guide_1.ArrowUpIcon);
 exports.alertIcon = renderIcon(style_guide_1.AlertIcon);

package/dist/cjs/lib/normalize.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkID = exports.normalizeAuthor = exports.normalizeAffiliation = void 0;
+exports.normalizeBlblioItem = exports.checkID = exports.normalizeAuthor = exports.normalizeAffiliation = void 0;
 const transform_1 = require("@manuscripts/transform");
 const trim = (value) => (value ?? '').trim();
 const normalizeAffiliation = (a) => ({
@@ -62,3 +62,33 @@ const checkID = (attrs, nodeType) => {
     };
 };
 exports.checkID = checkID;
+const normalizeBlblioItem = (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 || '',
+});
+exports.normalizeBlblioItem = normalizeBlblioItem;

package/dist/cjs/lib/paste.js

@@ -75,7 +75,6 @@ const transformPastedHTML = (html) => {
     const doc = new DOMParser().parseFromString(html, 'text/html');
     wrapHeadingWithSection(doc);
     wrapTableWithFigure(doc);
-    console.log(doc.body.innerHTML);
     return doc.body.innerHTML;
 };
 exports.transformPastedHTML = transformPastedHTML;

package/dist/cjs/plugins/add-subtitle.js

@@ -25,7 +25,7 @@ const utils_1 = require("../lib/utils");
 const createAddSubtitleButton = (handler) => {
     const button = document.createElement('span');
     button.className = 'add-subtitle';
-    button.innerHTML = `${icons_1.addAuthorIcon} <span class="add-subtitle-text">Add subtitle</span>`;
+    button.innerHTML = `${icons_1.addIcon} <span class="add-subtitle-text">Add subtitle</span>`;
     button.tabIndex = 0;
     const activate = (event) => {
         event.preventDefault();

package/dist/cjs/plugins/bibliography.js

@@ -127,7 +127,13 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
                 return item;
             },
         }, csl.style, 'en-US');
-        const citationTexts = engine.rebuildProcessorState(nodes.map(([node]) => (0, transform_1.buildCiteprocCitation)(node.attrs)));
+        const uncitedIds = [];
+        bibliographyItems.forEach((item, id) => {
+            if (!rids.includes(id)) {
+                uncitedIds.push(id);
+            }
+        });
+        const citationTexts = engine.rebuildProcessorState(nodes.map(([node]) => (0, transform_1.buildCiteprocCitation)(node.attrs)), 'html', uncitedIds);
         $new.version = String(version++);
         $new.citationCounts = citationCounts;
         $new.engine = engine;

package/dist/cjs/plugins/translations.js

@@ -85,7 +85,7 @@ 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();

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.5';
+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/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;
+`;