mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-08-06 13:38:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

store annotations in y.js

Browse Source
This commit is contained in:
Hans Pagel 2021-02-11 21:33:26 +01:00
parent 151ea7d6dd
commit dbec7e492b
1 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
View File

@ -27,6 +27,9 @@ export class AnnotationState {
}
apply(transaction: any, state: EditorState) {
const ystate = ySyncPluginKey.getState(state)
const decs = ystate.doc.getMap('annotations')
const action = transaction.getMeta(AnnotationPluginKey)
const actionType = action && action.type
@ -34,10 +37,26 @@ export class AnnotationState {
let { decorations } = this
if (actionType === 'addAnnotation') {
decs.set(action.data.id, {
from: absolutePositionToRelativePosition(
action.from,
ystate.type,
ystate.binding.mapping,
),
to: absolutePositionToRelativePosition(
action.to,
ystate.type,
ystate.binding.mapping,
),
data: action.data,
})
decorations = decorations.add(transaction.doc, [
Decoration.inline(action.from, action.to, { class: 'annotation' }, { data: action.data }),
])
} else if (actionType === 'deleteAnnotation') {
decs.delete(action.id)
decorations = decorations.remove([
this.findAnnotation(action.id),
])
@ -46,62 +65,45 @@ export class AnnotationState {
return new AnnotationState(decorations)
}
const ystate = ySyncPluginKey.getState(state)
// decs.keys().forEach(key => {
// console.log('get', decs.get(key))
// })
if (ystate && ystate.isChangeOrigin) {
// TODO: Create new decorations
// const decorations = DecorationSet.create(state.doc, [
// Decoration.inline(105, 190, { class: 'annotation' }, { data: { id: 123, content: 'foobar' } }),
// ])
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)
return this
// Y.createRelativePositionFromJSON(aw.cursor.anchor), // {any} relPos Encoded Yjs based relative position
// ystate.binding.mapping, // ProsemirrorMapping} mapping
// if (ystate && ystate.isChangeOrigin) {
// // TODO: Create new decorations
// relativePositionToAbsolutePosition
// console.log({foo})
// // const absolute = relativePositionToAbsolutePosition(
// // ystate.doc,
// // ystate.type,
// // relative,
// // ystate.binding.mapping,
// // )
// TODO:
// if (?) {
// // map positions of decorations with Y.js
// const { mapping } = transaction
// const decorations = this.decorations.map(mapping, transaction.doc)
// return new AnnotationState(decorations)
// return this
// }
// Resources to check: y-prosemirror createDecorations
// // // Apply ProseMirror mapping
// // const decorations = this.decorations.map(transaction.mapping, transaction.doc)
// // return new AnnotationState(decorations)
// return this
}
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' } }),
])
// const decorations = DecorationSet.create(state.doc, [
// Decoration.inline(105, 190, { class: 'annotation' }, { data: { id: 123, content: 'foobar' } }),
// ])
const decorations = DecorationSet.create(state.doc, [])
return new AnnotationState(decorations)
}