@manuscripts/body-editor 1.10.0 → 1.10.1-LEAN-3535.0

package/dist/cjs/components/authors/AuthorAffiliations.js

@@ -92,10 +92,16 @@ const AuthorAffiliations = ({ author, affiliations, onSave, onAdd, onRemove, })
         const affiliation = {
             id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
             addressLine1: '',
+            addressLine2: '',
+            addressLine3: '',
             city: '',
             country: '',
             county: '',
             department: '',
+            email: {
+                href: '',
+                text: '',
+            },
             institution: institution,
             postCode: '',
             priority: 0,

package/dist/cjs/components/authors/AuthorsModal.js

@@ -91,6 +91,8 @@ const normalize = (author) => ({
     ORCIDIdentifier: author.ORCIDIdentifier || '',
     priority: author.priority,
     isJointContributor: author.isJointContributor || false,
+    userID: '',
+    invitationID: '',
 });
 const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
@@ -158,6 +160,8 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             ORCIDIdentifier: '',
             priority: authors.length,
             isJointContributor: false,
+            userID: '',
+            invitationID: '',
         };
         onSaveAuthor(author);
         setSelection(author);

package/dist/cjs/configs/editor-plugins.js

@@ -37,7 +37,7 @@ const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
 const placeholder_1 = __importDefault(require("../plugins/placeholder"));
 const sections_1 = __importDefault(require("../plugins/sections"));
-const selected_suggestion_ui_1 = __importDefault(require("../plugins/selected-suggestion-ui"));
+const selected_suggestion_1 = __importDefault(require("../plugins/selected-suggestion"));
 const table_footnote_1 = __importDefault(require("../plugins/table-footnote"));
 const tables_cursor_fix_1 = __importDefault(require("../plugins/tables-cursor-fix"));
 const toc_1 = __importDefault(require("../plugins/toc"));
