@manuscripts/body-editor 1.5.10 → 1.5.11

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

@@ -34,7 +34,7 @@ const lodash_es_1 = require("lodash-es");
 const prosemirror_view_1 = require("prosemirror-view");
 const isBibliographyElement = (node) => node.type === node.type.schema.nodes.bibliography_element;
 exports.isBibliographyElement = isBibliographyElement;
-const buildDecorations = (doc, citationNodes, popper, referencesModelMap) => {
+const buildDecorations = (doc, citationNodes, popper, referencesModelMap, triggerUpdate) => {
     const decorations = [];
     let hasMissingItems = false;
     for (const [node, pos, citation] of citationNodes) {
@@ -72,6 +72,15 @@ const buildDecorations = (doc, citationNodes, popper, referencesModelMap) => {
             }
         });
     }
+    if (triggerUpdate) {
+        doc.descendants((node, pos) => {
+            if ((0, exports.isBibliographyElement)(node)) {
+                decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {}, {
+                    triggerUpdate: true,
+                }));
+            }
+        });
+    }
     return decorations;
 };
 exports.buildDecorations = buildDecorations;

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

@@ -20,6 +20,7 @@ const library_1 = require("@manuscripts/library");
 const lodash_es_1 = require("lodash-es");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
+const track_changes_utils_1 = require("../../lib/track-changes-utils");
 const bibliography_utils_1 = require("./bibliography-utils");
 exports.bibliographyKey = new prosemirror_state_1.PluginKey('bibliography');
 exports.default = (props) => {
@@ -30,8 +31,9 @@ exports.default = (props) => {
             init(config, instance) {
                 const referencesModelMap = (0, bibliography_utils_1.getReferencesModelMap)(instance.doc);
                 const citationNodes = (0, library_1.buildCitationNodes)(instance.doc, referencesModelMap);
-                const citations = (0, library_1.buildCitations)(citationNodes, (id) => referencesModelMap.get(id));
-                const bibliographyItems = (0, library_1.buildBibliographyItems)(citationNodes, (id) => referencesModelMap.get(id));
+                const filteredCitationNodes = citationNodes.filter((node) => !(0, track_changes_utils_1.isRejectedInsert)(node[0]));
+                const citations = (0, library_1.buildCitations)(filteredCitationNodes, (id) => referencesModelMap.get(id));
+                const bibliographyItems = (0, library_1.buildBibliographyItems)(filteredCitationNodes, (id) => referencesModelMap.get(id));
                 return {
                     citationNodes,
                     citations,
@@ -41,12 +43,16 @@ exports.default = (props) => {
             apply(tr, value, oldState, newState) {
                 const referencesModelMap = (0, bibliography_utils_1.getReferencesModelMap)(newState.doc);
                 const citationNodes = (0, library_1.buildCitationNodes)(newState.doc, referencesModelMap);
-                const citations = (0, library_1.buildCitations)(citationNodes, (id) => referencesModelMap.get(id));
-                const bibliographyItems = (0, library_1.buildBibliographyItems)(citationNodes, (id) => referencesModelMap.get(id));
+                const filteredCitationNodes = citationNodes.filter((node) => !(0, track_changes_utils_1.isRejectedInsert)(node[0]));
+                const citations = (0, library_1.buildCitations)(filteredCitationNodes, (id) => referencesModelMap.get(id));
+                const bibliographyItems = (0, library_1.buildBibliographyItems)(filteredCitationNodes, (id) => referencesModelMap.get(id));
+                const meta = tr.getMeta(exports.bibliographyKey);
+                const triggerUpdate = meta && meta.triggerUpdate;
                 return {
                     citationNodes,
                     citations,
                     bibliographyItems,
+                    triggerUpdate,
                 };
             },
         },
@@ -74,6 +80,9 @@ exports.default = (props) => {
                 if (selection instanceof prosemirror_state_1.NodeSelection) {
                     tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, selection.from));
                 }
+                tr.setMeta(exports.bibliographyKey, {
+                    triggerUpdate: true,
+                });
                 tr.setMeta('origin', exports.bibliographyKey);
                 return tr;
             }
@@ -83,8 +92,8 @@ exports.default = (props) => {
         },
         props: {
             decorations(state) {
-                const { citationNodes } = exports.bibliographyKey.getState(state);
-                return prosemirror_view_1.DecorationSet.create(state.doc, (0, bibliography_utils_1.buildDecorations)(state.doc, citationNodes, props.popper, (0, bibliography_utils_1.getReferencesModelMap)(state.doc)));
+                const { citationNodes, triggerUpdate } = exports.bibliographyKey.getState(state);
+                return prosemirror_view_1.DecorationSet.create(state.doc, (0, bibliography_utils_1.buildDecorations)(state.doc, citationNodes, props.popper, (0, bibliography_utils_1.getReferencesModelMap)(state.doc), triggerUpdate));
             },
         },
     });

