annotations: add superb logging

docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts

@@ -10,6 +10,7 @@ export interface AnnotationPluginOptions {
   },
   onUpdate: (items: [any?]) => {},
   map: Y.Map<any>,
+  instance: string,
 }
 
 export const AnnotationPlugin = (options: AnnotationPluginOptions) => new Plugin({
@@ -20,6 +21,7 @@ export const AnnotationPlugin = (options: AnnotationPluginOptions) => new Plugin
       return new AnnotationState({
         HTMLAttributes: options.HTMLAttributes,
         map: options.map,
+        instance: options.instance,
       })
     },
     apply(transaction, pluginState, oldState, newState) {

docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts

@@ -11,6 +11,7 @@ export interface AnnotationStateOptions {
     [key: string]: any
   },
   map: Y.Map<any>,
+  instance: string,
 }
 
 export class AnnotationState {
@@ -93,6 +94,12 @@ export class AnnotationState {
           return
         }
 
+        console.log(`[${this.options.instance}] Decoration.inline()`, from, to, HTMLAttributes, { id, data: annotation.data })
+
+        if (from === to) {
+          console.warn(`[${this.options.instance}] corrupt decoration `, annotation.from, from, annotation.to, to)
+        }
+
         return decorations.push(
           Decoration.inline(from, to, HTMLAttributes, { id, data: annotation.data }),
         )
@@ -106,6 +113,8 @@ export class AnnotationState {
     const action = transaction.getMeta(AnnotationPluginKey) as AddAnnotationAction | UpdateAnnotationAction | DeleteAnnotationAction
 
     if (action && action.type) {
+      console.log(`[${this.options.instance}] action: ${action.type}`)
+
       if (action.type === 'addAnnotation') {
         this.addAnnotation(action, state)
       }
@@ -130,12 +139,14 @@ export class AnnotationState {
     const ystate = ySyncPluginKey.getState(state)
 
     if (ystate.isChangeOrigin) {
+      console.log(`[${this.options.instance}] isChangeOrigin: true → createDecorations`)
       this.createDecorations(state)
 
       return this
     }
 
     // Use ProseMirror to update positions
+    console.log(`[${this.options.instance}] isChangeOrigin: false → ProseMirror mapping`)
     this.decorations = this.decorations.map(transaction.mapping, transaction.doc)
 
     return this

docs/src/demos/Experiments/Annotation/extension/annotation.ts

@@ -40,6 +40,7 @@ export interface AnnotationOptions {
    * A raw Y.js map, can be used instead of `document` and `field`.
    */
   map: Y.Map<any> | null,
+  instance: string,
 }
 
 function getMapFromOptions(options: AnnotationOptions): Y.Map<any> {
@@ -59,12 +60,15 @@ export const Annotation = Extension.create({
     document: null,
     field: 'annotations',
     map: null,
+    instance: '',
   },
 
   onCreate() {
     const map = getMapFromOptions(this.options)
 
     map.observe(() => {
+      console.log(`[${this.options.instance}] map updated  → createDecorations`)
+
       const transaction = this.editor.state.tr.setMeta(AnnotationPluginKey, {
         type: 'createDecorations',
       })
@@ -123,6 +127,7 @@ export const Annotation = Extension.create({
         HTMLAttributes: this.options.HTMLAttributes,
         onUpdate: this.options.onUpdate,
         map: getMapFromOptions(this.options),
+        instance: this.options.instance,
       }),
     ]
   },

docs/src/demos/Experiments/Annotation/index.vue

@@ -69,6 +69,7 @@ export default {
         Annotation.configure({
           document: this.ydoc,
           onUpdate: items => { this.comments = items },
+          instance: 'editor1',
         }),
         Collaboration.configure({
           document: this.ydoc,
@@ -93,6 +94,7 @@ export default {
         Heading,
         Annotation.configure({
           document: this.ydoc,
+          instance: 'editor2',
         }),
         Collaboration.configure({
           document: this.ydoc,