@manuscripts/body-editor 1.6.13 → 1.6.14-LEAN-3094

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

@@ -109,7 +109,6 @@ const createBlock = (nodeType, position, state, dispatch) => {
         case state.schema.nodes.equation_element:
             node = state.schema.nodes.equation_element.create({}, [
                 state.schema.nodes.equation.create(),
-                createAndFillFigcaptionElement(state),
             ]);
             break;
         default:
@@ -234,7 +233,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: [],
@@ -264,10 +263,10 @@ const insertCrossReference = (state, dispatch) => {
 };
 exports.insertCrossReference = insertCrossReference;
 const insertInlineEquation = (state, dispatch) => {
-    const inlineMathFragment = (0, transform_1.buildInlineMathFragment)(state.selection.$anchor.parent.attrs.id, selectedText().replace(/^\$/, '').replace(/\$$/, ''));
     const sourcePos = state.selection.from - 1;
     const tr = state.tr.replaceSelectionWith(state.schema.nodes.inline_equation.create({
-        id: inlineMathFragment._id,
+        format: 'tex',
+        contents: selectedText().replace(/^\$/, '').replace(/\$$/, ''),
     }));
     if (dispatch) {
         const selection = prosemirror_state_1.NodeSelection.create(tr.doc, tr.mapping.map(sourcePos) + 1);
@@ -396,11 +395,11 @@ const insertList = (type, style) => (state, dispatch) => {
     }
 };
 exports.insertList = insertList;
-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/configs/editor-views.js

@@ -52,11 +52,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),
@@ -68,7 +68,7 @@ exports.default = (props, dispatch) => {
         inline_footnote: (0, inline_footnote_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),
+        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/lib/array-reducer.js

@@ -0,0 +1,45 @@
+"use strict";
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.arrayReducer = void 0;
+const arrayReducer = (isEqual = (a, b) => a === b) => {
+    return (state, action) => {
+        const handleUpdate = (state, items) => {
+            const copy = [...state];
+            items.forEach((item) => {
+                const index = copy.findIndex((i) => isEqual(item, i));
+                if (index >= 0) {
+                    copy[index] = item;
+                }
+                else {
+                    copy.push(item);
+                }
+            });
+            return copy;
+        };
+        const handleDelete = (state, item) => {
+            return state.filter((i) => !isEqual(item, i));
+        };
+        switch (action.type) {
+            case 'update':
+                return handleUpdate(state, action.items);
+            case 'delete':
+                return handleDelete(state, action.item);
+        }
+    };
+};
+exports.arrayReducer = arrayReducer;

package/dist/cjs/lib/mathml-to-svg.js

@@ -0,0 +1,70 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMathMLToSVG = void 0;
+require("mathjax-full/js/util/entities/all");
+const transform_1 = require("@manuscripts/transform");
+const HTMLAdaptor_1 = require("mathjax-full/js/adaptors/HTMLAdaptor");
+const MmlFactory_1 = require("mathjax-full/js/core/MmlTree/MmlFactory");
+const HTMLDocument_1 = require("mathjax-full/js/handlers/html/HTMLDocument");
+const mathml_1 = require("mathjax-full/js/input/mathml");
+const svg_1 = require("mathjax-full/js/output/svg");
+class ManuscriptsMmlFactory extends MmlFactory_1.MmlFactory {
+    constructor() {
+        super();
+        this.nodeMap.set('image', this.nodeMap.get('none'));
+    }
+    create(kind, properties = {}, children = []) {
+        if (kind === 'image') {
+            return this.node['none'](properties, children);
+        }
+        return this.node[kind](properties, children);
+    }
+}
+class ManuscriptsHTMLAdaptor extends HTMLAdaptor_1.HTMLAdaptor {
+    setAttribute(node, name, value, ns) {
+        if (name !== 'xmlns') {
+            ns ? node.setAttributeNS(ns, name, value) : node.setAttribute(name, value);
+        }
+    }
+}
+const InputJax = new mathml_1.MathML();
+const OutputJax = new svg_1.SVG({
+    fontCache: 'none',
+});
+const adaptor = new ManuscriptsHTMLAdaptor(window);
+const doc = new HTMLDocument_1.HTMLDocument(document, adaptor, {
+    InputJax,
+    OutputJax,
+    MmlFactory: new ManuscriptsMmlFactory(),
+});
+doc.addStyleSheet();
+const convertMathMLToSVG = (mathml, display) => {
+    const item = doc.convert(mathml, {
+        display,
+        em: 16,
+        ex: 8,
+        containerWidth: 1000000,
+        lineWidth: 1000000,
+        scale: 1,
+    });
+    if (!item || !item.firstChild) {
+        return null;
+    }
+    return transform_1.xmlSerializer.serializeToString(item.firstChild);
+};
+exports.convertMathMLToSVG = convertMathMLToSVG;

package/dist/cjs/lib/tex-to-svg.js

@@ -0,0 +1,60 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTeXToSVG = exports.packages = void 0;
+require("mathjax-full/js/util/entities/all");
+const transform_1 = require("@manuscripts/transform");
+const HTMLAdaptor_1 = require("mathjax-full/js/adaptors/HTMLAdaptor");
+const HTMLDocument_1 = require("mathjax-full/js/handlers/html/HTMLDocument");
+const tex_1 = require("mathjax-full/js/input/tex");
+const AllPackages_1 = require("mathjax-full/js/input/tex/AllPackages");
+const svg_1 = require("mathjax-full/js/output/svg");
+exports.packages = AllPackages_1.AllPackages.filter((name) => name !== 'html' && name !== 'bussproofs');
+class ManuscriptsHTMLAdaptor extends HTMLAdaptor_1.HTMLAdaptor {
+    setAttribute(node, name, value, ns) {
+        if (name !== 'xmlns') {
+            ns ? node.setAttributeNS(ns, name, value) : node.setAttribute(name, value);
+        }
+    }
+}
+const InputJax = new tex_1.TeX({
+    packages: exports.packages,
+});
+const OutputJax = new svg_1.SVG({
+    fontCache: 'none',
+});
+const adaptor = new ManuscriptsHTMLAdaptor(window);
+const doc = new HTMLDocument_1.HTMLDocument(document, adaptor, {
+    InputJax,
+    OutputJax,
+});
+doc.addStyleSheet();
+const convertTeXToSVG = (tex, display) => {
+    const item = doc.convert(tex, {
+        display,
+        em: 16,
+        ex: 8,
+        containerWidth: 1000000,
+        lineWidth: 1000000,
+        scale: 1,
+    });
+    if (!item || !item.firstChild) {
+        return null;
+    }
+    return transform_1.xmlSerializer.serializeToString(item.firstChild);
+};
+exports.convertTeXToSVG = convertTeXToSVG;

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/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,65 @@
+"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 array_reducer_1 = require("../lib/array-reducer");
+const itemsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a._id === b._id);
+const ridsReducer = (0, array_reducer_1.arrayReducer)();
+const CitationEditorWrapper = (props) => {
+    const [items, dispatchItems] = (0, react_1.useReducer)(itemsReducer, props.items);
+    const [rids, dispatchRids] = (0, react_1.useReducer)(ridsReducer, props.rids);
+    const handleSave = (item) => {
+        props.onSave(item);
+        dispatchItems({
+            type: 'update',
+            items: [item],
+        });
+    };
+    const handleDelete = (item) => {
+        props.onDelete(item);
+        dispatchItems({
+            type: 'delete',
+            item,
+        });
+    };
+    const handleCite = (items) => {
+        props.onCite(items);
+        dispatchRids({
+            type: 'update',
+            items: items.map((i) => i._id),
+        });
+    };
+    const handleUncite = (rid) => {
+        props.onUncite(rid);
+        dispatchRids({
+            type: 'delete',
+            item: rid,
+        });
+    };
+    return (react_1.default.createElement(style_guide_1.CitationEditor, Object.assign({}, props, { rids: rids, items: items, onCite: handleCite, onUncite: handleUncite, onSave: handleSave, onDelete: handleDelete })));
+};
+exports.CitationEditorWrapper = CitationEditorWrapper;

package/dist/cjs/views/ReferencesEditor.js

@@ -0,0 +1,50 @@
+"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 array_reducer_1 = require("../lib/array-reducer");
+const itemsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a._id === b._id);
+const ReferencesEditor = (props) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const [items, dispatch] = (0, react_1.useReducer)(itemsReducer, props.items);
+    const handleSave = (item) => {
+        props.onSave(item);
+        dispatch({
+            type: 'update',
+            items: [item],
+        });
+    };
+    const handleDelete = (item) => {
+        props.onDelete(item);
+        dispatch({
+            type: 'delete',
+            item: item,
+        });
+    };
+    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;