From 967f43fda544ac604ffcd223090b67d22b8bcba0 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 11 Feb 2021 18:06:10 +0100 Subject: [PATCH] annotations: improve decoration mapping (wip) --- .../Examples/CollaborativeEditing/index.vue | 2 + .../Annotation/extension/AnnotationPlugin.ts | 5 +- .../Annotation/extension/AnnotationState.ts | 69 ++++++++----------- .../Annotation/extension/annotation.ts | 2 +- 4 files changed, 35 insertions(+), 43 deletions(-) diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue index 1eefe559..4afd6bfe 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/index.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue @@ -67,6 +67,8 @@ export default { this.status = event.status }) + window.ydoc = ydoc + this.indexdb = new IndexeddbPersistence('tiptap-collaboration-example', ydoc) this.editor = new Editor({ diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts index 7542bc59..b5069bca 100644 --- a/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts +++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts @@ -1,14 +1,15 @@ +// @ts-nocheck import { Plugin, PluginKey } from 'prosemirror-state' import { AnnotationState } from './AnnotationState' export const AnnotationPluginKey = new PluginKey('annotation') -export const AnnotationPlugin = (options: any) => new Plugin({ +export const AnnotationPlugin = (options: any, editor: any) => new Plugin({ key: AnnotationPluginKey, state: { init: AnnotationState.init, apply(transaction, oldState) { - return oldState.apply(transaction) + return oldState.apply(transaction, editor) }, }, props: { diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts index 23f65823..9fe26ed4 100644 --- a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts +++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts @@ -1,3 +1,4 @@ +// @ts-nocheck import { Decoration, DecorationSet } from 'prosemirror-view' import { ySyncPluginKey } from 'y-prosemirror' import { AnnotationPluginKey } from './AnnotationPlugin' @@ -23,45 +24,7 @@ export class AnnotationState { return this.decorations.find(position, position) } - apply(transaction: any) { - console.log('transaction', transaction.meta, transaction.docChanged, transaction) - - const yjsTransaction = transaction.getMeta(ySyncPluginKey) - if (yjsTransaction) { - // TODO: Map positions - // absolutePositionToRelativePosition(state.selection.anchor, pmbinding.type, pmbinding.mapping) - console.log('map positions', transaction, yjsTransaction) - - return this - - // const { binding } = yjsTransaction - // console.log({ binding }, { transaction }, transaction.docChanged) - // console.log('yjsTransaction.isChangeOrigin', yjsTransaction.isChangeOrigin) - - // console.log('yjs mapping', yjsTransaction.binding?.mapping) - // console.log('all decorations', this.decorations.find()) - // console.log('original prosemirror mapping', this.decorations.map(transaction.mapping, transaction.doc)) - // console.log('difference between ProseMirror & Y.js', transaction.mapping, yjsTransaction.binding?.mapping) - - // Code to sync the selection: - // export const getRelativeSelection = (pmbinding, state) => ({ - // anchor: absolutePositionToRelativePosition(state.selection.anchor, pmbinding.type, pmbinding.mapping), - // head: absolutePositionToRelativePosition(state.selection.head, pmbinding.type, pmbinding.mapping) - // }) - - // console.log(yjsTransaction.binding.mapping, transaction.curSelection.anchor) - } - - if (transaction.docChanged) { - // TODO: Fixes the initial load (complete replace of the document) - // return this - - // TODO: Fixes later changes (typing before the annotation) - const decorations = this.decorations.map(transaction.mapping, transaction.doc) - - return new AnnotationState(decorations) - } - + apply(transaction: any, editor: any) { const action = transaction.getMeta(AnnotationPluginKey) const actionType = action && action.type @@ -81,7 +44,33 @@ export class AnnotationState { return new AnnotationState(decorations) } - return this + const ystate = ySyncPluginKey.getState(editor.state) + + if (ystate && ystate.isChangeOrigin) { + // TODO: Create new decorations + // console.log(ystate.doc, ystate.type, ystate.binding) + + return this + } + + // Apply ProseMirror mapping + const decorations = this.decorations.map(transaction.mapping, transaction.doc) + return new AnnotationState(decorations) + + // Y.createRelativePositionFromJSON(aw.cursor.anchor), // {any} relPos Encoded Yjs based relative position + // ystate.binding.mapping, // ProsemirrorMapping} mapping + + // relativePositionToAbsolutePosition + // console.log({foo}) + + // TODO: + // if (?) { + // // map positions of decorations with Y.js + // const { mapping } = transaction + // const decorations = this.decorations.map(mapping, transaction.doc) + // return new AnnotationState(decorations) + // } + // Resources to check: y-prosemirror createDecorations } static init(config: any, state: any) { diff --git a/docs/src/demos/Experiments/Annotation/extension/annotation.ts b/docs/src/demos/Experiments/Annotation/extension/annotation.ts index 06c666b6..726e552f 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), + AnnotationPlugin(this.options, this.editor), ] }, })