@manuscripts/body-editor 2.5.6-date-fix.0 → 2.5.7

package/dist/es/plugins/placeholder.js

@@ -13,30 +13,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { isFootnoteNode, isGeneralTableFootnoteNode, } from '@manuscripts/transform';
 import { Plugin, TextSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-export const placeholderWidget = (placeholder) => (view, getPos) => {
+const placeholderWidget = (placeholder) => (view, getPos) => {
     const element = document.createElement('span');
     element.className = 'placeholder-text';
     element.textContent = placeholder;
     element.addEventListener('click', (event) => {
         event.preventDefault();
-        view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.tr.doc, getPos())));
+        const pos = getPos();
+        const selection = TextSelection.create(view.state.tr.doc, pos);
+        view.dispatch(view.state.tr.setSelection(selection));
     });
     return element;
 };
+const getParagraphPlaceholderText = (parent) => {
+    if (!parent || parent.textContent.length) {
+        return;
+    }
+    if (isFootnoteNode(parent) || isGeneralTableFootnoteNode(parent)) {
+        return 'Type new footnote here';
+    }
+};
 export default () => new Plugin({
     props: {
         decorations: (state) => {
             const decorations = [];
-            const decorate = (node, pos) => {
-                const { placeholder } = node.attrs;
-                if (placeholder &&
-                    !node.isAtom &&
-                    node.type.isBlock &&
-                    node.childCount === 0) {
+            state.doc.descendants((node, pos, parent) => {
+                if (!node.isAtom && node.type.isBlock && node.childCount === 0) {
                     if (node.type === node.type.schema.nodes.paragraph) {
-                        decorations.push(Decoration.widget(pos + 1, placeholderWidget(placeholder)));
+                        const text = getParagraphPlaceholderText(parent);
+                        if (text) {
+                            decorations.push(Decoration.widget(pos + 1, placeholderWidget(text)));
+                        }
                     }
                     else {
                         decorations.push(Decoration.node(pos, pos + node.nodeSize, {
@@ -44,8 +54,7 @@ export default () => new Plugin({
                         }));
                     }
                 }
-            };
-            state.doc.descendants(decorate);
+            });
             return DecorationSet.create(state.doc, decorations);
         },
     },

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

@@ -68,7 +68,7 @@ export const defaultEditorProps = {
         upload: () => { },
         download: () => { },
     },
-    getCapabilities: () => getAllPermitted(),
+    getCapabilities: () => (Object.assign(Object.assign({}, getAllPermitted()), { editWithoutTracking: true })),
     cslProps: {
         style: '',
         locale: '',

package/dist/es/testing/setup-editor.js

@@ -48,6 +48,7 @@ export function setupEditor() {
             left: 0,
             right: 0,
         },
+        handleScrollToSelection: () => true,
         nodeViews: createNodeViews(props, () => { }),
     });
     return ProsemirrorTestChain.of(view);

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.5.6-date-fix.0';
+export const VERSION = '2.5.7';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/editable_block.js

@@ -68,7 +68,7 @@ export const EditableBlock = (Base) => {
             this.createMenu = () => {
                 return new ContextMenu(this.node, this.view, this.getPos, {
                     addComment: true,
-                }, this.props);
+                });
             };
         }
     };

package/dist/es/views/footnote.js

@@ -13,22 +13,127 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getChangeClasses } from '../lib/track-changes-utils';
-import BlockView from './block_view';
-import { createNodeOrElementView } from './creators';
-export class FootnoteView extends BlockView {
+import { schema } from '@manuscripts/transform';
+import { isEqual } from 'lodash';
+import { NodeSelection } from 'prosemirror-state';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { DeleteFootnoteDialog, } from '../components/views/DeleteFootnoteDialog';
+import { alertIcon, deleteIcon } from '../icons';
+import { getFootnotesElementState } from '../lib/footnotes';
+import { getChangeClasses, isDeleted } from '../lib/track-changes-utils';
+import { BaseNodeView } from './base_node_view';
+import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
+export class FootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
-        this.elementType = 'div';
+        this.initialise = () => {
+            this.dom = document.createElement('div');
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('footnote-text');
+            this.updateContents();
+        };
+        this.updateContents = () => {
+            const id = this.node.attrs.id;
+            const fn = getFootnotesElementState(this.view.state, id);
+            if (!fn) {
+                return;
+            }
+            const marker = document.createElement('span');
+            if (!isDeleted(this.node) && fn.unusedFootnoteIDs.has(id)) {
+                marker.classList.add('uncited-footnote');
+                marker.innerHTML = alertIcon;
+            }
+            else {
+                marker.classList.add('footnote-marker');
+                marker.innerText = fn.labels.get(id) || '';
+                marker.addEventListener('mousedown', (e) => this.handleMarkerClick(e));
+            }
+            const deleteBtn = document.createElement('span');
+            deleteBtn.classList.add('delete-icon');
+            deleteBtn.innerHTML = deleteIcon;
+            deleteBtn.addEventListener('mousedown', (e) => this.handleDeleteClick(e));
+            this.dom.innerHTML = '';
+            this.dom.classList.value = '';
+            this.dom.classList.add('footnote');
+            this.dom.classList.add(...getChangeClasses(this.node.attrs.dataTracked));
+            this.dom.appendChild(marker);
+            this.contentDOM && this.dom.appendChild(this.contentDOM);
+            this.dom.appendChild(deleteBtn);
+        };
+        this.handleMarkerClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const id = this.node.attrs.id;
+            const fn = getFootnotesElementState(this.view.state, id);
+            if (!fn) {
+                return;
+            }
+            for (const [node, pos] of fn.inlineFootnotes) {
+                if (node.attrs.rids.includes(id)) {
+                    const tr = this.view.state.tr;
+                    const selection = NodeSelection.create(this.view.state.doc, pos);
+                    tr.setSelection(selection);
+                    tr.scrollIntoView();
+                    this.view.dispatch(tr);
+                }
+            }
+        };
+        this.handleDeleteClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const componentProps = {
+                header: 'Delete footnote',
+                message: 'This action will entirely remove the footnote from the list because it will no longer be used.',
+                handleDelete: this.handleDelete,
+            };
+            this.dialog = ReactSubView(this.props, DeleteFootnoteDialog, componentProps, this.node, this.getPos, this.view);
+            this.props.popper.show(this.dom, this.dialog, 'auto', false);
+        };
+        this.handleDelete = () => {
+            const tr = this.view.state.tr;
+            this.deleteInlineFootnotes(tr);
+            this.deleteFootnote(tr);
+            this.view.dispatch(tr);
+        };
+        this.deleteInlineFootnotes = (tr) => {
+            const id = this.node.attrs.id;
+            const fns = getFootnotesElementState(this.view.state, this.node.attrs.id);
+            fns === null || fns === void 0 ? void 0 : fns.inlineFootnotes.forEach(([node, pos]) => {
+                pos = tr.mapping.map(pos);
+                const rids = node.attrs.rids.filter((rid) => rid !== id);
+                if (isEqual(rids, node.attrs.rids)) {
+                    return;
+                }
+                if (!rids.length) {
+                    tr.delete(pos, pos + node.nodeSize);
+                }
+                else {
+                    tr.setNodeAttribute(pos, 'rids', rids);
+                }
+            });
+        };
+        this.deleteFootnote = (tr) => {
+            const pos = tr.mapping.map(this.getPos());
+            const $pos = tr.doc.resolve(pos);
+            const element = findParentNodeOfTypeClosestToPos($pos, schema.nodes.footnotes_element);
+            if (element && getEffectiveChildCount(element.node) <= 1) {
+                tr.delete(element.pos, element.pos + element.node.nodeSize);
+            }
+            else {
+                tr.delete(pos, pos + this.node.nodeSize);
+            }
+        };
     }
 }
