From dbec7e492bca513927c7110e9d7c35e981252d27 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 11 Feb 2021 21:33:26 +0100
Subject: [PATCH] store annotations in y.js

---
 .../Annotation/extension/AnnotationState.ts   | 88 ++++++++++---------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
index 6d38b6b3..f2807bb1 100644
--- a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
+++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
@@ -27,6 +27,9 @@ export class AnnotationState {
   }
 
   apply(transaction: any, state: EditorState) {
+    const ystate = ySyncPluginKey.getState(state)
+    const decs = ystate.doc.getMap('annotations')
+
     const action = transaction.getMeta(AnnotationPluginKey)
     const actionType = action && action.type
 
@@ -34,10 +37,26 @@ export class AnnotationState {
       let { decorations } = this
 
       if (actionType === 'addAnnotation') {
+        decs.set(action.data.id, {
+          from: absolutePositionToRelativePosition(
+            action.from,
+            ystate.type,
+            ystate.binding.mapping,
+          ),
+          to: absolutePositionToRelativePosition(
+            action.to,
+            ystate.type,
+            ystate.binding.mapping,
+          ),
+          data: action.data,
+        })
+
         decorations = decorations.add(transaction.doc, [
           Decoration.inline(action.from, action.to, { class: 'annotation' }, { data: action.data }),
         ])
       } else if (actionType === 'deleteAnnotation') {
+        decs.delete(action.id)
+
         decorations = decorations.remove([
           this.findAnnotation(action.id),
         ])
@@ -46,62 +65,45 @@ export class AnnotationState {
       return new AnnotationState(decorations)
     }
 
-    const ystate = ySyncPluginKey.getState(state)
+    // decs.keys().forEach(key => {
+    //   console.log('get', decs.get(key))
+    // })
 
-    if (ystate && ystate.isChangeOrigin) {
-      // TODO: Create new decorations
+    // const decorations = DecorationSet.create(state.doc, [
+    //   Decoration.inline(105, 190, { class: 'annotation' }, { data: { id: 123, content: 'foobar' } }),
+    // ])
 
-      const relative = absolutePositionToRelativePosition(
-        105,
-        ystate.type,
-        ystate.binding.mapping,
-      )
-
-      const absolute = relativePositionToAbsolutePosition(
-        ystate.doc,
-        ystate.type,
-        relative,
-        ystate.binding.mapping,
-      )
-
-      console.log({
-        decorations: this.decorations,
-        state,
-        ystate,
-        relative,
-        absolute,
-      })
-
-      return this
-    }
-
-    // // Apply ProseMirror mapping
-    // const decorations = this.decorations.map(transaction.mapping, transaction.doc)
     // return new AnnotationState(decorations)
 
     return this
 
-    // Y.createRelativePositionFromJSON(aw.cursor.anchor), // {any} relPos Encoded Yjs based relative position
-    // ystate.binding.mapping, // ProsemirrorMapping} mapping
+    // if (ystate && ystate.isChangeOrigin) {
+    //   // TODO: Create new decorations
 
-    // relativePositionToAbsolutePosition
-    // console.log({foo})
+    //   // const absolute = relativePositionToAbsolutePosition(
+    //   //   ystate.doc,
+    //   //   ystate.type,
+    //   //   relative,
+    //   //   ystate.binding.mapping,
+    //   // )
 
-    // TODO:
-    // if (?) {
-    //   // map positions of decorations with Y.js
-    // const { mapping } = transaction
-    // const decorations = this.decorations.map(mapping, transaction.doc)
-    // return new AnnotationState(decorations)
+    //   return this
     // }
-    // Resources to check: y-prosemirror createDecorations
+
+    // // // Apply ProseMirror mapping
+    // // const decorations = this.decorations.map(transaction.mapping, transaction.doc)
+    // // return new AnnotationState(decorations)
+
+    // return this
   }
 
   static init(config: any, state: EditorState) {
     // TODO: Load initial decorations from Y.js?
-    const decorations = DecorationSet.create(state.doc, [
-      Decoration.inline(105, 190, { class: 'annotation' }, { data: { id: 123, content: 'foobar' } }),
-    ])
+    // const decorations = DecorationSet.create(state.doc, [
+    //   Decoration.inline(105, 190, { class: 'annotation' }, { data: { id: 123, content: 'foobar' } }),
+    // ])
+
+    const decorations = DecorationSet.create(state.doc, [])
 
     return new AnnotationState(decorations)
   }