feat: success add & remove marks

This commit is contained in:
cudr 2019-10-06 13:30:35 +03:00
parent 61c3b830dc
commit fbcbef02af
5 changed files with 40 additions and 44 deletions

View File

@ -1,4 +1,3 @@
import { Block, Text } from 'slate'
import { toSlatePath, toJS } from '../utils/index'
const insertTextOp = ({ index, path, value }) => () => ({
@ -9,45 +8,36 @@ const insertTextOp = ({ index, path, value }) => () => ({
marks: []
})
const insertNodeOp = ({ value, index, path }) => map => {
const insertNodeOp = ({ value, obj, index, path }) => map => {
const ops = []
const insertRecoursive = ({ nodes, ...json }: any, path) => {
const node = nodes
? Block.fromJSON({ ...json, nodes: [] })
: Text.fromJSON(json)
const node = nodes ? { ...json, nodes: [] } : json
if (node.object === 'mark') {
ops.push({
type: 'add_mark',
path: path.slice(0, -1),
mark: node
})
} else {
ops.push({
type: 'insert_node',
path,
node
})
}
nodes && nodes.forEach((n, i) => insertRecoursive(n, [...path, i]))
}
insertRecoursive(map[value], [...toSlatePath(path), index])
const source = map[value] || (map[obj] && toJS(map[obj]))
source && insertRecoursive(source, [...toSlatePath(path), index])
return ops
}
// let count = 4000
// const insertNodeOp = ({ value, index, path }) => map => {
// const node = map[value]
// if (!node) return null
// count += 1
// return {
// type: 'insert_node',
// path: [...toSlatePath(path), index],
// node, //: { ...node, key: count },
// data: {}
// }
// }
const insertByType = {
text: insertTextOp,
list: insertNodeOp

View File

@ -22,11 +22,17 @@ const removeMarkOp = ({ path, index }) => (map, doc) => {
}
}
const removeNodesOp = ({ index, path }) => () => {
const nPath = toSlatePath(path)
const removeNodesOp = ({ index, obj, path }) => (map, doc) => {
const slatePath = toSlatePath(path)
if (!map.hasOwnProperty(obj)) {
const target = getTarget(doc, [...slatePath, index] as any)
map[obj] = target
}
return {
type: 'remove_node',
path: nPath.length ? nPath.concat(index) : [index],
path: slatePath.length ? slatePath.concat(index) : [index],
node: {
object: 'text'
}

View File

@ -1,6 +1,6 @@
import { toSlatePath, toJS } from '../utils/index'
const setData = ({ path, value }) => map => ({
const setDataOp = ({ path, value }) => map => ({
type: 'set_node',
path: toSlatePath(path),
properties: {},
@ -10,15 +10,15 @@ const setData = ({ path, value }) => map => ({
})
const setByType = {
data: setData
data: setDataOp
}
const opSet = (op, [map, ops]) => {
const { link, value, obj, key } = op
const { link, value, path, obj, key } = op
try {
const set = setByType[key]
if (set) {
if (set && path) {
ops.push(set(op))
} else {
map[obj][key] = link ? map[value] : value

View File

@ -35,6 +35,8 @@ class Connection {
this.docSet = new Automerge.DocSet()
window['getDoc'] = () => toJS(this.docSet.getDoc(this.docId))
this.connect()
}
@ -60,19 +62,17 @@ class Connection {
if (operations.length !== 0) {
const slateOps = toSlateOp(operations, currentDoc)
// console.log('start key', KeyUtils.create())
console.log('operations', operations, slateOps)
console.log('this.editor', this.editor)
// console.log('this.editor', this.editor)
this.editor.remote = true
this.editor.withoutSaving(() => {
slateOps.forEach(o => {
this.editor.applyOperation(o)
if (o.type === 'insert_node') {
o.node.regenerateKey()
}
})
})
@ -84,7 +84,7 @@ class Connection {
}
receiveSlateOps = (operations: Immutable.List<Operation>) => {
console.log('change slate ops!!!', operations.toJS())
console.log('change slate ops!!!', operations.map(op => op.toJSON()).toJS())
const doc = this.docSet.getDoc(this.docId)
const message = `change from ${this.socket.id}`
@ -95,7 +95,7 @@ class Connection {
applySlateOps(d, operations)
)
console.log('changed!!!', toJS(changed))
// console.log('changed!!!', toJS(changed))
this.docSet.setDoc(this.docId, changed)
}

View File

@ -1,10 +1,10 @@
import React, { PureComponent, ReactNode } from 'react'
import React, { Component, ReactNode } from 'react'
import Connection from './Connection'
import { ControllerProps } from './model'
class Controller extends PureComponent<ControllerProps> {
class Controller extends Component<ControllerProps> {
connection?: Connection
state = {