feat: set_annotation temporary disabled

This commit is contained in:
cudr 2019-10-12 23:15:02 +03:00
parent 55def80703
commit 242a836ce8
5 changed files with 94 additions and 68 deletions

View File

@ -17,18 +17,21 @@ const AnnotationSetOp = ({ key, value }: Automerge.Diff) => (map, doc) => {
let op let op
if (!doc.annotations[key]) { /**
* Looks like set_annotation option is broken, temporary disabled
*/
// if (!doc.annotations[key]) {
op = { op = {
type: 'add_annotation', type: 'add_annotation',
annotation: map[value] annotation: map[value]
} }
} else { // } else {
op = { // op = {
type: 'set_annotation', // type: 'set_annotation',
properties: doc.annotations[key], // properties: toJS(doc.annotations[key]),
newProperties: map[value] // newProperties: map[value]
} // }
} // }
console.log('opSET!!', key, map[value], op) console.log('opSET!!', key, map[value], op)

View File

@ -3,10 +3,7 @@ import { toJS } from '../utils'
import { Operation } from 'slate' import { Operation } from 'slate'
import { List } from 'immutable' import { List } from 'immutable'
export const setCursor = ( export const setCursor = (doc, { id, selection, annotationType }) => {
doc,
{ id, selection, selectionOps, annotationType }
) => {
if (!doc.annotations) { if (!doc.annotations) {
doc.annotations = {} doc.annotations = {}
} }
@ -21,38 +18,31 @@ export const setCursor = (
const annotation = toJS(doc.annotations[id]) const annotation = toJS(doc.annotations[id])
if (selectionOps.size) { // if (selectionOps.size) {
selectionOps.forEach(op => { // selectionOps.forEach(op => {
const { newProperties } = op.toJSON() // const { newProperties } = op.toJSON()
if (newProperties.focus) annotation.focus = newProperties.focus // if (newProperties.focus) annotation.focus = newProperties.focus
if (newProperties.anchor) annotation.anchor = newProperties.anchor // if (newProperties.anchor) annotation.anchor = newProperties.anchor
if (newProperties.data) annotation.data = newProperties.data // if (newProperties.data) annotation.data = newProperties.data
}) // })
} // }
const cursorStart = annotation.anchor && annotation.anchor.offset // console.log('cursor!!', cursorStart, cursorEnd)
const cursorEnd = annotation.focus && annotation.focus.offset // console.log(
// 'selection!!',
// selection.toJSON(),
// selection.start.offset,
// selection.end.offset
// )
console.log('cursor!!', cursorStart, cursorEnd) annotation.focus = selection.end.toJSON() || {}
console.log( annotation.anchor = selection.start.toJSON() || {}
'selection!!',
annotation,
selection.start.offset,
selection.end.offset
)
if (selection.start.offset !== cursorStart) {
annotation.focus = selection.end.toJS() || {}
}
if (selection.end.offset !== cursorEnd) {
annotation.anchor = selection.start.toJS() || {}
}
annotation.data.isBackward = selection.isBackward annotation.data.isBackward = selection.isBackward
annotation.data.targetPath = selection.isBackward
console.log('setted cursor', annotation, toJS(doc)) ? annotation.anchor.path
: annotation.focus.path
doc.annotations[id] = annotation doc.annotations[id] = annotation
@ -60,7 +50,7 @@ export const setCursor = (
} }
export const removeCursor = (doc, { id }) => { export const removeCursor = (doc, { id }) => {
console.log('!!!removeCursor', doc, id) // console.log('!!!removeCursor', doc, id)
if (doc.annotations && doc.annotations[id]) { if (doc.annotations && doc.annotations[id]) {
delete doc.annotations[id] delete doc.annotations[id]
} }
@ -68,20 +58,18 @@ export const removeCursor = (doc, { id }) => {
return doc return doc
} }
export const cursorOpFilter = (doc, ops: List<Operation>) => export const cursorOpFilter = (ops: List<Operation>, annotationType) =>
ops.filter(op => { ops.filter(op => {
const { annotations } = doc
if (op.type === 'set_annotation') { if (op.type === 'set_annotation') {
return !( return !(
(op.properties && annotations[op.properties.key]) || (op.properties && op.properties.type === annotationType) ||
(op.newProperties && annotations[op.newProperties.key]) (op.newProperties && op.newProperties.type === annotationType)
) )
} else if ( } else if (
op.type === 'add_annotation' || op.type === 'add_annotation' ||
op.type === 'remove_annotation' op.type === 'remove_annotation'
) { ) {
return !annotations[op.annotation.key] return op.annotation.type !== annotationType
} }
return true return true

View File

@ -130,17 +130,22 @@ class Connection {
value: { selection } value: { selection }
} = this.editor } = this.editor
const annotationType = 'collaborative_selection'
const cursorData = { const cursorData = {
id: this.socket.id, id: this.socket.id,
selection, selection,
selectionOps: operations.filter(op => op.type === 'set_selection'), // selectionOps: operations.filter(op => op.type === 'set_selection'),
annotationType: 'collaborative_selection' annotationType
} }
const withCursor = selection.isFocused ? setCursor : removeCursor const withCursor = selection.isFocused ? setCursor : removeCursor
const changed = Automerge.change(doc, message, (d: any) => const changed = Automerge.change(doc, message, (d: any) =>
withCursor(applySlateOps(d, cursorOpFilter(d, operations)), cursorData) withCursor(
applySlateOps(d, cursorOpFilter(operations, annotationType)),
cursorData
)
) )
console.log('doc with annotations!!', toJS(changed)) console.log('doc with annotations!!', toJS(changed))

View File

@ -26,6 +26,16 @@ class Controller extends Component<ControllerProps> {
onConnect: this.onConnect, onConnect: this.onConnect,
onDisconnect: this.onDisconnect onDisconnect: this.onDisconnect
}) })
//@ts-ignore
if (!window.counter) {
//@ts-ignore
window.counter = 1
}
//@ts-ignore
window[`Editor_${counter}`] = editor
//@ts-ignore
window.counter += 1
} }
componentWillUnmount() { componentWillUnmount() {

View File

@ -1,46 +1,66 @@
import React from 'react' import React, { Fragment } from 'react'
const wrapStyles = { backgroundColor: '#e91e63', position: 'relative' } const wrapStyles = {
backgroundColor: 'rgba(233, 30, 99, 0.2)',
position: 'relative'
}
const cursorStyleBase = { const cursorStyleBase = {
position: 'absolute', position: 'absolute',
top: 0, top: -2,
pointerEvents: 'none', pointerEvents: 'none',
userSelect: 'none', userSelect: 'none',
transform: 'translateY(-100%)', transform: 'translateY(-100%)',
fontSize: '10px', fontSize: 10,
color: 'white', color: 'white',
background: 'palevioletred', background: 'palevioletred',
whiteSpace: 'nowrap' whiteSpace: 'nowrap'
} as any } as any
const caretStyleBase = {
position: 'absolute',
top: 0,
pointerEvents: 'none',
userSelect: 'none',
height: '100%',
width: 2,
background: '#bf1b52'
}
const renderAnnotation = (props, editor, next) => { const renderAnnotation = (props, editor, next) => {
const { children, annotation, attributes, node } = props const { children, annotation, attributes, node } = props
const isBackward = annotation.data.get('isBackward') const isBackward = annotation.data.get('isBackward')
const cursorPath = isBackward ? annotation.anchor.path : annotation.focus.path const targetPath = annotation.data.get('targetPath')
console.log('renderAnnotation', props, isBackward, cursorPath) console.log(
'renderAnnotation',
annotation.toJS(),
props,
isBackward,
targetPath
)
const cursorStyles = { ...cursorStyleBase, left: isBackward ? '0%' : '100%' } const badgeStyles = { ...cursorStyleBase, left: isBackward ? '0%' : '100%' }
const caretStyles = { ...caretStyleBase, left: isBackward ? '0%' : '100%' }
const { document } = editor.value const { document } = editor.value
const targetNode = document.getNode(cursorPath) const targetNode = document.getNode(targetPath)
const isTarget = targetNode && targetNode.key === node.key const isShowCursor = targetNode && targetNode.key === node.key
console.log('isTarget', isTarget, targetNode, node)
const showCursor = isTarget
switch (annotation.type) { switch (annotation.type) {
case 'collaborative_selection': case 'collaborative_selection':
return ( return (
<span {...attributes} style={wrapStyles}> <span {...attributes} style={wrapStyles}>
{showCursor ? ( {isShowCursor ? (
<span contentEditable={false} style={cursorStyles}> <Fragment>
<span contentEditable={false} style={badgeStyles}>
{annotation.key} {annotation.key}
</span> </span>
<span contentEditable={false} style={caretStyles} />
</Fragment>
) : null} ) : null}
{children} {children}
</span> </span>