@manuscripts/body-editor 1.5.16 → 1.6.0

package/dist/es/plugins/bibliography/bibliography-utils.js

@@ -26,17 +26,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { ObjectTypes, } from '@manuscripts/json-schema';
 import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plugin';
-import { schema } from '@manuscripts/transform';
-import { pickBy } from 'lodash-es';
+import { schema, } from '@manuscripts/transform';
+import { pickBy } from 'lodash';
 import { Decoration } from 'prosemirror-view';
 export const isBibliographyElement = (node) => node.type === node.type.schema.nodes.bibliography_element;
-export const buildDecorations = (doc, citationNodes, popper, referencesModelMap, triggerUpdate) => {
+let count = 0;
+export const buildDecorations = (state, doc) => {
     const decorations = [];
     let hasMissingItems = false;
-    for (const [node, pos, citation] of citationNodes) {
-        if (citation.embeddedCitationItems.length) {
-            for (const citationItem of citation.embeddedCitationItems) {
-                if (!referencesModelMap.get(citationItem.bibliographyItem)) {
+    for (const [node, pos] of state.citationNodes) {
+        const rids = node.attrs.rids;
+        if (rids.length) {
+            for (const rid of rids) {
+                if (!state.bibliographyItems.has(rid)) {
                     decorations.push(Decoration.node(pos, pos + node.nodeSize, {
                         class: 'citation-missing',
                     }));
@@ -68,55 +70,55 @@ export const buildDecorations = (doc, citationNodes, popper, referencesModelMap,
             }
         });
     }
-    if (triggerUpdate) {
-        doc.descendants((node, pos) => {
-            if (isBibliographyElement(node)) {
-                decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
-                    triggerUpdate: true,
-                }));
-            }
-        });
-    }
+    doc.descendants((node, pos) => {
+        if (isBibliographyElement(node)) {
+            decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
+                refresh: count++,
+            }));
+        }
+    });
     return decorations;
 };