-export const setTCClasses = (node, dom) => {
-    const dataTracked = node.attrs.dataTracked;
-    if (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.length) {
-        const lastChange = dataTracked[dataTracked.length - 1];
-        const changeClasses = getChangeClasses([lastChange]);
-        dom.classList.add(...changeClasses);
+const getEffectiveChildCount = (node) => {
+    let count = 0;
+    for (let i = 0; i < node.childCount; i++) {
+        const child = node.child(i);
+        if (!isDeleted(child)) {
+            count++;
+        }
     }
-    dom.setAttribute('id', node.attrs.id);
+    return count;
 };
-export default createNodeOrElementView(FootnoteView, 'div', setTCClasses);
+export default createNodeView(FootnoteView);

package/dist/es/views/footnotes_element.js

@@ -13,13 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { getChangeClasses } from '../lib/track-changes-utils';
 import BlockView from './block_view';
 import { createNodeOrElementView } from './creators';
-import { setTCClasses } from './footnote';
 export class FootnotesElementView extends BlockView {
     constructor() {
         super(...arguments);
         this.elementType = 'div';
+        this.updateClasses = () => {
+            updateClasses(this.node, this.dom);
+        };
         this.checkEditability = () => {
             var _a, _b;
             const editable = this.props.getCapabilities().editArticle && this.node.childCount
@@ -33,4 +36,9 @@ export class FootnotesElementView extends BlockView {
         this.checkEditability();
     }
 }
-export default createNodeOrElementView(FootnotesElementView, 'div', setTCClasses);
+const updateClasses = (node, dom) => {
+    !node.childCount && dom.classList.add('empty-node');
+    dom.classList.add('footnotes-element');
+    dom.classList.add(...getChangeClasses(node.attrs.dataTracked));
+};
+export default createNodeOrElementView(FootnotesElementView, 'div', updateClasses);

package/dist/es/views/general_table_footnote.js

@@ -0,0 +1,76 @@
+/*!
+ * © 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.
+ */
+import { schema } from '@manuscripts/transform';
+import { findChildrenByType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
+import { DeleteFootnoteDialog, } from '../components/views/DeleteFootnoteDialog';
+import { deleteIcon } from '../icons';
+import { getChangeClasses, isDeleted } from '../lib/track-changes-utils';
+import { BaseNodeView } from './base_node_view';
+import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
+export class GeneralTableFootnoteView extends BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.initialise = () => {
+            this.dom = document.createElement('div');
+            this.contentDOM = document.createElement('div');
+            this.contentDOM.classList.add('footnote-text');
+            this.updateContents();
+        };
+        this.updateContents = () => {
+            const deleteBtn = document.createElement('span');
+            deleteBtn.classList.add('delete-icon');
+            deleteBtn.innerHTML = deleteIcon;
+            deleteBtn.addEventListener('mousedown', (e) => this.handleClick(e));
+            this.dom.innerHTML = '';
+            this.dom.classList.value = '';
+            this.dom.classList.add('footnote', 'general-table-footnote');
+            this.dom.classList.add(...getChangeClasses(this.node.attrs.dataTracked));
+            this.contentDOM && this.dom.appendChild(this.contentDOM);
+            this.dom.appendChild(deleteBtn);
+        };
+        this.handleClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const componentProps = {
+                header: 'Delete table general note',
+                message: 'This action will entirely remove the table general note.',
+                handleDelete: this.handleDelete,
+            };
+            this.dialog = ReactSubView(this.props, DeleteFootnoteDialog, componentProps, this.node, this.getPos, this.view);
+            this.props.popper.show(this.dom, this.dialog, 'auto', false);
+        };
+        this.handleDelete = () => {
+            const tr = this.view.state.tr;
+            const pos = this.getPos();
+            const $pos = this.view.state.doc.resolve(pos);
+            const footer = findParentNodeOfTypeClosestToPos($pos, schema.nodes.table_element_footer);
+            const element = findChildrenByType(footer.node, schema.nodes.footnotes_element)[0];
+            if (element && !isDeleted(element.node)) {
+                const from = pos;
+                const to = from + this.node.nodeSize;
+                tr.delete(from, to);
+            }
+            else {
+                const from = footer.pos;
+                const to = from + footer.node.nodeSize;
+                tr.delete(from, to);
+            }
+            this.view.dispatch(tr);
+        };
+    }
+}
+export default createNodeView(GeneralTableFootnoteView);

package/dist/es/views/inline_footnote.js

@@ -14,21 +14,17 @@
  * limitations under the License.
  */
 import { ContextMenu } from '@manuscripts/style-guide';
-import { schema, } from '@manuscripts/transform';
-import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { findChildrenByType, findParentNodeClosestToPos, } from 'prosemirror-utils';
-import { createFootnote, insertFootnote, insertTableFootnote, } from '../commands';
-import { FootnotesSelector } from '../components/views/FootnotesSelector';
-import { buildTableFootnoteLabels } from '../lib/footnotes';
+import { isTableElementNode, } from '@manuscripts/transform';
+import { TextSelection } from 'prosemirror-state';
+import { FootnotesSelector, } from '../components/views/FootnotesSelector';
+import { createFootnote, findFootnotesContainerNode, getFootnotesElementState, } from '../lib/footnotes';
 import { getChangeClasses, isDeleted, isPendingInsert, } from '../lib/track-changes-utils';
-import { footnotesKey } from '../plugins/footnotes';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
 export class InlineFootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
-        this.findParentTableElement = () => findParentNodeClosestToPos(this.view.state.doc.resolve(this.getPos()), (node) => node.type === schema.nodes.table_element);
         this.showContextMenu = () => {
             this.props.popper.destroy();
             const componentProps = {
@@ -37,7 +33,7 @@ export class InlineFootnoteView extends BaseNodeView {
                         label: 'Edit',
                         action: () => {
                             this.props.popper.destroy();
-                            this.activateGenericFnModal();
+                            this.showFootnotesSelector();
                         },
                         icon: 'Edit',
                     },
@@ -46,93 +42,66 @@ export class InlineFootnoteView extends BaseNodeView {
             this.props.popper.show(this.dom, ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu'), 'right-start', false);
         };
         this.handleClick = () => {
-            if (isDeleted(this.node)) {
+            if (isDeleted(this.node) || !this.props.getCapabilities().editArticle) {
                 return;
             }
-            const tableElement = this.findParentTableElement();
-            if (tableElement) {
-                this.activateModal({
-                    notes: this.getNotes(tableElement),
-                    onAdd: this.onAdd,
-                });
+            if (this.isTableFootnote) {
+                this.showFootnotesSelector();
             }
             else {
                 this.showContextMenu();
             }
         };
-        this.scrollToReferenced = () => {
-            var _a;
-            if ((_a = this.node.attrs.rids) === null || _a === void 0 ? void 0 : _a.length) {
-                let nodePos = undefined;
-                this.view.state.doc.descendants((node, pos) => {
-                    if (node.attrs.id === this.node.attrs.rids[0]) {
-                        nodePos = pos;
-                    }
-                });
-                if (nodePos && this.props.dispatch) {
-                    const sel = TextSelection.near(this.view.state.doc.resolve(nodePos + 1));
-                    this.props.dispatch(this.view.state.tr.setSelection(sel).scrollIntoView());
-                }
-            }
-        };
-        this.activateGenericFnModal = () => {
+        this.showFootnotesSelector = () => {
             if (!this.props.getCapabilities().editArticle) {
                 return;
             }
-            const fnState = footnotesKey.getState(this.view.state);
-            if (fnState) {
-                this.activateModal({
-                    notes: Array.from(fnState.unusedFootnotes.values()).reduce((acc, n) => {
-                        const node = n[0];
-                        if (!isDeleted(node)) {
-                            acc.push({
-                                node,
-                            });
-                        }
-                        return acc;
-                    }, []),
-                    onCancel: () => {
-                        const { tr } = this.view.state;
-                        if (this.node.attrs.rids.length) {
-                            this.view.dispatch(tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
-                        }
-                        this.destroy();
-                    },
-                    onAdd: () => {
-                        const footnote = createFootnote(this.view.state, 'footnote');
-                        const tr = insertFootnote(this.view.state, this.view.state.tr, footnote);
-                        tr.setNodeAttribute(tr.mapping.map(this.getPos()), 'rids', [
-                            footnote.attrs.id,
-                        ]);
-                        this.view.dispatch(tr);
-                        this.view.focus();
-                        this.destroy();
-                    },
-                    addNewLabel: 'Replace with new footnote',
-                });
-                return true;
+            const state = this.view.state;
+            const pos = this.getPos();
+            const container = findFootnotesContainerNode(state.doc, pos);
+            const fn = getFootnotesElementState(state, container.node.attrs.id);
+            if (!fn) {
+                return [];
             }
-            return false;
+            const rids = this.node.attrs.rids;
+            const footnotes = fn.footnotes
+                .map((n) => n[0])
+                .filter((n) => fn.unusedFootnoteIDs.has(n.attrs.id) || rids.includes(n.attrs.id));
+            const props = {
+                footnotes,
+                inlineFootnote: this.node,
+                labels: fn.labels,
+                onCancel: this.handleCancel,
+                onAdd: this.handleAdd,
+                onInsert: this.handleInsert,
+            };
+            this.popperContainer = ReactSubView(this.props, FootnotesSelector, props, this.node, this.getPos, this.view, 'footnote-editor');
+            this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.updateContents = () => {
-            const attrs = this.node.attrs;
-            this.dom.setAttribute('rids', attrs.rids.join(','));
-            this.dom.setAttribute('contents', attrs.contents);
             this.dom.className = [
-                'footnote',
+                'footnote-marker',
                 ...getChangeClasses(this.node.attrs.dataTracked),
             ].join(' ');
-            if (this.isSelected() &&
-                (!attrs.rids || !attrs.rids.length) &&
-                !this.findParentTableElement()) {
-                this.activateGenericFnModal();
+            const state = this.view.state;
+            const fn = getFootnotesElementState(state, this.node.attrs.id);
+            if (!fn) {
+                return;
             }
+            this.dom.innerText = fn.labels.get(this.node.attrs.id) || '';
         };
         this.initialise = () => {
             this.dom = this.createDOM();
-            this.dom.classList.add('footnote');
+            this.dom.classList.add('footnote-marker');
             this.dom.addEventListener('click', this.handleClick);
             this.updateContents();
+            const container = findFootnotesContainerNode(this.view.state.doc, this.getPos());
+            this.isTableFootnote = isTableElementNode(container.node);
+        };
+        this.selectNode = () => {
+            if (!this.node.attrs.rids.length) {
+                this.showFootnotesSelector();
+            }
         };
         this.ignoreMutation = () => true;
         this.createDOM = () => {
@@ -143,71 +112,52 @@ export class InlineFootnoteView extends BaseNodeView {
             this.props.popper.destroy();
             (_a = this.popperContainer) === null || _a === void 0 ? void 0 : _a.remove();
         };
-        this.getNotes = (tableElement) => {
-            var _a;
-            const footnotesElement = (_a = findChildrenByType(tableElement.node, schema.nodes.footnotes_element).pop()) === null || _a === void 0 ? void 0 : _a.node;
-            let footnotes = [];
-            if (footnotesElement) {
-                const tablesFootnoteLabels = buildTableFootnoteLabels(tableElement.node);
-                footnotes = findChildrenByType(footnotesElement, schema.nodes.footnote)
-                    .filter(({ node }) => !isDeleted(node))
-                    .map(({ node }) => ({
-                    node: node,
-                    index: tablesFootnoteLabels.get(node.attrs.id),
-                }));
+        this.handleCancel = () => {
+            const tr = this.view.state.tr;
+            const rids = this.node.attrs.rids;
+            if (!rids.length) {
+                const pos = this.getPos();
+                tr.delete(pos, pos + this.node.nodeSize);
+                this.view.dispatch(tr);
             }
-            return footnotes;
+            this.destroy();
         };
-        this.onAdd = () => {
-            const tableElement = this.findParentTableElement();
-            if (tableElement) {
-                insertTableFootnote(tableElement.node, tableElement.pos, this.view, {
-                    node: this.node,
-                    pos: this.getPos(),
-                });
-                this.destroy();
+        this.handleAdd = () => {
+            const state = this.view.state;
+            const pos = this.getPos();
+            const container = findFootnotesContainerNode(state.doc, pos);
+            const fn = getFootnotesElementState(state, container.node.attrs.id);
+            if (!fn) {
+                return;
             }
+            const tr = this.view.state.tr;
+            const footnote = createFootnote();
+            const rids = this.node.attrs.rids;
+            tr.setNodeAttribute(pos, 'rids', [...rids, footnote.attrs.id]);
+            const fnPos = fn.element[1] + fn.element[0].nodeSize - 1;
+            tr.insert(fnPos, footnote);
+            const selection = TextSelection.create(tr.doc, fnPos + 2);
+            tr.setSelection(selection).scrollIntoView();
+            this.view.dispatch(tr);
+            this.view.focus();
+            this.destroy();
         };
-        this.onInsert = (notes) => {
-            if (notes.length) {
-                const contents = this.node.attrs.contents
-                    .split(',')
-                    .map((n) => parseInt(n));
-                const rids = notes.map((note) => note.node.attrs.id);
-                const { tr } = this.view.state;
+        this.handleInsert = (footnotes) => {
+            if (footnotes.length) {
+                const pos = this.getPos();
+                const rids = footnotes.map((note) => note.attrs.id);
+                const tr = this.view.state.tr;
                 if (rids.length) {
-                    this.view.dispatch(tr.setNodeMarkup(this.getPos(), undefined, {
-                        rids,
-                        contents: notes
-                            .map(({ index }) => (index ? index : Math.max(...contents) + 1))
-                            .join(),
-                    }));
+                    tr.setNodeAttribute(pos, 'rids', rids);
+                    this.view.dispatch(tr);
                 }
                 else if (isPendingInsert(this.node)) {
-                    this.view.dispatch(tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
+                    tr.delete(pos, pos + this.node.nodeSize);
+                    this.view.dispatch(tr);
                 }
             }
             this.destroy();
         };
     }
-    isSelected() {
-        const sel = this.view.state.selection;
-        const juxtaposed = sel.$head.pos === sel.$anchor.pos &&
-            sel.$head.pos === this.getPos() + this.node.nodeSize;
-        if ((sel instanceof NodeSelection && sel.node == this.node) || juxtaposed) {
-            return true;
-        }
-        return false;
-    }
-    activateModal(modalProps) {
-        const defaultModal = {
-            notes: [],
-            onInsert: this.onInsert,
-            onCancel: this.destroy,
-            inlineFootnote: this.node,
-        };
-        this.popperContainer = ReactSubView(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), FootnotesSelector, Object.assign(Object.assign({}, defaultModal), modalProps), this.node, this.getPos, this.view, 'footnote-editor');
-        this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
-    }
 }
 export default createNodeView(InlineFootnoteView);

package/dist/es/views/table_element_footer.js

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 import { BaseNodeView } from './base_node_view';
-import { createNodeView } from './creators';
-export class TableElementFooterView extends BaseNodeView {
+import { createEditableNodeView } from './creators';
+class TableElementFooterView extends BaseNodeView {
     constructor() {
         super(...arguments);
         this.initialise = () => {
@@ -25,9 +25,8 @@ export class TableElementFooterView extends BaseNodeView {
             this.dom = document.createElement('div');
             this.dom.classList.add('table-footer');
             this.dom.setAttribute('id', this.node.attrs.id);
-            this.contentDOM = document.createElement('div');
-            this.dom.appendChild(this.contentDOM);
+            this.contentDOM = this.dom;
         };
     }
 }
-export default createNodeView(TableElementFooterView);
+export default createEditableNodeView(TableElementFooterView);