@manuscripts/body-editor 1.6.8 → 1.6.10-LEAN-3180

package/dist/cjs/citation-sources/crossref.js

@@ -14,71 +14,44 @@
  * 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.crossref = void 0;
 const library_1 = require("@manuscripts/library");
+const transform_1 = require("@manuscripts/transform");
 const axios_1 = __importDefault(require("axios"));
-const search = (query, rows, mailto, tokenSource) => __awaiter(void 0, void 0, void 0, function* () {
-    if (query.trim().match(/^10\.\S+\/\S+$/)) {
-        return searchByDOI(query.trim(), mailto);
-    }
-    const response = yield axios_1.default.get(`https://api.crossref.org/works?mailto=${mailto}`, {
+const search = (query, limit) => {
+    const controller = new AbortController();
+    const response = axios_1.default
+        .get(`https://api.crossref.org/works`, {
         params: {
             filter: 'type:journal-article',
             query,
-            rows,
+            rows: limit,
         },
-        cancelToken: tokenSource,
+        signal: controller.signal,
+    })
+        .then((r) => {
+        if (r.status !== 200) {
+            throw new Error('There was a problem searching for this query.');
+        }
+        const items = r.data.message.items;
+        const total = r.data.message['total-results'];
+        return {
+            items: items.map((i) => (0, transform_1.buildBibliographyItem)((0, library_1.convertCSLToBibliographyItem)(i))),
+            total,
+        };
     });
-    if (response.status !== 200) {
-        throw new Error('There was a problem searching for this query.');
-    }
-    const { message: { items, 'total-results': total }, } = response.data;
-    return {
-        items: items.map(library_1.convertCSLToBibliographyItem),
-        total,
-    };
-});
-const searchByDOI = (doi, mailto) => __awaiter(void 0, void 0, void 0, function* () {
-    const response = yield axios_1.default.get(`https://api.crossref.org/works/${encodeURIComponent(doi)}?mailto=${mailto}`);
-    if (response.status === 404) {
-        throw new Error('An item with this DOI could not be found.');
-    }
-    if (response.status !== 200) {
-        throw new Error('There was a problem searching for this DOI.');
-    }
-    const { message } = response.data;
-    const item = (0, library_1.convertCSLToBibliographyItem)(message);
     return {
-        items: [item],
-        total: 1,
+        response: response,
+        cancel: () => controller.abort(),
+        isCancelled: controller.signal.aborted,
     };
-});
-const fetch = (item) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!item.DOI) {
-        throw new Error('The item does not have a DOI');
-    }
-    const response = yield axios_1.default.get(`https://api.crossref.org/works/${encodeURIComponent(item.DOI)}/transform/application/vnd.citationstyles.csl+json`, {
-        headers: {},
-    });
-    if (response.status === 404) {
-        throw new Error('An item with this DOI could not be found.');
-    }
-    if (response.status !== 200) {
-        throw new Error('There was a problem fetching this DOI.');
-    }
-    return (0, library_1.convertCSLToBibliographyItem)(response.data);
-});
-exports.crossref = { fetch, search };
+};
+exports.crossref = {
+    id: 'crossref',
+    label: 'External sources',
+    search,
+};

package/dist/cjs/commands.js

@@ -231,7 +231,7 @@ const insertLink = (state, dispatch) => {
     return true;
 };
 exports.insertLink = insertLink;
