From f4527942d80826af80e9df35ff9ac76868467c03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 11 Feb 2021 20:56:32 +0100
Subject: [PATCH] add something

---
 .../Annotation/extension/AnnotationPlugin.ts  | 10 +++--
 .../Annotation/extension/AnnotationState.ts   | 40 +++++++++++++++----
 .../Annotation/extension/annotation.ts        |  2 +-
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts
index b5069bca1..0806f5345 100644
--- a/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts
+++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts
@@ -4,12 +4,14 @@ import { AnnotationState } from './AnnotationState'
 
 export const AnnotationPluginKey = new PluginKey('annotation')
 
-export const AnnotationPlugin = (options: any, editor: any) => new Plugin({
+export const AnnotationPlugin = (options: any) => new Plugin({
   key: AnnotationPluginKey,
   state: {
-    init: AnnotationState.init,
-    apply(transaction, oldState) {
-      return oldState.apply(transaction, editor)
+    init(_, state) {
+      return AnnotationState.init(_, state)
+    },
+    apply(transaction, pluginState, oldState, newState) {
+      return pluginState.apply(transaction, newState)
     },
   },
   props: {
diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
index 9fe26ed42..6d38b6b30 100644
--- a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
+++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
@@ -1,6 +1,8 @@
 // @ts-nocheck
+import * as Y from 'yjs'
+import { EditorState } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
-import { ySyncPluginKey } from 'y-prosemirror'
+import { ySyncPluginKey, relativePositionToAbsolutePosition, absolutePositionToRelativePosition } from 'y-prosemirror'
 import { AnnotationPluginKey } from './AnnotationPlugin'
 
 export class AnnotationState {
@@ -24,7 +26,7 @@ export class AnnotationState {
     return this.decorations.find(position, position)
   }
 
-  apply(transaction: any, editor: any) {
+  apply(transaction: any, state: EditorState) {
     const action = transaction.getMeta(AnnotationPluginKey)
     const actionType = action && action.type
 
@@ -44,18 +46,40 @@ export class AnnotationState {
       return new AnnotationState(decorations)
     }
 
-    const ystate = ySyncPluginKey.getState(editor.state)
+    const ystate = ySyncPluginKey.getState(state)
 
     if (ystate && ystate.isChangeOrigin) {
       // TODO: Create new decorations
-      // console.log(ystate.doc, ystate.type, ystate.binding)
+
+      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)
+    // // 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
@@ -73,7 +97,7 @@ export class AnnotationState {
     // Resources to check: y-prosemirror createDecorations
   }
 
-  static init(config: any, state: any) {
+  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' } }),
diff --git a/docs/src/demos/Experiments/Annotation/extension/annotation.ts b/docs/src/demos/Experiments/Annotation/extension/annotation.ts
index 726e552fa..06c666b6b 100644
--- a/docs/src/demos/Experiments/Annotation/extension/annotation.ts
+++ b/docs/src/demos/Experiments/Annotation/extension/annotation.ts
@@ -58,7 +58,7 @@ export const Annotation = Extension.create({
 
   addProseMirrorPlugins() {
     return [
-      AnnotationPlugin(this.options, this.editor),
+      AnnotationPlugin(this.options),
     ]
   },
 })