@manuscripts/body-editor 1.6.20 → 1.7.0-LEAN-3181-0

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

@@ -10,9 +10,9 @@ const TriangleCollapsed_1 = __importDefault(require("@manuscripts/assets/react/T
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const FigureElementOptions = ({ can, files, modelMap, handleAdd, handleUpload, }) => {
+const FigureElementOptions = ({ can, files, filesMap, handleAdd, handleUpload, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
-    let { supplements, otherFiles } = (0, style_guide_1.useFiles)(modelMap, files);
+    let { supplements, otherFiles } = (0, style_guide_1.useFiles)(filesMap, files);
     supplements = supplements.filter(style_guide_1.isImageFile);
     otherFiles = otherFiles.filter(style_guide_1.isImageFile);
     return (react_1.default.createElement(FilesDropdownWrapper, { onClick: toggleOpen, ref: wrapperRef },
@@ -30,9 +30,9 @@ const FigureElementOptions = ({ can, files, modelMap, handleAdd, handleUpload, }
                 " New file...")))));
 };
 exports.FigureElementOptions = FigureElementOptions;
-const FigureOptions = ({ can, files, modelMap, handleDownload, handleUpload, handleDetach, handleReplace, }) => {
+const FigureOptions = ({ can, files, filesMap, handleDownload, handleUpload, handleDetach, handleReplace, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
-    const otherFiles = (0, style_guide_1.useFiles)(modelMap, files).otherFiles.filter(style_guide_1.isImageFile);
+    const otherFiles = (0, style_guide_1.useFiles)(filesMap, files).otherFiles.filter(style_guide_1.isImageFile);
     const showDownload = handleDownload && can.downloadFiles;
     const showUpload = handleUpload && can.uploadFile;
     const showDetach = handleDetach && can.editArticle;

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

@@ -25,6 +25,7 @@ const prosemirror_dropcursor_1 = require("prosemirror-dropcursor");
 const prosemirror_history_1 = require("prosemirror-history");
 const prosemirror_tables_1 = require("prosemirror-tables");
 const keys_1 = __importDefault(require("../keys"));
+const affiliations_1 = __importDefault(require("../plugins/affiliations"));
 const bibliography_1 = __importDefault(require("../plugins/bibliography"));
 const comment_annotation_1 = __importDefault(require("../plugins/comment_annotation"));
 const elements_1 = __importDefault(require("../plugins/elements"));
@@ -52,9 +53,10 @@ exports.default = (props) => {
         (0, elements_1.default)(),
         (0, persist_1.default)(),
         (0, sections_1.default)(),
-        (0, toc_1.default)(props),
+        (0, toc_1.default)(),
         (0, bibliography_1.default)(props),
         (0, objects_1.default)(props),
+        (0, affiliations_1.default)(),
         (0, comment_annotation_1.default)(props),
         (0, paragraphs_1.default)(),
         (0, placeholder_1.default)(),

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

@@ -18,6 +18,8 @@ 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"));
 const bullet_list_editable_1 = __importDefault(require("../views/bullet_list_editable"));
@@ -58,6 +60,8 @@ exports.default = (props, dispatch) => {
         citation: (0, citation_editable_1.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),
@@ -82,5 +86,6 @@ exports.default = (props, dispatch) => {
         table_element_footer: (0, table_element_footer_editable_1.default)(props),
         toc_element: (0, toc_element_editable_1.default)(props),
         comments: (0, empty_1.default)('comments'),
+        supplements: (0, empty_1.default)('supplements'),
     };
 };

package/dist/cjs/index.js

@@ -52,4 +52,5 @@ Object.defineProperty(exports, "commentScroll", { enumerable: true, get: functio
 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; } });
 __exportStar(require("./lib/utils"), exports);
+__exportStar(require("./lib/track-changes-utils"), exports);
 __exportStar(require("./useEditor"), exports);

package/dist/cjs/lib/track-changes-utils.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTracked = exports.getChangeClasses = exports.isPendingSetAttrs = exports.isPending = exports.isPendingInsert = exports.isDeleted = exports.isRejectedInsert = void 0;
+exports.getActualAttrs = exports.isTracked = exports.getChangeClasses = exports.isPendingSetAttrs = exports.isPending = exports.isPendingInsert = exports.isDeleted = exports.isRejectedInsert = void 0;
 function isRejectedInsert(node) {
     if (node.attrs.dataTracked) {
         const changes = node.attrs.dataTracked;
@@ -80,3 +80,13 @@ function isTracked(node) {
     return false;
 }
 exports.isTracked = isTracked;
+function getActualAttrs(node) {
+    const attrs = node.attrs;
+    if (attrs.dataTracked &&
+        attrs.dataTracked[0].status === 'rejected' &&
+        attrs.dataTracked[0].operation === 'set_attrs') {
+        return attrs.dataTracked[0].oldAttrs;
+    }
+    return attrs;
+}
+exports.getActualAttrs = getActualAttrs;

package/dist/cjs/plugins/affiliations.js

@@ -0,0 +1,118 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPluginState = exports.affiliationsKey = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const track_changes_utils_1 = require("../lib/track-changes-utils");
+exports.affiliationsKey = new prosemirror_state_1.PluginKey('affiliations');
+const buildPluginState = (doc) => {
+    const contributors = [];
+    const affiliations = [];
+    doc.descendants((node, pos) => {
+        if ((0, track_changes_utils_1.isDeleted)(node)) {
+            return;
+        }
+        if ((0, transform_1.isAffiliationNode)(node)) {
+            affiliations.push([node, pos]);
+        }
+        if ((0, transform_1.isContributorNode)(node)) {
+            contributors.push([node, pos]);
+        }
+    });
+    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) => {
+            iAffiliations.add(aff);
+        });
+    });
+    const indexedAffiliationIds = new Map([...iAffiliations].map((id, i) => [id, i + 1]));
+    return {
+        indexedAffiliationIds,
+        contributors,
+        affiliations,
+    };
+};
+exports.buildPluginState = buildPluginState;
+let count = 0;
+exports.default = () => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.affiliationsKey,
+        state: {
+            init(config, instance) {
+                return (0, exports.buildPluginState)(instance.doc);
+            },
+            apply(tr, value, oldState, newState) {
+                const prevPluginState = exports.affiliationsKey.getState(oldState);
+                if (!tr.docChanged && prevPluginState) {
+                    return prevPluginState;
+                }
+                else {
+                    return (0, exports.buildPluginState)(newState.doc);
+                }
+            },
+        },
+        appendTransaction(transactions, oldState, newState) {
+            const { indexedAffiliationIds } = exports.affiliationsKey.getState(newState);
+            const oldPluginState = exports.affiliationsKey.getState(oldState);
+            const { tr } = newState;
+            const affiliations = [];
+            newState.doc.descendants((node, pos) => {
+                if ((0, track_changes_utils_1.isDeleted)(node)) {
+                    return;
+                }
+                if ((0, transform_1.isAffiliationNode)(node)) {
+                    affiliations.push([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);
+                    }
+                }
+            }
+            tr.setMeta('origin', 'affiliations');
+            return tr;
+        },
+        props: {
+            decorations: (state) => {
+                const decorations = [];
+                const allNodes = [];
+                state.doc.descendants((node, pos) => {
+                    if ((0, transform_1.isAffiliationNode)(node) || (0, transform_1.isContributorNode)(node)) {
+                        allNodes.push([node, pos]);
+                    }
+                });
+                if (allNodes.length) {
+                    allNodes.forEach(([node, pos]) => {
+                        decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {}, {
+                            refresh: count++,
+                        }));
+                    });
+                }
+                return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
+            },
+        },
+    });
+};

