diff --git a/packages/bridge/src/convert/set.ts b/packages/bridge/src/convert/set.ts index 9aa3d85..1ec1273 100644 --- a/packages/bridge/src/convert/set.ts +++ b/packages/bridge/src/convert/set.ts @@ -17,18 +17,21 @@ const AnnotationSetOp = ({ key, value }: Automerge.Diff) => (map, doc) => { let op - if (!doc.annotations[key]) { - op = { - type: 'add_annotation', - annotation: map[value] - } - } else { - op = { - type: 'set_annotation', - properties: doc.annotations[key], - newProperties: map[value] - } + /** + * Looks like set_annotation option is broken, temporary disabled + */ + // if (!doc.annotations[key]) { + op = { + type: 'add_annotation', + annotation: map[value] } + // } else { + // op = { + // type: 'set_annotation', + // properties: toJS(doc.annotations[key]), + // newProperties: map[value] + // } + // } console.log('opSET!!', key, map[value], op) diff --git a/packages/bridge/src/cursor/index.ts b/packages/bridge/src/cursor/index.ts index c0eeee5..6273e43 100644 --- a/packages/bridge/src/cursor/index.ts +++ b/packages/bridge/src/cursor/index.ts @@ -3,10 +3,7 @@ import { toJS } from '../utils' import { Operation } from 'slate' import { List } from 'immutable' -export const setCursor = ( - doc, - { id, selection, selectionOps, annotationType } -) => { +export const setCursor = (doc, { id, selection, annotationType }) => { if (!doc.annotations) { doc.annotations = {} } @@ -21,38 +18,31 @@ export const setCursor = ( const annotation = toJS(doc.annotations[id]) - if (selectionOps.size) { - selectionOps.forEach(op => { - const { newProperties } = op.toJSON() + // if (selectionOps.size) { + // selectionOps.forEach(op => { + // const { newProperties } = op.toJSON() - if (newProperties.focus) annotation.focus = newProperties.focus - if (newProperties.anchor) annotation.anchor = newProperties.anchor - if (newProperties.data) annotation.data = newProperties.data - }) - } - - const cursorStart = annotation.anchor && annotation.anchor.offset - const cursorEnd = annotation.focus && annotation.focus.offset + // if (newProperties.focus) annotation.focus = newProperties.focus + // if (newProperties.anchor) annotation.anchor = newProperties.anchor + // if (newProperties.data) annotation.data = newProperties.data + // }) + // } - console.log('cursor!!', cursorStart, cursorEnd) - console.log( - 'selection!!', - annotation, - selection.start.offset, - selection.end.offset - ) + // console.log('cursor!!', cursorStart, cursorEnd) + // console.log( + // 'selection!!', + // selection.toJSON(), + // 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.focus = selection.end.toJSON() || {} + annotation.anchor = selection.start.toJSON() || {} annotation.data.isBackward = selection.isBackward - - console.log('setted cursor', annotation, toJS(doc)) + annotation.data.targetPath = selection.isBackward + ? annotation.anchor.path + : annotation.focus.path doc.annotations[id] = annotation @@ -60,7 +50,7 @@ export const setCursor = ( } export const removeCursor = (doc, { id }) => { - console.log('!!!removeCursor', doc, id) + // console.log('!!!removeCursor', doc, id) if (doc.annotations && doc.annotations[id]) { delete doc.annotations[id] } @@ -68,20 +58,18 @@ export const removeCursor = (doc, { id }) => { return doc } -export const cursorOpFilter = (doc, ops: List) => +export const cursorOpFilter = (ops: List, annotationType) => ops.filter(op => { - const { annotations } = doc - if (op.type === 'set_annotation') { return !( - (op.properties && annotations[op.properties.key]) || - (op.newProperties && annotations[op.newProperties.key]) + (op.properties && op.properties.type === annotationType) || + (op.newProperties && op.newProperties.type === annotationType) ) } else if ( op.type === 'add_annotation' || op.type === 'remove_annotation' ) { - return !annotations[op.annotation.key] + return op.annotation.type !== annotationType } return true diff --git a/packages/client/src/Connection.ts b/packages/client/src/Connection.ts index 79312d7..bec6626 100644 --- a/packages/client/src/Connection.ts +++ b/packages/client/src/Connection.ts @@ -130,17 +130,22 @@ class Connection { value: { selection } } = this.editor + const annotationType = 'collaborative_selection' + const cursorData = { id: this.socket.id, selection, - selectionOps: operations.filter(op => op.type === 'set_selection'), - annotationType: 'collaborative_selection' + // selectionOps: operations.filter(op => op.type === 'set_selection'), + annotationType } const withCursor = selection.isFocused ? setCursor : removeCursor 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)) diff --git a/packages/client/src/Controller.tsx b/packages/client/src/Controller.tsx index da41219..d5b4bbf 100644 --- a/packages/client/src/Controller.tsx +++ b/packages/client/src/Controller.tsx @@ -26,6 +26,16 @@ class Controller extends Component { onConnect: this.onConnect, 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() { diff --git a/packages/client/src/renderAnnotation.tsx b/packages/client/src/renderAnnotation.tsx index 67fd31d..6c342c2 100644 --- a/packages/client/src/renderAnnotation.tsx +++ b/packages/client/src/renderAnnotation.tsx @@ -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 = { position: 'absolute', - top: 0, + top: -2, pointerEvents: 'none', userSelect: 'none', transform: 'translateY(-100%)', - fontSize: '10px', + fontSize: 10, color: 'white', background: 'palevioletred', whiteSpace: 'nowrap' } as any +const caretStyleBase = { + position: 'absolute', + top: 0, + pointerEvents: 'none', + userSelect: 'none', + height: '100%', + width: 2, + background: '#bf1b52' +} + const renderAnnotation = (props, editor, next) => { const { children, annotation, attributes, node } = props 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 targetNode = document.getNode(cursorPath) - - const isTarget = targetNode && targetNode.key === node.key + const targetNode = document.getNode(targetPath) - console.log('isTarget', isTarget, targetNode, node) - const showCursor = isTarget + const isShowCursor = targetNode && targetNode.key === node.key switch (annotation.type) { case 'collaborative_selection': return ( - {showCursor ? ( - - {annotation.key} - + {isShowCursor ? ( + + + {annotation.key} + + + ) : null} {children}