-const insertInlineCitation = (state, dispatch, view) => {
+const insertInlineCitation = (state, dispatch) => {
     const node = state.schema.nodes.citation.create({
         id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.Citation),
         rids: [],
@@ -313,11 +313,11 @@ const insertGraphicalAbstract = (state, dispatch) => {
         return false;
     }
     const abstracts = (0, prosemirror_utils_1.findChildrenByType)(state.doc, transform_1.schema.nodes.abstracts)[0];
+    const pos = abstracts.pos + abstracts.node.content.size + 1;
     const section = transform_1.schema.nodes.graphical_abstract_section.createAndFill({ category: 'MPSectionCategory:abstract-graphical' }, [
         transform_1.schema.nodes.section_title.create({}, transform_1.schema.text('Graphical Abstract')),
         createAndFillFigureElement(state),
     ]);
-    const pos = abstracts.pos + abstracts.node.nodeSize + 1;
     const tr = state.tr.insert(pos, section);
     if (dispatch) {
         const selection = prosemirror_state_1.TextSelection.create(tr.doc, pos + 1);
@@ -340,11 +340,11 @@ const insertSection = (subsection = false) => (state, dispatch) => {
     return true;
 };
 exports.insertSection = insertSection;
-const insertBibliographySection = (state, dispatch) => {
+const insertBibliographySection = () => {
     return false;
 };
 exports.insertBibliographySection = insertBibliographySection;
-const insertTOCSection = (state, dispatch) => {
+const insertTOCSection = () => {
     return false;
 };
 exports.insertTOCSection = insertTOCSection;

package/dist/cjs/components/keywords/DeleteKeywordDialog.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteKeywordDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const DeleteKeywordDialog = ({ keyword, handleDelete, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, actions: {
+            primary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+            secondary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+        }, category: style_guide_1.Category.confirmation, header: 'Delete Keyword', message: `Are you sure you want to delete "${keyword}" keyword?
+      ` }));
+};
+exports.DeleteKeywordDialog = DeleteKeywordDialog;

package/dist/cjs/configs/editor-plugins.js

@@ -30,7 +30,6 @@ const comment_annotation_1 = __importDefault(require("../plugins/comment_annotat
 const elements_1 = __importDefault(require("../plugins/elements"));
 const footnotes_1 = __importDefault(require("../plugins/footnotes"));
 const highlight_1 = __importDefault(require("../plugins/highlight"));
-const keywords_1 = __importDefault(require("../plugins/keywords"));
 const objects_1 = __importDefault(require("../plugins/objects"));
 const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
@@ -54,7 +53,6 @@ exports.default = (props) => {
         (0, persist_1.default)(),
         (0, sections_1.default)(),
         (0, toc_1.default)(props),
-        (0, keywords_1.default)(props),
         (0, bibliography_1.default)(props),
         (0, objects_1.default)(props),
         (0, comment_annotation_1.default)(props),

package/dist/cjs/configs/editor-views.js

@@ -34,7 +34,7 @@ const footnotes_element_1 = __importDefault(require("../views/footnotes_element"
 const inline_equation_editable_1 = __importDefault(require("../views/inline_equation_editable"));
 const inline_footnote_editable_1 = __importDefault(require("../views/inline_footnote_editable"));
 const keyword_1 = __importDefault(require("../views/keyword"));
-const keywords_element_1 = __importDefault(require("../views/keywords_element"));
+const keyword_group_1 = __importDefault(require("../views/keyword_group"));
 const link_editable_1 = __importDefault(require("../views/link_editable"));
 const listing_editable_1 = __importDefault(require("../views/listing_editable"));
 const listing_element_editable_1 = __importDefault(require("../views/listing_element_editable"));
@@ -51,11 +51,11 @@ const toc_element_editable_1 = __importDefault(require("../views/toc_element_edi
 exports.default = (props, dispatch) => {
     return {
         title: (0, title_editable_1.default)(props, dispatch),
-        bibliography_element: (0, bibliography_element_editable_1.default)(props),
+        bibliography_element: (0, bibliography_element_editable_1.default)(props, dispatch),
         blockquote_element: (0, blockquote_element_editable_1.default)(props),
         bullet_list: (0, bullet_list_editable_1.default)(props),
-        citation: (0, citation_editable_1.default)(props),
-        cross_reference: (0, cross_reference_editable_1.default)(props),
+        citation: (0, citation_editable_1.default)(props, dispatch),
+        cross_reference: (0, cross_reference_editable_1.default)(props, dispatch),
         contributors: (0, contributors_1.default)(props, dispatch),
         equation: (0, equation_editable_1.default)(props),
         equation_element: (0, equation_element_editable_1.default)(props),
@@ -65,9 +65,9 @@ exports.default = (props, dispatch) => {
         footnotes_element: (0, footnotes_element_1.default)(props),
         inline_equation: (0, inline_equation_editable_1.default)(props),
         inline_footnote: (0, inline_footnote_editable_1.default)(props),
-        keyword: (0, keyword_1.default)(props),
-        keywords_element: (0, keywords_element_1.default)(props, dispatch),
-        link: (0, link_editable_1.default)(props),
+        keyword: (0, keyword_1.default)(props, dispatch),
+        keyword_group: (0, keyword_group_1.default)(props, dispatch),
+        link: (0, link_editable_1.default)(props, dispatch),
         listing: (0, listing_editable_1.default)(props),
         listing_element: (0, listing_element_editable_1.default)(props),
         ordered_list: (0, ordered_list_editable_1.default)(props),

package/dist/cjs/index.js

@@ -56,6 +56,5 @@ var comment_annotation_1 = require("./plugins/comment_annotation");
 Object.defineProperty(exports, "commentScroll", { enumerable: true, get: function () { return comment_annotation_1.commentScroll; } });
 Object.defineProperty(exports, "isThereSelector", { enumerable: true, get: function () { return comment_annotation_1.isThereSelector; } });
 Object.defineProperty(exports, "isHighlightComment", { enumerable: true, get: function () { return comment_annotation_1.isHighlightComment; } });
-__exportStar(require("./plugins/keywords"), exports);
 __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./useEditor"), exports);

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

@@ -286,7 +286,9 @@ class ContextMenu {
             switch (nodeType.name) {
                 case 'section_title': {
                     const $pos = this.resolvePos();
-                    this.view.dispatch(this.view.state.tr.delete($pos.before(), $pos.after()));
+                    this.view.dispatch(this.view.state.tr
+                        .setMeta('fromContextMenu', true)
+                        .delete($pos.before(), $pos.after()));
                     break;
                 }
                 case 'bibliography_element': {
@@ -354,7 +356,7 @@ class ContextMenu {
             window.addEventListener('keydown', keyListener);
         };
         this.trimTitle = (title, max) => {
-            return title.length > max ? title.substr(0, max) + '…' : title;
+            return title.length > max ? title.substring(0, max) + '…' : title;
         };
         this.node = node;
         this.view = view;

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

@@ -63,17 +63,27 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
     if (!csl.style) {
         return $new;
     }
-    if ($old && (0, lodash_1.isEqual)(citations, $old.citations)) {
+    if ($old &&
+        (0, lodash_1.isEqual)(citations, $old.citations) &&
+        (0, lodash_1.isEqual)(modelMap, $old.bibliographyItems)) {
+        $new.citationCounts = $old.citationCounts;
         $new.provider = $old.provider;
         $new.renderedCitations = $old.renderedCitations;
     }
     else {
+        const citationCounts = new Map();
+        const rids = nodes.flatMap((e) => e[0].attrs.rids);
+        rids.forEach((rid) => {
+            const count = citationCounts.get(rid) || 0;
+            citationCounts.set(rid, count + 1);
+        });
         const provider = new library_1.CitationProvider({
             getLibraryItem: (id) => modelMap.get(id),
             citationStyle: csl.style || '',
             locale: csl.locale,
         });
         const citationTexts = provider.rebuildState((0, bibliography_utils_1.buildCitations)(nodes));
+        $new.citationCounts = citationCounts;
         $new.provider = provider;
         $new.renderedCitations = new Map(citationTexts.map((i) => [i[0], i[2]]));
     }

package/dist/cjs/plugins/sections.js

@@ -23,6 +23,9 @@ const highlight_1 = require("./highlight");
 const preventTitleEdit = (tr) => {
     let dontPrevent = true;
     const isInRange = (start, end, position) => position >= start && position <= end;
+    if (tr.getMeta('fromContextMenu')) {
+        return dontPrevent;
+    }
     if (tr.getMeta('origin') === track_changes_plugin_1.trackChangesPluginKey) {
         return dontPrevent;
     }
@@ -47,7 +50,7 @@ const preventTitleEdit = (tr) => {
                                 (isInRange(inDocPos, inDocPos + childNode.nodeSize, toA) ||
                                     isInRange(inDocPos, inDocPos + childNode.nodeSize, fromA))) {
                                 dontPrevent = false;
-                                return false;
+                                return dontPrevent;
                             }
                         });
                     }

package/dist/cjs/testing/default-editor-data.js

@@ -22,8 +22,6 @@ exports.defaultEditorProps = exports.TEST_DATA = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const history_1 = require("history");
-const lodash_1 = require("lodash");
-const react_dom_1 = __importDefault(require("react-dom"));
 const popper_1 = require("../lib/popper");
 const empty_editor_doc_json_1 = __importDefault(require("./empty-editor-doc.json"));
 const theme = {};
@@ -70,10 +68,6 @@ exports.defaultEditorProps = {
     projectID: 'test-project-id',
     getCurrentUser: () => exports.TEST_DATA.USER,
     history: (0, history_1.createBrowserHistory)(),
-    renderReactComponent: (child, container) => {
-        react_dom_1.default.render(child, container);
-    },
-    unmountReactComponent: react_dom_1.default.unmountComponentAtNode,
     theme,
     getFiles: () => [],
     fileManagement: {
@@ -89,29 +83,13 @@ exports.defaultEditorProps = {
     },
     getCitationProvider: () => undefined,
     plugins: [],
-    saveModel: (model) => {
-        var _a, _b;
-        const id = (_a = model._id) !== null && _a !== void 0 ? _a : '';
-        const oldModel = (_b = exports.TEST_DATA.MODEL_MAP.get(id)) !== null && _b !== void 0 ? _b : {};
-        const updatedModel = Object.assign(Object.assign({ createdAt: Date.now() / 1000, updatedAt: Date.now() / 1000, _id: (0, lodash_1.uniqueId)() }, oldModel), model);
-        exports.TEST_DATA.MODEL_MAP.set(id, updatedModel);
-        return Promise.resolve(updatedModel);
-    },
     deleteModel: (id) => {
         exports.TEST_DATA.MODEL_MAP.delete(id);
         return Promise.resolve(id);
     },
-    getLibraryItem: () => undefined,
-    setLibraryItem: () => undefined,
-    matchLibraryItemByIdentifier: () => undefined,
-    filterLibraryItems: () => Promise.resolve([]),
-    removeLibraryItem: () => undefined,
     retrySync: () => Promise.resolve(),
     setComment: () => undefined,
     setSelectedComment: () => undefined,
     setEditorSelectedSuggestion: () => undefined,
-    components: {},
     environment: undefined,
-    setCiteprocCitations: () => undefined,
-    getCiteprocCitations: () => new Map(),
 };

package/dist/cjs/views/CitationEditorWrapper.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CitationEditorWrapper = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const CitationEditorWrapper = (props) => {
+    const [items, setItems] = (0, react_1.useState)(props.items);
+    const handleSave = (item) => {
+        props.onSave(item);
+        setItems((s) => {
+            const copy = [...s];
+            const index = copy.findIndex((i) => i._id === item._id);
+            if (index >= 0) {
+                copy[index] = item;
+            }
+            else {
+                copy.push(item);
+            }
+            return copy;
+        });
+    };
+    const handleDelete = (item) => {
+        props.onDelete(item);
+        setItems((s) => s.filter((i) => i._id !== item._id));
+    };
+    return (react_1.default.createElement(style_guide_1.CitationEditor, Object.assign({}, props, { items: items, onSave: handleSave, onDelete: handleDelete })));
+};
+exports.CitationEditorWrapper = CitationEditorWrapper;

package/dist/cjs/views/ReferencesEditor.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReferencesEditor = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const ReferencesEditor = (props) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const [items, setItems] = (0, react_1.useState)(props.items);
+    const handleSave = (item) => {
+        props.onSave(item);
+        setItems((s) => {
+            const copy = [...s];
+            const index = copy.findIndex((i) => i._id === item._id);
+            if (index >= 0) {
+                copy[index] = item;
+            }
+            else {
+                copy.push(item);
+            }
+            return copy;
+        });
+    };
+    const handleDelete = (item) => {
+        props.onDelete(item);
+        setItems((s) => s.filter((i) => i._id !== item._id));
+    };
+    return (react_1.default.createElement(style_guide_1.ReferencesModal, Object.assign({}, props, { isOpen: isOpen, onCancel: () => setOpen(false), items: items, onSave: handleSave, onDelete: handleDelete })));
+};
+exports.ReferencesEditor = ReferencesEditor;

package/dist/cjs/views/base_node_view.js

@@ -75,7 +75,7 @@ class BaseNodeView {
         };
         this.deleteNode = (id) => {
             this.view.state.doc.descendants((node, pos) => {
-                if ((node.attrs.id || node.attrs.rid) === id) {
+                if (node.attrs.id === id) {
                     this.view.dispatch(this.view.state.tr.delete(pos, pos + node.nodeSize));
                 }
             });

package/dist/cjs/views/bibliography_element.js

@@ -23,17 +23,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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 };
 };
@@ -41,7 +30,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BibliographyElementBlockView = void 0;
 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");
@@ -49,25 +37,24 @@ 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 ReactSubView_1 = __importDefault(require("./ReactSubView"));
+const ReferencesEditor_1 = require("./ReferencesEditor");
 class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
+        this.decoder = new transform_1.Decoder(new Map());
         this.gutterButtons = () => [];
-        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';
-            }
+        this.showPopper = (id) => {
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
-            renderReactComponent(react_1.default.createElement(ReferencesEditor, { saveModel: handleSave, deleteModel: this.deleteNode, modelMap: bib.bibliographyItems, referenceID: referenceID }), this.popperContainer);
-            this.props.popper.show(this.dom, this.popperContainer, 'right');
+            const componentProps = {
+                items: Array.from(bib.bibliographyItems.values()),
+                citationCounts: bib.citationCounts,
+                item: bib.bibliographyItems.get(id),
+                onSave: this.handleSave,
+                onDelete: this.handleDelete,
+            };
+            this.editor = (0, ReactSubView_1.default)(this.props, ReferencesEditor_1.ReferencesEditor, componentProps, this.node, this.getPos, this.view, 'references-modal');
+            this.props.popper.show(this.dom, this.editor, 'right');
         };
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
@@ -112,7 +99,6 @@ class BibliographyElementBlockView extends block_view_1.default {
                 editButton.addEventListener('click', (e) => {
                     e.preventDefault();
                     this.showPopper(element.id);
-                    this.popperContainer = undefined;
                 });
                 editButton.innerHTML = assets_1.editIcon;
                 commentButton.innerHTML = assets_1.commentIcon;
@@ -153,6 +139,13 @@ class BibliographyElementBlockView extends block_view_1.default {
             this.dom.setAttribute('contenteditable', 'false');
             this.dom.appendChild(this.container);
         };
+        this.handleSave = (item) => {
+            const node = this.decoder.decode(item);
+            this.updateNodeAttrs(node.attrs);
+        };
+        this.handleDelete = (item) => {
+            return this.deleteNode(item._id);
+        };
     }
 }
 exports.BibliographyElementBlockView = BibliographyElementBlockView;