fix types

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

@@ -1,9 +1,9 @@
 export class AnnotationItem {
-  public id!: number
+  public id!: string
 
   public text!: string
 
-  constructor(id: number, text: string) {
+  constructor(id: string, text: string) {
     this.id = id
     this.text = text
   }

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as Y from 'yjs'
 import { EditorState, Transaction } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
@@ -27,7 +26,7 @@ export class AnnotationState {
     // })
   }
 
-  findAnnotation(id: number) {
+  findAnnotation(id: string) {
     // TODO: Get from Y.js?
     // this.decorations.get(id)
 
@@ -59,11 +58,16 @@ export class AnnotationState {
     this.decorations = this.decorations.add(state.doc, [decoration])
   }
 
-  deleteAnnotation(id: number) {
+  deleteAnnotation(id: string) {
     const { map } = this.options
     const decoration = this.findAnnotation(id)
 
     map.delete(id)
+
+    if (!decoration) {
+      return
+    }
+
     this.decorations = this.decorations.remove([decoration])
   }
 
@@ -75,15 +79,23 @@ export class AnnotationState {
     const { map, HTMLAttributes } = this.options
     const ystate = ySyncPluginKey.getState(state)
     const { doc, type, binding } = ystate
+    const decorations: Decoration[] = []
 
-    const decorations = Array.from(map.keys()).map(id => {
-      const dec = map.get(id)
-      const from = relativePositionToAbsolutePosition(doc, type, dec.from, binding.mapping)
-      const to = relativePositionToAbsolutePosition(doc, type, dec.to, binding.mapping)
-      const decoration = Decoration.inline(from, to, HTMLAttributes, { data: dec.data })
+    Array
+      .from(map.keys())
+      .forEach(id => {
+        const dec = map.get(id)
+        const from = relativePositionToAbsolutePosition(doc, type, dec.from, binding.mapping)
+        const to = relativePositionToAbsolutePosition(doc, type, dec.to, binding.mapping)
 
-      return decoration
-    })
+        if (!from || !to) {
+          return
+        }
+
+        const decoration = Decoration.inline(from, to, HTMLAttributes, { data: dec.data })
+
+        return decorations.push(decoration)
+      })
 
     this.decorations = DecorationSet.create(state.doc, decorations)
   }
@@ -115,5 +127,4 @@ export class AnnotationState {
 
     return this
   }
-
 }

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

@@ -4,7 +4,7 @@ import { AnnotationItem } from './AnnotationItem'
 import { AnnotationPlugin, AnnotationPluginKey } from './AnnotationPlugin'
 
 function randomId() {
-  return Math.floor(Math.random() * 0xffffffff)
+  return Math.floor(Math.random() * 0xffffffff).toString()
 }
 
 export interface AddAnnotationAction {
@@ -15,7 +15,7 @@ export interface AddAnnotationAction {
 }
 
 export interface DeleteAnnotationAction {
-  id: number,
+  id: string,
   type: 'deleteAnnotation',
 }
 
@@ -74,7 +74,7 @@ export const Annotation = Extension.create({
 
         return true
       },
-      deleteAnnotation: (id: number): Command => ({ dispatch, state }) => {
+      deleteAnnotation: (id: string): Command => ({ dispatch, state }) => {
         if (dispatch) {
           state.tr.setMeta(AnnotationPluginKey, <DeleteAnnotationAction>{
             type: 'deleteAnnotation',