Merge pull request #1 from cudr/mark_data

feat: mark data

package.json

@@ -4,9 +4,11 @@
   "description": "Slate collaborative plugin & microservice",
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "dev": "concurrently \"lerna run --parallel watch\" \"lerna run dev --stream\"",
+    "release": "yarn prebuild && yarn build && lerna publish from-package",
+    "dev": "concurrently \"yarn watch\" \"lerna run dev --stream\"",
     "build": "lerna run build --stream",
-    "prebuild": "lerna clean --yes && rm -rf ./packages/**/lib/",
+    "watch": "lerna run --parallel watch",
+    "prebuild": "rm -rf ./packages/**/lib/",
     "format": "prettier --write"
   },
   "workspaces": [

packages/backend/package.json

@@ -7,7 +7,13 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "description": "slate-collaborative bridge",
-  "repository": "https://github.com/cudr/slate-collaborative",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cudr/slate-collaborative.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "cudr",
   "license": "MIT",
   "scripts": {
@@ -34,5 +40,8 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-typescript": "^7.6.0",
     "@types/socket.io": "^2.1.2"
+  },
+  "directories": {
+    "lib": "lib"
   }
 }

packages/backend/tsconfig.json

@@ -5,6 +5,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "baseUrl": "src",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "lib": ["dom", "dom.iterable", "esnext"]
   }
 }

packages/bridge/package.json

@@ -7,7 +7,13 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "description": "slate-collaborative bridge",
-  "repository": "https://github.com/cudr/slate-collaborative",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cudr/slate-collaborative.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "cudr",
   "license": "MIT",
   "scripts": {
@@ -27,5 +33,13 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-typescript": "^7.6.0"
-  }
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "keywords": [
+    "slate",
+    "automerge",
+    "bridge"
+  ]
 }

packages/bridge/src/apply/annotation.ts