package/dist/cjs/plugins/bibliography/bibliography-utils.js

@@ -128,16 +128,16 @@ const getEffectiveAttrs = (node, excludeDeletedNode) => {
     return isRejected ? nodeChange === null || nodeChange === void 0 ? void 0 : nodeChange.oldAttrs : attrs;
 };
 const getBibliographyItemModelMap = (doc) => {
-    const modelMap = new Map();
+    const bibliographyItemMap = new Map();
     doc.descendants((node) => {
         if (node.type === transform_1.schema.nodes.bibliography_item) {
             const model = (0, exports.getBibliographyItem)(node);
             if (model) {
-                modelMap.set(model._id, model);
+                bibliographyItemMap.set(model._id, model);
             }
         }
     });
-    return modelMap;
+    return bibliographyItemMap;
 };
 exports.getBibliographyItemModelMap = getBibliographyItemModelMap;
 const buildCitations = (citations) => citations.map((citation) => ({

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

@@ -53,19 +53,19 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
             nodes.push([node, pos]);
         }
     });
-    const modelMap = (0, bibliography_utils_1.getBibliographyItemModelMap)(doc);
+    const bibliographyItemMap = (0, bibliography_utils_1.getBibliographyItemModelMap)(doc);
     const citations = (0, bibliography_utils_1.buildCitations)(nodes);
     const $new = {
         citationNodes: nodes,
         citations,
-        bibliographyItems: modelMap,
+        bibliographyItems: bibliographyItemMap,
     };
     if (!csl.style) {
         return $new;
     }
     if ($old &&
         (0, lodash_1.isEqual)(citations, $old.citations) &&
-        (0, lodash_1.isEqual)(modelMap, $old.bibliographyItems)) {
+        (0, lodash_1.isEqual)(bibliographyItemMap, $old.bibliographyItems)) {
         $new.citationCounts = $old.citationCounts;
         $new.provider = $old.provider;
         $new.renderedCitations = $old.renderedCitations;
@@ -78,7 +78,7 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
             citationCounts.set(rid, count + 1);
         });
         const provider = new library_1.CitationProvider({
-            getLibraryItem: (id) => modelMap.get(id),
+            getLibraryItem: (id) => bibliographyItemMap.get(id),
             citationStyle: csl.style || '',
             locale: csl.locale,
         });

