@manuscripts/body-editor 1.7.3 → 1.7.5

package/dist/es/plugins/selected-suggestion-ui.js

@@ -0,0 +1,126 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { trackChangesPluginKey } from '@manuscripts/track-changes-plugin';
+import { isEqual } from 'lodash';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+class SuggestionView {
+    constructor(view) {
+        this.listener = (e) => {
+            const changeId = e.currentTarget.getAttribute('data-track-id');
+            this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, changeId));
+        };
+        this.view = view;
+        this.addEventListener(view);
+        this.update(view, undefined);
+    }
+    update(view, prevState) {
+        var _a, _b;
+        this.view = view;
+        if (!prevState) {
+            return;
+        }
+        const oldChanges = ((_a = trackChangesPluginKey.getState(prevState)) === null || _a === void 0 ? void 0 : _a.changeSet.changes) || [];
+        const newChangeSet = (_b = trackChangesPluginKey.getState(view.state)) === null || _b === void 0 ? void 0 : _b.changeSet;
+        if (newChangeSet && !isEqual(oldChanges, newChangeSet.changes)) {
+            this.addEventListener(view);
+            oldChanges.map((change) => {
+                var _a;
+                if (!newChangeSet.get(change.id) ||
+                    ((_a = newChangeSet.get(change.id)) === null || _a === void 0 ? void 0 : _a.dataTracked.status) === 'rejected') {
+                    const dom = view.dom.querySelector(`[data-track-id="${change.id}"]`);
+                    dom === null || dom === void 0 ? void 0 : dom.removeEventListener('click', this.listener);
+                }
+            });
+        }
+    }
+    destroy() {
+        this.view.dom
+            .querySelectorAll('[data-track-status="pending"], [data-track-status="accepted"]')
+            .forEach((dom) => {
+            var _a, _b;
+            if ((_b = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('keyword')) {
+                return;
+            }
+            dom.removeEventListener('click', this.listener);
+        });
+    }
+    addEventListener(view) {
+        view.dom
+            .querySelectorAll('[data-track-status="pending"], [data-track-status="accepted"]')
+            .forEach((dom) => {
+            var _a, _b;
+            if ((_b = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('keyword')) {
+                return;
+            }
+            dom.addEventListener('click', this.listener);
+        });
+    }
+}
+const getTrackChangesData = (node) => {
+    var _a;
+    const trackChangesMark = node.marks.find((mark) => (mark.type.name === 'tracked_insert' ||
+        mark.type.name === 'tracked_delete') &&
+        mark.attrs.dataTracked);
+    return (_a = trackChangesMark === null || trackChangesMark === void 0 ? void 0 : trackChangesMark.attrs) === null || _a === void 0 ? void 0 : _a.dataTracked;
+};
+export const SET_SUGGESTION_ID = 'SET_SELECTED_SUGGESTION_ID';
+const CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
+export const selectedSuggestionKey = new PluginKey('selected_suggestion');
+export default (props) => new Plugin({
+    key: selectedSuggestionKey,
+    view: (view) => new SuggestionView(view),
+    state: {
+        init: () => DecorationSet.empty,
+        apply: (tr, value, _, state) => {
+            const suggestionId = tr.getMeta(SET_SUGGESTION_ID);
+            if (suggestionId) {
+                return buildSelectedSuggestionDecoration(suggestionId, state, props);
+            }
+            if (tr.getMeta(CLEAR_SUGGESTION_ID) ||
+                tr.getMeta('track-changes-refresh-changes')) {
+                props.setEditorSelectedSuggestion(undefined);
+                return DecorationSet.empty;
+            }
+            return value;
+        },
+    },
+    props: {
+        handleClick(view, pos) {
+            const nodeClicked = view.state.doc.nodeAt(pos);
+            const trackChangesData = nodeClicked && getTrackChangesData(nodeClicked);
+            if (!trackChangesData) {
+                view.dispatch(view.state.tr.setMeta(CLEAR_SUGGESTION_ID, true));
+                props.setEditorSelectedSuggestion(undefined);
+            }
+        },
+        decorations: (state) => selectedSuggestionKey.getState(state),
+    },
+});
+const buildSelectedSuggestionDecoration = (suggestionId, state, props) => {
+    var _a;
+    const change = (_a = trackChangesPluginKey
+        .getState(state)) === null || _a === void 0 ? void 0 : _a.changeSet.get(suggestionId);
+    const decorations = [];
+    if (change) {
+        const decoration = change.type === 'text-change' ? Decoration.inline : Decoration.node;
+        decorations.push(decoration(change.from, change.to, {
+            class: 'selected-suggestion',
+        }));
+        props.setEditorSelectedSuggestion(change.id);
+    }
+    return DecorationSet.create(state.doc, decorations);
+};

package/dist/es/views/affiliation.js

@@ -36,10 +36,12 @@ export class AffiliationView extends BaseNodeView {
                 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-id', attrs.dataTracked[0].id);
                 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-id');
                 this.dom.removeAttribute('data-track-status');
                 this.dom.removeAttribute('data-track-type');
             }
@@ -51,7 +53,6 @@ export class AffiliationView extends BaseNodeView {
             this.updateContents();
         };
         this.ignoreMutation = () => true;
-        this.stopEvent = () => true;
         this.formatAddress = (affiliation) => {
             const { department, institution, addressLine1, city, county, country, postCode, } = affiliation;
             return [

package/dist/es/views/bibliography_element.js

@@ -26,9 +26,10 @@ import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plu
 import { buildComment, Decoder, } from '@manuscripts/transform';
 import { commentIcon, editIcon } from '../assets';
 import { sanitize } from '../lib/dompurify';
+import { getAttrsTrackingButton, getChangeClasses, } from '../lib/track-changes-utils';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { commentAnnotation } from '../plugins/comment_annotation';
-import { getAttrsTrackingButton, getMarkDecoration, } from '../plugins/tracking-mark';
+import { selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
@@ -55,11 +56,13 @@ export class BibliographyElementBlockView extends BlockView {
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
             const bib = getBibliographyPluginState(this.view.state);
             const commentsDecorationSet = commentAnnotation.getState(this.view.state);
+            const selectedSuggestion = selectedSuggestionKey.getState(this.view.state);
             const commentElementMap = new Map();
             const dataTrackedMap = new Map();
+            let selectedBibItemSuggestion;
             this.node.descendants((node, pos) => {
+                const nodePosition = this.getPos() + pos + 2;
                 if (commentsDecorationSet) {
-                    const nodePosition = this.getPos() + pos + 2;
                     const commentWidget = commentsDecorationSet.find(nodePosition, nodePosition);
                     if (commentWidget.length) {
                         const commentElement = commentWidget[0].type.toDOM();
@@ -71,6 +74,10 @@ export class BibliographyElementBlockView extends BlockView {
                     const lastChange = dataTracked[dataTracked.length - 1];
                     dataTrackedMap.set(node.attrs.id, lastChange);
                 }
+                if ((dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.length) &&
+                    (selectedSuggestion === null || selectedSuggestion === void 0 ? void 0 : selectedSuggestion.find(nodePosition, nodePosition + node.nodeSize).length)) {
+                    selectedBibItemSuggestion = node.attrs.id;
+                }
             });
             const can = this.props.getCapabilities();
             const wrapper = document.createElement('div');
@@ -108,13 +115,16 @@ export class BibliographyElementBlockView extends BlockView {
                 }
                 const dataTracked = dataTrackedMap.get(element.id);
                 if (dataTracked) {
-                    element.classList.add('attrs-track-mark');
-                    const decoration = getMarkDecoration(dataTracked);
-                    decoration.style && element.setAttribute('style', decoration.style);
+                    element.classList.add('attrs-track-mark', ...getChangeClasses([dataTracked]));
                     if (dataTracked.status === CHANGE_STATUS.pending &&
                         dataTracked.operation === CHANGE_OPERATION.set_node_attributes) {
                         element.appendChild(getAttrsTrackingButton(dataTracked.id));
                     }
+                    this.addClickListenerToBibItem(element, dataTracked);
+                }
+                if (selectedBibItemSuggestion &&
+                    selectedBibItemSuggestion === element.id) {
+                    element.classList.add('selected-suggestion');
                 }
                 wrapper.append(element);
             }
@@ -140,6 +150,13 @@ export class BibliographyElementBlockView extends BlockView {
         this.handleDelete = (item) => {
             return this.deleteNode(item._id);
         };
+        this.addClickListenerToBibItem = (element, dataTracked) => {
+            if (dataTracked.status !== CHANGE_STATUS.rejected) {
+                element.addEventListener('click', () => {
+                    this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, dataTracked.id));
+                });
+            }
+        };
     }
 }
 export default createNodeView(BibliographyElementBlockView);

package/dist/es/views/citation.js

@@ -41,7 +41,10 @@ export class CitationView extends BaseNodeView {
         this.updateContents = () => {
             const bib = getBibliographyPluginState(this.view.state);
             const citation = this.getCitation();
-            const classes = ['citation', ...getChangeClasses(this.node)];
+            const classes = [
+                'citation',
+                ...getChangeClasses(this.node.attrs.dataTracked),
+            ];
             const element = document.createElement('span');
             element.className = classes.join(' ');
             const text = bib.renderedCitations.get(citation._id);

package/dist/es/views/contributors.js

@@ -2,6 +2,7 @@ import { SecondaryButton } from '@manuscripts/style-guide';
 import { isContributorNode } from '@manuscripts/transform';
 import { getActualAttrs } from '../lib/track-changes-utils';
 import { affiliationsKey } from '../plugins/affiliations';
+import { selectedSuggestionKey } from '../plugins/selected-suggestion-ui';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
@@ -25,12 +26,17 @@ export class ContributorsView extends BlockView {
         };
         this.buildAuthors = () => {
             var _a;
+            const selectedSuggestion = selectedSuggestionKey.getState(this.view.state);
+            let selectedAuthor;
             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) => {
+            (_a = this.node.content) === null || _a === void 0 ? void 0 : _a.forEach((node, offset) => {
                 if (isContributorNode(node)) {
                     authors.push(node);
+                    if (selectedSuggestion === null || selectedSuggestion === void 0 ? void 0 : selectedSuggestion.find(this.getPos() + offset + 2, this.getPos() + offset + node.nodeSize + 2).length) {
+                        selectedAuthor = node.attrs.id;
+                    }
                 }
             });
             authors
@@ -40,11 +46,11 @@ export class ContributorsView extends BlockView {
                     return;
                 }
                 const jointAuthors = this.isJointFirstAuthor(authors, i);
-                authorsWrapper.appendChild(this.buildAuthor(author, jointAuthors));
+                authorsWrapper.appendChild(this.buildAuthor(author, jointAuthors, selectedAuthor));
             });
             this.container.appendChild(authorsWrapper);
         };
-        this.buildAuthor = (node, isJointFirstAuthor) => {
+        this.buildAuthor = (node, isJointFirstAuthor, selectedAuthor) => {
             var _a;
             const pluginState = affiliationsKey.getState(this.view.state);
             const attrs = node.attrs;
@@ -54,10 +60,12 @@ export class ContributorsView extends BlockView {
             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-id', attrs.dataTracked[0].id);
                 container.setAttribute('data-track-status', attrs.dataTracked[0].status);
                 container.setAttribute('data-track-op', attrs.dataTracked[0].operation);
             }
             else {
+                container.removeAttribute('data-track-id');
                 container.removeAttribute('data-track-status');
                 container.removeAttribute('data-track-type');
             }
@@ -94,6 +102,9 @@ export class ContributorsView extends BlockView {
             if (displayAttr.isCorresponding) {
                 container.appendChild(this.createNote('*', 'Corresponding author'));
             }
+            if (selectedAuthor && selectedAuthor === attrs.id) {
+                container.classList.add('selected-suggestion');
+            }
             return container;
         };
         this.initials = (given) => given

package/dist/es/views/cross_reference.js

@@ -33,7 +33,10 @@ export class CrossReferenceView extends BaseNodeView {
             });
         };
         this.updateContents = () => {
-            const nodeClasses = ['cross-reference', ...getChangeClasses(this.node)];
+            const nodeClasses = [
+                'cross-reference',
+                ...getChangeClasses(this.node.attrs.dataTracked),
+            ];
             this.dom.className = nodeClasses.join(' ');
             this.dom.textContent = this.node.attrs.customLabel || this.node.attrs.label;
             this.dom.addEventListener('click', this.handleClick);

package/dist/es/views/keyword.js

@@ -39,10 +39,14 @@ export class KeywordView extends BaseNodeView {
             this.contentDOM = document.createElement('span');
         };
         this.updateContents = () => {
-            const keyword = document.createElement('span');
-            const classes = ['keyword', ...getChangeClasses(this.node)];
-            keyword.classList.add(...classes);
-            keyword.appendChild(this.contentDOM);
+            var _a;
+            const classes = [
+                'keyword',
+                ...getChangeClasses(this.node.attrs.dataTracked),
+            ];
+            this.dom.className = classes.join(' ');
+            this.dom.innerHTML = '';
+            this.dom.appendChild(this.contentDOM);
             const can = this.props.getCapabilities();
             if (can.editArticle) {
                 const svg = new DOMParser()
@@ -50,10 +54,16 @@ export class KeywordView extends BaseNodeView {
                     .querySelector('svg');
                 svg.classList.add('delete-keyword');
                 svg.addEventListener('click', this.showConfirmationDialog);
-                keyword.appendChild(svg);
+                this.dom.appendChild(svg);
+            }
+            if ((_a = this.node.attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                this.dom.setAttribute('data-track-id', this.node.attrs.dataTracked[0].id);
+                this.dom.setAttribute('data-track-status', this.node.attrs.dataTracked[0].status);
+            }
+            else {
+                this.dom.removeAttribute('data-track-id');
+                this.dom.removeAttribute('data-track-status');
             }
-            this.dom.innerHTML = '';
-            this.dom.appendChild(keyword);
         };
         this.showConfirmationDialog = () => {
             var _a;

package/dist/types/assets.d.ts

@@ -15,3 +15,4 @@
  */
 export declare const editIcon = "\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M8.706 2.33624L11.553 5.19824L4.345 12.4422L1.498 9.58124L8.706 2.33624V2.33624ZM13.714 1.64624L12.444 0.37024C12.3273 0.253047 12.1886 0.160056 12.0359 0.0966039C11.8831 0.0331518 11.7194 0.000488281 11.554 0.000488281C11.3886 0.000488281 11.2249 0.0331518 11.0721 0.0966039C10.9194 0.160056 10.7807 0.253047 10.664 0.37024L9.447 1.59224L12.295 4.45424L13.715 3.02824C13.8976 2.84462 14.0001 2.59619 14.0001 2.33724C14.0001 2.07829 13.8976 1.82986 13.715 1.64624H13.714ZM0.00800253 13.6032C-0.00418388 13.6571 -0.00246802 13.7131 0.0129883 13.7661C0.0284447 13.819 0.0571327 13.8672 0.096349 13.906C0.135565 13.9448 0.184019 13.973 0.237143 13.9879C0.290268 14.0028 0.346315 14.004 0.400003 13.9912L3.573 13.2172L0.727003 10.3552L0.0070026 13.6032H0.00800253Z\"\n      fill=\"#6E6E6E\"\n    />\n  </svg>\n";
 export declare const commentIcon = "\n<svg\n    width=\"20\"\n    height=\"15\"\n    viewBox=\"0 0 20 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.94841 4.18311C7.98238 3.9602 8 3.73191 8 3.49951C8 3.22073 7.97465 2.94787 7.92613 2.68311H13.5C14.8854 2.68311 16.25 3.6425 16.25 5.09977V9.02453L19.1086 12.9949C19.2731 13.2233 19.2958 13.5245 19.1675 13.775C19.0392 14.0255 18.7814 14.1831 18.5 14.1831H5.5C4.11463 14.1831 2.75 13.2237 2.75 11.7664V7.93729C2.9939 7.97821 3.24446 7.99951 3.5 7.99951C3.75553 7.99951 4.00609 7.97821 4.25 7.93729V11.7664C4.25 12.1508 4.67537 12.6831 5.5 12.6831H17.0358L14.8913 9.70467C14.7994 9.57703 14.75 9.42372 14.75 9.26644V5.09977C14.75 4.71538 14.3246 4.18311 13.5 4.18311H7.94841Z\"\n      fill=\"#FFBD26\"\n    />\n    <path\n      d=\"M11.5 6.99951H8.5\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M12 9.99951H7\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M3.5 1L3.5 6\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M6 3.5L1 3.5\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n";
+export declare const editAttrsTrackingIcon = "\n <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M12 2L14 4L9 9L6 10L7 7L12 2Z\"\n      stroke=\"#353535\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M13 10V11.5C13 12.328 12.328 13 11.5 13H4.5C3.672 13 3 12.328 3 11.5V4.5C3 3.672 3.672 3 4.5 3H6\"\n      stroke=\"#353535\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n";

package/dist/types/configs/editor-plugins.d.ts

@@ -28,7 +28,7 @@ interface PluginProps {
     deleteModel: (id: string) => Promise<string>;
     setComment: (comment?: CommentAnnotation) => void;
     setSelectedComment: (id?: string) => void;
-    setEditorSelectedSuggestion?: (id?: string) => void;
+    setEditorSelectedSuggestion: (id?: string) => void;
     getCapabilities: () => Capabilities;
     plugins?: Plugin<ManuscriptSchema>[];
     cslProps: CSLProps;

package/dist/types/index.d.ts

@@ -26,6 +26,7 @@ export { PopperManager } from './lib/popper';
 export * from './toolbar';
 export * from './plugins/highlight';
 export { commentScroll, isThereSelector, isHighlightComment, } from './plugins/comment_annotation';
+export { SET_SUGGESTION_ID } from './plugins/selected-suggestion-ui';
 export * from './lib/utils';
 export * from './lib/track-changes-utils';
 export * from './useEditor';

package/dist/types/lib/track-changes-utils.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { TrackedAttrs } from '@manuscripts/track-changes-plugin';
 import { ManuscriptNode } from '@manuscripts/transform';
 import { Node as ProsemirrorNode } from 'prosemirror-model';
 export declare function isRejectedInsert(node: ProsemirrorNode): boolean;
@@ -20,6 +21,7 @@ export declare function isDeleted(node: ProsemirrorNode): boolean;
 export declare function isPendingInsert(node: ProsemirrorNode): boolean;
 export declare function isPending(node: ProsemirrorNode): boolean;
 export declare function isPendingSetAttrs(node: ProsemirrorNode): boolean;
-export declare function getChangeClasses(node: ProsemirrorNode): string[];
+export declare function getChangeClasses(dataTracked?: TrackedAttrs[]): string[];
 export declare function isTracked(node: ProsemirrorNode): boolean;
 export declare function getActualAttrs<T extends ManuscriptNode>(node: T): T["attrs"];
+export declare const getAttrsTrackingButton: (changeID: string) => HTMLButtonElement;

package/dist/types/plugins/{track-changes-ui.d.ts → selected-suggestion-ui.d.ts}

@@ -13,10 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TrackChangesState } from '@manuscripts/track-changes-plugin';
-import { Plugin } from 'prosemirror-state';
-interface TrackChangesProps {
-    setEditorSelectedSuggestion?: (id?: string) => void;
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+interface SelectedSuggestionProps {
+    setEditorSelectedSuggestion: (id?: string) => void;
 }
-declare const _default: (props: TrackChangesProps) => Plugin<TrackChangesState>;
+export declare const SET_SUGGESTION_ID = "SET_SELECTED_SUGGESTION_ID";
+export declare const selectedSuggestionKey: PluginKey<DecorationSet>;
+declare const _default: (props: SelectedSuggestionProps) => Plugin<DecorationSet>;
 export default _default;

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

@@ -24,7 +24,6 @@ export declare class AffiliationView<PropsType extends BaseNodeProps> extends Ba
     updateContents: () => void;
     protected createDOM: () => void;
     ignoreMutation: () => boolean;
-    stopEvent: () => boolean;
     formatAddress: (affiliation: AffiliationNode['attrs']) => string;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<AffiliationView<any>>;

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

@@ -24,6 +24,7 @@ export interface BaseNodeProps {
     getModelMap: () => Map<string, Model>;
     popper: PopperManager;
     cslProps: CSLProps;
+    setEditorSelectedSuggestion: (id?: string) => void;
 }
 export declare class BaseNodeView<PropsType extends BaseNodeProps> implements NodeView {
     readonly props: PropsType;

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

@@ -32,6 +32,7 @@ export declare class BibliographyElementBlockView<PropsType extends Bibliography
     createElement: () => void;
     private handleSave;
     private handleDelete;
+    private addClickListenerToBibItem;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<BibliographyElementBlockView<any>>;
 export default _default;

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

@@ -13,7 +13,7 @@ export declare class ContributorsView<PropsType extends ContributorsProps> exten
     buildAuthors: () => void;
     container: HTMLElement;
     inner: HTMLElement;
-    buildAuthor: (node: ContributorNode, isJointFirstAuthor: boolean) => HTMLButtonElement;
+    buildAuthor: (node: ContributorNode, isJointFirstAuthor: boolean, selectedAuthor?: string) => HTMLButtonElement;
     createNote(text?: string, title?: string): HTMLSpanElement;
     initials: (given: string) => string;
     buildNameLiteral: ({ given, family, suffix }: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/AdvancedEditor.css

@@ -571,7 +571,7 @@ Next levels are shifted 'up' by 1
   background-color: inherit !important;
 }
 
-.keywords .keyword:hover {
+.keywords .keyword:hover:not(.pending) {
   background-color: #f2fbfc !important;
 }
 
@@ -688,8 +688,19 @@ Next levels are shifted 'up' by 1
   --selection-bg-color: #bce7f6;
 }
 
-.ProseMirror ::selection {
-  background: var(--selection-bg-color);
+.selected-suggestion::selection {
+  background: none;
+}
+
+.selected-suggestion {
+  background: #BCE7F6 !important;
+}
+
+.selected-suggestion {
+  border-width: 2px 0 2px 0 !important;
+  border-color: #20AEDF !important;
+  border-radius: 3px !important;
+  border-style: solid !important;
 }
 
 .ProseMirror .inserted.pending {
@@ -880,3 +891,7 @@ Next levels are shifted 'up' by 1
   flex-direction: column;
   align-items: flex-start;
 }
+
+* {
+  scroll-behavior: smooth;
+}

package/styles/Editor.css

@@ -1013,6 +1013,6 @@
   line-height: 1.43;
   padding-left: 65px;
 }
-div[style*="background-color: rgba(249, 2, 2, 0.53)"] {
-  background-color: #ffe08b !important;
+.highlight {
+  background-color: #ffeebf !important;
 }

package/dist/cjs/plugins/track-changes-ui.js

@@ -1,104 +0,0 @@
-"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 });
-const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
-const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_view_1 = require("prosemirror-view");
-const ACCEPT_BUTTON_XLINK = '#track-changes-action-accept';
-const REJECT_BUTTON_XLINK = '#track-changes-action-reject';
-const BASE_CLASS = 'track-changes';
-var CLASSES;
-(function (CLASSES) {
-    CLASSES["focused"] = "focused";
-    CLASSES["control"] = "control";
-})(CLASSES || (CLASSES = {}));
-const createControl = (change, action, xLink) => {
-    return `
-        <button type="button" data-action="${action}" data-changeid="${change.id}">
-          <svg><use href="${xLink}"></use></svg>
-        </button>
-      `;
-};
-const getClassnames = (...types) => {
-    return [BASE_CLASS].concat(types.filter(Boolean).map((type) => `${BASE_CLASS}--${type}`));
-};
-const addClassnamesToEl = (el, ...types) => {
-    getClassnames(...types).forEach((classname) => el.classList.add(classname));
-};
-const geControlsPosition = (change) => {
-    const NODE_OFFSET = {
-        'text-change': 0,
-        'wrap-change': 0,
-        'mark-change': 0,
-        'node-attr-change': 0,
-        'node-change-keyword': 1,
-    };
-    const offset = (change.type === 'node-change'
-        ? NODE_OFFSET[`${change.type}-${change.nodeType}`]
-        : NODE_OFFSET[change.type]) || 0;
-    return change.to - offset;
-};
-const createControls = (change) => {
-    return prosemirror_view_1.Decoration.widget(geControlsPosition(change), () => {
-        const el = document.createElement('div');
-        addClassnamesToEl(el, CLASSES.control);
-        el.dataset.changeid = change.id;
-        el.innerHTML =
-            createControl(change, 'reject', REJECT_BUTTON_XLINK) +
-                createControl(change, 'accept', ACCEPT_BUTTON_XLINK);
-        return el;
-    }, { side: -1 });
-};
-const decorateChanges = (state) => {
-    const pluginState = track_changes_plugin_1.trackChangesPluginKey.getState(state);
-    if (!pluginState) {
-        return [];
-    }
-    const { pending } = pluginState.changeSet;
-    return pending.reduce((decorations, change) => {
-        if (change.id === null) {
-            return decorations;
-        }
-        return [...decorations, createControls(change)];
-    }, []);
-};
-const getTrackChangesData = (node) => {
-    var _a;
-    const trackChangesMark = node.marks.find((mark) => (mark.type.name === 'tracked_insert' ||
-        mark.type.name === 'tracked_delete') &&
-        mark.attrs.dataTracked);
-    return (_a = trackChangesMark === null || trackChangesMark === void 0 ? void 0 : trackChangesMark.attrs) === null || _a === void 0 ? void 0 : _a.dataTracked;
-};
-exports.default = (props) => new prosemirror_state_1.Plugin({
-    props: {
-        handleClick(view, pos) {
-            if (props.setEditorSelectedSuggestion) {
-                const nodeClicked = view.state.doc.nodeAt(pos);
-                const trackChangesData = nodeClicked && getTrackChangesData(nodeClicked);
-                if (trackChangesData) {
-                    props.setEditorSelectedSuggestion(trackChangesData.id);
-                }
-                else {
-                    props.setEditorSelectedSuggestion(undefined);
-                }
-            }
-        },
-        decorations: (state) => {
-            return prosemirror_view_1.DecorationSet.create(state.doc, decorateChanges(state));
-        },
-    },
-});