@manuscripts/body-editor 2.6.32 → 2.6.33

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.6.32';
+exports.VERSION = '2.6.33';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/equation.js

@@ -29,17 +29,15 @@ class EquationView extends base_node_view_1.BaseNodeView {
         };
         this.createDOM = () => {
             this.dom = document.createElement('div');
-            this.dom.classList.add('equation');
             this.dom.setAttribute('id', this.node.attrs.id);
         };
         this.updateContents = () => {
+            const classes = [
+                'equation',
+                ...(0, track_changes_utils_1.getChangeClasses)(this.node.attrs.dataTracked),
+            ];
+            this.dom.className = classes.join(' ');
             this.dom.innerHTML = this.node.attrs.contents;
-            if ((0, track_changes_utils_1.isDeleted)(this.node)) {
-                this.dom.classList.add('deleted');
-            }
-            else {
-                this.dom.classList.remove('deleted');
-            }
             (0, math_1.renderMath)(this.dom);
         };
         this.ignoreMutation = () => true;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.6.32';
+export const VERSION = '2.6.33';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/equation.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { renderMath } from '../lib/math';
-import { isDeleted } from '../lib/track-changes-utils';
+import { getChangeClasses } from '../lib/track-changes-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 export class EquationView extends BaseNodeView {
@@ -26,17 +26,15 @@ export class EquationView extends BaseNodeView {
         };
         this.createDOM = () => {
             this.dom = document.createElement('div');
-            this.dom.classList.add('equation');
             this.dom.setAttribute('id', this.node.attrs.id);
         };
         this.updateContents = () => {
+            const classes = [
+                'equation',
+                ...getChangeClasses(this.node.attrs.dataTracked),
+            ];
+            this.dom.className = classes.join(' ');
             this.dom.innerHTML = this.node.attrs.contents;
-            if (isDeleted(this.node)) {
-                this.dom.classList.add('deleted');
-            }
-            else {
-                this.dom.classList.remove('deleted');
-            }
             renderMath(this.dom);
         };
         this.ignoreMutation = () => true;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.6.32";
+export declare const VERSION = "2.6.33";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 import { EquationNode, ManuscriptNodeView } from '@manuscripts/transform';
+import { Trackable } from '../types';
 import { BaseNodeView } from './base_node_view';