-const cleanData = (model) => pickBy(model, (value) => value !== undefined);
-export const getNodeModel = (node, excludeDeletedNode) => {
-    const getLatest = (a, b) => a.updatedAt > b.updatedAt ? a : b;
-    const mapNodeToModel = (attrs, nodeType) => {
-        if (nodeType === schema.nodes.bibliography_item) {
-            const { id, containerTitle, doi } = attrs, rest = __rest(attrs, ["id", "containerTitle", "doi"]);
-            return cleanData(Object.assign(Object.assign({ _id: id, 'container-title': containerTitle, DOI: doi }, rest), { objectType: ObjectTypes.BibliographyItem }));
-        }
-        const { rid, embeddedCitationItems } = attrs;
-        return {
-            _id: rid,
-            embeddedCitationItems: (embeddedCitationItems === null || embeddedCitationItems === void 0 ? void 0 : embeddedCitationItems.map((item) => ({
-                _id: item.id,
-                bibliographyItem: item.bibliographyItem,
-                objectType: ObjectTypes.CitationItem,
-            }))) || [],
-            objectType: ObjectTypes.Citation,
-        };
+export const getCitation = (node) => {
+    const attrs = getEffectiveAttrs(node);
+    if (!attrs) {
+        return undefined;
+    }
+    const rids = attrs.rids;
+    const items = rids.map((i) => ({
+        _id: '_',
+        objectType: ObjectTypes.CitationItem,
+        bibliographyItem: i,
+    }));
+    return {
+        _id: attrs.id,
+        objectType: ObjectTypes.Citation,
+        embeddedCitationItems: items,
     };
-    const _a = node.attrs, { dataTracked } = _a, attrs = __rest(_a, ["dataTracked"]);
-    const nodeChange = dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.reduce(getLatest);
-    if (nodeChange &&
-        excludeDeletedNode &&
-        nodeChange.operation === CHANGE_OPERATION.delete &&
-        nodeChange.status !== CHANGE_STATUS.rejected) {
+};
+export const getBibliographyItem = (node) => {
+    const attrs = getEffectiveAttrs(node);
+    if (!attrs) {
         return undefined;
     }
+    const { id, containerTitle, doi } = attrs, rest = __rest(attrs, ["id", "containerTitle", "doi"]);
+    const item = Object.assign({ _id: id, objectType: ObjectTypes.BibliographyItem, 'container-title': containerTitle, DOI: doi }, rest);
+    return pickBy(item, (v) => v !== undefined);
+};
+const getLatest = (a, b) => a.updatedAt > b.updatedAt ? a : b;
+const getEffectiveAttrs = (node) => {
+    const _a = node.attrs, { dataTracked } = _a, attrs = __rest(_a, ["dataTracked"]);
+    const nodeChange = dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.reduce(getLatest);
     const isRejected = nodeChange &&
         nodeChange.operation === CHANGE_OPERATION.set_node_attributes &&
         nodeChange.status === CHANGE_STATUS.rejected;
-    return mapNodeToModel(isRejected ? nodeChange === null || nodeChange === void 0 ? void 0 : nodeChange.oldAttrs : attrs, node.type);
+    return isRejected ? nodeChange === null || nodeChange === void 0 ? void 0 : nodeChange.oldAttrs : attrs;
 };
-export const getReferencesModelMap = (doc, excludeDeletedNode) => {
+export const getBibliographyItemModelMap = (doc) => {
     const modelMap = new Map();
     doc.descendants((node) => {
-        if (node.type === schema.nodes.bibliography_item ||
-            node.type === schema.nodes.citation) {
-            const model = getNodeModel(node, excludeDeletedNode);
+        if (node.type === schema.nodes.bibliography_item) {
+            const model = getBibliographyItem(node);
             if (model) {
                 modelMap.set(model._id, model);
             }
@@ -124,3 +126,12 @@ export const getReferencesModelMap = (doc, excludeDeletedNode) => {
     });
     return modelMap;
 };
+export const buildCitations = (citations) => citations.map((citation) => ({
+    citationID: citation[0].attrs.id,
+    citationItems: citation[0].attrs.rids.map((rid) => ({
+        id: rid,
+    })),
+    properties: {
+        noteIndex: 0,
+    },
+}));

package/dist/es/plugins/bibliography/index.js

@@ -13,85 +13,69 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { buildBibliographyItems, buildCitationNodes, buildCitations, CitationProvider, } from '@manuscripts/library';
-import { isEqual } from 'lodash-es';
-import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
+import { CitationProvider } from '@manuscripts/library';
+import { isCitationNode } from '@manuscripts/transform';
+import { isEqual } from 'lodash';
+import { Plugin, PluginKey } from 'prosemirror-state';
 import { DecorationSet } from 'prosemirror-view';
 import { isRejectedInsert } from '../../lib/track-changes-utils';
-import { buildDecorations, getReferencesModelMap } from './bibliography-utils';
+import { buildCitations, buildDecorations, getBibliographyItemModelMap, } from './bibliography-utils';
 export const bibliographyKey = new PluginKey('bibliography');
 export default (props) => {
-    const { style, locale } = props.cslProps;
     return new Plugin({
         key: bibliographyKey,
         state: {
             init(config, instance) {
-                const referencesModelMap = getReferencesModelMap(instance.doc);
-                const citationNodes = buildCitationNodes(instance.doc, referencesModelMap);
-                const filteredCitationNodes = citationNodes.filter((node) => !isRejectedInsert(node[0]));
-                const citations = buildCitations(filteredCitationNodes, (id) => referencesModelMap.get(id));
-                const bibliographyItems = buildBibliographyItems(filteredCitationNodes, (id) => referencesModelMap.get(id));
-                return {
-                    citationNodes,
-                    citations,
-                    bibliographyItems,
-                };
+                return buildBibliographyPluginState(instance.doc, props.cslProps);
             },
-            apply(tr, value, oldState, newState) {
-                const referencesModelMap = getReferencesModelMap(newState.doc);
-                const citationNodes = buildCitationNodes(newState.doc, referencesModelMap);
-                const filteredCitationNodes = citationNodes.filter((node) => !isRejectedInsert(node[0]));
-                const citations = buildCitations(filteredCitationNodes, (id) => referencesModelMap.get(id));
-                const bibliographyItems = buildBibliographyItems(filteredCitationNodes, (id) => referencesModelMap.get(id));
-                const meta = tr.getMeta(bibliographyKey);
-                const triggerUpdate = meta && meta.triggerUpdate;
-                return {
-                    citationNodes,
-                    citations,
-                    bibliographyItems,
-                    triggerUpdate,
-                };
-            },
-        },
-        appendTransaction(transactions, oldState, newState) {
-            const { citations: oldCitations } = bibliographyKey.getState(oldState);
-            const { citations, bibliographyItems } = bibliographyKey.getState(newState);
-            const bibliographyInserted = transactions.some((tr) => {
-                const meta = tr.getMeta(bibliographyKey);
-                return meta && meta.bibliographyInserted;
-            });
-            const initCitations = transactions.some((tr) => {
-                const meta = tr.getMeta(bibliographyKey);
-                return meta && meta.initCitations;
-            });
-            if (isEqual(citations, oldCitations) &&
-                !bibliographyInserted &&
-                !initCitations) {
-                return null;
-            }
-            const { tr } = newState;
-            const { selection } = tr;
-            try {
-                const generatedCitations = new Map(CitationProvider.rebuildProcessorState(citations, bibliographyItems, style || '', locale, 'html').map((item) => [item[0], item[2]]));
-                props.setCiteprocCitations(generatedCitations);
-                if (selection instanceof NodeSelection) {
-                    tr.setSelection(NodeSelection.create(tr.doc, selection.from));
+            apply(tr, value) {
+                if (!tr.steps.length) {
+                    return value;
                 }
-                tr.setMeta(bibliographyKey, {
-                    triggerUpdate: true,
-                });
-                tr.setMeta('origin', bibliographyKey);
-                return tr;
-            }
-            catch (error) {
-                console.error(error);
-            }
+                return buildBibliographyPluginState(tr.doc, props.cslProps, value);
+            },
         },
         props: {
             decorations(state) {
-                const { citationNodes, triggerUpdate } = bibliographyKey.getState(state);
-                return DecorationSet.create(state.doc, buildDecorations(state.doc, citationNodes, props.popper, getReferencesModelMap(state.doc), triggerUpdate));
+                const bib = getBibliographyPluginState(state);
+                return DecorationSet.create(state.doc, buildDecorations(bib, state.doc));
             },
         },
     });
 };
+const buildBibliographyPluginState = (doc, csl, $old) => {
+    const nodes = [];
+    doc.descendants((node, pos) => {
+        if (isCitationNode(node) && !isRejectedInsert(node)) {
+            nodes.push([node, pos]);
+        }
+    });
+    const modelMap = getBibliographyItemModelMap(doc);
+    const citations = buildCitations(nodes);
+    const $new = {
+        citationNodes: nodes,
+        citations,
+        bibliographyItems: modelMap,
+    };
+    if (!csl.style) {
+        return $new;
+    }
+    if ($old && isEqual(citations, $old.citations)) {
+        $new.provider = $old.provider;
+        $new.renderedCitations = $old.renderedCitations;
+    }
+    else {
+        const provider = new CitationProvider({
+            getLibraryItem: (id) => modelMap.get(id),
+            citationStyle: csl.style || '',
+            locale: csl.locale,
+        });
+        const citationTexts = provider.rebuildState(buildCitations(nodes));
+        $new.provider = provider;
+        $new.renderedCitations = new Map(citationTexts.map((i) => [i[0], i[2]]));
+    }
+    return $new;
+};
+export const getBibliographyPluginState = (state) => {
+    return bibliographyKey.getState(state);
+};

package/dist/es/plugins/comment_annotation.js

@@ -59,7 +59,7 @@ export default (props) => {
 };
 const getNodePosition = (node, pos) => {
     switch (node.type) {
-        case node.type.schema.nodes.keywords_section:
+        case schema.nodes.keywords:
             return pos + 2;
         default:
             return pos + 1;
@@ -68,7 +68,7 @@ const getNodePosition = (node, pos) => {
 const commentsState = (setSelectedComment, doc) => {
     const comments = [];
     doc.descendants((node) => {
-        if (node.type === schema.nodes.comment_list) {
+        if (node.type === schema.nodes.comments) {
             node.descendants((comment) => {
                 comments.push(comment.attrs);
             });

package/dist/es/plugins/footnotes/index.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { isInlineFootnoteNode, } from '@manuscripts/transform';
+import { isFootnoteNode, isInlineFootnoteNode, } from '@manuscripts/transform';
 import { isEqual } from 'lodash-es';
 import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
@@ -25,14 +25,17 @@ export const buildPluginState = (doc) => {
     doc.descendants((node, pos) => {
         if (isInlineFootnoteNode(node)) {
             nodes.push([node, pos]);
-            labels.set(node.attrs.rid, String(++index));
+            node.attrs.rids.forEach((rid) => {
+                labels.set(rid, String(++index));
+            });
         }
     });
     return { nodes, labels };
 };
 const scrollToInlineFootnote = (rid, view) => {
     view.state.doc.descendants((node, pos) => {
-        if (node.attrs.rid === rid) {
+        const footnote = node;
+        if (footnote.attrs.rids.includes(rid)) {
             const selection = NodeSelection.create(view.state.doc, pos);
             view.dispatch(view.state.tr.setSelection(selection).scrollIntoView());
         }
@@ -66,9 +69,12 @@ export default () => {
             }
             const { tr } = newState;
             inlineFootnoteNodes.forEach(([node, pos]) => {
-                const contents = labels.get(node.attrs.rid);
-                if (node.attrs.contents !== contents) {
-                    tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { contents }));
+                const footnote = node;
+                const contents = footnote.attrs.rids
+                    .map((rid) => labels.get(rid))
+                    .join('');
+                if (footnote.attrs.contents !== contents) {
+                    tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, footnote.attrs), { rids: footnote.attrs.rids, contents }));
                 }
             });
             return tr;
@@ -79,11 +85,14 @@ export default () => {
                 const { labels } = footnotesKey.getState(state);
                 if (labels) {
                     state.doc.descendants((node, pos) => {
-                        const { id } = node.attrs;
-                        if (labels.has(id)) {
-                            decorations.push(Decoration.widget(pos + 2, labelWidget(labels.get(id), id), {
-                                side: -1,
-                            }));
+                        if (isFootnoteNode(node)) {
+                            const id = node.attrs.id;
+                            const label = labels.get(id);
+                            if (label) {
+                                decorations.push(Decoration.widget(pos + 2, labelWidget(label, id), {
+                                    side: -1,
+                                }));
+                            }
                         }
                     });
                 }

package/dist/es/plugins/persist.js

@@ -1,43 +1,33 @@
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { generateNodeID, isFootnoteNode, isListNode, } from '@manuscripts/transform';
+import { generateNodeID, schema } from '@manuscripts/transform';
 import { Plugin } from 'prosemirror-state';
+const isManuscriptNode = (node) => {
+    return node && node.type === schema.nodes.manuscript;
+};
 export default () => {
     return new Plugin({
         appendTransaction(transactions, oldState, newState) {
-            if (!transactions.some((transaction) => transaction.docChanged)) {
+            if (!transactions.some((tr) => tr.docChanged)) {
                 return null;
             }
-            const newTr = newState.tr;
-            const diffStart = oldState.doc.content.findDiffStart(newState.doc.content);
-            const diffEnd = oldState.doc.content.findDiffEnd(newState.doc.content);
             const ids = new Set();
-            if (diffStart || diffEnd) {
-                const start = diffStart || 0;
-                const end = diffEnd ? diffEnd.b : newState.doc.nodeSize - 2;
-                let endOfList = 0, endOfFootnote = 0;
-                newState.doc.nodesBetween(start, end, (node, pos) => {
-                    const { id } = node.attrs;
-                    if (isListNode(node)) {
-                        endOfList = Math.max(endOfList, pos + node.nodeSize);
-                    }
-                    else if (isFootnoteNode(node)) {
-                        endOfFootnote = Math.max(endOfFootnote, pos + node.nodeSize);
-                    }
-                    const insideFootnote = pos <= endOfFootnote;
-                    if ('id' in node.attrs &&
-                        (!insideFootnote || node.isInline) &&
-                        (!id || id.length === 0 || ids.has(id))) {
-                        const newId = generateNodeID(node.type);
-                        const updatedAttrs = Object.assign(Object.assign({}, node.attrs), { id: newId });
-                        newTr.setNodeMarkup(pos, undefined, updatedAttrs, node.marks);
-                        ids.add(newId);
-                    }
-                });
-                skipTracking(newTr);
-                newTr.setMeta('origin', 'persist');
-                return newTr;
-            }
-            return null;
+            const tr = newState.tr;
+            newState.doc.descendants((node, pos, parent) => {
+                if (node.isInline ||
+                    isManuscriptNode(node) ||
+                    isManuscriptNode(parent)) {
+                    return;
+                }
+                let id = node.attrs.id;
+                if (!id || ids.has(id)) {
+                    id = generateNodeID(node.type);
+                    tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { id }), node.marks);
+                }
+                ids.add(id);
+            });
+            skipTracking(tr);
+            tr.setMeta('origin', 'persist');
+            return tr;
         },
     });
 };

package/dist/es/plugins/sections.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { trackChangesPluginKey } from '@manuscripts/track-changes-plugin';
-import { isGraphicalAbstractSectionNode, isKeywordsSectionNode, isSectionTitleNode, } from '@manuscripts/transform';
+import { isGraphicalAbstractSectionNode, isKeywordsNode, isSectionTitleNode, } from '@manuscripts/transform';
 import { Plugin } from 'prosemirror-state';
 import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
 import { highlightKey, SET_COMMENT } from './highlight';
@@ -38,8 +38,7 @@ const preventTitleEdit = (tr) => {
             const currentDoc = tr.docs[i];
             step.getMap().forEach((fromA, toA) => {
                 currentDoc.nodesBetween(fromA, toA, (node, nodePos) => {
-                    if (isGraphicalAbstractSectionNode(node) ||
-                        isKeywordsSectionNode(node)) {
+                    if (isGraphicalAbstractSectionNode(node) || isKeywordsNode(node)) {
                         node.descendants((childNode, childPos) => {
                             const inDocPos = nodePos + childPos;
                             if (isSectionTitleNode(childNode) &&

package/dist/es/plugins/toc.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { ObjectTypes, } from '@manuscripts/json-schema';
-import { generateID, hasObjectType, isSectionNodeType, isTOCSectionNode, } from '@manuscripts/transform';
+import { generateID, hasObjectType, isSectionNodeType, isTOCSectionNode, schema, } from '@manuscripts/transform';
 import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
 import { getMatchingChild, iterateChildren } from '../lib/utils';
 export const tocKey = new PluginKey('toc');
@@ -34,32 +34,37 @@ const buildTOCList = (headingStyles, list, node, depth = 1, prefix = '') => {
         ? sectionNumberingStyle.suffix
         : '.';
     let index = sectionNumberingStyle ? sectionNumberingStyle.startIndex : 1;
-    for (const childNode of iterateChildren(node)) {
-        if (isSectionNodeType(childNode.type) && !isTOCSectionNode(childNode)) {
-            const numbering = numberingScheme === 'none' ? '' : `${prefix}${index}`;
-            const firstChildNode = childNode.child(0);
-            if (firstChildNode.type === firstChildNode.type.schema.nodes.section_title) {
-                const item = document.createElement('li');
-                item.classList.add('manuscript-toc-list-item');
-                item.setAttribute('data-referenced-section', childNode.attrs.id);
-                item.setAttribute('data-referenced-section-path-length', String(depth));
-                item.textContent = `${numbering ? `${numbering}${suffix}` : ''} ${firstChildNode.textContent || 'Untitled Section'}`;
-                list.appendChild(item);
-            }
-            const childSection = getMatchingChild(childNode, (node) => isSectionNodeType(node.type));
-            if (childSection) {
-                const paragraphStyle = headingStyles.get(`heading${depth + 1}`);
-                if (!paragraphStyle || paragraphStyle.partOfTOC) {
-                    const sublist = document.createElement('ul');
-                    buildTOCList(headingStyles, sublist, childNode, depth + 1, numbering ? `${numbering}.` : '');
-                    const item = document.createElement('li');
-                    item.appendChild(sublist);
-                    list.appendChild(item);
+    node.forEach((child) => {
+        if (child.type === schema.nodes.body) {
+            for (const childNode of iterateChildren(child)) {
+                if (isSectionNodeType(childNode.type) && !isTOCSectionNode(childNode)) {
+                    const numbering = numberingScheme === 'none' ? '' : `${prefix}${index}`;
+                    const firstChildNode = childNode.child(0);
+                    if (firstChildNode.type ===
+                        firstChildNode.type.schema.nodes.section_title) {
+                        const item = document.createElement('li');
+                        item.classList.add('manuscript-toc-list-item');
+                        item.setAttribute('data-referenced-section', childNode.attrs.id);
+                        item.setAttribute('data-referenced-section-path-length', String(depth));
+                        item.textContent = `${numbering ? `${numbering}${suffix}` : ''} ${firstChildNode.textContent || 'Untitled Section'}`;
+                        list.appendChild(item);
+                    }
+                    const childSection = getMatchingChild(childNode, (node) => isSectionNodeType(node.type));
+                    if (childSection) {
+                        const paragraphStyle = headingStyles.get(`heading${depth + 1}`);
+                        if (!paragraphStyle || paragraphStyle.partOfTOC) {
+                            const sublist = document.createElement('ul');
+                            buildTOCList(headingStyles, sublist, childNode, depth + 1, numbering ? `${numbering}.` : '');
+                            const item = document.createElement('li');
+                            item.appendChild(sublist);
+                            list.appendChild(item);
+                        }
+                    }
+                    index++;
                 }
             }
-            index++;
         }
-    }
+    });
 };
 const isParagraphStyle = hasObjectType(ObjectTypes.ParagraphStyle);
 const buildHeadingStyles = (modelMap) => {

package/dist/es/views/bibliography_element.js

@@ -33,39 +33,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { CitationProvider } from '@manuscripts/library';
 import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plugin';
 import { buildComment } from '@manuscripts/transform';
 import React from 'react';
 import { commentIcon, editIcon } from '../assets';
 import { sanitize } from '../lib/dompurify';
-import { bibliographyKey } from '../plugins/bibliography';
-import { getReferencesModelMap } from '../plugins/bibliography/bibliography-utils';
+import { getBibliographyPluginState } from '../plugins/bibliography';
 import { commentAnnotation } from '../plugins/comment_annotation';
 import { getAttrsTrackingButton, getMarkDecoration, } from '../plugins/tracking-mark';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
-const createBibliography = (bibliographyItems, cslProps) => __awaiter(void 0, void 0, void 0, function* () {
-    const bibliographyItemsMap = new Map(bibliographyItems.map((item) => [item._id, item]));
-    const getLibraryItem = (id) => bibliographyItemsMap.get(id);
-    const { style = '', locale } = cslProps;
-    const provider = new CitationProvider({
-        getLibraryItem,
-        citationStyle: style,
-        locale,
-    });
-    const [bibmeta, generatedBibliographyItems] = provider.makeBibliography(bibliographyItems);
-    if (bibmeta.bibliography_errors.length) {
-        console.error(bibmeta.bibliography_errors);
-    }
-    const bibliographyFragment = generatedBibliographyItems
-        .map((item, i) => `<div id=${bibmeta.entry_ids[i]} class="bib-item"><div><div class="csl-bib-body">${item}</div></div></div>`)
-        .join('');
-    return sanitize(`<div class="contents">${bibliographyFragment}</div>`);
-});
 export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
+        this.gutterButtons = () => [];
         this.showPopper = (referenceID) => {
             const { renderReactComponent, components: { ReferencesEditor }, } = this.props;
             const handleSave = (data) => __awaiter(this, void 0, void 0, function* () {
@@ -78,13 +59,14 @@ export class BibliographyElementBlockView extends BlockView {
                 this.popperContainer = document.createElement('div');
                 this.popperContainer.className = 'references';
             }
-            renderReactComponent(React.createElement(ReferencesEditor, { saveModel: handleSave, deleteModel: this.deleteNode, modelMap: getReferencesModelMap(this.view.state.doc, true), referenceID: referenceID }), this.popperContainer);
+            const bib = getBibliographyPluginState(this.view.state);
+            renderReactComponent(React.createElement(ReferencesEditor, { saveModel: handleSave, deleteModel: this.deleteNode, modelMap: bib.bibliographyItems, referenceID: referenceID }), this.popperContainer);
             this.props.popper.show(this.dom, this.popperContainer, 'right');
         };
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
-            const bibliographyItems = bibliographyKey.getState(this.view.state).bibliographyItems;
+            const bib = getBibliographyPluginState(this.view.state);
             const commentsDecorationSet = commentAnnotation.getState(this.view.state);
             const commentElementMap = new Map();
             const dataTrackedMap = new Map();
@@ -103,9 +85,14 @@ export class BibliographyElementBlockView extends BlockView {
                     dataTrackedMap.set(node.attrs.id, lastChange);
                 }
             });
-            const bibliographyFragment = yield createBibliography(bibliographyItems, this.props.cslProps);
-            const bibItems = bibliographyFragment.querySelectorAll('.bib-item');
-            bibItems.forEach((element) => {
+            const can = this.props.getCapabilities();
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('contents');
+            const [meta, bibliography] = bib.provider.makeBibliography();
+            for (let i = 0; i < bibliography.length; i++) {
+                const id = meta.entry_ids[i];
+                const fragment = bibliography[i];
+                const element = sanitize(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${fragment}</div></div>`).firstElementChild;
                 const doubleButton = document.createElement('div');
                 const editButton = document.createElement('button');
                 const commentButton = document.createElement('button');
@@ -124,14 +111,14 @@ export class BibliographyElementBlockView extends BlockView {
                 editButton.innerHTML = editIcon;
                 commentButton.innerHTML = commentIcon;
                 doubleButton.append(editButton, commentButton);
-                if (this.props.getCapabilities().seeReferencesButtons &&
+                if (can.seeReferencesButtons &&
                     !element.querySelector('.bibliography-double-button')) {
                     element.appendChild(doubleButton);
                 }
-                editButton.disabled = !this.props.getCapabilities().editCitationsAndRefs;
+                editButton.disabled = !can.editCitationsAndRefs;
                 const commentElement = commentElementMap.get(element.id);
                 if (commentElement) {
-                    element.childNodes[0].appendChild(commentElement);
+                    element.appendChild(commentElement);
                 }
                 const dataTracked = dataTrackedMap.get(element.id);
                 if (dataTracked) {
@@ -140,16 +127,17 @@ export class BibliographyElementBlockView extends BlockView {
                     decoration.style && element.setAttribute('style', decoration.style);
                     if (dataTracked.status === CHANGE_STATUS.pending &&
                         dataTracked.operation === CHANGE_OPERATION.set_node_attributes) {
-                        element.childNodes[0].appendChild(getAttrsTrackingButton(dataTracked.id));
+                        element.appendChild(getAttrsTrackingButton(dataTracked.id));
                     }
                 }
-            });
+                wrapper.append(element);
+            }
             const oldContent = this.container.querySelector('.contents');
             if (oldContent) {
-                this.container.replaceChild(bibliographyFragment, oldContent);
+                this.container.replaceChild(wrapper, oldContent);
             }
             else {
-                this.container.appendChild(bibliographyFragment);
+                this.container.appendChild(wrapper);
             }
         });
         this.createElement = () => {
@@ -158,12 +146,6 @@ export class BibliographyElementBlockView extends BlockView {
             this.container.contentEditable = 'false';
             this.dom.setAttribute('contenteditable', 'false');
             this.dom.appendChild(this.container);
-            this.contentDOM = document.createElement('div');
-            this.contentDOM.classList.add('block');
-            this.contentDOM.setAttribute('id', this.node.attrs.id);
-            this.contentDOM.setAttribute('contenteditable', 'false');
-            this.contentDOM.hidden = true;
-            this.container.appendChild(this.contentDOM);
         };
     }
 }