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' import { toSlatePath, toJS } from '../utils/index'
const insertTextOp = ({ index, path, value }) => () => ({ const insertTextOp = ({ index, path, value }) => () => ({
@ -9,45 +8,36 @@ const insertTextOp = ({ index, path, value }) => () => ({
marks: [] marks: []
}) })
const insertNodeOp = ({ value, index, path }) => map => { const insertNodeOp = ({ value, obj, index, path }) => map => {
const ops = [] const ops = []
const insertRecoursive = ({ nodes, ...json }: any, path) => { const insertRecoursive = ({ nodes, ...json }: any, path) => {
const node = nodes const node = nodes ? { ...json, nodes: [] } : json
? Block.fromJSON({ ...json, nodes: [] })
: Text.fromJSON(json)
if (node.object === 'mark') {
ops.push({
type: 'add_mark',
path: path.slice(0, -1),
mark: node
})
} else {
ops.push({ ops.push({
type: 'insert_node', type: 'insert_node',
path, path,
node node
}) })
}
nodes && nodes.forEach((n, i) => insertRecoursive(n, [...path, i])) 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 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 = { const insertByType = {
text: insertTextOp, text: insertTextOp,
list: insertNodeOp list: insertNodeOp

View File

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

View File

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

View File

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