mirror of
				https://github.com/cudr/slate-collaborative.git
				synced 2025-06-13 12:54:04 +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'
 | 
			
		||||
 | 
			
		||||
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
 | 
			
		||||
 | 
			
		||||
@ -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'
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -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
 | 
			
		||||
 | 
			
		||||
@ -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)
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -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 = {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user