mapping

editors/demo/src/Editoria/Editoria.js

@@ -55,7 +55,7 @@ const Editoria = () => {
           autoFocus
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
-          value={demo}
+          // value={demo}
           // readonly
           layout={layout}
           // onChange={debounce(source => {

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

@@ -26,7 +26,7 @@ import {
   disallowPasteImagesPlugin,
   BlockDropDownToolGroupService,
   AskAiContentService,
-  // YjsService,
+  YjsService,
   CommentDecoration,
 } from 'wax-prosemirror-services';
 
@@ -149,7 +149,7 @@ export default {
         'HighlightToolGroup',
         'TransformToolGroup',
         'CustomTagInline',
-        'Notes',
+        // 'Notes',
         'Lists',
         'Images',
         'SpecialCharacters',
@@ -227,11 +227,11 @@ export default {
     ],
     updateTags: saveTags,
   },
-  // YjsService: {
-  //   // eslint-disable-next-line no-restricted-globals
-  //   connectionUrl: 'ws://localhost:4000',
-  //   docIdentifier: 'prosemirror-demo',
-  // },
+  YjsService: {
+    // eslint-disable-next-line no-restricted-globals
+    connectionUrl: 'ws://localhost:4000',
+    docIdentifier: 'prosemirror-demo',
+  },
 
   AskAiContentService: {
     AskAiContentTransformation: DummyPromise,
@@ -239,7 +239,7 @@ export default {
   },
 
   services: [
-    // new YjsService(),
+    new YjsService(),
     new BlockDropDownToolGroupService(),
     new AskAiContentService(),
     new CustomTagService(),
@@ -253,7 +253,7 @@ export default {
     new ImageService(),
     new TablesService(),
     new BaseService(),
-    new NoteService(),
+    // new NoteService(),
     new CodeBlockService(),
     new EditingSuggestingService(),
     new DisplayTextToolGroupService(),

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

 import { Service } from 'wax-prosemirror-core';
+import * as Y from 'yjs';
 import CommentBubbleComponent from './components/ui/comments/CommentBubbleComponent';
 import RightArea from './components/RightArea';
 import commentMark from './schema/commentMark';

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

 /* eslint-disable no-param-reassign */
 import { v4 as uuidv4 } from 'uuid';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import {
+  ySyncPluginKey,
+  relativePositionToAbsolutePosition,
+  absolutePositionToRelativePosition,
+} from 'y-prosemirror';
 import CommentDecoration from './CommentDecoration';
 import { CommentDecorationPluginKey } from './CommentDecorationPlugin';
 
@@ -51,26 +56,70 @@ export default class CommentState {
 
   createDecorations(state) {
     const decorations = [];
+    const ystate = ySyncPluginKey.getState(state);
+    const { doc, type, binding } = ystate;
 
-    this.allCommentsList().forEach(annotation => {
-      const { from, to } = annotation;
-
-      decorations.push(
-        Decoration.inline(
-          from,
-          to,
-          {
-            class: 'comment',
-            'data-id': annotation.id,
-          },
-          {
-            id: annotation.id,
-            data: annotation,
-            inclusiveEnd: true,
-          },
-        ),
-      );
-    });
+    const { map } = this.options;
+    console.log(binding);
+    if (binding) {
+      console.log(doc, type, binding);
+      map.forEach((annotation, id) => {
+        console.log(annotation);
+        const from = relativePositionToAbsolutePosition(
+          doc,
+          type,
+          annotation.from,
+          binding.mapping,
+        );
+        console.log(from);
+        const to = relativePositionToAbsolutePosition(
+          doc,
+          type,
+          annotation.to,
+          binding.mapping,
+        );
+
+        if (!from || !to) {
+          return;
+        }
+
+        decorations.push(
+          Decoration.inline(
+            from,
+            to,
+            {
+              class: 'comment',
+              'data-id': annotation.id,
+            },
+            {
+              id: annotation.id,
+              data: annotation,
+              inclusiveEnd: true,
+            },
+          ),
+        );
+      });
+    }
+
+    // this.allCommentsList().forEach(annotation => {
+    //   const { from, to } = annotation;
+
+    //   decorations.push(
+    //     Decoration.inline(
+    //       from,
+    //       to,
+    //       {
+    //         class: 'comment',
+    //         'data-id': annotation.id,
+    //       },
+    //       {
+    //         id: annotation.id,
+    //         data: annotation,
+    //         inclusiveEnd: true,
+    //       },
+    //     ),
+    //   );
+    // });
     this.decorations = DecorationSet.create(state.doc, decorations);
   }