@manuscripts/body-editor 1.7.9 → 1.7.10-LEAN-3338-1

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertTableFootnote = exports.updateCommentAnnotationState = exports.addComment = exports.deleteHighlightMarkers = exports.insertHighlight = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.ifInTableBody = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertFileAsFigure = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
+exports.insertTableFootnote = exports.updateCommentAnnotationState = exports.addComment = exports.deleteHighlightMarkers = exports.insertHighlight = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.ifInTableBody = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertFileAsFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -122,6 +122,32 @@ const createBlock = (nodeType, position, state, dispatch) => {
     }
 };
 exports.createBlock = createBlock;
+const insertGeneralFootnote = (tableNode, position, view, tableElementFooter) => {
+    var _a;
+    const { state, dispatch } = view;
+    const generalNote = state.schema.nodes.paragraph.create({
+        placeholder: 'Add general note here',
+    });
+    const tr = state.tr;
+    const pos = (tableElementFooter === null || tableElementFooter === void 0 ? void 0 : tableElementFooter.length)
+        ? position + tableElementFooter[0].pos + 2
+        : position + (((_a = tableNode.content.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize) || 0);
+    if (tableElementFooter === null || tableElementFooter === void 0 ? void 0 : tableElementFooter.length) {
+        tr.insert(pos, generalNote);
+    }
+    else {
+        const tableElementFooter = transform_1.schema.nodes.table_element_footer.create({
+            id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.TableElementFooter),
+        }, [generalNote]);
+        tr.insert(pos, tableElementFooter);
+    }
+    if (dispatch && pos) {
+        const selection = (0, exports.createSelection)(state.schema.nodes.paragraph, pos, tr.doc);
+        view === null || view === void 0 ? void 0 : view.focus();
+        dispatch(tr.setSelection(selection).scrollIntoView());
+    }
+};
+exports.insertGeneralFootnote = insertGeneralFootnote;
 const insertFileAsFigure = (file, state, dispatch) => {
     const position = findBlockInsertPosition(state);
     if (position === null || !dispatch) {
@@ -281,17 +307,18 @@ const insertInlineFootnote = (kind) => (state, dispatch) => {
         id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.Footnote),
         kind,
     });
-    const insertedAt = state.selection.to;
     const node = state.schema.nodes.inline_footnote.create({
         rids: [footnote.attrs.id],
     });