-export declare class EquationView extends BaseNodeView<EquationNode> implements ManuscriptNodeView {
+export declare class EquationView extends BaseNodeView<Trackable<EquationNode>> implements ManuscriptNodeView {
     initialise: () => void;
     createDOM: () => void;
     updateContents: () => void;

package/package.json

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

package/styles/AdvancedEditor.css

@@ -525,13 +525,12 @@ span.comment-marker {
 .ProseMirror {
   --inserted-pending-bg-color: #e6ffdb;
   --inserted-pending-color: #01872e;
-  --accepted-bg-color: #e2e2e2;
   --deleted-color: #f35143;
   --deleted-pending-bg-color: #fff1f0;
+  --updated-bg-color: #d9f6ff;
+  --updated-border-color: #1a9bc7;
   --highlight-bg-color: #ffeebf;
   --common-color: #353535;
-  --selected-pending-background-color: #ddf3fa;
-  --selected-accepted-background-color: #f2f2f2;
   --box-element-bg-color: #fafafa;
 }
 .ProseMirror ins,
@@ -543,13 +542,19 @@ span.comment-marker {
   background: none;
 }
 
-span.selected-suggestion,
-.selected-suggestion > .block-container .block,
-.selected-suggestion:not(:has(> .block-container)) {
-  background-color: var(--selected-pending-background-color) !important;
-  color: var(--common-color) !important;
+@keyframes fadeOutBackground {
+  0% {
+    background: var(--fade-color);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+.selected-suggestion:not(.block-container):not(.graphical-abstract):not(
+    .keywords
+  ):not(figure):not(figure .equation) {
   border-width: 2px 0 2px 0 !important;
-  border-color: #20aedf !important;
   border-radius: 3px !important;
   border-style: solid !important;
 }
@@ -564,37 +569,21 @@ span.selected-suggestion,
   margin: 16px 0;
 }
 
-.tracking-visible .ProseMirror .inserted,
-.tracking-visible
-  .ProseMirror
-  [data-track-op='insert'][data-track-status='pending']
-  .block,
-.tracking-visible
-  .ProseMirror
-  [data-track-op='node_split'][data-track-status='pending']
-  .block,
-.tracking-visible
-  .ProseMirror
-  [data-track-op='wrap_with_node'][data-track-status='pending']
-  .block {
+/* Insert */
+.tracking-visible .ProseMirror .inserted {
   background: var(--inserted-pending-bg-color);
   color: var(--inserted-pending-color);
   text-decoration: underline;
 }
 
-.ProseMirror .selected-suggestion .inserted,
-.ProseMirror .selected-suggestion [data-track-op='insert'] .block,
-.ProseMirror .selected-suggestion .deleted {
-  background-color: var(--selected-pending-background-color) !important;
-  color: var(--common-color) !important;
-}
-
-.tracking-visible .ProseMirror .set_attrs,
-.tracking-visible .ProseMirror [data-track-op='set_attrs'] {
-  background: var(--inserted-pending-bg-color);
-  text-decoration: none;
+.inserted:has(.selected-suggestion),
+.inserted.selected-suggestion,
+.selected-suggestion:has(.inserted) {
+  border-color: var(--inserted-pending-color) !important;
+  text-decoration: none !important;
 }
 
+/* Delete */
 .ProseMirror .deleted::before,
 .ProseMirror .deleted,
 .ProseMirror p .equation.deleted {
@@ -614,6 +603,11 @@ span.selected-suggestion,
   display: flex;
 }
 
+.tracking-visible .ProseMirror .footnote.deleted::before,
+.tracking-visible .ProseMirror .footnote.deleted {
+  display: flex;
+}
+
 .tracking-visible .equation.deleted:after {
   content: '';
   width: 100%;
@@ -623,9 +617,105 @@ span.selected-suggestion,
   top: calc(50% + 1px);
 }
 
-.tracking-visible .ProseMirror .footnote.deleted::before,
-.tracking-visible .ProseMirror .footnote.deleted {
-  display: flex;
+
+.selected-suggestion .equation.deleted:after,
+.selected-suggestion.equation.deleted:after {
+  content: none;
+}
+
+.deleted:has(.selected-suggestion),
+.deleted.selected-suggestion,
+.selected-suggestion:has(.deleted) {
+  border-color: var(--deleted-color) !important;
+  text-decoration: none !important;
+}
+
+/* Update */
+.tracking-visible .ProseMirror .set_attrs {
+  background: var(--updated-bg-color);
+  text-decoration: none;
+}
+
+.selected-suggestion:has(.set_attrs),
+.selected-suggestion.set_attrs {
+  border-color: var(--updated-border-color) !important;
+}
+
+/* */
+.selected-suggestion .inserted,
+.selected-suggestion .deleted {
+  text-decoration: none !important;
+}
+
+.selected-suggestion .inserted:not(.citation.inserted),
+.selected-suggestion .deleted:not(.citation.deleted),
+figure.block .equation.set_attrs.selected-suggestion {
+  background-color: transparent !important;
+}
+
+/* Inserted Block */
+.tracking-visible .ProseMirror [data-track-op='insert'][data-track-status='pending'] .block,
+.tracking-visible .ProseMirror [data-track-op='node_split'][data-track-status='pending'] .block,
+.tracking-visible .ProseMirror
+  [data-track-op='wrap_with_node'][data-track-status='pending']
+  .block {
+  border-left: 3px solid var(--inserted-pending-color);
+}
+
+.selected-suggestion[data-track-status='pending'][data-track-op='insert']
+  .block,
+.selected-suggestion
+  [data-track-status='pending'][data-track-op='insert']
+  .block,
+.selected-suggestion[data-track-op='wrap_with_node'][data-track-status='pending']
+  .block {
+  border-left: 6px solid var(--inserted-pending-color) !important;
+  box-shadow: inset 6px 0 0 var(--inserted-pending-bg-color);
+  animation: fadeOutBackground 3s forwards;
+  --fade-color: var(--inserted-pending-bg-color);
+}
+
+/* Deleted Block */
+.ProseMirror
+  .block-container[data-track-status='pending'][data-track-op='delete'] {
+  display: none;
+}
+.tracking-visible
+  .ProseMirror
+  .block-container[data-track-status='pending'][data-track-op='delete'] {
+  display: grid;
+}
+
+.tracking-visible .ProseMirror [data-track-status='pending'][data-track-op='delete'] .block {
+  border-left: 3px solid var(--deleted-color);
+}
+
+.selected-suggestion[data-track-status='pending'][data-track-op='delete']
+  .block,
+.selected-suggestion
+  [data-track-status='pending'][data-track-op='delete']
+  .block {
+  border-left: 6px solid var(--deleted-color) !important;
+  box-shadow: inset 6px 0 0 var(--deleted-pending-bg-color);
+  animation: fadeOutBackground 3s forwards;
+  --fade-color: var(--deleted-pending-bg-color);
+}
+
+/* Updated Block */
+.tracking-visible .ProseMirror [data-track-op='set_attrs'] .block,
+.tracking-visible .block:has(figure[data-track-op='set_attrs']),
+.tracking-visible figure.block:has(.equation.set_attrs) {
+  border-left: 3px solid var(--updated-border-color);
+}
+
+.selected-suggestion[data-track-op='set_attrs'] .block,
+.selected-suggestion [data-track-op='set_attrs'] .block,
+.block:has(figure.selected-suggestion[data-track-op='set_attrs']),
+figure.block:has(.equation.set_attrs.selected-suggestion) {
+  border-left: 6px solid var(--updated-border-color);
+  box-shadow: inset 6px 0 0 var(--updated-bg-color);
+  animation: fadeOutBackground 3s forwards;
+  --fade-color: var(--updated-bg-color);
 }
 
 .tracking-visible .subtree .deleted {
@@ -637,19 +727,6 @@ span.selected-suggestion,
   display: none;
 }
 
-.ProseMirror .inserted:has(.selected-suggestion),
-.ProseMirror .deleted:has(.selected-suggestion),
-.ProseMirror .selected-suggestion .highlight,
-.ProseMirror
-  .selected-suggestion
-  .graphical-abstract:has(
-    [data-track-status='pending'][data-track-op='insert']
-  ) {
-  background: transparent !important;
-  color: var(--common-color);
-  text-decoration: none;
-}
-
 .citation-wrapper {
   position: relative;
 }
@@ -670,25 +747,6 @@ span.selected-suggestion,
   display: inline-block;
 }
 
-.ProseMirror .affiliation[data-track-status='rejected'][data-track-op='insert'],
-.ProseMirror .contributor[data-track-status='rejected'][data-track-op='insert'],
-.ProseMirror figure[data-track-status='rejected'][data-track-op='insert'],
-.ProseMirror table[data-track-status='rejected'][data-track-op='insert'],
-.ProseMirror
-  .block-container[data-track-status='rejected'][data-track-op='insert'] {
-  display: none;
-}
-
-.ProseMirror
-  .block-container[data-track-status='pending'][data-track-op='delete'] {
-  display: none;
-}
-.tracking-visible
-  .ProseMirror
-  .block-container[data-track-status='pending'][data-track-op='delete'] {
-  display: grid;
-}
-
 .contributor[data-track-status='pending'][data-track-op='delete'],
 .affiliation[data-track-status='pending'][data-track-op='delete'] {
   display: none;
@@ -712,6 +770,19 @@ span.selected-suggestion,
   color: var(--inserted-pending-color);
   text-decoration: underline;
 }
+
+.tracking-visible .contributor[data-track-status='pending'][data-track-op='set_attrs'],
+.tracking-visible .affiliation[data-track-status='pending'][data-track-op='set_attrs'] {
+  background: var(--updated-bg-color);
+  color: var(--common-color);
+  border-color: var(--updated-border-color);
+}
+
+.selected-suggestion.contributor,
+.selected-suggestion.affiliation {
+  text-decoration: none !important;
+}
+
 .block-contributors,
 .block-author_notes,
 .block-awards,

package/styles/Editor.css

@@ -704,6 +704,7 @@
   overflow-x: auto;
   justify-content: center;
   vertical-align: middle;
+  align-items: center;
 }
 
 .ProseMirror .equation svg {
@@ -989,7 +990,7 @@
   margin-right: 4px;
 }
 
-.ProseMirror .footnote.footnote-selected {
+.ProseMirror .footnote.footnote-selected:not(.selected-suggestion) {
   background-color: #f2fbfc;
   border: 1px solid #bce7f6;
 }

package/styles/track-styles.css

@@ -7,7 +7,3 @@
 .ProseMirror .deleted {
   background: #ddf3fa;
 }
-.ProseMirror
-  .block-container[data-track-status='rejected'][data-track-op='insert'] {
-  display: none;
-}