package/dist/cjs/plugins/tracking-mark.js

@@ -41,17 +41,17 @@ const buildDecorations = (state) => {
         if (change.type === 'node-attr-change' &&
             change.dataTracked.status === track_changes_plugin_1.CHANGE_STATUS.pending &&
             change.dataTracked.operation === track_changes_plugin_1.CHANGE_OPERATION.set_node_attributes) {
-            decorations.push(prosemirror_view_1.Decoration.widget(change.from + 1, (0, exports.getAttrsTrackingButton)(change), {
+            decorations.push(prosemirror_view_1.Decoration.widget(change.from + 1, (0, exports.getAttrsTrackingButton)(change.id), {
                 key: change.id,
             }));
         }
     });
     return decorations;
 };
-const getAttrsTrackingButton = (change) => {
+const getAttrsTrackingButton = (changeID) => {
     const el = document.createElement('button');
     el.className = 'attrs-popper-button';
-    el.value = change.id;
+    el.value = changeID;
     el.innerHTML = editIcon;
     return el;
 };

package/dist/cjs/views/bibliography_element.js

@@ -14,25 +14,162 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BibliographyElementBlockView = void 0;
+const library_1 = require("@manuscripts/library");
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const transform_1 = require("@manuscripts/transform");
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("../assets");
+const dompurify_1 = require("../lib/dompurify");
+const bibliography_1 = require("../plugins/bibliography");
+const bibliography_utils_1 = require("../plugins/bibliography/bibliography-utils");
+const comment_annotation_1 = require("../plugins/comment_annotation");
+const tracking_mark_1 = require("../plugins/tracking-mark");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./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 library_1.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 (0, dompurify_1.sanitize)(`<div class="contents">${bibliographyFragment}</div>`);
+});
 class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
