@manuscripts/body-editor 1.6.13 → 1.6.14

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

@@ -16,8 +16,6 @@
 import { getAllPermitted } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import { createBrowserHistory } from 'history';
-import { uniqueId } from 'lodash';
-import ReactDOM from 'react-dom';
 import { PopperManager } from '../lib/popper';
 import emptyEditorDocJson from './empty-editor-doc.json';
 const theme = {};
@@ -64,10 +62,6 @@ export const defaultEditorProps = {
     projectID: 'test-project-id',
     getCurrentUser: () => TEST_DATA.USER,
     history: createBrowserHistory(),
-    renderReactComponent: (child, container) => {
-        ReactDOM.render(child, container);
-    },
-    unmountReactComponent: ReactDOM.unmountComponentAtNode,
     theme,
     getFiles: () => [],
     fileManagement: {
@@ -83,29 +77,13 @@ export const defaultEditorProps = {
     },
     getCitationProvider: () => undefined,
     plugins: [],
-    saveModel: (model) => {
-        var _a, _b;
-        const id = (_a = model._id) !== null && _a !== void 0 ? _a : '';
-        const oldModel = (_b = 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: uniqueId() }, oldModel), model);
-        TEST_DATA.MODEL_MAP.set(id, updatedModel);
-        return Promise.resolve(updatedModel);
-    },
     deleteModel: (id) => {
         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/es/views/CitationEditorWrapper.js

@@ -0,0 +1,38 @@
+import { CitationEditor } from '@manuscripts/style-guide';
+import React, { useReducer } from 'react';
+import { arrayReducer } from '../lib/array-reducer';
+const itemsReducer = arrayReducer((a, b) => a._id === b._id);
+const ridsReducer = arrayReducer();
+export const CitationEditorWrapper = (props) => {
+    const [items, dispatchItems] = useReducer(itemsReducer, props.items);
+    const [rids, dispatchRids] = 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.createElement(CitationEditor, Object.assign({}, props, { rids: rids, items: items, onCite: handleCite, onUncite: handleUncite, onSave: handleSave, onDelete: handleDelete })));
+};

package/dist/es/views/ReferencesEditor.js

@@ -0,0 +1,23 @@
+import { ReferencesModal } from '@manuscripts/style-guide';
+import React, { useReducer, useState } from 'react';
+import { arrayReducer } from '../lib/array-reducer';
+const itemsReducer = arrayReducer((a, b) => a._id === b._id);
+export const ReferencesEditor = (props) => {
+    const [isOpen, setOpen] = useState(true);
+    const [items, dispatch] = 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.createElement(ReferencesModal, Object.assign({}, props, { isOpen: isOpen, onCancel: () => setOpen(false), items: items, onSave: handleSave, onDelete: handleDelete })));
+};

package/dist/es/views/base_node_view.js

@@ -72,7 +72,7 @@ export 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/es/views/bibliography_element.js

@@ -22,20 +22,8 @@ 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;
-};
 import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plugin';
-import { buildComment } from '@manuscripts/transform';
-import React from 'react';
+import { buildComment, Decoder, } from '@manuscripts/transform';
 import { commentIcon, editIcon } from '../assets';
 import { sanitize } from '../lib/dompurify';
 import { getBibliographyPluginState } from '../plugins/bibliography';
@@ -43,25 +31,24 @@ import { commentAnnotation } from '../plugins/comment_annotation';
 import { getAttrsTrackingButton, getMarkDecoration, } from '../plugins/tracking-mark';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
+import { ReferencesEditor } from './ReferencesEditor';
 export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
