fix nested comments boxes and active

editors/demo/src/Editoria/config/config.js

@@ -68,7 +68,50 @@ const getComments = debounce(comments => {
   console.log(comments);
 }, 2000);
 
-const setComments = (comments = []) => {
+const setComments = (
+  comments = [
+    {
+      id: 'a1',
+      from: 70,
+      to: 82,
+      data: {
+        type: 'comment',
+        conversation: [
+          {
+            content: '1111',
+            displayName: 'admin',
+            userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
+            timestamp: 1710501980537,
+          },
+        ],
+        title: '111',
+        group: 'main',
+        viewId: 'main',
+      },
+      endHeight: 362.3579406738281,
+    },
+    {
+      id: 'a2',
+      from: 63,
+      to: 92,
+      data: {
+        type: 'comment',
+        conversation: [
+          {
+            content: '222',
+            displayName: 'admin',
+            userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
+            timestamp: 1710501987197,
+          },
+        ],
+        title: '222',
+        group: 'main',
+        viewId: 'main',
+      },
+      endHeight: 266.3579406738281,
+    },
+  ],
+) => {
   return comments;
 };
 

wax-prosemirror-services/src/CommentsService/CommentsService.js

@@ -23,7 +23,6 @@ export default class CommentsService extends Service {
     );
 
     const options = {
-      styles: {},
       existingComments: () => {
         const map = new Map();
         if (commentsConfig.setComments().length > 0) {

wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js

@@ -99,7 +99,7 @@ export default ({ comment, top, commentId, recalculateTops, users }) => {
 
     pmViews[viewId].dispatch(
       pmViews[viewId].state.tr.setSelection(
-        new TextSelection(pmViews[viewId].state.tr.doc.resolve(comment.to - 1)),
+        new TextSelection(pmViews[viewId].state.tr.doc.resolve(comment.from)),
       ),
     );
 

wax-prosemirror-services/src/CommentsService/components/RightArea.js

@@ -67,11 +67,18 @@ export default ({ area, users }) => {
       // annotation top
       if (area === 'main') {
         markNodeEl = document.querySelector(`[data-id="${id}"]`);
-        if (markNodeEl)
+        if (!markNodeEl && marksNodes[area][pos - 1]) {
+          markNodeEl = document.querySelector(
+            `[data-id="${marksNodes[area][pos - 1].id}"]`,
+          );
+        }
+
+        if (markNodeEl) {
           annotationTop =
             markNodeEl.getBoundingClientRect().top -
             WaxSurface.top +
             parseInt(WaxSurfaceMarginTop.slice(0, -2), 10);
+        }
       } else {
         // Notes
         panelWrapper = document.getElementsByClassName('panelWrapper');

wax-prosemirror-services/src/CommentsService/plugins/AnnotationState.js

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import AnnotationDecoration from './AnnotationDecoration';
 import { AnnotationPluginKey } from './AnnotationPlugin';
-let toPos = 0;
+
 export default class AnnotationState {
   constructor(options) {
     this.decorations = DecorationSet.empty;
@@ -59,10 +59,9 @@ export default class AnnotationState {
   }
 
   createDecorations(state) {
-    const { map, styles } = this.options;
+    const { map } = this.options;
 
     const decorations = [];
-    // only terms, not connectives, are rendered
     const termList = Array.from(map, ([key, value]) => {
       // eslint-disable-next-line prefer-object-spread
       return Object.assign(Object.assign({}, value), { id: key });
@@ -70,16 +69,8 @@ export default class AnnotationState {
       return 'from' in value && 'to' in value;
     });
 
-    // const annotationRendering = createAnnotationRendering(termList);
-
     termList.forEach(annotation => {
       const { from, to } = annotation;
-      // eslint-disable-next-line
-      // console.log(`[${this.options.instance}] Decoration.inline()`, from, to, {
-      //   id: annotation.id,
-      //   data: annotation,
-      // });
-
       if (from === to) {
         console.warn(
           `[${this.options.instance}] corrupt decoration `,