+        this.showPopper = (referenceID) => {
+            const { renderReactComponent, components: { ReferencesEditor }, } = this.props;
+            const handleSave = (data) => __awaiter(this, void 0, void 0, function* () {
+                const _a = data, { _id: id, 'container-title': containerTitle, DOI: doi } = _a, rest = __rest(_a, ["_id", 'container-title', "DOI"]);
+                this.updateNodeAttrs(Object.assign({ id,
+                    containerTitle,
+                    doi }, rest));
+            });
+            if (!this.popperContainer) {
+                this.popperContainer = document.createElement('div');
+                this.popperContainer.className = 'references';
+            }
+            renderReactComponent(react_1.default.createElement(ReferencesEditor, { saveModel: handleSave, deleteModel: this.deleteNode, modelMap: (0, bibliography_utils_1.getReferencesModelMap)(this.view.state.doc, true), 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 = bibliography_1.bibliographyKey.getState(this.view.state).bibliographyItems;
+            const commentsDecorationSet = comment_annotation_1.commentAnnotation.getState(this.view.state);
+            const commentElementMap = new Map();
+            const dataTrackedMap = new Map();
+            this.node.descendants((node, pos) => {
+                if (commentsDecorationSet) {
+                    const nodePosition = this.getPos() + pos + 2;
+                    const commentWidget = commentsDecorationSet.find(nodePosition, nodePosition);
+                    if (commentWidget.length) {
+                        const commentElement = commentWidget[0].type.toDOM();
+                        commentElementMap.set(commentElement.id, commentElement);
+                    }
+                }
+                const dataTracked = node.attrs.dataTracked;
+                if (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.length) {
+                    const lastChange = dataTracked[dataTracked.length - 1];
+                    dataTrackedMap.set(node.attrs.id, lastChange);
+                }
+            });
+            const bibliographyFragment = yield createBibliography(bibliographyItems, this.props.cslProps);
+            const bibItems = bibliographyFragment.querySelectorAll('.bib-item');
+            bibItems.forEach((element) => {
+                const doubleButton = document.createElement('div');
+                const editButton = document.createElement('button');
+                const commentButton = document.createElement('button');
+                doubleButton.className = 'bibliography-double-button';
+                editButton.className = 'bibliography-edit-button';
+                commentButton.className = 'bibliography-comment-button';
+                commentButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.props.setComment((0, transform_1.buildComment)(element.id));
+                });
+                editButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.showPopper(element.id);
+                    this.popperContainer = undefined;
+                });
+                editButton.innerHTML = assets_1.editIcon;
+                commentButton.innerHTML = assets_1.commentIcon;
+                doubleButton.append(editButton, commentButton);
+                if (this.props.getCapabilities().seeReferencesButtons &&
+                    !element.querySelector('.bibliography-double-button')) {
+                    element.appendChild(doubleButton);
+                }
+                editButton.disabled = !this.props.getCapabilities().editCitationsAndRefs;
+                const commentElement = commentElementMap.get(element.id);
+                if (commentElement) {
+                    element.childNodes[0].appendChild(commentElement);
+                }
+                const dataTracked = dataTrackedMap.get(element.id);
+                if (dataTracked) {
+                    element.classList.add('attrs-track-mark');
+                    const decoration = (0, tracking_mark_1.getMarkDecoration)(dataTracked);
+                    decoration.style && element.setAttribute('style', decoration.style);
+                    if (dataTracked.status === track_changes_plugin_1.CHANGE_STATUS.pending &&
+                        dataTracked.operation === track_changes_plugin_1.CHANGE_OPERATION.set_node_attributes) {
+                        element.childNodes[0].appendChild((0, tracking_mark_1.getAttrsTrackingButton)(dataTracked.id));
+                    }
+                }
+            });
+            const oldContent = this.container.querySelector('.contents');
+            if (oldContent) {
+                this.container.replaceChild(bibliographyFragment, oldContent);
+            }
+            else {
+                this.container.appendChild(bibliographyFragment);
+            }
+        });
         this.createElement = () => {
+            this.container = document.createElement('div');
+            this.container.classList.add('block');
+            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.dom.setAttribute('contenteditable', 'false');
-            this.dom.appendChild(this.contentDOM);
+            this.contentDOM.hidden = true;
+            this.container.appendChild(this.contentDOM);
         };
     }
 }

package/dist/cjs/views/citation.js

@@ -119,7 +119,7 @@ class CitationView extends base_node_view_1.BaseNodeView {
             const citeprocContent = citeprocCitations === null || citeprocCitations === void 0 ? void 0 : citeprocCitations.get(this.node.attrs.rid);
             const fragment = (0, dompurify_1.sanitize)(citeprocContent && citeprocContent !== '[NO_PRINTED_FORM]'
                 ? citeprocContent
-                : this.node.attrs.contents, {
+                : ' ', {
                 ALLOWED_TAGS: ['i', 'b', 'span', 'sup', 'sub', '#text'],
             });
             citationElement.appendChild(fragment);

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

@@ -30,7 +30,7 @@ import { schema } from '@manuscripts/transform';
 import { pickBy } from 'lodash-es';
 import { Decoration } from 'prosemirror-view';
 export const isBibliographyElement = (node) => node.type === node.type.schema.nodes.bibliography_element;
-export const buildDecorations = (doc, citationNodes, popper, referencesModelMap) => {
+export const buildDecorations = (doc, citationNodes, popper, referencesModelMap, triggerUpdate) => {
     const decorations = [];
     let hasMissingItems = false;
     for (const [node, pos, citation] of citationNodes) {
@@ -68,6 +68,15 @@ 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,
+                }));
+            }
+        });
+    }
     return decorations;
 };
 const cleanData = (model) => pickBy(model, (value) => value !== undefined);

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