-    const tr = state.tr;
+    const insertedAt = state.selection.to;
+    const { tr } = state;
     tr.insert(insertedAt, node);
     const footnotesSection = (0, prosemirror_utils_1.findChildrenByType)(tr.doc, transform_1.schema.nodes.footnotes_section)[0];
     let selectionPos;
     if (!footnotesSection) {
+        const sectionTitle = 'Footnotes';
         const section = state.schema.nodes.footnotes_section.create({}, [
-            state.schema.nodes.section_title.create({}, state.schema.text('Notes')),
+            state.schema.nodes.section_title.create({}, state.schema.text(sectionTitle)),
             state.schema.nodes.footnotes_element.create({}, footnote),
         ]);
         const backmatter = (0, prosemirror_utils_1.findChildrenByType)(tr.doc, transform_1.schema.nodes.backmatter)[0];
@@ -300,10 +327,25 @@ const insertInlineFootnote = (kind) => (state, dispatch) => {
     }
     else {
         const footnoteElement = (0, prosemirror_utils_1.findChildrenByType)(footnotesSection.node, transform_1.schema.nodes.footnotes_element);
-        const pos = footnotesSection.pos +
-            footnoteElement[0].pos +
-            footnoteElement[0].node.nodeSize -
-            1;
+        let index = 0;
+        state.doc.slice(0, insertedAt).content.descendants((node) => {
+            if (node.type === transform_1.schema.nodes.inline_footnote) {
+                index++;
+                return false;
+            }
+        });
+        let correctPosition = 0;
+        if (index != 0) {
+            footnoteElement[0].node.descendants((node, pos, parent, nodeIndex) => {
+                if (node.type === transform_1.schema.nodes.footnote) {
+                    if (index > nodeIndex) {
+                        correctPosition = pos + node.nodeSize;
+                        return false;
+                    }
+                }
+            });
+        }
+        const pos = footnotesSection.pos + footnoteElement[0].pos + correctPosition + 2;
         tr.insert(pos, footnote);
         selectionPos = pos + 2;
     }

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

@@ -135,6 +135,7 @@ class ContextMenu {
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
+            var _a;
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -167,6 +168,16 @@ class ContextMenu {
             }
             if (type === transform_1.schema.nodes.table_element) {
                 const isInTable = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table)(this.view.state.selection);
+                const tableElementFooter = (0, prosemirror_utils_1.findChildrenByType)(this.node, transform_1.schema.nodes.table_element_footer);
+                const hasGeneralNote = tableElementFooter.length &&
+                    ((_a = tableElementFooter[0].node.firstChild) === null || _a === void 0 ? void 0 : _a.type) === transform_1.schema.nodes.paragraph;
+                if (!hasGeneralNote) {
+                    menu.appendChild(this.createMenuSection((section) => {
+                        section.appendChild(this.createMenuItem('Add General Note', () => {
+                            (0, commands_1.insertGeneralFootnote)(this.node, this.getPos(), this.view, tableElementFooter);
+                        }));
+                    }));
+                }
                 if (isInTable) {
                     menu.appendChild(this.createMenuSection((section) => {
                         section.appendChild(this.createMenuItem('Add Reference Note', () => {

package/dist/cjs/lib/utils.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMetaNode = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = exports.iterateChildren = void 0;
+exports.createFootnoteLabel = exports.isMetaNode = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = exports.iterateChildren = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 function* iterateChildren(node, recurse = false) {
@@ -62,3 +62,15 @@ const isMetaNode = (nodeType) => nodeType === transform_1.schema.nodes.bibliogra
     nodeType === transform_1.schema.nodes.affiliation.name ||
     nodeType === transform_1.schema.nodes.contributor.name;
 exports.isMetaNode = isMetaNode;
+const createFootnoteLabel = (id) => {
+    const _id = parseInt(id, 10) + 1;
+    const START = 96;
+    const RANGE = 26;
+    const id1 = _id % RANGE || RANGE;
+    const id2 = Math.ceil(_id / RANGE);
+    const label = id2 === 1
+        ? String.fromCharCode(START + id1)
+        : `${String.fromCharCode(START + id2 - 1)}${String.fromCharCode(START + id1)}`;
+    return label;
+};
+exports.createFootnoteLabel = createFootnoteLabel;

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uncitedFootnoteWidget = exports.buildPluginState = exports.footnotesKey = void 0;
+exports.getFootnotesPluginState = exports.uncitedFootnoteWidget = exports.buildPluginState = exports.footnotesKey = void 0;
 const transform_1 = require("@manuscripts/transform");
 const lodash_1 = require("lodash");
 const prosemirror_state_1 = require("prosemirror-state");
@@ -36,7 +36,7 @@ const buildPluginState = (doc) => {
             parentNode.type !== transform_1.schema.nodes.table_cell) {
             nodes.push([node, pos]);
             node.attrs.rids.forEach((rid) => {
-                labels.set(rid, String(++index));
+                labels.set(rid, (0, utils_1.createFootnoteLabel)(String(index++)));
             });
         }
     });
@@ -45,8 +45,9 @@ const buildPluginState = (doc) => {
 exports.buildPluginState = buildPluginState;
 const scrollToInlineFootnote = (rid, view) => {
     view.state.doc.descendants((node, pos) => {
+        var _a;
         const footnote = node;
-        if (footnote.attrs.rids.includes(rid)) {
+        if ((_a = footnote.attrs.rids) === null || _a === void 0 ? void 0 : _a.includes(rid)) {
             const selection = prosemirror_state_1.NodeSelection.create(view.state.doc, pos);
             view.dispatch(view.state.tr.setSelection(selection).scrollIntoView());
         }
@@ -148,3 +149,7 @@ exports.default = () => {
         },
     });
 };
+const getFootnotesPluginState = (state) => {
+    return exports.footnotesKey.getState(state);
+};
+exports.getFootnotesPluginState = getFootnotesPluginState;

package/dist/cjs/views/inline_footnote.js

@@ -22,7 +22,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.handleClick = () => {
-            this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rid }));
+            this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rids[0] }));
         };
         this.updateContents = () => {
             this.setDomAttrs(this.node, this.dom);

package/dist/es/commands.js

@@ -113,6 +113,31 @@ export const createBlock = (nodeType, position, state, dispatch) => {
         dispatch(tr.setSelection(selection).scrollIntoView());
     }
 };
+export const insertGeneralFootnote = (tableNode, position, view, tableElementFooter) => {
+    var _a;
+    const { state, dispatch } = view;
+    const generalNote = state.schema.nodes.paragraph.create({
+        placeholder: 'Add general note here',
+    });
+    const tr = state.tr;
+    const pos = (tableElementFooter === null || tableElementFooter === void 0 ? void 0 : tableElementFooter.length)
+        ? position + tableElementFooter[0].pos + 2
+        : position + (((_a = tableNode.content.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize) || 0);
+    if (tableElementFooter === null || tableElementFooter === void 0 ? void 0 : tableElementFooter.length) {
+        tr.insert(pos, generalNote);
+    }
+    else {
+        const tableElementFooter = schema.nodes.table_element_footer.create({
+            id: generateID(ObjectTypes.TableElementFooter),
+        }, [generalNote]);
+        tr.insert(pos, tableElementFooter);
+    }
+    if (dispatch && pos) {
+        const selection = createSelection(state.schema.nodes.paragraph, pos, tr.doc);
+        view === null || view === void 0 ? void 0 : view.focus();
+        dispatch(tr.setSelection(selection).scrollIntoView());
+    }
+};
 export const insertFileAsFigure = (file, state, dispatch) => {
     const position = findBlockInsertPosition(state);
     if (position === null || !dispatch) {
@@ -263,17 +288,18 @@ export const insertInlineFootnote = (kind) => (state, dispatch) => {
         id: generateID(ObjectTypes.Footnote),
         kind,
     });
-    const insertedAt = state.selection.to;
     const node = state.schema.nodes.inline_footnote.create({
         rids: [footnote.attrs.id],
     });
-    const tr = state.tr;
+    const insertedAt = state.selection.to;
+    const { tr } = state;
     tr.insert(insertedAt, node);
     const footnotesSection = findChildrenByType(tr.doc, schema.nodes.footnotes_section)[0];
     let selectionPos;
     if (!footnotesSection) {
+        const sectionTitle = 'Footnotes';
         const section = state.schema.nodes.footnotes_section.create({}, [
-            state.schema.nodes.section_title.create({}, state.schema.text('Notes')),
+            state.schema.nodes.section_title.create({}, state.schema.text(sectionTitle)),
             state.schema.nodes.footnotes_element.create({}, footnote),
         ]);
         const backmatter = findChildrenByType(tr.doc, schema.nodes.backmatter)[0];
@@ -282,10 +308,25 @@ export const insertInlineFootnote = (kind) => (state, dispatch) => {
     }
     else {
         const footnoteElement = findChildrenByType(footnotesSection.node, schema.nodes.footnotes_element);
-        const pos = footnotesSection.pos +
-            footnoteElement[0].pos +
-            footnoteElement[0].node.nodeSize -
-            1;
+        let index = 0;
+        state.doc.slice(0, insertedAt).content.descendants((node) => {
+            if (node.type === schema.nodes.inline_footnote) {
+                index++;
+                return false;
+            }
+        });
+        let correctPosition = 0;
+        if (index != 0) {
+            footnoteElement[0].node.descendants((node, pos, parent, nodeIndex) => {
+                if (node.type === schema.nodes.footnote) {
+                    if (index > nodeIndex) {
+                        correctPosition = pos + node.nodeSize;
+                        return false;
+                    }
+                }
+            });
+        }
+        const pos = footnotesSection.pos + footnoteElement[0].pos + correctPosition + 2;
         tr.insert(pos, footnote);
         selectionPos = pos + 2;
     }

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

@@ -15,7 +15,7 @@
  */
 import { isInBibliographySection, nodeNames, schema, } from '@manuscripts/transform';
 import { findChildrenByType, hasParentNodeOfType } from 'prosemirror-utils';
-import { addComment, createBlock, insertTableFootnote } from '../commands';
+import { addComment, createBlock, insertGeneralFootnote, insertTableFootnote, } from '../commands';
 import { PopperManager } from './popper';
 const popper = new PopperManager();
 const listTypes = [schema.nodes.ordered_list, schema.nodes.bullet_list];
@@ -131,6 +131,7 @@ export class ContextMenu {
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
+            var _a;
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -163,6 +164,16 @@ export class ContextMenu {
             }
             if (type === schema.nodes.table_element) {
                 const isInTable = hasParentNodeOfType(schema.nodes.table)(this.view.state.selection);
+                const tableElementFooter = findChildrenByType(this.node, schema.nodes.table_element_footer);
+                const hasGeneralNote = tableElementFooter.length &&
+                    ((_a = tableElementFooter[0].node.firstChild) === null || _a === void 0 ? void 0 : _a.type) === schema.nodes.paragraph;
+                if (!hasGeneralNote) {
+                    menu.appendChild(this.createMenuSection((section) => {
+                        section.appendChild(this.createMenuItem('Add General Note', () => {
+                            insertGeneralFootnote(this.node, this.getPos(), this.view, tableElementFooter);
+                        }));
+                    }));
+                }
                 if (isInTable) {
                     menu.appendChild(this.createMenuSection((section) => {
                         section.appendChild(this.createMenuItem('Add Reference Note', () => {

package/dist/es/lib/utils.js

@@ -53,3 +53,14 @@ export const findParentElement = (selection, validIds) => findParentNode((node)
 export const isMetaNode = (nodeType) => nodeType === schema.nodes.bibliography_item.name ||
     nodeType === schema.nodes.affiliation.name ||
     nodeType === schema.nodes.contributor.name;
+export const createFootnoteLabel = (id) => {
+    const _id = parseInt(id, 10) + 1;
+    const START = 96;
+    const RANGE = 26;
+    const id1 = _id % RANGE || RANGE;
+    const id2 = Math.ceil(_id / RANGE);
+    const label = id2 === 1
+        ? String.fromCharCode(START + id1)
+        : `${String.fromCharCode(START + id2 - 1)}${String.fromCharCode(START + id1)}`;
+    return label;
+};

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

@@ -15,11 +15,11 @@
  */
 import { isFootnoteNode, isInlineFootnoteNode, schema, } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
-import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
+import { NodeSelection, Plugin, PluginKey, } from 'prosemirror-state';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { alertIcon } from '../../assets';
-import { findParentNodeWithIdValue } from '../../lib/utils';
+import { createFootnoteLabel, findParentNodeWithIdValue } from '../../lib/utils';
 import { placeholderWidget } from '../placeholder';
 import { findTableInlineFootnoteIds } from './footnotes-utils';
 export const footnotesKey = new PluginKey('footnotes');
@@ -33,7 +33,7 @@ export const buildPluginState = (doc) => {
             parentNode.type !== schema.nodes.table_cell) {
             nodes.push([node, pos]);
             node.attrs.rids.forEach((rid) => {
-                labels.set(rid, String(++index));
+                labels.set(rid, createFootnoteLabel(String(index++)));
             });
         }
     });
@@ -41,8 +41,9 @@ export const buildPluginState = (doc) => {
 };
 const scrollToInlineFootnote = (rid, view) => {
     view.state.doc.descendants((node, pos) => {
+        var _a;
         const footnote = node;
-        if (footnote.attrs.rids.includes(rid)) {
+        if ((_a = footnote.attrs.rids) === null || _a === void 0 ? void 0 : _a.includes(rid)) {
             const selection = NodeSelection.create(view.state.doc, pos);
             view.dispatch(view.state.tr.setSelection(selection).scrollIntoView());
         }
@@ -143,3 +144,6 @@ export default () => {
         },
     });
 };
+export const getFootnotesPluginState = (state) => {
+    return footnotesKey.getState(state);
+};

package/dist/es/views/inline_footnote.js

@@ -19,7 +19,7 @@ export class InlineFootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
         this.handleClick = () => {
-            this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rid }));
+            this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rids[0] }));
         };
         this.updateContents = () => {
             this.setDomAttrs(this.node, this.dom);

package/dist/types/commands.d.ts

@@ -18,6 +18,7 @@ import { FileAttachment } from '@manuscripts/style-guide';
 import { ManuscriptEditorState, ManuscriptEditorView, ManuscriptMarkType, ManuscriptNode, ManuscriptNodeType, ManuscriptTransaction } from '@manuscripts/transform';
 import { ResolvedPos } from 'prosemirror-model';
 import { Command, NodeSelection, Selection, TextSelection, Transaction } from 'prosemirror-state';
+import { NodeWithPos } from 'prosemirror-utils';
 import { EditorAction } from './types';
 export type Dispatch = (tr: ManuscriptTransaction) => void;
 export declare const markActive: (type: ManuscriptMarkType) => (state: ManuscriptEditorState) => boolean;
@@ -26,6 +27,7 @@ export declare const blockActive: (type: ManuscriptNodeType) => (state: Manuscri
 export declare const canInsert: (type: ManuscriptNodeType) => (state: ManuscriptEditorState) => boolean;
 export declare const createSelection: (nodeType: ManuscriptNodeType, position: number, doc: ManuscriptNode) => Selection;
 export declare const createBlock: (nodeType: ManuscriptNodeType, position: number, state: ManuscriptEditorState, dispatch?: Dispatch) => void;
+export declare const insertGeneralFootnote: (tableNode: ManuscriptNode, position: number, view: ManuscriptEditorView, tableElementFooter?: NodeWithPos[]) => void;
 export declare const insertFileAsFigure: (file: FileAttachment, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertBlock: (nodeType: ManuscriptNodeType) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const deleteBlock: (typeToDelete: string) => (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

package/dist/types/lib/utils.d.ts

@@ -24,3 +24,4 @@ export declare const findParentNodeWithIdValue: (selection: Selection) => import
 export declare const findParentSection: (selection: Selection) => import("prosemirror-utils").ContentNodeWithPos | undefined;
 export declare const findParentElement: (selection: Selection, validIds?: string[]) => import("prosemirror-utils").ContentNodeWithPos | undefined;
 export declare const isMetaNode: (nodeType: string) => boolean;
+export declare const createFootnoteLabel: (id: string) => string;

package/dist/types/plugins/footnotes/index.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { InlineFootnoteNode, ManuscriptNode } from '@manuscripts/transform';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
 interface PluginState {
     nodes: [InlineFootnoteNode, number][];
     labels: Map<string, string>;
@@ -24,3 +24,4 @@ export declare const buildPluginState: (doc: ManuscriptNode) => PluginState;
 export declare const uncitedFootnoteWidget: () => () => HTMLSpanElement;
 declare const _default: () => Plugin<PluginState>;
 export default _default;
+export declare const getFootnotesPluginState: (state: EditorState) => PluginState;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.9",
+  "version": "1.7.10-LEAN-3338-1",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -109,4 +109,4 @@
   "resolutions": {
     "@types/react": "^17.0.2"
   }
-}
+}

package/styles/Editor.css

@@ -162,7 +162,7 @@
 .ProseMirror sub {
   line-height: 0;
 }
-
+.ProseMirror .footnote,
 .ProseMirror .citation,
 .ProseMirror .cross-reference {
   font-weight: bold;
@@ -991,10 +991,18 @@
 .table-footer > div:has(> p.footnote-selected) > p:last-child {
   border-bottom: 1px solid #bce7f6;
 }
+
+.ProseMirror .footnotes-element .block > div p {
+    display: flex;
+}
+.ProseMirror .footnotes-element .block > div p > ins {
+  flex: 1 0 auto;
+}
+
 .ProseMirror .footnote-label {
+  flex: 0 0 auto;
   vertical-align: super;
   font-size: 75%;
-  margin-right: 8px;
   cursor: pointer;
 }