mirror of
https://github.com/cudr/slate-collaborative.git
synced 2024-10-27 20:34:06 +00:00
feat: success add & remove marks
This commit is contained in:
parent
61c3b830dc
commit
fbcbef02af
@ -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
|
||||||
|
@ -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'
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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 = {
|
||||||
|
Loading…
Reference in New Issue
Block a user