@@ -17,6 +17,7 @@ import { buildBibliographyItems, buildCitationNodes, buildCitations, CitationPro
 import { isEqual } from 'lodash-es';
 import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
 import { DecorationSet } from 'prosemirror-view';
+import { isRejectedInsert } from '../../lib/track-changes-utils';
 import { buildDecorations, getReferencesModelMap } from './bibliography-utils';
 export const bibliographyKey = new PluginKey('bibliography');
 export default (props) => {
@@ -27,8 +28,9 @@ export default (props) => {
             init(config, instance) {
                 const referencesModelMap = getReferencesModelMap(instance.doc);
                 const citationNodes = buildCitationNodes(instance.doc, referencesModelMap);
-                const citations = buildCitations(citationNodes, (id) => referencesModelMap.get(id));
-                const bibliographyItems = buildBibliographyItems(citationNodes, (id) => referencesModelMap.get(id));
+                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,
@@ -38,12 +40,16 @@ export default (props) => {
             apply(tr, value, oldState, newState) {
                 const referencesModelMap = getReferencesModelMap(newState.doc);
                 const citationNodes = buildCitationNodes(newState.doc, referencesModelMap);
-                const citations = buildCitations(citationNodes, (id) => referencesModelMap.get(id));
-                const bibliographyItems = buildBibliographyItems(citationNodes, (id) => referencesModelMap.get(id));
+                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,
                 };
             },
         },
@@ -71,6 +77,9 @@ export default (props) => {
                 if (selection instanceof NodeSelection) {
                     tr.setSelection(NodeSelection.create(tr.doc, selection.from));
                 }
+                tr.setMeta(bibliographyKey, {
+                    triggerUpdate: true,
+                });
                 tr.setMeta('origin', bibliographyKey);
                 return tr;
             }
@@ -80,8 +89,8 @@ export default (props) => {
         },
         props: {
             decorations(state) {
-                const { citationNodes } = bibliographyKey.getState(state);
-                return DecorationSet.create(state.doc, buildDecorations(state.doc, citationNodes, props.popper, getReferencesModelMap(state.doc)));
+                const { citationNodes, triggerUpdate } = bibliographyKey.getState(state);
+                return DecorationSet.create(state.doc, buildDecorations(state.doc, citationNodes, props.popper, getReferencesModelMap(state.doc), triggerUpdate));
             },
         },
     });

package/dist/es/plugins/tracking-mark.js

@@ -38,17 +38,17 @@ const buildDecorations = (state) => {
         if (change.type === 'node-attr-change' &&
             change.dataTracked.status === CHANGE_STATUS.pending &&
             change.dataTracked.operation === CHANGE_OPERATION.set_node_attributes) {
-            decorations.push(Decoration.widget(change.from + 1, getAttrsTrackingButton(change), {
+            decorations.push(Decoration.widget(change.from + 1, getAttrsTrackingButton(change.id), {
                 key: change.id,
             }));
         }
     });
     return decorations;
 };
-export const getAttrsTrackingButton = (change) => {
+export const getAttrsTrackingButton = (changeID) => {
     const el = document.createElement('button');
     el.className = 'attrs-popper-button';
-    el.value = change.id;
+    el.value = changeID;
     el.innerHTML = editIcon;
     return el;
 };

package/dist/es/views/bibliography_element.js

@@ -13,20 +13,157 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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 { 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.showPopper = (referenceID) => {
+            const { renderReactComponent, components: { ReferencesEditor }, } = this.props;
+            const handleSave = (data) => __awaiter(this, void 0, void 0, function* () {
+                const _a = data, { _id: id, 'container-title': containerTitle, DOI: doi } = _a, rest = __rest(_a, ["_id", 'container-title', "DOI"]);
+                this.updateNodeAttrs(Object.assign({ id,
+                    containerTitle,
+                    doi }, rest));
+            });
+            if (!this.popperContainer) {
+                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);
+            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 commentsDecorationSet = commentAnnotation.getState(this.view.state);
+            const commentElementMap = new Map();
+            const dataTrackedMap = new Map();
+            this.node.descendants((node, pos) => {
+                if (commentsDecorationSet) {
+                    const nodePosition = this.getPos() + pos + 2;
+                    const commentWidget = commentsDecorationSet.find(nodePosition, nodePosition);
+                    if (commentWidget.length) {
+                        const commentElement = commentWidget[0].type.toDOM();
+                        commentElementMap.set(commentElement.id, commentElement);
+                    }
+                }
+                const dataTracked = node.attrs.dataTracked;
+                if (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.length) {
+                    const lastChange = dataTracked[dataTracked.length - 1];
+                    dataTrackedMap.set(node.attrs.id, lastChange);
+                }
+            });
+            const bibliographyFragment = yield createBibliography(bibliographyItems, this.props.cslProps);
+            const bibItems = bibliographyFragment.querySelectorAll('.bib-item');
+            bibItems.forEach((element) => {
+                const doubleButton = document.createElement('div');
+                const editButton = document.createElement('button');
+                const commentButton = document.createElement('button');
+                doubleButton.className = 'bibliography-double-button';
+                editButton.className = 'bibliography-edit-button';
+                commentButton.className = 'bibliography-comment-button';
+                commentButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.props.setComment(buildComment(element.id));
+                });
+                editButton.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.showPopper(element.id);
+                    this.popperContainer = undefined;
+                });
+                editButton.innerHTML = editIcon;
+                commentButton.innerHTML = commentIcon;
+                doubleButton.append(editButton, commentButton);
+                if (this.props.getCapabilities().seeReferencesButtons &&
+                    !element.querySelector('.bibliography-double-button')) {
+                    element.appendChild(doubleButton);
+                }
+                editButton.disabled = !this.props.getCapabilities().editCitationsAndRefs;
+                const commentElement = commentElementMap.get(element.id);
+                if (commentElement) {
+                    element.childNodes[0].appendChild(commentElement);
+                }
+                const dataTracked = dataTrackedMap.get(element.id);
+                if (dataTracked) {
+                    element.classList.add('attrs-track-mark');
+                    const decoration = getMarkDecoration(dataTracked);
+                    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));
+                    }
+                }
+            });
+            const oldContent = this.container.querySelector('.contents');
+            if (oldContent) {
+                this.container.replaceChild(bibliographyFragment, oldContent);
+            }
+            else {
+                this.container.appendChild(bibliographyFragment);
+            }
+        });
         this.createElement = () => {
+            this.container = document.createElement('div');
+            this.container.classList.add('block');
+            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.dom.setAttribute('contenteditable', 'false');
-            this.dom.appendChild(this.contentDOM);
+            this.contentDOM.hidden = true;
+            this.container.appendChild(this.contentDOM);
         };
     }
 }

