@manuscripts/body-editor 2.0.35 → 2.0.36-LEAN-3883.0

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeCellsWithSpace = exports.addColumns = exports.addRows = exports.insertTableFootnote = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertContributors = exports.insertAbstract = exports.insertBackMatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertFootnote = exports.createFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
+exports.autoComplete = exports.mergeCellsWithSpace = exports.addColumns = exports.addRows = exports.insertTableFootnote = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertContributors = exports.insertAbstract = exports.insertBackMatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertFootnote = exports.createFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -28,12 +28,14 @@ const prosemirror_utils_1 = require("prosemirror-utils");
 const comments_1 = require("./lib/comments");
 const doc_1 = require("./lib/doc");
 const helpers_1 = require("./lib/helpers");
+const section_titles_1 = require("./lib/section-titles");
 const track_changes_utils_1 = require("./lib/track-changes-utils");
 const utils_1 = require("./lib/utils");
 const comments_2 = require("./plugins/comments");
 const editor_props_1 = require("./plugins/editor-props");
 const footnotes_1 = require("./plugins/footnotes");
 const footnotes_utils_1 = require("./plugins/footnotes/footnotes-utils");
+const autocompletion_1 = require("./plugins/section_title/autocompletion");
 const markActive = (type) => (state) => {
     const { from, $from, to, empty } = state.selection;
     return empty
@@ -472,16 +474,6 @@ const insertSection = (subsection = false) => (state, dispatch, view) => {
     return true;
 };
 exports.insertSection = insertSection;
-const sectionTitles = new Map([
-    ['MPSectionCategory:acknowledgement', 'Acknowledgments'],
-    ['MPSectionCategory:availability', 'Availability'],
-    ['MPSectionCategory:competing-interests', 'COI Statement'],
-    ['MPSectionCategory:con', 'Contributed-by information'],
-    ['MPSectionCategory:ethics-statement', 'Ethics Statement'],
-    ['MPSectionCategory:financial-disclosure', 'Financial Disclosure'],
-    ['MPSectionCategory:supplementary-material', 'Supplementary Material'],
-    ['MPSectionCategory:supported-by', 'Supported By'],
-]);
 const insertBackMatterSection = (category) => (state, dispatch, view) => {
     const backmatter = (0, doc_1.findBackmatter)(state.doc);
     const sections = (0, prosemirror_utils_1.findChildrenByType)(backmatter.node, transform_1.schema.nodes.section);
@@ -499,7 +491,7 @@ const insertBackMatterSection = (category) => (state, dispatch, view) => {
     const node = transform_1.schema.nodes.section.createAndFill({
         category,
     }, [
-        transform_1.schema.nodes.section_title.create({}, transform_1.schema.text(sectionTitles.get(category) || '')),
+        transform_1.schema.nodes.section_title.create({}, transform_1.schema.text(section_titles_1.sectionTitles.get(category) || '')),
     ]);
     const tr = state.tr.insert(pos, node);
     if (dispatch) {
@@ -1126,3 +1118,13 @@ function mergeCellsWithSpace(state, dispatch) {
     return true;
 }
 exports.mergeCellsWithSpace = mergeCellsWithSpace;
+const autoComplete = (state, dispatch) => {
+    const autocompleteText = (0, autocompletion_1.checkForCompletion)(state);
+    if (autocompleteText) {
+        const tr = state.tr.insertText(autocompleteText, state.selection.from);
+        dispatch && dispatch(tr);
+        return true;
+    }
+    return false;
+};
+exports.autoComplete = autoComplete;

package/dist/cjs/keys/misc.js

@@ -39,6 +39,7 @@ const customKeymap = {
     'Mod-Alt-=': (0, prosemirror_commands_1.toggleMark)(transform_1.schema.marks.superscript),
     'Mod-Alt--': (0, prosemirror_commands_1.toggleMark)(transform_1.schema.marks.subscript),
     'Ctrl->': (0, prosemirror_commands_1.wrapIn)(transform_1.schema.nodes.blockquote),
+    Enter: (0, prosemirror_commands_1.chainCommands)(commands_1.autoComplete, prosemirror_commands_1.newlineInCode, prosemirror_commands_1.createParagraphNear, prosemirror_commands_1.liftEmptyBlock, prosemirror_commands_1.splitBlock),
     'Shift-Mod-Enter': (0, commands_1.insertSection)(true),
     'Mod-Enter': (0, prosemirror_commands_1.chainCommands)(prosemirror_commands_1.exitCode, (0, commands_1.insertSection)()),
     'Shift-Enter': (0, prosemirror_commands_1.chainCommands)(prosemirror_commands_1.exitCode, commands_1.insertBreak),

package/dist/cjs/lib/section-titles.js

@@ -0,0 +1,28 @@
+"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.sectionTitles = void 0;
+exports.sectionTitles = new Map([
+    ['MPSectionCategory:acknowledgement', 'Acknowledgments'],
+    ['MPSectionCategory:availability', 'Availability'],
+    ['MPSectionCategory:competing-interests', 'COI Statement'],
+    ['MPSectionCategory:con', 'Contributed-by information'],
+    ['MPSectionCategory:ethics-statement', 'Ethics Statement'],
+    ['MPSectionCategory:financial-disclosure', 'Financial Disclosure'],
+    ['MPSectionCategory:supplementary-material', 'Supplementary Material'],
+    ['MPSectionCategory:supported-by', 'Supported By'],
+]);

package/dist/cjs/plugins/section_title/autocompletion.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkForCompletion = exports.hasAutoCompletionSlack = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const section_titles_1 = require("../../lib/section-titles");
+function cursorAtTheEndOfText(state, nodeSize, nodePos) {
+    const { from, to } = state.selection;
+    return from === to && to === nodePos + nodeSize - 1;
+}
+function hasAutoCompletionSlack(parentSection, titleSection) {
+    const category = parentSection.attrs.category;
+    const title = section_titles_1.sectionTitles.get(category);
+    if (category &&
+        title &&
+        titleSection.textContent &&
+        title.startsWith(titleSection.textContent)) {
+        const suggestionText = title.slice(titleSection.textContent.length);
+        return suggestionText;
+    }
+    else {
+        return '';
+    }
+}
+exports.hasAutoCompletionSlack = hasAutoCompletionSlack;
+function checkForCompletion(state) {
+    const section = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.selection.$from, transform_1.schema.nodes.section);
+    const title = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)(state.selection.$from, transform_1.schema.nodes.section_title);
+    if (section &&
+        title &&
+        cursorAtTheEndOfText(state, title.node.nodeSize, title.pos)) {
+        const text = hasAutoCompletionSlack(section.node, title.node);
+        return text;
+    }
+    return '';
+}
+exports.checkForCompletion = checkForCompletion;

package/dist/cjs/plugins/{section_title.js → section_title/index.js}

@@ -4,7 +4,9 @@ exports.sectionTitleKey = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const track_changes_utils_1 = require("../lib/track-changes-utils");
+const prosemirror_view_1 = require("prosemirror-view");
+const track_changes_utils_1 = require("../../lib/track-changes-utils");
+const autocompletion_1 = require("./autocompletion");
 exports.sectionTitleKey = new prosemirror_state_1.PluginKey('sectionNumbering');
 const calculateSectionLevels = (node, startPos, sectionNumberMap, numbering = [0]) => {
     node.forEach((childNode, offset) => {
@@ -35,6 +37,21 @@ const getPluginState = (doc) => {
 exports.default = () => {
     return new prosemirror_state_1.Plugin({
         key: exports.sectionTitleKey,
+        props: {
+            decorations(state) {
+                const text = (0, autocompletion_1.checkForCompletion)(state);
+                if (text) {
+                    const decoration = prosemirror_view_1.Decoration.widget(state.selection.from, () => {
+                        const node = document.createElement('span');
+                        node.classList.add('completion-bearer');
+                        node.dataset.suggest = text;
+                        return node;
+                    });
+                    return prosemirror_view_1.DecorationSet.create(state.doc, [decoration]);
+                }
+                return prosemirror_view_1.DecorationSet.empty;
+            },
+        },
         state: {
             init: (_, state) => {
                 return getPluginState(state.doc);

package/dist/cjs/versions.js

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

package/dist/es/commands.js

@@ -25,12 +25,14 @@ import { findChildrenByType, findParentNodeOfType, hasParentNodeOfType, } from '
 import { getCommentKey, getCommentRange } from './lib/comments';
 import { findBackmatter, findBibliographySection, findBody, insertSupplementsNode, } from './lib/doc';
 import { findWordBoundaries, isNodeOfType, nearestAncestor, } from './lib/helpers';
+import { sectionTitles } from './lib/section-titles';
 import { isDeleted, isRejectedInsert } from './lib/track-changes-utils';
 import { findParentNodeWithId, getChildOfType, getMatchingChild, } from './lib/utils';
 import { setCommentSelection } from './plugins/comments';
 import { getEditorProps } from './plugins/editor-props';
 import { footnotesKey } from './plugins/footnotes';
 import { getNewFootnotePos } from './plugins/footnotes/footnotes-utils';
+import { checkForCompletion } from './plugins/section_title/autocompletion';
 export const markActive = (type) => (state) => {
     const { from, $from, to, empty } = state.selection;
     return empty
@@ -446,16 +448,6 @@ export const insertSection = (subsection = false) => (state, dispatch, view) =>
     }
     return true;
 };
-const sectionTitles = new Map([
-    ['MPSectionCategory:acknowledgement', 'Acknowledgments'],
-    ['MPSectionCategory:availability', 'Availability'],
-    ['MPSectionCategory:competing-interests', 'COI Statement'],
-    ['MPSectionCategory:con', 'Contributed-by information'],
-    ['MPSectionCategory:ethics-statement', 'Ethics Statement'],
-    ['MPSectionCategory:financial-disclosure', 'Financial Disclosure'],
-    ['MPSectionCategory:supplementary-material', 'Supplementary Material'],
-    ['MPSectionCategory:supported-by', 'Supported By'],
-]);
 export const insertBackMatterSection = (category) => (state, dispatch, view) => {
     const backmatter = findBackmatter(state.doc);
     const sections = findChildrenByType(backmatter.node, schema.nodes.section);
@@ -1079,3 +1071,12 @@ export function mergeCellsWithSpace(state, dispatch) {
     }
     return true;
 }
+export const autoComplete = (state, dispatch) => {
+    const autocompleteText = checkForCompletion(state);
+    if (autocompleteText) {
+        const tr = state.tr.insertText(autocompleteText, state.selection.from);
+        dispatch && dispatch(tr);
+        return true;
+    }
+    return false;
+};

package/dist/es/keys/misc.js

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 import { schema } from '@manuscripts/transform';
-import { chainCommands, exitCode, joinDown, joinUp, lift, toggleMark, wrapIn, } from 'prosemirror-commands';
+import { chainCommands, createParagraphNear, exitCode, joinDown, joinUp, lift, liftEmptyBlock, newlineInCode, splitBlock, toggleMark, wrapIn, } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { undoInputRule } from 'prosemirror-inputrules';
 import { goToNextCell } from 'prosemirror-tables';
-import { ignoreAtomBlockNodeBackward, ignoreAtomBlockNodeForward, ignoreMetaNodeBackspaceCommand, insertBlock, insertBreak, insertCrossReference, insertInlineCitation, insertInlineEquation, insertSection, selectAllIsolating, } from '../commands';
+import { autoComplete, ignoreAtomBlockNodeBackward, ignoreAtomBlockNodeForward, ignoreMetaNodeBackspaceCommand, insertBlock, insertBreak, insertCrossReference, insertInlineCitation, insertInlineEquation, insertSection, selectAllIsolating, } from '../commands';
 const customKeymap = {
     Backspace: chainCommands(undoInputRule, ignoreAtomBlockNodeBackward, ignoreMetaNodeBackspaceCommand),
     Delete: ignoreAtomBlockNodeForward,
@@ -37,6 +37,7 @@ const customKeymap = {
     'Mod-Alt-=': toggleMark(schema.marks.superscript),
     'Mod-Alt--': toggleMark(schema.marks.subscript),
     'Ctrl->': wrapIn(schema.nodes.blockquote),
+    Enter: chainCommands(autoComplete, newlineInCode, createParagraphNear, liftEmptyBlock, splitBlock),
     'Shift-Mod-Enter': insertSection(true),
     'Mod-Enter': chainCommands(exitCode, insertSection()),
     'Shift-Enter': chainCommands(exitCode, insertBreak),

package/dist/es/lib/section-titles.js

@@ -0,0 +1,25 @@
+/*!
+ * © 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.
+ */
+export const sectionTitles = new Map([
+    ['MPSectionCategory:acknowledgement', 'Acknowledgments'],
+    ['MPSectionCategory:availability', 'Availability'],
+    ['MPSectionCategory:competing-interests', 'COI Statement'],
+    ['MPSectionCategory:con', 'Contributed-by information'],
+    ['MPSectionCategory:ethics-statement', 'Ethics Statement'],
+    ['MPSectionCategory:financial-disclosure', 'Financial Disclosure'],
+    ['MPSectionCategory:supplementary-material', 'Supplementary Material'],
+    ['MPSectionCategory:supported-by', 'Supported By'],
+]);

package/dist/es/plugins/section_title/autocompletion.js

@@ -0,0 +1,32 @@
+import { schema, } from '@manuscripts/transform';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { sectionTitles } from '../../lib/section-titles';
+function cursorAtTheEndOfText(state, nodeSize, nodePos) {
+    const { from, to } = state.selection;
+    return from === to && to === nodePos + nodeSize - 1;
+}
+export function hasAutoCompletionSlack(parentSection, titleSection) {
+    const category = parentSection.attrs.category;
+    const title = sectionTitles.get(category);
+    if (category &&
+        title &&
+        titleSection.textContent &&
+        title.startsWith(titleSection.textContent)) {
+        const suggestionText = title.slice(titleSection.textContent.length);
+        return suggestionText;
+    }
+    else {
+        return '';
+    }
+}
+export function checkForCompletion(state) {
+    const section = findParentNodeOfTypeClosestToPos(state.selection.$from, schema.nodes.section);
+    const title = findParentNodeOfTypeClosestToPos(state.selection.$from, schema.nodes.section_title);
+    if (section &&
+        title &&
+        cursorAtTheEndOfText(state, title.node.nodeSize, title.pos)) {
+        const text = hasAutoCompletionSlack(section.node, title.node);
+        return text;
+    }
+    return '';
+}

package/dist/es/plugins/{section_title.js → section_title/index.js}

@@ -1,7 +1,9 @@
 import { schema } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { findChildrenByType } from 'prosemirror-utils';
-import { isRejectedInsert } from '../lib/track-changes-utils';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { isRejectedInsert } from '../../lib/track-changes-utils';
+import { checkForCompletion } from './autocompletion';
 export const sectionTitleKey = new PluginKey('sectionNumbering');
 const calculateSectionLevels = (node, startPos, sectionNumberMap, numbering = [0]) => {
     node.forEach((childNode, offset) => {
@@ -32,6 +34,21 @@ const getPluginState = (doc) => {
 export default () => {
     return new Plugin({
         key: sectionTitleKey,
+        props: {
+            decorations(state) {
+                const text = checkForCompletion(state);
+                if (text) {
+                    const decoration = Decoration.widget(state.selection.from, () => {
+                        const node = document.createElement('span');
+                        node.classList.add('completion-bearer');
+                        node.dataset.suggest = text;
+                        return node;
+                    });
+                    return DecorationSet.create(state.doc, [decoration]);
+                }
+                return DecorationSet.empty;
+            },
+        },
         state: {
             init: (_, state) => {
                 return getPluginState(state.doc);

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.0.35';
+export const VERSION = '2.0.36-LEAN-3883.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -70,4 +70,5 @@ export declare const insertTableFootnote: (tableElementNode: ManuscriptNode, pos
 export declare const addRows: (direction: 'top' | 'bottom') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export declare const addColumns: (direction: 'right' | 'left') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export declare function mergeCellsWithSpace(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+export declare const autoComplete: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export {};

package/dist/types/lib/section-titles.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * © 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 { SectionCategory } from '@manuscripts/transform';
+export declare const sectionTitles: Map<SectionCategory, string>;

package/dist/types/plugins/section_title/autocompletion.d.ts

@@ -0,0 +1,4 @@
+import { SectionNode, SectionTitleNode } from '@manuscripts/transform';
+import { EditorState } from 'prosemirror-state';
+export declare function hasAutoCompletionSlack(parentSection: SectionNode, titleSection: SectionTitleNode): string;
+export declare function checkForCompletion(state: EditorState): string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.0.35";
+export declare const VERSION = "2.0.36-LEAN-3883.0";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

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

package/styles/AdvancedEditor.css

@@ -1,20 +1,15 @@
 .ProseMirror
   > div.body
-  section:not(.toc) 
- .block-section_title
+  section:not(.toc)
+  .block-section_title
   h1.empty-node[data-placeholder]::before {
   content: attr(data-section-number) '. ' attr(data-placeholder);
 }
 
-.ProseMirror
-  > div.body
-  section:not(.toc) 
- .block-section_title
-  h1::before {
+.ProseMirror > div.body section:not(.toc) .block-section_title h1::before {
   content: attr(data-section-number) '. ';
 }
 
-
 .ProseMirror > div .block-section_title > h1 {
   font-size: 16pt !important;
   font-style: normal !important;
@@ -39,8 +34,6 @@
   font-size: 13.5pt !important;
 }
 
-
-
 .ProseMirror div.backmatter::before {
   content: '';
   border-bottom: 1px dashed #c9c9c9;
@@ -51,6 +44,15 @@
   font-size: 13.5pt !important;
   color: #6e6e6e !important;
 }
+.completion-bearer {
+  pointer-events: none;
+}
+.block-section_title .completion-bearer:after {
+  content: attr(data-suggest);
+  opacity: 0.5;
+  pointer-events: none;
+  font-style: italic;
+}
 
 .ProseMirror p.block {
   font-size: 12pt !important;
@@ -154,8 +156,8 @@
   position: static;
 }
 
-
-.comment-marker.selected-comment > svg > path, .comment-marker:active > svg > path {
+.comment-marker.selected-comment > svg > path,
+.comment-marker:active > svg > path {
   stroke: #f7b314;
   fill: #ffe0b2;
 }
@@ -170,7 +172,8 @@
   position: relative;
 }
 
-.block > div.comment-marker, .figure-block > div.comment-marker {
+.block > div.comment-marker,
+.figure-block > div.comment-marker {
   top: -25px;
   left: 100%;
 }
@@ -209,7 +212,7 @@ span.comment-marker {
   top: 12px;
 }
 
-.comment-marker[data-count="0"] {
+.comment-marker[data-count='0'] {
   display: none;
 }
 
@@ -221,7 +224,7 @@ span.comment-marker {
   content: attr(data-count);
   top: 8px;
   left: 8px;
-  background-color: #F7B314;
+  background-color: #f7b314;
   border-radius: 50%;
   width: 12px;
   height: 12px;
@@ -289,7 +292,7 @@ span.comment-marker {
   font-size: 16px !important;
   font-weight: 700 !important;
   line-height: 24px !important;
-  margin: 0 !important
+  margin: 0 !important;
 }
 
 .keywords .keyword {
@@ -304,7 +307,7 @@ span.comment-marker {
   position: relative;
   cursor: default;
   padding: 4px 8px;
-  border: 1px solid #C9C9C9;
+  border: 1px solid #c9c9c9;
   margin-top: 10px;
   margin-bottom: 4px;
 }
@@ -370,7 +373,7 @@ span.comment-marker {
 
 .keywords .keyword-group-container {
   position: relative;
-   margin: 0 0 36px !important;
+  margin: 0 0 36px !important;
 }
 
 .keywords .keyword-group {
@@ -444,8 +447,8 @@ span.comment-marker {
   --inserted-pending-bg-color: #e6ffdb;
   --inserted-pending-color: #01872e;
   --accepted-bg-color: #e2e2e2;
-  --deleted-color: #F35143;
-  --deleted-pending-bg-color: #FFF1F0;
+  --deleted-color: #f35143;
+  --deleted-pending-bg-color: #fff1f0;
   --highlight-bg-color: #ffeebf;
   --common-color: #353535;
   --selected-pending-background-color: #ddf3fa;
@@ -474,22 +477,28 @@ span.selected-suggestion,
 span.accepted .selected-suggestion,
 .accepted .selected-suggestion > .block-container .block,
 .accepted .selected-suggestion:not(:has(> .block-container)),
-.selected-suggestion[data-track-status="accepted"],
-.selected-suggestion  > .block-container .block.accepted,
-.selected-suggestion  > .block-container .block:has([data-track-status='accepted']),
-.selected-suggestion:not(:has(> .block-container)):has([data-track-status='accepted']) {
+.selected-suggestion[data-track-status='accepted'],
+.selected-suggestion > .block-container .block.accepted,
+.selected-suggestion
+  > .block-container
+  .block:has([data-track-status='accepted']),
+.selected-suggestion:not(:has(> .block-container)):has(
+    [data-track-status='accepted']
+  ) {
   background-color: var(--selected-accepted-background-color) !important;
   border-width: 2px 0 2px 0 !important;
-  border-color: #C9C9C9 !important;
+  border-color: #c9c9c9 !important;
   border-radius: 3px !important;
   border-style: solid !important;
 }
 
-.block-bullet_list .selected-suggestion p, .block-ordered_list .selected-suggestion p {
+.block-bullet_list .selected-suggestion p,
+.block-ordered_list .selected-suggestion p {
   margin: 0;
 }
 
-.block-bullet_list .selected-suggestion, .block-ordered_list .selected-suggestion {
+.block-bullet_list .selected-suggestion,
+.block-ordered_list .selected-suggestion {
   margin: 16px 0;
 }
 
@@ -501,7 +510,10 @@ span.accepted .selected-suggestion,
 }
 
 .ProseMirror .selected-suggestion .inserted.pending,
-.ProseMirror .selected-suggestion [data-track-op='insert'][data-track-status='pending'] .block,
+.ProseMirror
+  .selected-suggestion
+  [data-track-op='insert'][data-track-status='pending']
+  .block,
 .ProseMirror .selected-suggestion .deleted.pending {
   background-color: var(--selected-pending-background-color) !important;
   color: var(--common-color) !important;
@@ -544,7 +556,11 @@ span.accepted .selected-suggestion,
 .ProseMirror .inserted.pending:has(.selected-suggestion),
 .ProseMirror .deleted.pending:has(.selected-suggestion),
 .ProseMirror .selected-suggestion .highlight,
-.ProseMirror .selected-suggestion .graphical-abstract:has([data-track-status='pending'][data-track-op='insert']) {
+.ProseMirror
+  .selected-suggestion
+  .graphical-abstract:has(
+    [data-track-status='pending'][data-track-op='insert']
+  ) {
   background: transparent !important;
   color: var(--common-color);
   text-decoration: none;
@@ -583,7 +599,7 @@ span.accepted .selected-suggestion,
 .affiliation[data-track-status='pending'][data-track-op='delete'] {
   text-decoration: line-through;
   color: var(--deleted-color);
-  background-color: var(--deleted-pending-bg-color)
+  background-color: var(--deleted-pending-bg-color);
 }
 
 .contributor[data-track-op='delete']:not([data-track-status='rejected']),
@@ -597,7 +613,9 @@ span.accepted .selected-suggestion,
   color: var(--inserted-pending-color);
   text-decoration: underline;
 }
-.block-contributors, .block-affiliations, .keywords {
+.block-contributors,
+.block-affiliations,
+.keywords {
   margin: 15px 0px;
 }
 .contributors {
@@ -698,7 +716,6 @@ span.accepted .selected-suggestion,
   margin: 1rem 64px 0;
   font-size: 12px;
   color: #6e6e6e;
-
 }
 
 * {
@@ -736,7 +753,9 @@ span.accepted .selected-suggestion,
   z-index: 10;
 }
 
-.ProseMirror td:hover > .table-context-menu-button, th:hover > .table-context-menu-button, .open-context-menu {
+.ProseMirror td:hover > .table-context-menu-button,
+th:hover > .table-context-menu-button,
+.open-context-menu {
   visibility: visible !important;
 }
 
@@ -761,7 +780,7 @@ span.accepted .selected-suggestion,
 }
 
 .section-category-button:not(.assigned) path {
-  fill: #FFE0B2;
+  fill: #ffe0b2;
 }
 
 .section-category-button.assigned:after {
@@ -771,8 +790,8 @@ span.accepted .selected-suggestion,
   content: '';
   height: 8px;
   width: 4px;
-  border-bottom: 2px solid #36B260;
-  border-right: 2px solid #36B260;
+  border-bottom: 2px solid #36b260;
+  border-right: 2px solid #36b260;
   transform: rotate(45deg);
 }
 
@@ -781,8 +800,8 @@ span.accepted .selected-suggestion,
 }
 .section-category.menu {
   border-radius: 8px;
-  border: 1px solid #E2E2E2;
-  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.30);
+  border: 1px solid #e2e2e2;
+  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.3);
 }
 
 .section-category.menu .menu-item {
@@ -809,8 +828,8 @@ span.accepted .selected-suggestion,
   content: '';
   height: 10px;
   width: 5px;
-  border-bottom: 2px solid #36B260;
-  border-right: 2px solid #36B260;
+  border-bottom: 2px solid #36b260;
+  border-right: 2px solid #36b260;
   transform: rotate(45deg);
 }
 
@@ -826,16 +845,16 @@ span.accepted .selected-suggestion,
   display: flex;
   align-items: center;
   border-radius: 6px;
-  background: #E2E2E2;
+  background: #e2e2e2;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  color:  #353535;
+  color: #353535;
   line-height: 16px;
 }
 
 .section-category.tooltip span {
-  color:  #353535;
+  color: #353535;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;