@@ -68,9 +68,9 @@ exports.default = (props) => {
         (0, placeholder_1.default)(),
         (0, prosemirror_tables_1.tableEditing)(),
         (0, highlight_1.default)(props),
-        (0, selected_suggestion_ui_1.default)(props),
         (0, footnotes_1.default)(props),
         (0, table_footnote_1.default)(),
+        (0, selected_suggestion_1.default)(),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

package/dist/cjs/configs/editor-views.js

@@ -18,7 +18,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const affiliation_1 = __importDefault(require("../views/affiliation"));
 const affiliations_1 = __importDefault(require("../views/affiliations"));
 const bibliography_element_editable_1 = __importDefault(require("../views/bibliography_element_editable"));
 const blockquote_element_editable_1 = __importDefault(require("../views/blockquote_element_editable"));
@@ -61,7 +60,6 @@ exports.default = (props, dispatch) => {
         cross_reference: (0, cross_reference_editable_1.default)(props, dispatch),
         contributors: (0, contributors_1.default)(props, dispatch),
         affiliations: (0, affiliations_1.default)(props, dispatch),
-        affiliation: (0, affiliation_1.default)(props, dispatch),
         equation: (0, equation_editable_1.default)(props),
         equation_element: (0, equation_element_editable_1.default)(props),
         figure: (0, figure_editable_1.default)(props, dispatch),

package/dist/cjs/index.js

@@ -29,7 +29,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SET_SUGGESTION_ID = exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
 __exportStar(require("./commands"), exports);
 var ManuscriptOutline_1 = require("./components/outline/ManuscriptOutline");
 Object.defineProperty(exports, "ManuscriptOutline", { enumerable: true, get: function () { return ManuscriptOutline_1.ManuscriptOutline; } });
@@ -43,13 +43,13 @@ Object.defineProperty(exports, "CollabProvider", { enumerable: true, get: functi
 var popper_1 = require("./lib/popper");
 Object.defineProperty(exports, "PopperManager", { enumerable: true, get: function () { return popper_1.PopperManager; } });
 __exportStar(require("./toolbar"), exports);
+var selected_suggestion_1 = require("./plugins/selected-suggestion");
+Object.defineProperty(exports, "selectedSuggestionKey", { enumerable: true, get: function () { return selected_suggestion_1.selectedSuggestionKey; } });
 __exportStar(require("./plugins/highlight"), exports);
 var comment_annotation_1 = require("./plugins/comment_annotation");
 Object.defineProperty(exports, "commentScroll", { enumerable: true, get: function () { return comment_annotation_1.commentScroll; } });
 Object.defineProperty(exports, "isThereSelector", { enumerable: true, get: function () { return comment_annotation_1.isThereSelector; } });
 Object.defineProperty(exports, "isHighlightComment", { enumerable: true, get: function () { return comment_annotation_1.isHighlightComment; } });
-var selected_suggestion_ui_1 = require("./plugins/selected-suggestion-ui");
-Object.defineProperty(exports, "SET_SUGGESTION_ID", { enumerable: true, get: function () { return selected_suggestion_ui_1.SET_SUGGESTION_ID; } });
 __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./lib/track-changes-utils"), exports);
 __exportStar(require("./useEditor"), exports);

package/dist/cjs/lib/authors.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.authorComparator = exports.initials = exports.authorLabel = exports.affiliationLabel = void 0;
+exports.authorComparator = exports.initials = exports.authorLabel = exports.affiliationName = exports.affiliationLabel = void 0;
 const affiliationLabel = (affiliation) => {
     const institution = affiliation.institution;
     if (!institution) {
@@ -25,6 +25,20 @@ const affiliationLabel = (affiliation) => {
     return department ? `${institution} (${department})`.trim() : institution;
 };
 exports.affiliationLabel = affiliationLabel;
+const affiliationName = (affiliation) => {
+    return [
+        affiliation.department,
+        affiliation.institution,
+        affiliation.addressLine1,
+        affiliation.city,
+        affiliation.county,
+        affiliation.country,
+        affiliation.postCode,
+    ]
+        .filter(Boolean)
+        .join(', ');
+};
+exports.affiliationName = affiliationName;
 const authorLabel = (author) => {
     const name = author.bibliographicName;
     const parts = [(0, exports.initials)(name), name.family, name.suffix].filter(Boolean);

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

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenu = exports.sectionLevel = void 0;
+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");
@@ -42,6 +42,7 @@ exports.sectionLevel = sectionLevel;
 const hasAny = (set, ...items) => {
     return items.some((i) => set.has(i));
 };
+exports.contextMenuBtnClass = 'btn-context-menu';
 class ContextMenu {
     constructor(node, view, getPos, actions = {}, props) {
         this.showAddMenu = (target, after) => {
@@ -355,7 +356,11 @@ class ContextMenu {
         };
         this.resolvePos = () => this.view.state.doc.resolve(this.getPos());
         this.addPopperEventListeners = () => {
-            const mouseListener = () => {
+            const mouseListener = (event) => {
+                const target = event.target;
+                if (target.classList.contains(exports.contextMenuBtnClass)) {
+                    return;
+                }
                 window.requestAnimationFrame(() => {
                     window.removeEventListener('mousedown', mouseListener);
                     popper.destroy();

package/dist/cjs/lib/popper.js

@@ -22,12 +22,14 @@ exports.PopperManager = void 0;
 const popper_js_1 = __importDefault(require("popper.js"));
 class PopperManager {
     show(target, contents, placement = 'bottom', showArrow = true, modifiers = {}) {
-        if (this.activePopper) {
-            return this.destroy();
-        }
+        console.log(target);
+        this.destroy();
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
+            container.addEventListener('click', (e) => {
+                e.stopPropagation();
+            });
             if (showArrow) {
                 const arrow = document.createElement('div');
                 arrow.className = 'popper-arrow';
@@ -55,12 +57,32 @@ class PopperManager {
                     this.focusInput(container);
                 },
             });
+            this.handleDocumentClick = (e) => {
+                const node = e.target;
+                if (!container.contains(node) && !target.contains(node)) {
+                    this.destroy();
+                }
+            };
+            if (contents.classList.contains('context-menu')) {
+                window.addEventListener('click', this.handleDocumentClick);
+            }
         });
     }
+    clickEventHandler(event) {
+        const contextMenuElement = document.querySelector('.context-menu');
+        if (contextMenuElement === null || contextMenuElement === void 0 ? void 0 : contextMenuElement.contains(event.target)) {
+            return;
+        }
+        this.destroy();
+    }
     destroy() {
         if (this.activePopper) {
+            window.removeEventListener('click', this.clickEventHandler);
             this.removeContainerClass(this.activePopper.reference);
             this.activePopper.destroy();
+            if (this.handleDocumentClick) {
+                window.removeEventListener('click', this.handleDocumentClick);
+            }
             delete this.activePopper;
         }
     }

package/dist/cjs/plugins/affiliations.js

@@ -17,41 +17,53 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildPluginState = exports.affiliationsKey = void 0;
 const transform_1 = require("@manuscripts/transform");
+const lodash_1 = require("lodash");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
+const authors_1 = require("../lib/authors");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 exports.affiliationsKey = new prosemirror_state_1.PluginKey('affiliations');
 let id = 1;
-const buildPluginState = (doc) => {
+const buildPluginState = (doc, $old) => {
+    const nodes = [];
     const contributors = [];
     const affiliations = [];
     doc.descendants((node, pos) => {
-        if ((0, track_changes_utils_1.isDeleted)(node)) {
-            return;
-        }
+        const attrs = (0, track_changes_utils_1.isDeleted)(node) ? node.attrs : (0, track_changes_utils_1.getActualAttrs)(node);
         if ((0, transform_1.isAffiliationNode)(node)) {
-            affiliations.push([node, pos]);
+            nodes.push([node, pos]);
+            affiliations.push(attrs);
         }
         if ((0, transform_1.isContributorNode)(node)) {
-            contributors.push([node, pos]);
+            nodes.push([node, pos]);
+            contributors.push(attrs);
         }
     });
+    if ($old &&
+        (0, lodash_1.isEqual)(contributors, $old.contributors) &&
+        (0, lodash_1.isEqual)(affiliations, $old.affiliations)) {
+        return $old;
+    }
     const iAffiliations = new Set();
-    contributors
-        .sort(([a], [b]) => {
-        return (Number((0, track_changes_utils_1.getActualAttrs)(a).priority) - Number((0, track_changes_utils_1.getActualAttrs)(b).priority));
-    })
-        .forEach(([author]) => {
-        (0, track_changes_utils_1.getActualAttrs)(author).affiliations.forEach((aff) => {
+    contributors.sort(authors_1.authorComparator).forEach((attrs) => {
+        attrs.affiliations.forEach((aff) => {
             iAffiliations.add(aff);
         });
     });
     const indexedAffiliationIds = new Map([...iAffiliations].map((id, i) => [id, i + 1]));
+    const version = String(id++);
+    const decorations = [];
+    nodes.forEach(([node, pos]) => {
+        decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+            version,
+        }));
+    });
     return {
-        version: String(id++),
+        version,
         indexedAffiliationIds,
         contributors,
         affiliations,
+        decorations: prosemirror_view_1.DecorationSet.create(doc, decorations),
     };
 };
 exports.buildPluginState = buildPluginState;
@@ -63,54 +75,52 @@ exports.default = () => {
                 return (0, exports.buildPluginState)(instance.doc);
             },
             apply(tr, value, oldState, newState) {
-                const prevPluginState = exports.affiliationsKey.getState(oldState);
-                if (!tr.docChanged && prevPluginState) {
-                    return prevPluginState;
+                const $old = exports.affiliationsKey.getState(oldState);
+                if (!tr.docChanged && $old) {
+                    return $old;
                 }
                 else {
-                    return (0, exports.buildPluginState)(newState.doc);
+                    return (0, exports.buildPluginState)(newState.doc, $old);
                 }
             },
         },
         appendTransaction(transactions, oldState, newState) {
-            const { indexedAffiliationIds } = exports.affiliationsKey.getState(newState);
-            if (!transactions.find((tr) => tr.docChanged)) {
+            const affs = exports.affiliationsKey.getState(newState);
+            if (!affs || !transactions.find((tr) => tr.docChanged)) {
                 return;
             }
-            const oldPluginState = exports.affiliationsKey.getState(oldState);
-            const { tr } = newState;
-            const affiliations = [];
+            const $old = exports.affiliationsKey.getState(oldState);
+            const affiliations = new Map();
             newState.doc.descendants((node, pos) => {
-                if ((0, track_changes_utils_1.isDeleted)(node)) {
-                    return;
-                }
                 if ((0, transform_1.isAffiliationNode)(node)) {
-                    affiliations.push([node, pos]);
+                    affiliations.set(node.attrs.id, [node, pos]);
                 }
             });
-            for (const [id] of oldPluginState.indexedAffiliationIds.entries()) {
-                if (!indexedAffiliationIds.has(id)) {
-                    const affiliation = affiliations.find(([node]) => node.attrs.id === id);
-                    if (affiliation && !(0, track_changes_utils_1.isPendingInsert)(affiliation[0])) {
-                        tr.delete(affiliation[1], affiliation[1] + affiliation[0].nodeSize);
-                    }
+            const deleteIDs = [];
+            for (const [id] of $old.indexedAffiliationIds.entries()) {
+                if (!affs.indexedAffiliationIds.has(id)) {
+                    deleteIDs.push(id);
                 }
             }
+            if (!deleteIDs.length) {
+                return;
+            }
+            const tr = newState.tr;
             tr.setMeta('origin', 'affiliations');
+            for (const id of deleteIDs) {
+                const affiliation = affiliations.get(id);
+                if (!affiliation) {
+                    continue;
+                }
+                const [node, pos] = affiliation;
+                if (node && !(0, track_changes_utils_1.isPendingInsert)(node)) {
+                    tr.delete(pos, pos + node.nodeSize);
+                }
+            }
             return tr;
         },
         props: {
-            decorations: (state) => {
-                const decorations = [];
-                const aff = exports.affiliationsKey.getState(state);
-                const nodes = [...aff.contributors, ...aff.affiliations];
-                nodes.forEach(([node, pos]) => {
-                    decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
-                        version: aff.version,
-                    }));
-                });
-                return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
-            },
+            decorations: (state) => { var _a; return (_a = exports.affiliationsKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations; },
         },
     });
 };

package/dist/cjs/plugins/selected-suggestion.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectedSuggestionKey = void 0;
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const commands_1 = require("../commands");
+exports.selectedSuggestionKey = new prosemirror_state_1.PluginKey('selected-suggestion');
+exports.default = () => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.selectedSuggestionKey,
+        state: {
+            init: (_, state) => buildPluginState(state),
+            apply: (tr, value, oldState, newState) => buildPluginState(newState),
+        },
+        props: {
+            decorations: (state) => {
+                const suggestion = exports.selectedSuggestionKey.getState(state);
+                return (suggestion === null || suggestion === void 0 ? void 0 : suggestion.decorations) || prosemirror_view_1.DecorationSet.empty;
+            },
+        },
+    });
+};
+const buildPluginState = (state) => {
+    if ((0, commands_1.isTextSelection)(state.selection)) {
+        const $cursor = state.selection.$cursor;
+        if (!$cursor) {
+            return empty;
+        }
+        const selection = getEffectiveSelection(state.doc, $cursor);
+        if (!selection) {
+            return empty;
+        }
+        if (selection.node.isText) {
+            return buildTextDecoration(state.doc, selection);
+        }
+        else {
+            return buildNodeDecoration(state.doc, selection);
+        }
+    }
+    else if ((0, commands_1.isNodeSelection)(state.selection)) {
+        return buildNodeDecoration(state.doc, state.selection);
+    }
+    return empty;
+};
+const getEffectiveSelection = (doc, $pos) => {
+    const pos = $pos.pos;
+    let current;
+    for (let depth = $pos.depth; depth > 0; depth--) {
+        const node = $pos.node(depth);
+        if (node.attrs.dataTracked) {
+            current = {
+                node,
+                from: $pos.before(depth),
+                to: $pos.after(depth),
+            };
+        }
+        else {
+            break;
+        }
+    }
+    if (current) {
+        return current;
+    }
+    const node = doc.nodeAt(pos);
+    if (node === null || node === void 0 ? void 0 : node.isText) {
+        const from = pos - $pos.textOffset;
+        const to = from + node.nodeSize;
+        return {
+            node,
+            from,
+            to,
+        };
+    }
+};
+const buildNodeDecoration = (doc, selection) => {
+    var _a;
+    const node = selection.node;
+    const suggestion = (_a = node.attrs.dataTracked) === null || _a === void 0 ? void 0 : _a[0];
+    if (!(suggestion === null || suggestion === void 0 ? void 0 : suggestion.status) || suggestion.status === track_changes_plugin_1.CHANGE_STATUS.rejected) {
+        return empty;
+    }
+    const from = selection.from;
+    const to = selection.to;
+    const inline = node.type === transform_1.schema.nodes.keyword || node.isInline;
+    const decoration = prosemirror_view_1.Decoration.node(from, to, {
+        nodeName: inline ? 'span' : 'div',
+        class: 'selected-suggestion',
+    });
+    return {
+        suggestion,
+        decorations: prosemirror_view_1.DecorationSet.create(doc, [decoration]),
+    };
+};
+const buildTextDecoration = (doc, selection) => {
+    var _a;
+    const node = selection.node;
+    const suggestion = (_a = getTrackedMark(node)) === null || _a === void 0 ? void 0 : _a.attrs.dataTracked;
+    if (!suggestion) {
+        return empty;
+    }
+    const from = selection.from;
+    const to = selection.to;
+    const decoration = prosemirror_view_1.Decoration.inline(from, to, {
+        nodeName: 'span',
+        class: 'selected-suggestion',
+    });
+    return {
+        suggestion,
+        decorations: prosemirror_view_1.DecorationSet.create(doc, [decoration]),
+    };
+};
+const trackedMarkTypes = new Set([
+    transform_1.schema.marks.tracked_insert,
+    transform_1.schema.marks.tracked_delete,
+]);
+const getTrackedMark = (node) => {
+    for (const mark of node.marks) {
+        if (trackedMarkTypes.has(mark.type)) {
+            return mark;
+        }
+    }
+};
+const empty = {
+    decorations: prosemirror_view_1.DecorationSet.empty,
+};

package/dist/cjs/useEditor.js

@@ -70,7 +70,7 @@ const useEditor = (externalProps) => {
         }
         debounce(() => {
             setState(nextState);
-        }, 200, !tr.isGeneric);
+        }, 200, !tr.isGeneric || !tr.docChanged);
         return nextState;
     }, []);
     const onRender = (0, react_1.useCallback)((el) => {

package/dist/cjs/views/affiliations.js

@@ -1,10 +1,29 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AffiliationsView = void 0;
 const prosemirror_state_1 = require("prosemirror-state");
+const authors_1 = require("../lib/authors");
+const view_1 = require("../lib/view");
+const affiliations_1 = require("../plugins/affiliations");
+const selected_suggestion_1 = require("../plugins/selected-suggestion");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 class AffiliationsView extends block_view_1.default {
@@ -13,19 +32,93 @@ class AffiliationsView extends block_view_1.default {
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
         this.createElement = () => {
-            this.contentDOM = document.createElement(this.elementType);
-            this.contentDOM.className = 'block';
-            this.contentDOM.setAttribute('contenteditable', 'false');
+            this.container = document.createElement('div');
+            this.container.classList.add('affiliations', 'block');
+            this.container.contentEditable = 'false';
+            this.container.addEventListener('click', this.handleClick);
             this.dom.setAttribute('contenteditable', 'false');
-            this.dom.appendChild(this.contentDOM);
+            this.dom.appendChild(this.container);
         };
         this.updateContents = () => {
-            this.dom.addEventListener('click', () => this.onClickHandler());
+            const affs = affiliations_1.affiliationsKey.getState(this.view.state);
+            if (!affs) {
+                return;
+            }
+            if (this.version === affs.version) {
+                this.updateSelection();
+                return;
+            }
+            this.version = affs.version;
+            this.container.innerHTML = '';
+            this.buildAffiliations(affs);
+            this.updateSelection();
         };
-        this.onClickHandler = () => {
-            const { tr, doc } = this.view.state;
-            tr.setSelection(prosemirror_state_1.NodeSelection.create(doc, this.getPos()));
-            this.view.dispatch(tr);
+        this.buildAffiliations = (affs) => {
+            const elements = [];
+            for (const affiliation of affs.affiliations) {
+                const index = affs.indexedAffiliationIds.get(affiliation.id);
+                elements.push({
+                    index,
+                    element: this.buildAffiliation(affiliation, index),
+                });
+            }
+            elements
+                .sort(this.sortAffiliations)
+                .forEach((e) => this.container.appendChild(e.element));
+        };
+        this.buildAffiliation = (attrs, index) => {
+            var _a;
+            const element = document.createElement('div');
+            element.classList.add('affiliation');
+            element.id = attrs.id;
+            if ((_a = attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                const change = attrs.dataTracked[0];
+                element.setAttribute('data-track-id', change.id);
+                element.setAttribute('data-track-status', change.status);
+                element.setAttribute('data-track-op', change.operation);
+            }
+            if (index) {
+                const label = document.createElement('span');
+                label.classList.add('affiliation-label');
+                label.innerHTML = String(index);
+                element.appendChild(label);
+            }
+            const name = document.createElement('span');
+            name.classList.add('affiliation-name');
+            name.innerHTML = (0, authors_1.affiliationName)(attrs);
+            element.appendChild(name);
+            return element;
+        };
+        this.sortAffiliations = (aff1, aff2) => {
+            const index1 = aff1.index || 10000;
+            const index2 = aff2.index || 10000;
+            return index1 - index2;
+        };
+        this.handleClick = (event) => {
+            const element = event.target;
+            const item = element.closest('.affiliation');
+            if (item) {
+                const node = (0, view_1.findChildByID)(this.view, item.id);
+                if (!node) {
+                    return;
+                }
+                const view = this.view;
+                const tr = view.state.tr;
+                tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, node.pos));
+                view.dispatch(tr);
+            }
+        };
+        this.updateSelection = () => {
+            var _a;
+            const state = this.view.state;
+            const selection = (_a = selected_suggestion_1.selectedSuggestionKey.getState(state)) === null || _a === void 0 ? void 0 : _a.suggestion;
+            this.container
+                .querySelectorAll('.selected-suggestion')
+                .forEach((e) => e.classList.remove('selected-suggestion'));
+            if (selection) {
+                const item = this.container.querySelector(`[data-track-id="${selection.id}"]`);
+                item === null || item === void 0 ? void 0 : item.classList.add('selected-suggestion');
+            }
         };
     }
 }