+        this.decoder = new 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 = 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');
+            const componentProps = {
+                items: Array.from(bib.bibliographyItems.values()),
+                citationCounts: bib.citationCounts,
+                item: bib.bibliographyItems.get(id),
+                onSave: this.handleSave,
+                onDelete: this.handleDelete,
+            };
+            this.editor = ReactSubView(this.props, 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;
@@ -106,7 +93,6 @@ export class BibliographyElementBlockView extends BlockView {
                 editButton.addEventListener('click', (e) => {
                     e.preventDefault();
                     this.showPopper(element.id);
-                    this.popperContainer = undefined;
                 });
                 editButton.innerHTML = editIcon;
                 commentButton.innerHTML = commentIcon;
@@ -147,6 +133,13 @@ export class BibliographyElementBlockView extends BlockView {
             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);
+        };
     }
 }
 export default createNodeView(BibliographyElementBlockView);

package/dist/es/views/citation.js

@@ -13,9 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ObjectTypes } from '@manuscripts/json-schema';
 import { DOMSerializer } from 'prosemirror-model';
-import React, { createElement } from 'react';
+import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { TrackChangesReview } from '../components/track-changes/TrackChangesReview';
 import { sanitize } from '../lib/dompurify';
@@ -27,38 +26,7 @@ import { createNodeView } from './creators';
 export class CitationView extends BaseNodeView {
     constructor() {
         super(...arguments);
-        this.showPopper = () => {
-            const { components: { CitationViewer }, projectID, renderReactComponent, } = this.props;
-            const items = this.getBibliographyItems();
-            if (!this.popperContainer) {
-                this.popperContainer = document.createElement('div');
-                this.popperContainer.className = 'citation-editor';
-            }
-            renderReactComponent(React.createElement(CitationViewer, { items: items, projectID: projectID, scheduleUpdate: this.props.popper.update }), this.popperContainer);
-            this.props.popper.show(this.dom, this.popperContainer, 'right');
-        };
         this.ignoreMutation = () => true;
-        this.selectNode = () => {
-            var _a;
-            const isDeleted = !!((_a = this.node.attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.find(({ operation, status }) => operation === 'delete' && status !== 'rejected'));
-            if (!isDeleted) {
-                this.showPopper();
-                this.dom.classList.add('ProseMirror-selectednode');
-            }
-        };
-        this.deselectNode = () => {
-            this.dom.classList.remove('ProseMirror-selectednode');
-            this.props.popper.destroy();
-            if (this.popperContainer) {
-                this.props.unmountReactComponent(this.popperContainer);
-            }
-        };
-        this.destroy = () => {
-            this.props.popper.destroy();
-            if (this.popperContainer) {
-                this.props.unmountReactComponent(this.popperContainer);
-            }
-        };
         this.initialise = () => {
             if (!this.node.type.spec.toDOM) {
                 throw Error(`Node view ${this.node.type} doesn't have toDOM method`);
@@ -109,22 +77,6 @@ export class CitationView extends BaseNodeView {
             }
             return citation;
         };
-        this.getBibliographyItems = () => {
-            const bib = getBibliographyPluginState(this.view.state);
-            const citation = this.node;
-            return citation.attrs.rids.map((rid) => {
-                const item = bib.bibliographyItems.get(rid);
-                if (!item) {
-                    const placeholder = {
-                        _id: rid,
-                        objectType: ObjectTypes.BibliographyItem,
-                        title: '[missing library item]',
-                    };
-                    return placeholder;
-                }
-                return item;
-            });
-        };
     }
 }
 export default createNodeView(CitationView);

package/dist/es/views/citation_editable.js

@@ -13,92 +13,92 @@
  * 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 { ObjectTypes, } from '@manuscripts/json-schema';
 import { findMatchingBibliographyItem } from '@manuscripts/library';
-import { schema } from '@manuscripts/transform';
+import { CitationViewer, } from '@manuscripts/style-guide';
+import { buildComment, Decoder, schema, } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
-import React from 'react';
+import { findChildren, findChildrenByType } from 'prosemirror-utils';
+import { crossref } from '../citation-sources';
+import { isDeleted } from '../lib/track-changes-utils';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { CitationView } from './citation';
+import { CitationEditorWrapper } from './CitationEditorWrapper';
 import { createEditableNodeView } from './creators';
-const createBibliographySection = (bibItem) => schema.nodes.bibliography_section.createAndFill({}, [
-    schema.nodes.section_title.create({}, schema.text('References')),
-    schema.nodes.bibliography_element.create({}, bibItem ? [bibItem] : []),
+import ReactSubView from './ReactSubView';
+const createBibliographySection = (node) => schema.nodes.bibliography_section.createAndFill({}, [
+    schema.nodes.section_title.create({}, schema.text('Bibliography')),
+    schema.nodes.bibliography_element.create({}, node ? [node] : []),
 ]);
 export class CitationEditableView extends CitationView {
     constructor() {
         super(...arguments);
+        this.decoder = new Decoder(new Map());
+        this.selectNode = () => {
+            if (!isDeleted(this.node)) {
+                this.showPopper();
+                this.dom.classList.add('ProseMirror-selectednode');
+            }
+        };
+        this.deselectNode = () => {
+            var _a;
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.remove();
+            this.dom.classList.remove('ProseMirror-selectednode');
+            this.props.popper.destroy();
+        };
+        this.destroy = () => {
+            var _a;
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.remove();
+            this.props.popper.destroy();
+        };
         this.showPopper = () => {
-            const { components: { CitationEditor, CitationViewer }, getCapabilities, projectID, renderReactComponent, } = this.props;
-            const capabilities = getCapabilities();
+            const can = this.props.getCapabilities();
             const citation = this.getCitation();
-            const items = this.getBibliographyItems();
-            const updateCitation = (data) => __awaiter(this, void 0, void 0, function* () {
-                this.updateNode(Object.assign(Object.assign({}, citation), data));
-                this.props.popper.update();
-            });
-            const findPosition = (doc, id) => {
-                let nodePos = undefined;
-                doc.descendants((node, pos) => {
-                    if (node.attrs.id === id) {
-                        nodePos = pos;
-                    }
-                });
-                return nodePos;
-            };
-            const handleSave = (data) => __awaiter(this, void 0, void 0, function* () {
-                if (data._id && !findPosition(this.view.state.doc, data._id)) {
-                    this.insertBibliographyNode(this.view, data);
-                }
-                else {
-                    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 = 'citation-editor';
-            }
+            const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
             const bib = getBibliographyPluginState(this.view.state);
-            const component = (capabilities === null || capabilities === void 0 ? void 0 : capabilities.editArticle) ? (React.createElement(CitationEditor, { items: items, saveModel: handleSave, deleteModel: this.deleteNode, insertBibliographyNode: (item) => this.insertBibliographyNode(this.view, item), modelMap: bib.bibliographyItems, importItems: this.importItems, selectedText: this.node.attrs.selectedText, setComment: this.props.setComment, handleCancel: this.handleCancel, handleClose: this.handleClose, handleRemove: this.handleRemove, updatePopper: this.updatePopper, handleCite: this.handleCite, canEdit: capabilities.editCitationsAndRefs, citation: citation, updateCitation: updateCitation, projectID: projectID, scheduleUpdate: this.props.popper.update })) : (React.createElement(CitationViewer, { items: items, setComment: this.props.setComment, scheduleUpdate: this.props.popper.update }));
-            renderReactComponent(component, this.popperContainer);
-            this.props.popper.show(this.dom, this.popperContainer, 'right');
+            const items = Array.from(bib.bibliographyItems.values());
+            if (can.editArticle) {
+                const query = this.node.attrs.selectedText;
+                const componentProps = {
+                    query,
+                    rids,
+                    items,
+                    citationCounts: bib.citationCounts,
+                    sources: [crossref],
+                    onCite: this.handleCite,
+                    onUncite: this.handleUncite,
+                    onSave: this.handleSave,
+                    onDelete: this.handleDelete,
+                    onComment: this.handleComment,
+                    onCancel: this.handleCancel,
+                    canEdit: can.editCitationsAndRefs,
+                };
+                this.editor = ReactSubView(this.props, CitationEditorWrapper, componentProps, this.node, this.getPos, this.view, 'citation-editor');
+            }
+            else {
+                const componentProps = {
+                    rids,
+                    items,
+                };
+                this.editor = ReactSubView(this.props, CitationViewer, componentProps, this.node, this.getPos, this.view, 'citation-editor');
+            }
+            this.props.popper.show(this.dom, this.editor, 'right');
         };
-        this.handleClose = () => {
+        this.handleCancel = () => {
             const selection = TextSelection.create(this.view.state.tr.doc, this.getPos() + 1);
             this.view.dispatch(this.view.state.tr.setSelection(selection));
             this.props.popper.destroy();
         };
-        this.handleCancel = () => {
-            const { state } = this.view;
-            const pos = this.getPos();
-            const tr = state.tr.delete(pos, pos + this.node.nodeSize);
-            const selection = TextSelection.create(tr.doc, pos);
-            this.view.dispatch(tr.setSelection(selection));
+        this.handleSave = (item) => {
+            if (item._id && !this.findPosition(item._id)) {
+                this.insertBibliographyNode(item);
+            }
+            else {
+                const node = this.decoder.decode(item);
+                this.updateNodeAttrs(node.attrs);
+            }
         };
-        this.handleRemove = (id) => __awaiter(this, void 0, void 0, function* () {
+        this.handleUncite = (id) => {
             const citation = this.getCitation();
             const items = citation.embeddedCitationItems.filter((i) => i.bibliographyItem !== id);
             if (items.length > 0) {
@@ -115,23 +115,19 @@ export class CitationEditableView extends CitationView {
                 this.view.dispatch(tr);
             }
             this.props.popper.destroy();
-        });
-        this.updatePopper = () => {
-            this.props.popper.destroy();
-            window.setTimeout(() => {
-                this.showPopper();
-            }, 100);
         };
-        this.handleCite = (items) => __awaiter(this, void 0, void 0, function* () {
+        this.handleCite = (items) => {
             const bib = getBibliographyPluginState(this.view.state);
             const citation = this.getCitation();
+            const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
+            items = items.filter((i) => !rids.includes(i._id));
             for (const item of items) {
                 const existingItem = findMatchingBibliographyItem(item, bib.bibliographyItems);
                 if (existingItem) {
                     item._id = existingItem._id;
                 }
                 else {
-                    this.insertBibliographyNode(this.view, item);
+                    this.insertBibliographyNode(item);
                 }
                 citation.embeddedCitationItems.push({
                     _id: '_',
@@ -140,20 +136,15 @@ export class CitationEditableView extends CitationView {
                 });
             }
             this.updateNode(citation);
-            this.handleClose();
-        });
-        this.importItems = (items) => __awaiter(this, void 0, void 0, function* () {
-            const bib = getBibliographyPluginState(this.view.state);
-            const newItems = [];
-            for (const item of items) {
-                const existingItem = findMatchingBibliographyItem(item, bib.bibliographyItems);
-                if (!existingItem) {
-                    this.insertBibliographyNode(this.view, item);
-                    newItems.push(item);
-                }
-            }
-            return newItems;
-        });
+            this.handleCancel();
+        };
+        this.handleDelete = (item) => {
+            return this.deleteNode(item._id);
+        };
+        this.handleComment = () => {
+            const comment = buildComment(this.node.attrs.id);
+            this.props.setComment(comment);
+        };
         this.updateNode = (citation) => {
             const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
             const { tr } = this.view.state;
@@ -162,28 +153,22 @@ export class CitationEditableView extends CitationView {
                 rids,
             }));
         };
+        this.findPosition = (id) => {
+            const doc = this.view.state.doc;
+            const children = findChildren(doc, (n) => n.attrs.id === id);
+            return children.length ? children[0] : undefined;
+        };
     }
-    insertBibliographyNode(view, item) {
-        const { doc, tr } = view.state;
-        const { DOI: doi, ['container-title']: containerTitle } = item, restAttr = __rest(item, ["DOI", 'container-title']);
-        let bibElement = null;
-        let pos = null;
-        doc.descendants((node, nodePos) => {
-            if (node.type === schema.nodes.bibliography_element) {
-                bibElement = node;
-                pos = nodePos;
-            }
-        });
-        let newTr;
-        const bibItem = schema.nodes.bibliography_item.create(Object.assign({ id: item._id, doi,
-            containerTitle }, restAttr));
-        if (bibElement && pos) {
-            newTr = tr.insert(pos + 1, bibItem);
+    insertBibliographyNode(item) {
+        const { doc, tr } = this.view.state;
+        const elements = findChildrenByType(doc, schema.nodes.bibliography_element, true);
+        const node = this.decoder.decode(item);
+        if (elements.length) {
+            this.view.dispatch(tr.insert(elements[0].pos + 1, node));
         }
         else {
-            newTr = tr.insert(tr.doc.content.size, createBibliographySection(bibItem));
+            this.view.dispatch(tr.insert(tr.doc.content.size, createBibliographySection(node)));
         }
-        view.dispatch(newTr);
         return false;
     }
 }

package/dist/es/views/cross_reference_editable.js

@@ -24,34 +24,36 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { skipTracking } from '@manuscripts/track-changes-plugin';
 import { TextSelection } from 'prosemirror-state';
-import React from 'react';
 import { CrossReferenceItems } from '../components/views/CrossReferenceItems';
 import { objectsKey } from '../plugins/objects';
 import { createEditableNodeView } from './creators';
 import { CrossReferenceView } from './cross_reference';
+import ReactSubView from './ReactSubView';
 export class CrossReferenceEditableView extends CrossReferenceView {
     constructor() {
         super(...arguments);
         this.selectNode = () => {
-            const { getCapabilities, renderReactComponent } = this.props;
+            const { getCapabilities } = this.props;
             const xref = this.node;
             const rids = xref.attrs.rids;
             const can = getCapabilities();
             if (!(can === null || can === void 0 ? void 0 : can.editArticle) || rids.length) {
                 return;
             }
-            if (!this.popperContainer) {
-                this.popperContainer = document.createElement('div');
-                this.popperContainer.className = 'cross-reference-editor';
-            }
-            renderReactComponent(React.createElement(CrossReferenceItems, { handleSelect: this.handleSelect, targets: this.getTargets(), handleCancel: this.handleCancel, currentTargetId: rids[0], currentCustomLabel: this.node.attrs.customLabel }), this.popperContainer);
+            const componentProps = {
+                handleSelect: this.handleSelect,
+                targets: this.getTargets(),
+                handleCancel: this.handleCancel,
+                currentTargetId: rids[0],
+                currentCustomLabel: this.node.attrs.customLabel,
+            };
+            this.popperContainer = ReactSubView(this.props, CrossReferenceItems, componentProps, this.node, this.getPos, this.view, 'cross-reference-editor');
             this.props.popper.show(this.dom, this.popperContainer, 'right');
         };
         this.destroy = () => {
+            var _a;
             this.props.popper.destroy();
-            if (this.popperContainer) {
-                this.props.unmountReactComponent(this.popperContainer);
-            }
+            (_a = this.popperContainer) === null || _a === void 0 ? void 0 : _a.remove();
         };
         this.deselectNode = () => {
             this.handleCancel();

package/dist/es/views/editable_block.js

@@ -22,7 +22,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { nodeNames, schema, } from '@manuscripts/transform';
+import { nodeNames, schema } from '@manuscripts/transform';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { ContextMenu } from '../lib/context-menu';
 const isNotNull = (a) => a !== null;