@manuscripts/body-editor 3.17.3 → 3.18.0

package/dist/es/lib/context-menu.js

@@ -259,7 +259,10 @@ export class ContextMenu {
                 menu.appendChild(this.createMenuSection((section) => {
                     let nodeName = nodeNames.get(type) || '';
                     if (type === schema.nodes.section_title) {
-                        nodeName = nodeNames.get(schema.nodes.section);
+                        const containerType = $pos.parent.type;
+                        nodeName =
+                            nodeNames.get(containerType) ??
+                                nodeNames.get(schema.nodes.section);
                     }
                     section.appendChild(this.createMenuItem(`Delete ${nodeName}`, () => {
                         this.deleteNode(type);

package/dist/es/lib/normalize.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { generateNodeID, schema } from '@manuscripts/transform';
+import { generateNodeID, schema, } from '@manuscripts/transform';
 const trim = (value) => (value ?? '').trim();
 export const normalizeAffiliation = (a) => ({
     ...a,
@@ -56,3 +56,32 @@ export const checkID = (attrs, nodeType) => {
         id: attrs.id || generateNodeID(schema.nodes[nodeType]),
     };
 };
+export 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 || '',
+});

package/dist/es/lib/paste.js

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

package/dist/es/menus.js

@@ -486,7 +486,7 @@ export const getEditorMenus = (editor) => {
     };
     const ABSTRACT_ID = 'abstract';
     const abstractSection = allAbstractsCategories.find((s) => s.id === ABSTRACT_ID);
-    const ABSTRACT_GRAPHICAL_ID = 'abstract-graphical';
+    const ABSTRACT_GRAPHICAL_ID = 'graphical';
     const graphicalAbstractSection = allAbstractsCategories.find((s) => s.id === ABSTRACT_GRAPHICAL_ID);
     const abstractsSubmenuList = allAbstractsCategories.filter((c) => c.id !== ABSTRACT_ID && c.id !== ABSTRACT_GRAPHICAL_ID);
     const metadata = {

package/dist/es/node-type-icons.js

@@ -32,6 +32,7 @@ const icons = new Map([
     [nodes.paragraph, OutlineParagraphIcon],
     [nodes.pullquote_element, OutlinePullQuoteIcon],
     [nodes.section, OutlineSectionIcon],
+    [nodes.abstract, OutlineSectionIcon],
     [nodes.table_element, OutlineTableIcon],
     [nodes.graphical_abstract_section, OutlineSectionIcon],
     [nodes.trans_graphical_abstract, OutlineSectionIcon],

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

@@ -17,13 +17,13 @@ import { schema } from '@manuscripts/transform';
 import { Plugin, TextSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { v4 as uuidv4 } from 'uuid';
-import { addAuthorIcon } from '../icons';
+import { addIcon } from '../icons';
 import { handleEnterKey } from '../lib/navigation-utils';
 import { findInsertionPosition } from '../lib/utils';
 const createAddSubtitleButton = (handler) => {
     const button = document.createElement('span');
     button.className = 'add-subtitle';
-    button.innerHTML = `${addAuthorIcon} <span class="add-subtitle-text">Add subtitle</span>`;
+    button.innerHTML = `${addIcon} <span class="add-subtitle-text">Add subtitle</span>`;
     button.tabIndex = 0;
     const activate = (event) => {
         event.preventDefault();

package/dist/es/plugins/bibliography.js

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

package/dist/es/plugins/section_category.js

@@ -1,4 +1,4 @@
-import { getGroupCategories, isSectionNode, schema, } from '@manuscripts/transform';
+import { getGroupCategories, isAbstractNode, isSectionNode, schema, } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { findChildrenByType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
@@ -79,7 +79,7 @@ const buildPluginState = (state, props) => {
         if (node.type === schema.nodes.box_element) {
             return false;
         }
-        if (isSectionNode(node)) {
+        if (isSectionNode(node) || isAbstractNode(node)) {
             const categoryID = node.attrs.category;
             const category = categories.get(categoryID);
             const $pos = state.doc.resolve(pos);
@@ -97,7 +97,10 @@ const buildPluginState = (state, props) => {
     return { decorations: DecorationSet.create(state.doc, decorations) };
 };
 const getUsedSectionCategoryIDs = (state) => {
-    const sections = findChildrenByType(state.doc, schema.nodes.section);
+    const sections = [
+        ...findChildrenByType(state.doc, schema.nodes.section),
+        ...findChildrenByType(state.doc, schema.nodes.abstract),
+    ];
     const used = new Set();
     sections.forEach(({ node }) => {
         if (node.attrs.category) {

package/dist/es/plugins/translations.js

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { schema } from '@manuscripts/transform';
+import { isAbstractNode, isGraphicalAbstractSectionNode, isTransAbstractNode, isTransGraphicalAbstractNode, schema, } from '@manuscripts/transform';
 import { Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { insertTransAbstract, insertTransGraphicalAbstract } from '../commands';
-import { addAuthorIcon, translateIcon } from '../icons';
+import { addIcon, translateIcon } from '../icons';
 import { getLanguage, getLanguageLabel } from '../lib/languages';
+import { createKeyboardInteraction, handleEnterKey, } from '../lib/navigation-utils';
 import { templateAllows } from '../lib/template';
-import { handleEnterKey, createKeyboardInteraction, } from '../lib/navigation-utils';
 const createMenuItem = (props, contents, handler, isSelected = false, tabIndex) => {
     const item = document.createElement('div');
     item.className = `menu-item ${isSelected ? 'selected' : ''}`;
@@ -58,10 +58,6 @@ const createLanguageMenu = (props, selectedCode, onSelect) => {
     });
     return { menu, destroy };
 };
-const getInsertionPos = (doc, nodePos) => {
-    const node = doc.nodeAt(nodePos);
-    return node ? nodePos + node.nodeSize : null;
-};
 export default (props) => new Plugin({
     props: {
         decorations: (state) => {
@@ -72,14 +68,11 @@ export default (props) => new Plugin({
             const canEditTransGraphicalAbstract = can.editArticle &&
                 templateAllows(state, schema.nodes.trans_graphical_abstract);
             const widgets = [];
-            state.doc.descendants((node, pos, parent) => {
-                const isAbstractSection = (node.type === schema.nodes.section ||
-                    node.type === schema.nodes.graphical_abstract_section) &&
-                    parent?.type === schema.nodes.abstracts;
+            state.doc.descendants((node, pos) => {
+                const isAbstractSection = isAbstractNode(node) || isGraphicalAbstractSectionNode(node);
                 if (isAbstractSection) {
-                    const isGraphical = node.type === schema.nodes.graphical_abstract_section;
                     const category = props.sectionCategories.get(node.attrs.category);
-                    const canEdit = isGraphical
+                    const canEdit = isGraphicalAbstractSectionNode(node)
                         ? canEditTransGraphicalAbstract &&
                             category &&
                             insertTransGraphicalAbstract(category)(state)
@@ -90,19 +83,15 @@ export default (props) => new Plugin({
                             $span.tabIndex = 0;
                             $span.className = 'add-trans-abstract';
                             $span.title = 'Add translation';
-                            $span.innerHTML = `${addAuthorIcon} <span class="add-trans-abstract-text">Add translation</span>`;
+                            $span.innerHTML = `${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) {
-                                    insertTransGraphicalAbstract(category, insertPos)(view.state, view.dispatch, view);
+                                if (isGraphicalAbstractSectionNode(node) && category) {
+                                    insertTransGraphicalAbstract(category)(view.state, view.dispatch, view);
                                 }
                                 else {
-                                    insertTransAbstract(view.state, view.dispatch, node.attrs.category, insertPos);
+                                    insertTransAbstract(view.state, view.dispatch, node.attrs.category);
                                 }
                             };
                             $span.addEventListener('mousedown', handleActivate);
@@ -111,8 +100,7 @@ export default (props) => new Plugin({
                         }, { key: `add-trans-${node.attrs.id}-${pos}` }));
                     }
                 }
-                const isTransNode = node.type === schema.nodes.trans_abstract ||
-                    node.type === schema.nodes.trans_graphical_abstract;
+                const isTransNode = isTransAbstractNode(node) || isTransGraphicalAbstractNode(node);
                 if (isTransNode) {
                     const canEdit = node.type === schema.nodes.trans_abstract
                         ? canEditTransAbstract

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.17.3';
+export const VERSION = '3.18.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/bibliography_element.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { ContextMenu } from '@manuscripts/style-guide';
+import { isCitationNode, } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { ReferencesEditor, } from '../components/references/ReferencesEditor';
 import { createCommentMarker, handleComment } from '../lib/comments';
@@ -21,13 +22,14 @@ import { handleEnterKey } from '../lib/navigation-utils';
 import { findNodeByID } from '../lib/doc';
 import { sanitize } from '../lib/dompurify';
 import { deleteNode, findChildByID, saveBibliographyItem } from '../lib/view';
-import { getBibliographyPluginState } from '../plugins/bibliography';
+import { getBibliographyPluginState, } from '../plugins/bibliography';
 import { commentsKey, setCommentSelection } from '../plugins/comments';
 import { selectedSuggestionKey } from '../plugins/selected-suggestion';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
 import { addTrackChangesAttributes, addTrackChangesClassNames, } from '@manuscripts/track-changes-plugin';
+import { addIcon } from '../icons';
 export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
@@ -132,7 +134,7 @@ export class BibliographyElementBlockView extends BlockView {
         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,
         };
@@ -175,7 +177,18 @@ export class BibliographyElementBlockView extends BlockView {
             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 (isCitationNode(node)) {
+                rids.push(...node.attrs.rids);
+            }
+        });
         this.node.descendants((node) => {
             const id = node.attrs.id;
             nodes.set(id, node);
@@ -213,6 +226,12 @@ export class BibliographyElementBlockView extends BlockView {
             element.tabIndex = 0;
             const comment = 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);
+            }
             addTrackChangesAttributes(node.attrs, element);
             addTrackChangesClassNames(node.attrs, element);
             wrapper.append(element);
@@ -230,7 +249,30 @@ export class BibliographyElementBlockView extends BlockView {
         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 = `${addIcon} <span type="button" tabindex="0" class="add-new-reference-text">Add new reference</span>`;
+        $span.addEventListener('click', (e) => {
+            this.showPopper();
+        });
+        $span.addEventListener('keydown', handleEnterKey(() => this.showPopper()));
+        this.inlineModalButton = $span;
+        this.dom.appendChild($span);
     }
 }
 export default createNodeView(BibliographyElementBlockView);

package/dist/es/views/figure_element.js

@@ -15,7 +15,7 @@
  */
 import { schema } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
-import { addAuthorIcon } from '../icons';
+import { addIcon } from '../icons';
 import { handleEnterKey } from '../lib/navigation-utils';
 import { createNodeView } from './creators';
 import { ImageElementView } from './image_element';
@@ -68,7 +68,7 @@ export class FigureElementView extends ImageElementView {
         if (this.props.getCapabilities()?.editArticle) {
             this.addFigureBtn = Object.assign(document.createElement('button'), {
                 className: 'add-button',
-                innerHTML: addAuthorIcon,
+                innerHTML: addIcon,
                 title: 'Add figure',
             });
             this.addFigureBtn.addEventListener('click', () => this.addFigure());

package/dist/es/views/headshot_grid.js

@@ -15,7 +15,7 @@
  */
 import { schema, } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
-import { addAuthorIcon } from '../icons';
+import { addIcon } from '../icons';
 import { createKeyboardInteraction, handleEnterKey, } from '../lib/navigation-utils';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
@@ -45,7 +45,7 @@ export class HeadshotGridView extends BlockView {
                 this.addHeadshotButton.classList.add('add-headshot-element-button');
                 this.addHeadshotButton.setAttribute('data-cy', 'headshot-add');
                 this.addHeadshotButton.contentEditable = 'false';
-                this.addHeadshotButton.innerHTML = addAuthorIcon;
+                this.addHeadshotButton.innerHTML = addIcon;
                 const buttonText = document.createElement('span');
                 buttonText.classList.add('add-headshot-element-text');
                 buttonText.innerText = 'Add Headshot';

package/dist/types/commands.d.ts

@@ -67,8 +67,8 @@ export declare const insertKeywords: (state: ManuscriptEditorState, dispatch?: D
 export declare const insertList: (type: ManuscriptNodeType, style?: string) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const insertBibliographySection: () => boolean;
 export declare const insertTOCSection: () => boolean;
-export declare const insertTransAbstract: (state: ManuscriptEditorState, dispatch?: Dispatch, category?: string, insertAfterPos?: number) => boolean;
-export declare const insertTransGraphicalAbstract: (category: SectionCategory, insertAfterPos?: number) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
+export declare const insertTransAbstract: (state: ManuscriptEditorState, dispatch?: Dispatch, category?: string) => boolean;
+export declare const insertTransGraphicalAbstract: (category: SectionCategory) => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const isAtStartOfTextBlock: (state: ManuscriptEditorState, $cursor: ResolvedPos, view?: ManuscriptEditorView) => boolean;
 export declare const isTextSelection: (selection: Selection) => selection is ManuscriptTextSelection;
 export declare const ignoreAtomBlockNodeBackward: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: ManuscriptEditorView) => boolean;

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

@@ -19,4 +19,5 @@ export declare const Metadata: import("styled-components/dist/types").IStyledCom
 export declare const MetadataContainer: 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 ReferenceLine: React.FC<{
     item: BibliographyItemAttrs;
+    showUncited?: boolean;
 }>;

package/dist/types/icons.d.ts

@@ -1,4 +1,4 @@
-export declare const addAuthorIcon: string;
+export declare const addIcon: string;
 export declare const arrowDown: string;
 export declare const arrowUp: string;
 export declare const alertIcon: string;

package/dist/types/lib/normalize.d.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Nodes } from '@manuscripts/transform';
+import { BibliographyItemAttrs, Nodes } from '@manuscripts/transform';
 import { AffiliationAttrs, ContributorAttrs } from './authors';
 export declare const normalizeAffiliation: (a: AffiliationAttrs) => AffiliationAttrs;
 export declare const normalizeAuthor: (author: ContributorAttrs) => ContributorAttrs;
@@ -23,4 +23,33 @@ type WithID = {
 export declare const checkID: <T extends WithID>(attrs: T, nodeType: Nodes) => T & {
     id: string;
 };
+export declare const normalizeBlblioItem: (item: BibliographyItemAttrs) => {
+    id: string;
+    type: import("@manuscripts/transform").BibliographyItemType;
+    author: import("csl").Person[];
+    editor: import("csl").Person[];
+    issued: import("csl").Date | undefined;
+    "container-title": string;
+    "collection-title": string;
+    DOI: string;
+    URL: string;
+    volume: string;
+    issue: string;
+    supplement: string;
+    edition: string;
+    page: string;
+    "number-of-pages": string;
+    title: string;
+    literal: string;
+    std: string;
+    publisher: string;
+    "publisher-place": string;
+    event: string;
+    "event-place": string;
+    "event-date": import("csl").Date | undefined;
+    institution: string;
+    locator: string;
+    accessed: import("csl").Date | undefined;
+    comment: string;
+};
 export {};

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.17.3";
+export declare const VERSION = "3.18.0";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/bibliography_element.d.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { BibliographyElementNode } from '@manuscripts/transform';
+import { PluginState } from '../plugins/bibliography';
 import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare class BibliographyElementBlockView extends BlockView<Trackable<BibliographyElementNode>> {
@@ -21,7 +22,7 @@ export declare class BibliographyElementBlockView extends BlockView<Trackable<Bi
     private editor;
     private contextMenu;
     private version;
-    showPopper(id: string): void;
+    showPopper(id?: string): void;
     stopEvent: () => boolean;
     ignoreMutation: () => boolean;
     private handleEdit;
@@ -31,6 +32,9 @@ export declare class BibliographyElementBlockView extends BlockView<Trackable<Bi
     private handleClick;
     private handleKeyDown;
     updateContents(): void;
+    renderBibs(bib: PluginState): void;
+    inlineModalButton: HTMLSpanElement | null;
+    createInlineModalButton(): void;
     createElement: () => void;
     private handleSave;
     private handleDelete;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -43,7 +43,7 @@
     "@iarna/word-count": "1.1.2",
     "@manuscripts/style-guide": "3.7.2",
     "@manuscripts/track-changes-plugin": "2.4.0",
-    "@manuscripts/transform": "4.5.2",
+    "@manuscripts/transform": "4.5.4",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/src/commands.ts

@@ -1143,24 +1143,20 @@ export const insertAbstractSection =
       return false
     }
     const abstracts = findAbstractsNode(state.doc)
-    const sections = findChildrenByType(abstracts.node, schema.nodes.section)
-    // Check if the section already exists
-    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
     }
 
-    // check if graphical abstract node exist to insert before it.
-    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 pos =
+      findInsertionPosition(schema.nodes.abstract, abstracts.node) +
+      abstracts.pos +
+      1
 
-    const node = schema.nodes.section.create({ category: category.id }, [
+    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...' }),
     ])
@@ -1238,15 +1234,13 @@ export const insertGraphicalAbstract =
       return false
     }
 
-    const ga = findChildrenByType(
-      state.doc,
-      schema.nodes.graphical_abstract_section
-    )[0]
-
-    // insert at the end of abstracts section
-    let pos = abstracts.pos + abstracts.node.content.size + 1
-    // abstract-key-image insert before abstract-graphical
-    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 },
@@ -1537,8 +1531,7 @@ export const insertTOCSection = () => {
 export const insertTransAbstract = (
   state: ManuscriptEditorState,
   dispatch?: Dispatch,
-  category?: string,
-  insertAfterPos?: number
+  category?: string
 ) => {
   if (!templateAllows(state, schema.nodes.trans_abstract)) {
     return false
@@ -1566,11 +1559,8 @@ export const insertTransAbstract = (
   )
 
   const abstracts = findAbstractsNode(state.doc)
-
-  const pos =
-    insertAfterPos != null
-      ? insertAfterPos
-      : abstracts.pos + abstracts.node.nodeSize - 1
+  // append at the end of the abstracts node, not just the first valid-but-earlier slot.
+  const pos = abstracts.node.content.size + abstracts.pos + 1
   const tr = state.tr.insert(pos, node)
 
   const selection = TextSelection.create(tr.doc, pos + 1)
@@ -1581,7 +1571,7 @@ export const insertTransAbstract = (
 }
 
 export const insertTransGraphicalAbstract =
-  (category: SectionCategory, insertAfterPos?: number) =>
+  (category: SectionCategory) =>
   (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => {
     if (!templateAllows(state, schema.nodes.trans_graphical_abstract)) {
       return false
@@ -1593,10 +1583,7 @@ export const insertTransGraphicalAbstract =
     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(
       {

package/src/components/references/ReferenceLine.tsx

@@ -28,16 +28,31 @@ export const Metadata = styled.div`
 `
 
 export const MetadataContainer = styled.div`
+  position: relative;
   flex: 1;
 `
 
 export const ReferenceLine: React.FC<{
   item: BibliographyItemAttrs
-}> = ({ item }) => (
+  showUncited?: boolean
+}> = ({ item, showUncited }) => (
   <MetadataContainer>
+    {showUncited && <UncitedBadge>UNCITED</UncitedBadge>}
     <div data-cy={'reference-title'}>
       {item.title || item.literal || 'Untitled'}
     </div>
     <Metadata>{metadata(item)}</Metadata>
   </MetadataContainer>
 )
+
+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;
+`