listen for map changes

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

@@ -19,11 +19,6 @@ export class AnnotationState {
 
   constructor(options: AnnotationStateOptions) {
     this.options = options
-
-    // TODO: Observe Y.js changes and re-render decorations
-    // this.options.map.observe(e => {
-    //   console.log('e', e)
-    // })
   }
 
   findAnnotation(id: string) {
@@ -113,6 +108,12 @@ export class AnnotationState {
         this.deleteAnnotation(action.id)
       }
 
+      // @ts-ignore
+      if (action.type === 'updateAnnotations') {
+        console.log('updateAnnotations!')
+        this.updateDecorations(state)
+      }
+
       return this
     }
 

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

@@ -38,6 +38,12 @@ export interface AnnotationOptions {
   map: Y.Map<any> | null,
 }
 
+function getMapFromOptions(options: AnnotationOptions): Y.Map<any> {
+  return options.map
+    ? options.map
+    : options.document?.getMap(options.field) as Y.Map<any>
+}
+
 export const Annotation = Extension.create({
   name: 'annotation',
 
@@ -51,6 +57,20 @@ export const Annotation = Extension.create({
     map: null,
   },
 
+  onCreate() {
+    const map = getMapFromOptions(this.options)
+
+    map.observe(e => {
+      console.log('should update annotations', e)
+
+      const transaction = this.editor.state.tr.setMeta(AnnotationPluginKey, {
+        type: 'updateAnnotations',
+      })
+
+      this.editor.view.dispatch(transaction)
+    })
+  },
+
   addCommands() {
     return {
       addAnnotation: (content: any): Command => ({ dispatch, state }) => {
@@ -88,15 +108,11 @@ export const Annotation = Extension.create({
   },
 
   addProseMirrorPlugins() {
-    const map = this.options.map
-      ? this.options.map
-      : this.options.document?.getMap(this.options.field) as Y.Map<any>
-
     return [
       AnnotationPlugin({
         HTMLAttributes: this.options.HTMLAttributes,
         onUpdate: this.options.onUpdate,
-        map,
+        map: getMapFromOptions(this.options),
       }),
     ]
   },