@@ -1,12 +1,14 @@
-export const addAnnotation = (doc: any, op: any) => {
+import { Operation, SyncDoc } from '../model'
+
+export const addAnnotation = (doc: SyncDoc, op: Operation): SyncDoc => {
   return doc
 }
 
-export const removeAnnotation = (doc: any, op: any) => {
+export const removeAnnotation = (doc: SyncDoc, op: Operation): SyncDoc => {
   return doc
 }
 
-export const setAnnotation = (doc: any, op: any) => {
+export const setAnnotation = (doc: SyncDoc, op: Operation): SyncDoc => {
   return doc
 }
 

packages/bridge/src/convert/create.ts

@@ -1,6 +1,8 @@
+import * as Automerge from 'automerge'
+
 const createByType = type => (type === 'map' ? {} : type === 'list' ? [] : '')
 
-const opCreate = ({ obj, type }, [map, ops]) => {
+const opCreate = ({ obj, type }: Automerge.Diff, [map, ops]) => {
   map[obj] = createByType(type)
 
   return [map, ops]

packages/bridge/src/convert/index.ts

@@ -1,3 +1,5 @@
+import * as Automerge from 'automerge'
+
 import opInsert from './insert'
 import opRemove from './remove'
 import opSet from './set'
@@ -12,7 +14,7 @@ const byAction = {
 
 const rootKey = '00000000-0000-0000-0000-000000000000'
 
-const toSlateOp = ops => {
+const toSlateOp = (ops: Automerge.Diff[], currentTree) => {
   const iterate = (acc, op) => {
     const action = byAction[op.action]
 
@@ -21,14 +23,14 @@ const toSlateOp = ops => {
     return result
   }
 
-  const [tree, defer] = ops.reduce(iterate, [
+  const [tempTree, defer] = ops.reduce(iterate, [
     {
       [rootKey]: {}
     },
     []
   ])
 
-  return defer.map(op => op(tree))
+  return defer.flatMap(op => op(tempTree, currentTree))
 }
 
 export { toSlateOp }

packages/bridge/src/convert/insert.ts

@@ -1,6 +1,7 @@
+import * as Automerge from 'automerge'
 import { toSlatePath, toJS } from '../utils/index'
 
-const insertTextOp = ({ index, path, value }) => () => ({
+const insertTextOp = ({ index, path, value }: Automerge.Diff) => () => ({
   type: 'insert_text',
   path: toSlatePath(path),
   offset: index,
@@ -8,18 +9,42 @@ const insertTextOp = ({ index, path, value }) => () => ({
   marks: []
 })
 
-const insertNodeOp = ({ value, index, path }) => map => ({
-  type: 'insert_node',
-  path: [...toSlatePath(path), index],
-  node: map[value]
+const insertNodeOp = ({ value, obj, index, path }: Automerge.Diff) => map => {
+  const ops = []
+
+  const inserate = ({ nodes, ...json }: any, path) => {
+    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) => inserate(n, [...path, i]))
+  }
+
+  const source = map[value] || (map[obj] && toJS(map[obj]))
+
+  source && inserate(source, [...toSlatePath(path), index])
+
+  return ops
+}
 
 const insertByType = {
   text: insertTextOp,
   list: insertNodeOp
 }
 
-const opInsert = (op, [map, ops]) => {
+const opInsert = (op: Automerge.Diff, [map, ops]) => {
   try {
     const { link, obj, path, index, type, value } = op
 

packages/bridge/src/convert/remove.ts

@@ -1,6 +1,8 @@
+import * as Automerge from 'automerge'
 import { toSlatePath, toJS } from '../utils/index'
+import { getTarget } from '../path'
 
-const removeTextOp = ({ index, path }) => () => ({
+const removeTextOp = ({ index, path }: Automerge.Diff) => () => ({
   type: 'remove_text',
   path: toSlatePath(path).slice(0, path.length),
   offset: index,
@@ -8,11 +10,30 @@ const removeTextOp = ({ index, path }) => () => ({
   marks: []
 })
 
-const removeNodesOp = ({ index, path }) => () => {
-  const nPath = toSlatePath(path)
+const removeMarkOp = ({ path, index }: Automerge.Diff) => (map, doc) => {
+  const slatePath = toSlatePath(path)
+  const target = getTarget(doc, slatePath)
+
+  return {
+    type: 'remove_mark',
+    path: slatePath,
+    mark: {
+      type: target.marks[index].type
+    }
+  }
+}
+
+const removeNodesOp = ({ index, obj, path }: Automerge.Diff) => (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'
     }
@@ -21,10 +42,11 @@ const removeNodesOp = ({ index, path }) => () => {
 
 const removeByType = {
   text: removeTextOp,
-  nodes: removeNodesOp
+  nodes: removeNodesOp,
+  marks: removeMarkOp
 }
 
-const opRemove = (op, [map, ops]) => {
+const opRemove = (op: Automerge.Diff, [map, ops]) => {
   try {
     const { index, path, obj } = op
 

packages/bridge/src/convert/set.ts

@@ -1,9 +1,29 @@
-import { toJS } from '../utils/index'
+import * as Automerge from 'automerge'
+import { toSlatePath, toJS } from '../utils/index'
 
-const opSet = (op, [map, ops]) => {
-  const { link, value, obj, key } = op
+const setDataOp = ({ path, value }: Automerge.Diff) => map => ({
+  type: 'set_node',
+  path: toSlatePath(path),
+  properties: {},
+  newProperties: {
+    data: map[value]
+  }
+})
+
+const setByType = {
+  data: setDataOp
+}
+
+const opSet = (op: Automerge.Diff, [map, ops]) => {
+  const { link, value, path, obj, key } = op
   try {
+    const set = setByType[key]
+
+    if (set && path) {
+      ops.push(set(op))
+    } else {
       map[obj][key] = link ? map[value] : value
+    }
 
     return [map, ops]
   } catch (e) {

packages/bridge/src/utils/hexGen.ts

@@ -0,0 +1,15 @@
+export type Hex = string
+
+const hexGen = (len: number = 12): Hex => {
+  const maxlen = 8
+  const min = Math.pow(16, Math.min(len, maxlen) - 1)
+  const max = Math.pow(16, Math.min(len, maxlen)) - 1
+  const n = Math.floor(Math.random() * (max - min + 1)) + min
+  let r = n.toString(16)
+  while (r.length < len) {
+    r = r + hexGen(len - maxlen)
+  }
+  return r
+}
+
+export default hexGen

packages/bridge/src/utils/index.ts

@@ -1,4 +1,5 @@
 import toSync from './toSync'
+import hexGen from './hexGen'
 
 export const toJS = node => JSON.parse(JSON.stringify(node))
 
@@ -6,4 +7,4 @@ export const cloneNode = node => toSync(toJS(node))
 
 const toSlatePath = path => (path ? path.filter(d => Number.isInteger(d)) : [])
 
-export { toSync, toSlatePath }
+export { toSync, toSlatePath, hexGen }

packages/bridge/tsconfig.json

@@ -2,6 +2,7 @@
   "include": ["src/**/*"],
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
     "outDir": "lib",
     "rootDir": "src",
     "baseUrl": "src",

packages/client/package.json

@@ -7,7 +7,13 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "description": "slate-collaborative bridge",
-  "repository": "https://github.com/cudr/slate-collaborative",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cudr/slate-collaborative.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "cudr",
   "license": "MIT",
   "scripts": {
@@ -37,5 +43,8 @@
     "@types/react": "^16.9.2",
     "@types/slate": "^0.47.1",
     "@types/socket.io-client": "^1.4.32"
+  },
+  "directories": {
+    "lib": "lib"
   }
 }

packages/client/src/Connection.ts

@@ -58,12 +58,14 @@ class Connection {
       const operations = Automerge.diff(currentDoc, docNew)
 
       if (operations.length !== 0) {
-        const slateOps = toSlateOp(operations, this.connectOpts.query.name)
+        const slateOps = toSlateOp(operations, currentDoc)
 
         this.editor.remote = true
 
         this.editor.withoutSaving(() => {
-          slateOps.forEach(o => this.editor.applyOperation(o))
+          slateOps.forEach(o => {
+            this.editor.applyOperation(o)
+          })
         })
 
         setTimeout(() => (this.editor.remote = false), 5)

packages/client/src/Controller.tsx

@@ -1,10 +1,13 @@
-import React, { PureComponent, ReactNode } from 'react'
+import React, { Component } from 'react'
+import { KeyUtils } from 'slate'
+
+import { hexGen } from '@slate-collaborative/bridge'
 
 import Connection from './Connection'
 
 import { ControllerProps } from './model'
 
-class Controller extends PureComponent<ControllerProps> {
+class Controller extends Component<ControllerProps> {
   connection?: Connection
 
   state = {
@@ -14,6 +17,8 @@ class Controller extends PureComponent<ControllerProps> {
   componentDidMount() {
     const { editor, url, connectOpts } = this.props
 
+    KeyUtils.setGenerator(() => hexGen())
+
     editor.connection = new Connection({
       editor,
       url,

packages/client/src/onChange.ts

@@ -2,7 +2,9 @@ import { ExtendedEditor } from './model'
 
 const onChange = opts => (editor: ExtendedEditor, next: () => void) => {
   if (!editor.remote) {
-    editor.connection.receiveSlateOps(editor.operations)
+    const operations: any = editor.operations
+
+    editor.connection.receiveSlateOps(operations)
   }
 
   return next()

packages/client/tsconfig.json

@@ -6,7 +6,7 @@
     "rootDir": "src",
     "baseUrl": "src",
     "jsx": "react",
-    "lib": ["es6", "dom"],
+    "lib": ["dom", "dom.iterable", "es6"],
     "esModuleInterop": true
   }
 }