package/dist/cjs/plugins/toc.js

@@ -21,27 +21,17 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const utils_1 = require("../lib/utils");
 exports.tocKey = new prosemirror_state_1.PluginKey('toc');
-const buildTOCList = (headingStyles, list, node, depth = 1, prefix = '') => {
+const buildTOCList = (list, node, depth = 1, prefix = '') => {
     list.classList.add('manuscript-toc-list');
     if (depth > 1) {
         list.classList.add('manuscript-toc-inner-list');
     }
-    const paragraphStyle = headingStyles.get(`heading${depth}`);
-    const sectionNumberingStyle = paragraphStyle
-        ? paragraphStyle.sectionNumberingStyle
-        : undefined;
-    const numberingScheme = sectionNumberingStyle && sectionNumberingStyle.numberingScheme
-        ? sectionNumberingStyle.numberingScheme
-        : 'decimal';
-    const suffix = sectionNumberingStyle && sectionNumberingStyle.suffix !== undefined
-        ? sectionNumberingStyle.suffix
-        : '.';
-    let index = sectionNumberingStyle ? sectionNumberingStyle.startIndex : 1;
+    let index = 1;
     node.forEach((child) => {
         if (child.type === transform_1.schema.nodes.body) {
             for (const childNode of (0, utils_1.iterateChildren)(child)) {
                 if ((0, transform_1.isSectionNodeType)(childNode.type) && !(0, transform_1.isTOCSectionNode)(childNode)) {
-                    const numbering = numberingScheme === 'none' ? '' : `${prefix}${index}`;
+                    const numbering = `${prefix}${index}`;
                     const firstChildNode = childNode.child(0);
                     if (firstChildNode.type ===
                         firstChildNode.type.schema.nodes.section_title) {
@@ -49,39 +39,16 @@ const buildTOCList = (headingStyles, list, node, depth = 1, prefix = '') => {
                         item.classList.add('manuscript-toc-list-item');
                         item.setAttribute('data-referenced-section', childNode.attrs.id);
                         item.setAttribute('data-referenced-section-path-length', String(depth));
-                        item.textContent = `${numbering ? `${numbering}${suffix}` : ''} ${firstChildNode.textContent || 'Untitled Section'}`;
+                        item.textContent = `${numbering ? `${numbering}.` : ''} ${firstChildNode.textContent || 'Untitled Section'}`;
                         list.appendChild(item);
                     }
-                    const childSection = (0, utils_1.getMatchingChild)(childNode, (node) => (0, transform_1.isSectionNodeType)(node.type));
-                    if (childSection) {
-                        const paragraphStyle = headingStyles.get(`heading${depth + 1}`);
-                        if (!paragraphStyle || paragraphStyle.partOfTOC) {
-                            const sublist = document.createElement('ul');
-                            buildTOCList(headingStyles, sublist, childNode, depth + 1, numbering ? `${numbering}.` : '');
-                            const item = document.createElement('li');
-                            item.appendChild(sublist);
-                            list.appendChild(item);
-                        }
-                    }
                     index++;
                 }
             }
         }
     });
 };
-const isParagraphStyle = (0, transform_1.hasObjectType)(json_schema_1.ObjectTypes.ParagraphStyle);
-const buildHeadingStyles = (modelMap) => {
-    const styles = new Map();
-    for (const model of modelMap.values()) {
-        if (isParagraphStyle(model)) {
-            if (model.name && /^heading\d+$/.test(model.name)) {
-                styles.set(model.name, model);
-            }
-        }
-    }
-    return styles;
-};
-exports.default = (props) => {
+exports.default = () => {
     return new prosemirror_state_1.Plugin({
         key: exports.tocKey,
         appendTransaction(transactions, oldState, newState) {
@@ -94,8 +61,7 @@ exports.default = (props) => {
                 if (node.type === node.type.schema.nodes.toc_element) {
                     const list = document.createElement('ul');
                     list.setAttribute('data-paragraph-style', node.attrs.paragraphStyle);
-                    const headingStyles = buildHeadingStyles(props.getModelMap());
-                    buildTOCList(headingStyles, list, newState.doc);
+                    buildTOCList(list, newState.doc);
                     const contents = list.outerHTML;
                     if (contents !== node.attrs.contents) {
                         nodesToUpdate.push({

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

@@ -75,7 +75,6 @@ exports.defaultEditorProps = {
         download: () => { },
     },
     getCapabilities: () => (0, style_guide_1.getAllPermitted)(),
-    getModelMap: () => exports.TEST_DATA.MODEL_MAP,
     getManuscript: () => exports.TEST_DATA.MANUSCRIPT,
     cslProps: {
         style: '',
@@ -83,10 +82,6 @@ exports.defaultEditorProps = {
     },
     getCitationProvider: () => undefined,
     plugins: [],
-    deleteModel: (id) => {
-        exports.TEST_DATA.MODEL_MAP.delete(id);
-        return Promise.resolve(id);
-    },
     retrySync: () => Promise.resolve(),
     setComment: () => undefined,
     setSelectedComment: () => undefined,

package/dist/cjs/views/affiliation.js

@@ -0,0 +1,75 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationView = void 0;
+const track_changes_utils_1 = require("../lib/track-changes-utils");
+const affiliations_1 = require("../plugins/affiliations");
+const base_node_view_1 = require("./base_node_view");
+const creators_1 = require("./creators");
+class AffiliationView extends base_node_view_1.BaseNodeView {
+    constructor() {
+        super(...arguments);
+        this.initialise = () => {
+            this.createDOM();
+        };
+        this.updateContents = () => {
+            var _a;
+            const attrs = this.node.attrs;
+            const pluginState = affiliations_1.affiliationsKey.getState(this.view.state);
+            this.dom.innerHTML = this.formatAddress((0, track_changes_utils_1.getActualAttrs)(this.node));
+            if (pluginState === null || pluginState === void 0 ? void 0 : pluginState.indexedAffiliationIds) {
+                const order = pluginState.indexedAffiliationIds.get(attrs.id);
+                this.dom.innerHTML = order
+                    ? `<b>${order}</b> ${this.dom.innerHTML}`
+                    : this.dom.innerHTML;
+                this.dom.setAttribute('style', 'order: ' + (order || (pluginState === null || pluginState === void 0 ? void 0 : pluginState.affiliations.length) + 1));
+            }
+            if ((_a = attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                this.dom.setAttribute('data-track-status', attrs.dataTracked[0].status);
+                this.dom.setAttribute('data-track-op', attrs.dataTracked[0].operation);
+            }
+            else {
+                this.dom.removeAttribute('data-track-status');
+                this.dom.removeAttribute('data-track-type');
+            }
+        };
+        this.createDOM = () => {
+            this.dom = document.createElement('div');
+            this.dom.classList.add('affiliation');
+            this.dom.setAttribute('id', this.node.attrs.id);
+            this.updateContents();
+        };
+        this.ignoreMutation = () => true;
+        this.stopEvent = () => true;
+        this.formatAddress = (affiliation) => {
+            const { department, institution, addressLine1, city, county, country, postCode, } = affiliation;
+            return [
+                department,
+                institution,
+                addressLine1,
+                city,
+                county,
+                country,
+                postCode,
+            ]
+                .filter(Boolean)
+                .join(', ');
+        };
+    }
+}
+exports.AffiliationView = AffiliationView;
+exports.default = (0, creators_1.createNodeView)(AffiliationView);

package/dist/cjs/views/affiliations.js

@@ -0,0 +1,24 @@
+"use strict";
+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 block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class AffiliationsView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.stopEvent = () => true;
+        this.createElement = () => {
+            this.contentDOM = document.createElement(this.elementType);
+            this.contentDOM.className = 'block';
+            this.contentDOM.setAttribute('contenteditable', 'false');
+            this.dom.setAttribute('contenteditable', 'false');
+            this.dom.appendChild(this.contentDOM);
+        };
+    }
+}
+exports.AffiliationsView = AffiliationsView;
+exports.default = (0, creators_1.createNodeView)(AffiliationsView);

package/dist/cjs/views/contributors.js

@@ -4,32 +4,171 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContributorsView = void 0;
-const base_node_view_1 = require("./base_node_view");
+const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
+const track_changes_utils_1 = require("../lib/track-changes-utils");
+const affiliations_1 = require("../plugins/affiliations");
+const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-class ContributorsView extends base_node_view_1.BaseNodeView {
+class ContributorsView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.initialise = () => {
             this.createDOM();
+            this.createGutter('block-gutter', this.gutterButtons().filter(Boolean));
+            this.createElement();
+            this.createGutter('action-gutter', this.actionGutterButtons().filter(Boolean));
+            this.updateContents();
+        };
+        this.updateContents = () => {
+            this.updateClasses();
+            this.updateAttributes();
+            this.container.innerHTML = '';
+            this.buildAuthors();
+            this.createEditButton();
+            this.createLegend();
+        };
+        this.buildAuthors = () => {
+            var _a;
+            const authors = [];
+            const authorsWrapper = document.createElement('div');
+            authorsWrapper.classList.add('contributors-list');
+            (_a = this.node.content) === null || _a === void 0 ? void 0 : _a.forEach((node) => {
+                if ((0, transform_1.isContributorNode)(node)) {
+                    authors.push(node);
+                }
+            });
+            authors
+                .sort((a, b) => Number(a.attrs.priority) - Number(b.attrs.priority))
+                .forEach((author, i) => {
+                if ((0, track_changes_utils_1.getActualAttrs)(author).role !== 'author') {
+                    return;
+                }
+                const jointAuthors = this.isJointFirstAuthor(authors, i);
+                authorsWrapper.appendChild(this.buildAuthor(author, jointAuthors));
+            });
+            this.container.appendChild(authorsWrapper);
+        };
+        this.buildAuthor = (node, isJointFirstAuthor) => {
+            var _a;
+            const pluginState = affiliations_1.affiliationsKey.getState(this.view.state);
+            const attrs = node.attrs;
+            const displayAttr = (0, track_changes_utils_1.getActualAttrs)(node);
+            const container = document.createElement('button');
+            container.classList.add('contributor');
+            container.setAttribute('id', attrs.id);
+            container.setAttribute('contenteditable', 'false');
+            if ((_a = attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                container.setAttribute('data-track-status', attrs.dataTracked[0].status);
+                container.setAttribute('data-track-op', attrs.dataTracked[0].operation);
+            }
+            else {
+                container.removeAttribute('data-track-status');
+                container.removeAttribute('data-track-type');
+            }
+            const can = this.props.getCapabilities();
+            const disableEditButton = !can.editMetadata;
+            const { bibliographicName, isCorresponding, email, id } = displayAttr;
+            container.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (!disableEditButton) {
+                    this.props.openAuthorEditing();
+                    this.props.selectAuthorForEditing(id);
+                }
+            });
+            const name = this.buildNameLiteral(bibliographicName);
+            container.innerHTML =
+                isCorresponding && email
+                    ? `<span class="name">${name} (${email})</span>`
+                    : `<span class="name">${name}</span>`;
+            const noteText = [];
+            if (pluginState === null || pluginState === void 0 ? void 0 : pluginState.indexedAffiliationIds) {
+                displayAttr.affiliations.map((af) => {
+                    const index = pluginState === null || pluginState === void 0 ? void 0 : pluginState.indexedAffiliationIds.get(af);
+                    if (index) {
+                        noteText.push(index.toString());
+                    }
+                });
+            }
+            if (isJointFirstAuthor) {
+                container.appendChild(this.createNote('†', 'Joint contributor'));
+            }
+            if (noteText) {
+                container.appendChild(this.createNote(noteText.join(',')));
+            }
+            if (displayAttr.isCorresponding) {
+                container.appendChild(this.createNote('*', 'Corresponding author'));
+            }
+            return container;
+        };
+        this.initials = (given) => given
+            ? given
+                .trim()
+                .split(' ')
+                .map((part) => part.substr(0, 1).toUpperCase() + '.')
+                .join('')
+            : '';
+        this.buildNameLiteral = ({ given = '', family = '', suffix = '' }) => {
+            if (!given && !family) {
+                return 'Unknown Author';
+            }
+            return [this.initials(given), family, suffix]
+                .filter((part) => part)
+                .join(' ');
+        };
+        this.isJointFirstAuthor = (authors, index) => {
+            const author = index === 0 ? authors[index] : authors[index - 1];
+            return Boolean(author.attrs.isJointContributor);
+        };
+        this.createElement = () => {
+            this.inner = document.createElement('div');
+            this.inner.classList.add('authors-container', 'block');
+            this.dom.appendChild(this.inner);
+            this.container = document.createElement('div');
+            this.container.classList.add('contributors');
+            this.inner.appendChild(this.container);
         };
         this.createDOM = () => {
             this.dom = document.createElement('div');
-            this.dom.classList.add('contributors');
+            this.dom.classList.add('block-container', `block-${this.node.type.name}`);
+        };
+        this.createEditButton = () => {
             const can = this.props.getCapabilities();
-            const { components: { AuthorsInlineViewContainer }, subscribeStore, } = this.props;
-            this.metadata = (0, ReactSubView_1.default)(this.props, AuthorsInlineViewContainer, {
-                showAuthorEditButton: true,
-                disableEditButton: !can.editMetadata,
-                subscribe: subscribeStore,
-            }, this.node, this.getPos, this.view, 'metadata-container');
-            if (this.metadata) {
-                this.dom.appendChild(this.metadata);
+            const button = (0, ReactSubView_1.default)(this.props, style_guide_1.SecondaryButton, {
+                mini: true,
+                onClick: this.props.openAuthorEditing,
+                className: 'edit-authors-button',
+                disabled: !can.editMetadata,
+                children: 'Edit Authors',
+            }, this.node, this.getPos, this.view);
+            this.container.appendChild(button);
+        };
+        this.createLegend = () => {
+            const state = affiliations_1.affiliationsKey.getState(this.view.state);
+            if (state === null || state === void 0 ? void 0 : state.contributors) {
+                const isThereJointContributor = state.contributors.find(([contributor]) => contributor.attrs.isJointContributor);
+                if (isThereJointContributor) {
+                    const element = document.createElement('p');
+                    element.classList.add('contributors-legend');
+                    element.innerHTML =
+                        '<span class="symbol">†</span>These authors contributed equally to this work.';
+                    this.container.appendChild(element);
+                }
             }
         };
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
     }
+    createNote(text = '', title = '') {
+        const el = document.createElement('span');
+        el.innerHTML = text;
+        if (title) {
+            el.setAttribute('title', title);
+        }
+        el.classList.add('contributor-note');
+        return el;
+    }
 }
 exports.ContributorsView = ContributorsView;
 exports.default = (0, creators_1.createNodeView)(ContributorsView);