@manuscripts/body-editor 2.0.41 → 2.0.42

package/dist/cjs/commands.js

@@ -27,13 +27,13 @@ const prosemirror_transform_1 = require("prosemirror-transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const comments_1 = require("./lib/comments");
 const doc_1 = require("./lib/doc");
+const footnotes_1 = require("./lib/footnotes");
 const helpers_1 = require("./lib/helpers");
 const track_changes_utils_1 = require("./lib/track-changes-utils");
 const utils_1 = require("./lib/utils");
 const comments_2 = require("./plugins/comments");
 const editor_props_1 = require("./plugins/editor-props");
-const footnotes_1 = require("./plugins/footnotes");
-const footnotes_utils_1 = require("./plugins/footnotes/footnotes-utils");
+const footnotes_2 = require("./plugins/footnotes");
 const markActive = (type) => (state) => {
     const { from, $from, to, empty } = state.selection;
     return empty
@@ -410,7 +410,7 @@ const insertFootnote = (state, tr, footnote) => {
 };
 exports.insertFootnote = insertFootnote;
 const insertInlineFootnote = (kind) => (state, dispatch) => {
-    const fnState = footnotes_1.footnotesKey.getState(state);
+    const fnState = footnotes_2.footnotesKey.getState(state);
     const hasUnusedNodes = fnState && fnState.unusedFootnotes.size > 0;
     const footnote = !hasUnusedNodes
         ? (0, exports.createFootnote)(state, kind)
@@ -1000,7 +1000,7 @@ const insertTableFootnote = (tableElementNode, position, view, inlineFootnote) =
     if (footnotesElement &&
         !(0, track_changes_utils_1.isDeleted)(footnotesElement.node) &&
         !(0, track_changes_utils_1.isRejectedInsert)(footnotesElement.node)) {
-        const footnotePos = (0, footnotes_utils_1.getNewFootnotePos)(footnotesElement, footnoteIndex);
+        const footnotePos = (0, footnotes_1.getNewFootnotePos)(footnotesElement, footnoteIndex);
         insertionPos = tr.mapping.map(position + footnotePos);
         tr.insert(insertionPos, footnote);
     }

package/dist/cjs/components/views/FootnotesSelector.js

@@ -0,0 +1,173 @@
+"use strict";
+/*!
+ * © 2023 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.
+ */
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FootnotesSelector = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const NotesContainer = styled_components_1.default.div `
+  height: 90vh;
+  max-height: 400px;
+  overflow-y: auto;
+`;
+const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
+  align-items: center;
+  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
+  display: flex;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Container = styled_components_1.default.div `
+  flex: 1;
+  font-family: ${(props) => props.theme.font.family.sans};
+`;
+const AddNewFootnote = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
+  button {
+    margin-right: ${(props) => props.theme.grid.unit * 8}px;
+  }
+
+  button:hover,
+  button:active {
+    path {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+    rect {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+  }
+`;
+const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
+    let selectedNotesMap;
+    if (inlineFootnote) {
+        const rids = inlineFootnote.attrs.rids;
+        const selectedNotes = notes.filter(({ node }) => rids.includes(node.attrs.id));
+        selectedNotesMap = new Map(selectedNotes.map(({ node }) => [node.attrs.id, node]));
+    }
+    const [selections, setSelections] = (0, react_1.useState)(new Map(selectedNotesMap));
+    const toggleSelection = (item) => {
+        const id = item.attrs.id;
+        if (selections.has(id)) {
+            selections.delete(id);
+            setSelections(new Map([...selections]));
+        }
+        else {
+            selections.set(id, item);
+            setSelections(new Map([...selections]));
+        }
+    };
+    const isSelected = (item) => {
+        return selections.has(item.attrs.id);
+    };
+    const handleClick = () => {
+        return onInsert(notes.filter(({ node }) => selections.has(node.attrs.id)));
+    };
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(NotesContainer, null,
+            react_1.default.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
+        react_1.default.createElement(Actions, null,
+            react_1.default.createElement(AddNewFootnote, null,
+                react_1.default.createElement(style_guide_1.IconTextButton, { onClick: onAdd },
+                    react_1.default.createElement(style_guide_1.AddNewIcon, null),
+                    addNewLabel || 'Add new')),
+            react_1.default.createElement(style_guide_1.ButtonGroup, null,
+                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
+                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+};
+exports.FootnotesSelector = FootnotesSelector;
+const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
+    const selectedNotes = [];
+    const remainingNotes = [];
+    notes.forEach((note) => {
+        const isNoteSelected = inlineFootnote && inlineFootnote.attrs.rids.includes(note.node.attrs.id);
+        if (isNoteSelected) {
+            selectedNotes.push(note);
+        }
+        else {
+            remainingNotes.push(note);
+        }
+    });
+    return (react_1.default.createElement(NotesListContainer, null,
+        selectedNotes.map((note) => (react_1.default.createElement(FootnoteItem, { key: note.node.attrs.id, note: note, isSelected: isSelected, onSelect: onSelect }))),
+        selectedNotes.length > 0 && remainingNotes.length > 0 && react_1.default.createElement(Separator, null),
+        remainingNotes.map((note) => (react_1.default.createElement(FootnoteItem, { key: note.node.attrs.id, note: note, isSelected: isSelected, onSelect: onSelect })))));
+};
+const FootnoteItem = ({ note, isSelected, onSelect }) => {
+    var _a;
+    const { node, index } = note;
+    return (react_1.default.createElement(FootnoteItemContainer, { onClick: () => onSelect(node) },
+        react_1.default.createElement(StatusIcon, null, isSelected(node) ? (react_1.default.createElement(style_guide_1.AddedIcon, { "data-cy": 'plus-icon-ok' })) : (react_1.default.createElement(style_guide_1.AddIcon, { "data-cy": 'plus-icon' }))),
+        react_1.default.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
+};
+const Separator = styled_components_1.default.div `
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`;
+const NotesListContainer = styled_components_1.default.div `
+  padding: ${(props) => props.theme.grid.unit * 6}px
+    ${(props) => props.theme.grid.unit * 5}px;
+  flex: 1;
+  overflow-y: auto;
+`;
+const FootnoteItemContainer = styled_components_1.default.div `
+  cursor: pointer;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+  display: flex;
+`;
+const StatusIcon = styled_components_1.default.div `
+  flex-shrink: 1;
+  margin-right: ${(props) => props.theme.grid.unit * 3}px;
+  margin-left: ${(props) => props.theme.grid.unit}px;
+  height: ${(props) => props.theme.grid.unit * 6}px;
+  width: ${(props) => props.theme.grid.unit * 6}px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const NoteText = styled_components_1.default.div `
+  color: ${(props) => props.theme.colors.text.primary};
+  flex: 1;
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  margin-top: 2px;
+`;

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

@@ -19,12 +19,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = exports.contextMenuBtnClass = exports.sectionLevel = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const commands_1 = require("../commands");
-const footnotes_utils_1 = require("../plugins/footnotes/footnotes-utils");
+const FootnotesSelector_1 = require("../components/views/FootnotesSelector");
 const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
+const footnotes_1 = require("./footnotes");
 const popper_1 = require("./popper");
 const track_changes_utils_1 = require("./track-changes-utils");
 const utils_1 = require("./utils");
@@ -211,7 +211,7 @@ class ContextMenu {
                                 (0, commands_1.insertTableFootnote)(this.node, this.getPos(), this.view);
                             }
                             else {
-                                const tablesFootnoteLabels = (0, footnotes_utils_1.buildTableFootnoteLabels)(this.node);
+                                const tablesFootnoteLabels = (0, footnotes_1.buildTableFootnoteLabels)(this.node);
                                 const footnotesWithPos = (0, prosemirror_utils_1.findChildrenByType)(footnotesElementWithPos.node, transform_1.schema.nodes.footnote);
                                 const footnotes = footnotesWithPos
                                     .filter(({ node }) => !(0, track_changes_utils_1.isDeleted)(node) && !(0, track_changes_utils_1.isRejectedInsert)(node))
@@ -224,7 +224,7 @@ class ContextMenu {
                                     ? targetDom.node.parentNode
                                     : targetDom.node;
                                 if (targetNode instanceof Element && this.props) {
-                                    const popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), style_guide_1.FootnotesSelector, {
+                                    const popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), FootnotesSelector_1.FootnotesSelector, {
                                         notes: footnotes,
                                         onAdd: () => {
                                             var _a;

package/dist/cjs/{plugins/footnotes/footnotes-utils.js → lib/footnotes.js}

@@ -20,7 +20,7 @@ const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const track_changes_utils_1 = require("../../lib/track-changes-utils");
+const track_changes_utils_1 = require("./track-changes-utils");
 const findTableInlineFootnoteIds = ($pos) => {
     var _a;
     const tableElement = (_a = (0, prosemirror_utils_1.findParentNodeClosestToPos)($pos, (node) => node.type === transform_1.schema.nodes.table_element)) === null || _a === void 0 ? void 0 : _a.node;

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

@@ -30,10 +30,10 @@ const react_1 = require("react");
 const server_1 = require("react-dom/server");
 const commands_1 = require("../../commands");
 const DeleteFootnoteDialog_1 = require("../../components/views/DeleteFootnoteDialog");
+const footnotes_1 = require("../../lib/footnotes");
 const utils_1 = require("../../lib/utils");
 const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
 const placeholder_1 = require("../placeholder");
-const footnotes_utils_1 = require("./footnotes-utils");
 exports.footnotesKey = new prosemirror_state_1.PluginKey('footnotes');
 const scrollToInlineFootnote = (rid, view) => {
     view.state.doc.descendants((node, pos) => {
@@ -89,7 +89,7 @@ const deleteFootnoteWidget = (node, props, id, tableElement, tableElementFooter)
             }
             if (node.type === transform_1.schema.nodes.footnote && pos) {
                 const targetNode = tableElement ? tableElement.node : view.state.doc;
-                const inlineFootnotes = (0, footnotes_utils_1.getInlineFootnotes)(id, targetNode);
+                const inlineFootnotes = (0, footnotes_1.getInlineFootnotes)(id, targetNode);
                 const footnotesElement = (0, prosemirror_utils_1.findParentNodeClosestToPos)(tr.doc.resolve(pos), (node) => node.type === transform_1.schema.nodes.footnotes_element);
                 if ((footnotesElement === null || footnotesElement === void 0 ? void 0 : footnotesElement.node.childCount) === 1 &&
                     (tableElementFooter === null || tableElementFooter === void 0 ? void 0 : tableElementFooter.node.childCount) === 1) {
@@ -158,7 +158,7 @@ const buildPluginState = (doc) => {
     inlineFootnotes.sort((a, b) => a[1] - b[1]);
     inlineFootnotes.forEach(([node]) => {
         node.attrs.rids.forEach((rid) => {
-            labels.set(rid, (0, footnotes_utils_1.getAlphaOrderIndices)(index++));
+            labels.set(rid, (0, footnotes_1.getAlphaOrderIndices)(index++));
         });
     });
     const footnotesReordered = [];
@@ -277,7 +277,7 @@ exports.default = (props) => {
                             decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
                                 class: 'table-footnotes-element',
                             }));
-                            tableInlineFootnoteIds = (0, footnotes_utils_1.findTableInlineFootnoteIds)(state.doc.resolve(pos));
+                            tableInlineFootnoteIds = (0, footnotes_1.findTableInlineFootnoteIds)(state.doc.resolve(pos));
                         }
                     }
                     if ((0, transform_1.isFootnoteNode)(node)) {

package/dist/cjs/plugins/table-footnote.js

@@ -4,7 +4,7 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_transform_1 = require("prosemirror-transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const footnotes_utils_1 = require("./footnotes/footnotes-utils");
+const footnotes_1 = require("../lib/footnotes");
 const isInlineFootnoteChange = (step, oldState, newState) => {
     var _a, _b;
     return step.slice.size > 0
@@ -38,8 +38,8 @@ exports.default = () => {
             if (!table || !footnotesElementWithPos) {
                 return null;
             }
-            (0, footnotes_utils_1.updateTableInlineFootnoteLabels)(tr, table);
-            (0, footnotes_utils_1.orderTableFootnotes)(tr, footnotesElementWithPos, tr.mapping.map(table.pos));
+            (0, footnotes_1.updateTableInlineFootnoteLabels)(tr, table);
+            (0, footnotes_1.orderTableFootnotes)(tr, footnotesElementWithPos, tr.mapping.map(table.pos));
             return tr;
         },
     });

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '2.0.41';
+exports.VERSION = '2.0.42';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/inline_footnote.js

@@ -24,9 +24,10 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const commands_1 = require("../commands");
+const FootnotesSelector_1 = require("../components/views/FootnotesSelector");
+const footnotes_1 = require("../lib/footnotes");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
-const footnotes_1 = require("../plugins/footnotes");
-const footnotes_utils_1 = require("../plugins/footnotes/footnotes-utils");
+const footnotes_2 = require("../plugins/footnotes");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
@@ -84,7 +85,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
             if (!this.props.getCapabilities().editArticle) {
                 return;
             }
-            const fnState = footnotes_1.footnotesKey.getState(this.view.state);
+            const fnState = footnotes_2.footnotesKey.getState(this.view.state);
             if (fnState) {
                 this.activateModal({
                     notes: Array.from(fnState.unusedFootnotes.values()).map((n) => ({
@@ -147,7 +148,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
             const footnotesElement = (_a = (0, prosemirror_utils_1.findChildrenByType)(tableElement.node, transform_1.schema.nodes.footnotes_element).pop()) === null || _a === void 0 ? void 0 : _a.node;
             let footnotes = [];
             if (footnotesElement) {
-                const tablesFootnoteLabels = (0, footnotes_utils_1.buildTableFootnoteLabels)(tableElement.node);
+                const tablesFootnoteLabels = (0, footnotes_1.buildTableFootnoteLabels)(tableElement.node);
                 footnotes = (0, prosemirror_utils_1.findChildrenByType)(footnotesElement, transform_1.schema.nodes.footnote)
                     .filter(({ node }) => !(0, track_changes_utils_1.isDeleted)(node) && !(0, track_changes_utils_1.isRejectedInsert)(node))
                     .map(({ node }) => ({
@@ -203,7 +204,7 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
             onCancel: this.destroy,
             inlineFootnote: this.node,
         };
-        this.popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), style_guide_1.FootnotesSelector, Object.assign(Object.assign({}, defaultModal), modalProps), this.node, this.getPos, this.view, 'footnote-editor');
+        this.popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), FootnotesSelector_1.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);
     }
 }

package/dist/es/commands.js

@@ -24,13 +24,13 @@ import { findWrapping, liftTarget, ReplaceAroundStep, } from 'prosemirror-transf
 import { findChildrenByType, findParentNodeOfType, hasParentNodeOfType, } from 'prosemirror-utils';
 import { getCommentKey, getCommentRange } from './lib/comments';
 import { findBackmatter, findBibliographySection, findBody, insertSupplementsNode, } from './lib/doc';
+import { getNewFootnotePos } from './lib/footnotes';
 import { findWordBoundaries, isNodeOfType, nearestAncestor, } from './lib/helpers';
 import { isDeleted, isRejectedInsert } from './lib/track-changes-utils';
 import { findParentNodeWithId, getChildOfType, getMatchingChild, } from './lib/utils';
 import { setCommentSelection } from './plugins/comments';
 import { getEditorProps } from './plugins/editor-props';
 import { footnotesKey } from './plugins/footnotes';
-import { getNewFootnotePos } from './plugins/footnotes/footnotes-utils';
 export const markActive = (type) => (state) => {
     const { from, $from, to, empty } = state.selection;
     return empty

package/dist/es/components/views/FootnotesSelector.js

@@ -0,0 +1,143 @@
+/*!
+ * © 2023 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 { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+const NotesContainer = styled.div `
+  height: 90vh;
+  max-height: 400px;
+  overflow-y: auto;
+`;
+const Actions = styled(ButtonGroup) `
+  align-items: center;
+  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
+  display: flex;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Container = styled.div `
+  flex: 1;
+  font-family: ${(props) => props.theme.font.family.sans};
+`;
+const AddNewFootnote = styled(ButtonGroup) `
+  button {
+    margin-right: ${(props) => props.theme.grid.unit * 8}px;
+  }
+
+  button:hover,
+  button:active {
+    path {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+    rect {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+  }
+`;
+export const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
+    let selectedNotesMap;
+    if (inlineFootnote) {
+        const rids = inlineFootnote.attrs.rids;
+        const selectedNotes = notes.filter(({ node }) => rids.includes(node.attrs.id));
+        selectedNotesMap = new Map(selectedNotes.map(({ node }) => [node.attrs.id, node]));
+    }
+    const [selections, setSelections] = useState(new Map(selectedNotesMap));
+    const toggleSelection = (item) => {
+        const id = item.attrs.id;
+        if (selections.has(id)) {
+            selections.delete(id);
+            setSelections(new Map([...selections]));
+        }
+        else {
+            selections.set(id, item);
+            setSelections(new Map([...selections]));
+        }
+    };
+    const isSelected = (item) => {
+        return selections.has(item.attrs.id);
+    };
+    const handleClick = () => {
+        return onInsert(notes.filter(({ node }) => selections.has(node.attrs.id)));
+    };
+    return (React.createElement(Container, null,
+        React.createElement(NotesContainer, null,
+            React.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
+        React.createElement(Actions, null,
+            React.createElement(AddNewFootnote, null,
+                React.createElement(IconTextButton, { onClick: onAdd },
+                    React.createElement(AddNewIcon, null),
+                    addNewLabel || 'Add new')),
+            React.createElement(ButtonGroup, null,
+                React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
+                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+};
+const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
+    const selectedNotes = [];
+    const remainingNotes = [];
+    notes.forEach((note) => {
+        const isNoteSelected = inlineFootnote && inlineFootnote.attrs.rids.includes(note.node.attrs.id);
+        if (isNoteSelected) {
+            selectedNotes.push(note);
+        }
+        else {
+            remainingNotes.push(note);
+        }
+    });
+    return (React.createElement(NotesListContainer, null,
+        selectedNotes.map((note) => (React.createElement(FootnoteItem, { key: note.node.attrs.id, note: note, isSelected: isSelected, onSelect: onSelect }))),
+        selectedNotes.length > 0 && remainingNotes.length > 0 && React.createElement(Separator, null),
+        remainingNotes.map((note) => (React.createElement(FootnoteItem, { key: note.node.attrs.id, note: note, isSelected: isSelected, onSelect: onSelect })))));
+};
+const FootnoteItem = ({ note, isSelected, onSelect }) => {
+    var _a;
+    const { node, index } = note;
+    return (React.createElement(FootnoteItemContainer, { onClick: () => onSelect(node) },
+        React.createElement(StatusIcon, null, isSelected(node) ? (React.createElement(AddedIcon, { "data-cy": 'plus-icon-ok' })) : (React.createElement(AddIcon, { "data-cy": 'plus-icon' }))),
+        React.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
+};
+const Separator = styled.div `
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`;
+const NotesListContainer = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 6}px
+    ${(props) => props.theme.grid.unit * 5}px;
+  flex: 1;
+  overflow-y: auto;
+`;
+const FootnoteItemContainer = styled.div `
+  cursor: pointer;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+  display: flex;
+`;
+const StatusIcon = styled.div `
+  flex-shrink: 1;
+  margin-right: ${(props) => props.theme.grid.unit * 3}px;
+  margin-left: ${(props) => props.theme.grid.unit}px;
+  height: ${(props) => props.theme.grid.unit * 6}px;
+  width: ${(props) => props.theme.grid.unit * 6}px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const NoteText = styled.div `
+  color: ${(props) => props.theme.colors.text.primary};
+  flex: 1;
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  margin-top: 2px;
+`;

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

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FootnotesSelector } from '@manuscripts/style-guide';
 import { getListType, isInBibliographySection, nodeNames, schema, } from '@manuscripts/transform';
 import { findChildrenByType, hasParentNodeOfType } from 'prosemirror-utils';
 import { addNodeComment, createBlock, findPosBeforeFirstSubsection, insertGeneralFootnote, insertTableFootnote, } from '../commands';
-import { buildTableFootnoteLabels } from '../plugins/footnotes/footnotes-utils';
+import { FootnotesSelector } from '../components/views/FootnotesSelector';
 import ReactSubView from '../views/ReactSubView';
+import { buildTableFootnoteLabels } from './footnotes';
 import { PopperManager } from './popper';
 import { getActualAttrs, isDeleted, isRejectedInsert, } from './track-changes-utils';
 import { getChildOfType, isChildOfNodeTypes } from './utils';

package/dist/es/{plugins/footnotes/footnotes-utils.js → lib/footnotes.js}

@@ -17,7 +17,7 @@ import { skipTracking } from '@manuscripts/track-changes-plugin';
 import { isFootnoteNode, schema, } from '@manuscripts/transform';
 import { Fragment } from 'prosemirror-model';
 import { findChildren, findChildrenByType, findParentNodeClosestToPos, } from 'prosemirror-utils';
-import { isRejectedInsert } from '../../lib/track-changes-utils';
+import { isRejectedInsert } from './track-changes-utils';
 export const findTableInlineFootnoteIds = ($pos) => {
     var _a;
     const tableElement = (_a = findParentNodeClosestToPos($pos, (node) => node.type === schema.nodes.table_element)) === null || _a === void 0 ? void 0 : _a.node;

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

@@ -24,10 +24,10 @@ import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { isTextSelection } from '../../commands';
 import { DeleteFootnoteDialog, } from '../../components/views/DeleteFootnoteDialog';
+import { findTableInlineFootnoteIds, getAlphaOrderIndices, getInlineFootnotes, } from '../../lib/footnotes';
 import { getChildOfType } from '../../lib/utils';
 import ReactSubView from '../../views/ReactSubView';
 import { placeholderWidget } from '../placeholder';
-import { findTableInlineFootnoteIds, getAlphaOrderIndices, getInlineFootnotes, } from './footnotes-utils';
 export const footnotesKey = new PluginKey('footnotes');
 const scrollToInlineFootnote = (rid, view) => {
     view.state.doc.descendants((node, pos) => {

package/dist/es/plugins/table-footnote.js

@@ -2,7 +2,7 @@ import { schema } from '@manuscripts/transform';
 import { Plugin } from 'prosemirror-state';
 import { ReplaceStep } from 'prosemirror-transform';
 import { findChildrenByType, findParentNodeClosestToPos, } from 'prosemirror-utils';
-import { orderTableFootnotes, updateTableInlineFootnoteLabels, } from './footnotes/footnotes-utils';
+import { orderTableFootnotes, updateTableInlineFootnoteLabels, } from '../lib/footnotes';
 const isInlineFootnoteChange = (step, oldState, newState) => {
     var _a, _b;
     return step.slice.size > 0

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.0.41';
+export const VERSION = '2.0.42';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/inline_footnote.js

@@ -13,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ContextMenu, FootnotesSelector, } from '@manuscripts/style-guide';
+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 { getChangeClasses, isDeleted, isPendingInsert, isRejectedInsert, } from '../lib/track-changes-utils';
 import { footnotesKey } from '../plugins/footnotes';
-import { buildTableFootnoteLabels } from '../plugins/footnotes/footnotes-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';

package/dist/types/components/views/FootnotesSelector.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * © 2023 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 { InlineFootnoteNode } from '@manuscripts/transform';
+import React from 'react';
+import { FootnoteWithIndex } from '../../lib/footnotes';
+export declare const FootnotesSelector: React.FC<{
+    notes: FootnoteWithIndex[];
+    inlineFootnote?: InlineFootnoteNode;
+    onAdd: () => void;
+    onInsert: (notes: FootnoteWithIndex[]) => void;
+    onCancel: () => void;
+    addNewLabel?: string;
+}>;

package/dist/types/{plugins/footnotes/footnotes-utils.d.ts → lib/footnotes.d.ts}

@@ -13,10 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { InlineFootnoteNode, ManuscriptNode } from '@manuscripts/transform';
+import { FootnoteNode, InlineFootnoteNode, ManuscriptNode } from '@manuscripts/transform';
 import { ResolvedPos } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
 import { ContentNodeWithPos, NodeWithPos } from 'prosemirror-utils';
+export type FootnoteWithIndex = {
+    node: FootnoteNode;
+    index?: string;
+};
 export declare const findTableInlineFootnoteIds: ($pos: ResolvedPos) => Set<string>;
 export declare const getNewFootnotePos: (footnotesElement: NodeWithPos, footnoteIndex: number) => number;
 export declare const buildTableFootnoteLabels: (node: ManuscriptNode) => Map<string, string | undefined>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.0.41";
+export declare const VERSION = "2.0.42";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/inline_footnote.d.ts

@@ -13,10 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FootnotesSelector, FootnoteWithIndex } from '@manuscripts/style-guide';
 import { ManuscriptNodeView } from '@manuscripts/transform';
 import { History } from 'history';
 import { ContentNodeWithPos } from 'prosemirror-utils';
+import { FootnotesSelector } from '../components/views/FootnotesSelector';
+import { FootnoteWithIndex } from '../lib/footnotes';
 import { BaseNodeProps, BaseNodeView } from './base_node_view';
 import { EditableBlockProps } from './editable_block';
 export interface InlineFootnoteProps extends BaseNodeProps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.0.41",
+  "version": "2.0.42",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.0.17",
+    "@manuscripts/style-guide": "2.0.18",
     "@manuscripts/track-changes-plugin": "1.7.17",
     "@manuscripts/transform": "2.3.31",
     "@popperjs/core": "^2.11.8",