package/dist/es/views/citation.js

@@ -90,7 +90,7 @@ export class CitationView extends BaseNodeView {
             const citeprocContent = citeprocCitations === null || citeprocCitations === void 0 ? void 0 : citeprocCitations.get(this.node.attrs.rid);
             const fragment = sanitize(citeprocContent && citeprocContent !== '[NO_PRINTED_FORM]'
                 ? citeprocContent
-                : this.node.attrs.contents, {
+                : ' ', {
                 ALLOWED_TAGS: ['i', 'b', 'span', 'sup', 'sub', '#text'],
             });
             citationElement.appendChild(fragment);

package/dist/types/plugins/bibliography/bibliography-utils.d.ts

@@ -19,6 +19,6 @@ import { ManuscriptNode } from '@manuscripts/transform';
 import { Decoration } from 'prosemirror-view';
 import { PopperManager } from '../../lib/popper';
 export declare const isBibliographyElement: (node: ManuscriptNode) => boolean;
-export declare const buildDecorations: (doc: ManuscriptNode, citationNodes: CitationNodes, popper: PopperManager, referencesModelMap: Map<string, Model>) => Decoration[];
+export declare const buildDecorations: (doc: ManuscriptNode, citationNodes: CitationNodes, popper: PopperManager, referencesModelMap: Map<string, Model>, triggerUpdate?: boolean) => Decoration[];
 export declare const getNodeModel: <T extends Model>(node: ManuscriptNode, excludeDeletedNode?: boolean) => T | undefined;
 export declare const getReferencesModelMap: (doc: ManuscriptNode, excludeDeletedNode?: boolean) => Map<string, Model>;

package/dist/types/plugins/bibliography/types.d.ts

@@ -29,6 +29,7 @@ export interface PluginState {
     citationNodes: CitationNodes;
     citations: CiteProcCitation[];
     bibliographyItems: BibliographyItem[];
+    triggerUpdate?: boolean;
 }
 export interface BibliographyProps {
     getCitationProvider: () => CitationProvider | undefined;

package/dist/types/plugins/tracking-mark.d.ts

@@ -1,7 +1,7 @@
-import { NodeAttrChange, TrackedAttrs } from '@manuscripts/track-changes-plugin';
+import { TrackedAttrs } from '@manuscripts/track-changes-plugin';
 import { Plugin } from 'prosemirror-state';
 import { DecorationAttrs, DecorationSet } from 'prosemirror-view';
 declare const _default: () => Plugin<DecorationSet>;
 export default _default;
-export declare const getAttrsTrackingButton: (change: NodeAttrChange) => HTMLButtonElement;
+export declare const getAttrsTrackingButton: (changeID: string) => HTMLButtonElement;
 export declare const getMarkDecoration: (dataTracked: TrackedAttrs, htmlNode?: HTMLElement) => DecorationAttrs;

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

@@ -13,11 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { CommentAnnotation } from '@manuscripts/json-schema';
+import React from 'react';
 import { BaseNodeProps } from './base_node_view';
 import BlockView from './block_view';
-export declare class BibliographyElementBlockView<PropsType extends BaseNodeProps> extends BlockView<PropsType> {
+import { EditableBlockProps } from './editable_block';
+interface BibliographyElementViewProps extends BaseNodeProps {
+    setComment: (comment?: CommentAnnotation) => void;
+    components: Record<string, React.ComponentType<any>>;
+}
+export declare class BibliographyElementBlockView<PropsType extends BibliographyElementViewProps & EditableBlockProps> extends BlockView<PropsType> {
+    container: HTMLElement;
+    popperContainer?: HTMLDivElement;
+    showPopper: (referenceID: string) => void;
     stopEvent: () => boolean;
     ignoreMutation: () => boolean;
+    updateContents: () => Promise<void>;
     createElement: () => void;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<BibliographyElementBlockView<any>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/Editor.css

@@ -731,12 +731,8 @@
   text-align: center;
 }
 
-.ProseMirror .block {
-  counter-reset: bib_item;
-}
 
 .ProseMirror .bib-item {
-  counter-increment: bib_item;
   position: relative;
   margin-right: 40px;
 }
@@ -751,11 +747,7 @@
 
 .ProseMirror .csl-left-margin {
   padding-right: 1ch;
-  display: none;
-}
-
-.ProseMirror .csl-right-inline::before {
-  content: counter(bib_item) '. ';
+  display: table-cell;
 }
 
 .ProseMirror .csl-entry a {