refactoring

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

@@ -14,8 +14,11 @@ export interface AnnotationPluginOptions {
 export const AnnotationPlugin = (options: AnnotationPluginOptions) => new Plugin({
   key: AnnotationPluginKey,
   state: {
-    init(_, state) {
+    init() {
-      return AnnotationState.init(_, state)
+      return new AnnotationState({
+        HTMLAttributes: options.HTMLAttributes,
+        map: options.map,
+      })
     },
     apply(transaction, pluginState, oldState, newState) {
       return pluginState.apply(transaction, newState)

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

@@ -1,15 +1,23 @@
 // @ts-nocheck
-import * as Y from 'yjs'
 import { EditorState } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { ySyncPluginKey, relativePositionToAbsolutePosition, absolutePositionToRelativePosition } from 'y-prosemirror'
 import { AnnotationPluginKey } from './AnnotationPlugin'
 
-export class AnnotationState {
+export interface AnnotationStateOptions {
-  private decorations: any
+  HTMLAttributes: {
+    [key: string]: any
+  },
+  map: any,
+}
 
-  constructor(decorations: any) {
+export class AnnotationState {
-    this.decorations = decorations
+  options: AnnotationStateOptions
+
+  decorations = DecorationSet.empty
+
+  constructor(options: AnnotationStateOptions) {
+    this.options = options
   }
 
   findAnnotation(id: number) {
@@ -23,18 +31,18 @@ export class AnnotationState {
   }
 
   annotationsAt(position: number) {
-    return this.decorations.find(position, position)
+    return this.decorations?.find(position, position)
   }
 
   apply(transaction: any, state: EditorState) {
     const ystate = ySyncPluginKey.getState(state)
-    const decs = ystate.doc.getMap('annotations')
+    const decs = this.options.map
 
     const action = transaction.getMeta(AnnotationPluginKey)
     const actionType = action && action.type
 
     if (action) {
-      let { decorations } = this
+      const { decorations } = this
 
       if (actionType === 'addAnnotation') {
         decs.set(action.data.id, {
@@ -51,18 +59,18 @@ export class AnnotationState {
           data: action.data,
         })
 
-        decorations = decorations.add(transaction.doc, [
+        this.decorations = decorations.add(transaction.doc, [
-          Decoration.inline(action.from, action.to, { class: 'annotation' }, { data: action.data }),
+          Decoration.inline(action.from, action.to, this.options.HTMLAttributes, { data: action.data }),
         ])
       } else if (actionType === 'deleteAnnotation') {
         decs.delete(action.id)
 
-        decorations = decorations.remove([
+        this.decorations = decorations.remove([
           this.findAnnotation(action.id),
         ])
       }
 
-      return new AnnotationState(decorations)
+      return this
     }
 
     if (ystate && ystate.isChangeOrigin) {
@@ -84,22 +92,19 @@ export class AnnotationState {
             dec.to,
             ystate.binding.mapping,
           ),
-          { class: 'annotation' },
+          this.options.HTMLAttributes,
           { data: dec.data },
         ))
       })
 
-      return new AnnotationState(DecorationSet.create(state.doc, decorations))
+      this.decorations = DecorationSet.create(state.doc, decorations)
+
+      return this
     }
 
     // Apply ProseMirror mapping
-    const decorations = this.decorations.map(transaction.mapping, transaction.doc)
+    this.decorations = this.decorations.map(transaction.mapping, transaction.doc)
-    return new AnnotationState(decorations)
-  }
 
-  static init(config: any, state: EditorState) {
+    return this
-    const decorations = DecorationSet.create(state.doc, [])
-
-    return new AnnotationState(decorations)
   }
 }