diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationItem.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationItem.ts index 8885247c8..f0f0aba46 100644 --- a/docs/src/demos/Experiments/Annotation/extension/AnnotationItem.ts +++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationItem.ts @@ -1,10 +1,10 @@ export class AnnotationItem { public id!: string - public text!: string + public content!: string - constructor(id: string, text: string) { + constructor(id: string, content: string) { this.id = id - this.text = text + this.content = content } } diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts index 96141de93..e5e180e6c 100644 --- a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts +++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts @@ -22,9 +22,6 @@ export class AnnotationState { } findAnnotation(id: string) { - // TODO: Get from Y.js? - // this.decorations.get(id) - const current = this.decorations.find() for (let i = 0; i < current.length; i += 1) { @@ -67,7 +64,7 @@ export class AnnotationState { } annotationsAt(position: number) { - return this.decorations?.find(position, position) + return this.decorations.find(position, position) } updateDecorations(state: EditorState) { @@ -87,16 +84,16 @@ export class AnnotationState { return } - const decoration = Decoration.inline(from, to, HTMLAttributes, { data: dec.data }) - - return decorations.push(decoration) + return decorations.push( + Decoration.inline(from, to, HTMLAttributes, { data: dec.data }), + ) }) this.decorations = DecorationSet.create(state.doc, decorations) } apply(transaction: Transaction, state: EditorState) { - const ystate = ySyncPluginKey.getState(state) + // Add/Remove annotations const action = transaction.getMeta(AnnotationPluginKey) as AddAnnotationAction | DeleteAnnotationAction if (action && action.type) { @@ -117,13 +114,16 @@ export class AnnotationState { return this } + // Use Y.js to update positions + const ystate = ySyncPluginKey.getState(state) + if (ystate.isChangeOrigin) { this.updateDecorations(state) return this } - // Apply ProseMirror mapping + // Use ProseMirror to update positions this.decorations = this.decorations.map(transaction.mapping, transaction.doc) return this diff --git a/docs/src/demos/Experiments/Annotation/extension/annotation.ts b/docs/src/demos/Experiments/Annotation/extension/annotation.ts index d24b36e36..be40a0047 100644 --- a/docs/src/demos/Experiments/Annotation/extension/annotation.ts +++ b/docs/src/demos/Experiments/Annotation/extension/annotation.ts @@ -4,6 +4,7 @@ import { AnnotationItem } from './AnnotationItem' import { AnnotationPlugin, AnnotationPluginKey } from './AnnotationPlugin' function randomId() { + // TODO: That seems … to simple. return Math.floor(Math.random() * 0xffffffff).toString() } @@ -23,13 +24,16 @@ export interface AnnotationOptions { HTMLAttributes: { [key: string]: any }, + /** + * An event listener which receives annotations for the current selection. + */ onUpdate: (items: [any?]) => {}, /** * An initialized Y.js document. */ document: Y.Doc | null, /** - * Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document. + * Name of a Y.js map, can be changed to sync multiple fields with one Y.js document. */ field: string, /**