From e17e5f0fc33986beaa711c018b242a8a46a8edb8 Mon Sep 17 00:00:00 2001
From: cudr <codefaster@yandex.ru>
Date: Sat, 5 Oct 2019 12:07:11 +0300
Subject: [PATCH 1/4] feat: test release

---
 package.json                    |  3 ++-
 packages/backend/package.json   | 11 ++++++++++-
 packages/backend/tsconfig.json  |  3 ++-
 packages/bridge/package.json    | 18 ++++++++++++++++--
 packages/bridge/tsconfig.json   |  1 +
 packages/client/package.json    | 11 ++++++++++-
 packages/client/src/onChange.ts |  4 +++-
 packages/client/tsconfig.json   |  2 +-
 8 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 219ceab..d33d4e9 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,10 @@
   "description": "Slate collaborative plugin & microservice",
   "scripts": {
     "bootstrap": "lerna bootstrap",
+    "release": "yarn prebuild && yarn build && lerna publish from-package",
     "dev": "concurrently \"lerna run --parallel watch\" \"lerna run dev --stream\"",
     "build": "lerna run build --stream",
-    "prebuild": "lerna clean --yes && rm -rf ./packages/**/lib/",
+    "prebuild": "rm -rf ./packages/**/lib/",
     "format": "prettier --write"
   },
   "workspaces": [
diff --git a/packages/backend/package.json b/packages/backend/package.json
index ec9a079..b559b56 100644
--- a/packages/backend/package.json
+++ b/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"
   }
 }
diff --git a/packages/backend/tsconfig.json b/packages/backend/tsconfig.json
index 81c719a..40950be 100644
--- a/packages/backend/tsconfig.json
+++ b/packages/backend/tsconfig.json
@@ -5,6 +5,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "baseUrl": "src",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "lib": ["dom", "dom.iterable", "esnext"]
   }
 }
diff --git a/packages/bridge/package.json b/packages/bridge/package.json
index 36b1f20..7e412f1 100644
--- a/packages/bridge/package.json
+++ b/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"
+  ]
 }
diff --git a/packages/bridge/tsconfig.json b/packages/bridge/tsconfig.json
index e619b21..2cf697c 100644
--- a/packages/bridge/tsconfig.json
+++ b/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",
diff --git a/packages/client/package.json b/packages/client/package.json
index 561a31e..6682be4 100644
--- a/packages/client/package.json
+++ b/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"
   }
 }
diff --git a/packages/client/src/onChange.ts b/packages/client/src/onChange.ts
index f3fb136..a71a371 100644
--- a/packages/client/src/onChange.ts
+++ b/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()
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index 5f504f8..2c802cc 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -6,7 +6,7 @@
     "rootDir": "src",
     "baseUrl": "src",
     "jsx": "react",
-    "lib": ["es6", "dom"],
+    "lib": ["dom", "dom.iterable", "es6"],
     "esModuleInterop": true
   }
 }

From 61c3b830dcf9a290292c4bfc2565f6d932dbbc28 Mon Sep 17 00:00:00 2001
From: cudr <codefaster@yandex.ru>
Date: Sun, 6 Oct 2019 00:24:52 +0300
Subject: [PATCH 2/4] feat: set data success

---
 package.json                          |  3 +-
 packages/bridge/src/convert/index.ts  |  6 ++--
 packages/bridge/src/convert/insert.ts | 44 ++++++++++++++++++++++++---
 packages/bridge/src/convert/remove.ts | 17 ++++++++++-
 packages/bridge/src/convert/set.ts    | 23 ++++++++++++--
 packages/client/src/Connection.ts     | 18 +++++++++--
 6 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index d33d4e9..9ffa8d5 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "release": "yarn prebuild && yarn build && lerna publish from-package",
-    "dev": "concurrently \"lerna run --parallel watch\" \"lerna run dev --stream\"",
+    "dev": "concurrently \"yarn watch\" \"lerna run dev --stream\"",
     "build": "lerna run build --stream",
+    "watch": "lerna run --parallel watch",
     "prebuild": "rm -rf ./packages/**/lib/",
     "format": "prettier --write"
   },
diff --git a/packages/bridge/src/convert/index.ts b/packages/bridge/src/convert/index.ts
index 35a50cb..e751f58 100644
--- a/packages/bridge/src/convert/index.ts
+++ b/packages/bridge/src/convert/index.ts
@@ -12,7 +12,7 @@ const byAction = {
 
 const rootKey = '00000000-0000-0000-0000-000000000000'
 
-const toSlateOp = ops => {
+const toSlateOp = (ops, currentTree) => {
   const iterate = (acc, op) => {
     const action = byAction[op.action]
 
@@ -21,14 +21,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 }
diff --git a/packages/bridge/src/convert/insert.ts b/packages/bridge/src/convert/insert.ts
index 852d4bd..0707a05 100644
--- a/packages/bridge/src/convert/insert.ts
+++ b/packages/bridge/src/convert/insert.ts
@@ -1,3 +1,4 @@
+import { Block, Text } from 'slate'
 import { toSlatePath, toJS } from '../utils/index'
 
 const insertTextOp = ({ index, path, value }) => () => ({
@@ -8,11 +9,44 @@ 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, index, path }) => map => {
+  const ops = []
+
+  const insertRecoursive = ({ nodes, ...json }: any, path) => {
+    const node = nodes
+      ? Block.fromJSON({ ...json, nodes: [] })
+      : Text.fromJSON(json)
+
+    ops.push({
+      type: 'insert_node',
+      path,
+      node
+    })
+
+    nodes && nodes.forEach((n, i) => insertRecoursive(n, [...path, i]))
+  }
+
+  insertRecoursive(map[value], [...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,
diff --git a/packages/bridge/src/convert/remove.ts b/packages/bridge/src/convert/remove.ts
index d6bbba0..6e18490 100644
--- a/packages/bridge/src/convert/remove.ts
+++ b/packages/bridge/src/convert/remove.ts
@@ -1,4 +1,5 @@
 import { toSlatePath, toJS } from '../utils/index'
+import { getTarget } from '../path'
 
 const removeTextOp = ({ index, path }) => () => ({
   type: 'remove_text',
@@ -8,6 +9,19 @@ const removeTextOp = ({ index, path }) => () => ({
   marks: []
 })
 
+const removeMarkOp = ({ path, index }) => (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, path }) => () => {
   const nPath = toSlatePath(path)
   return {
@@ -21,7 +35,8 @@ const removeNodesOp = ({ index, path }) => () => {
 
 const removeByType = {
   text: removeTextOp,
-  nodes: removeNodesOp
+  nodes: removeNodesOp,
+  marks: removeMarkOp
 }
 
 const opRemove = (op, [map, ops]) => {
diff --git a/packages/bridge/src/convert/set.ts b/packages/bridge/src/convert/set.ts
index 3193e2c..a0c9d9b 100644
--- a/packages/bridge/src/convert/set.ts
+++ b/packages/bridge/src/convert/set.ts
@@ -1,9 +1,28 @@
-import { toJS } from '../utils/index'
+import { toSlatePath, toJS } from '../utils/index'
+
+const setData = ({ path, value }) => map => ({
+  type: 'set_node',
+  path: toSlatePath(path),
+  properties: {},
+  newProperties: {
+    data: map[value]
+  }
+})
+
+const setByType = {
+  data: setData
+}
 
 const opSet = (op, [map, ops]) => {
   const { link, value, obj, key } = op
   try {
-    map[obj][key] = link ? map[value] : value
+    const set = setByType[key]
+
+    if (set) {
+      ops.push(set(op))
+    } else {
+      map[obj][key] = link ? map[value] : value
+    }
 
     return [map, ops]
   } catch (e) {
diff --git a/packages/client/src/Connection.ts b/packages/client/src/Connection.ts
index a26c644..5fb9d69 100644
--- a/packages/client/src/Connection.ts
+++ b/packages/client/src/Connection.ts
@@ -58,12 +58,22 @@ 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)
+
+        console.log('operations', operations, slateOps)
+
+        console.log('this.editor', this.editor)
 
         this.editor.remote = true
 
         this.editor.withoutSaving(() => {
-          slateOps.forEach(o => this.editor.applyOperation(o))
+          slateOps.forEach(o => {
+            this.editor.applyOperation(o)
+
+            if (o.type === 'insert_node') {
+              o.node.regenerateKey()
+            }
+          })
         })
 
         setTimeout(() => (this.editor.remote = false), 5)
@@ -74,6 +84,8 @@ class Connection {
   }
 
   receiveSlateOps = (operations: Immutable.List<Operation>) => {
+    console.log('change slate ops!!!', operations.toJS())
+
     const doc = this.docSet.getDoc(this.docId)
     const message = `change from ${this.socket.id}`
 
@@ -83,6 +95,8 @@ class Connection {
       applySlateOps(d, operations)
     )
 
+    console.log('changed!!!', toJS(changed))
+
     this.docSet.setDoc(this.docId, changed)
   }
 

From fbcbef02af50a55b1e3e72c58c62985a1d40807c Mon Sep 17 00:00:00 2001
From: cudr <codefaster@yandex.ru>
Date: Sun, 6 Oct 2019 13:30:35 +0300
Subject: [PATCH 3/4] feat: success add & remove marks

---
 packages/bridge/src/convert/insert.ts | 46 +++++++++++----------------
 packages/bridge/src/convert/remove.ts | 12 +++++--
 packages/bridge/src/convert/set.ts    |  8 ++---
 packages/client/src/Connection.ts     | 14 ++++----
 packages/client/src/Controller.tsx    |  4 +--
 5 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/packages/bridge/src/convert/insert.ts b/packages/bridge/src/convert/insert.ts
index 0707a05..b16ffa5 100644
--- a/packages/bridge/src/convert/insert.ts
+++ b/packages/bridge/src/convert/insert.ts
@@ -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
 
-    ops.push({
-      type: 'insert_node',
-      path,
-      node
-    })
+    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
diff --git a/packages/bridge/src/convert/remove.ts b/packages/bridge/src/convert/remove.ts
index 6e18490..29b67f4 100644
--- a/packages/bridge/src/convert/remove.ts
+++ b/packages/bridge/src/convert/remove.ts
@@ -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'
     }
diff --git a/packages/bridge/src/convert/set.ts b/packages/bridge/src/convert/set.ts
index a0c9d9b..e729257 100644
--- a/packages/bridge/src/convert/set.ts
+++ b/packages/bridge/src/convert/set.ts
@@ -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
diff --git a/packages/client/src/Connection.ts b/packages/client/src/Connection.ts
index 5fb9d69..f59f523 100644
--- a/packages/client/src/Connection.ts
+++ b/packages/client/src/Connection.ts
@@ -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)
   }
diff --git a/packages/client/src/Controller.tsx b/packages/client/src/Controller.tsx
index 0d6574b..a62a3f3 100644
--- a/packages/client/src/Controller.tsx
+++ b/packages/client/src/Controller.tsx
@@ -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 = {

From 86e9e774103638819aaf734b616d91b2bebeedb9 Mon Sep 17 00:00:00 2001
From: cudr <codefaster@yandex.ru>
Date: Sun, 6 Oct 2019 23:56:27 +0300
Subject: [PATCH 4/4] feat: better definitions

---
 packages/bridge/src/apply/annotation.ts |  8 +++++---
 packages/bridge/src/convert/create.ts   |  4 +++-
 packages/bridge/src/convert/index.ts    |  4 +++-
 packages/bridge/src/convert/insert.ts   | 13 +++++++------
 packages/bridge/src/convert/remove.ts   |  9 +++++----
 packages/bridge/src/convert/set.ts      |  5 +++--
 packages/bridge/src/utils/hexGen.ts     | 15 +++++++++++++++
 packages/bridge/src/utils/index.ts      |  3 ++-
 packages/client/src/Connection.ts       | 12 ------------
 packages/client/src/Controller.tsx      |  7 ++++++-
 10 files changed, 49 insertions(+), 31 deletions(-)
 create mode 100644 packages/bridge/src/utils/hexGen.ts

diff --git a/packages/bridge/src/apply/annotation.ts b/packages/bridge/src/apply/annotation.ts
index fdeea58..083b660 100644
--- a/packages/bridge/src/apply/annotation.ts
+++ b/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
 }
 
diff --git a/packages/bridge/src/convert/create.ts b/packages/bridge/src/convert/create.ts
index 7501304..9256fc4 100644
--- a/packages/bridge/src/convert/create.ts
+++ b/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]
diff --git a/packages/bridge/src/convert/index.ts b/packages/bridge/src/convert/index.ts
index e751f58..7dc0321 100644
--- a/packages/bridge/src/convert/index.ts
+++ b/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, currentTree) => {
+const toSlateOp = (ops: Automerge.Diff[], currentTree) => {
   const iterate = (acc, op) => {
     const action = byAction[op.action]
 
diff --git a/packages/bridge/src/convert/insert.ts b/packages/bridge/src/convert/insert.ts
index b16ffa5..fd2a508 100644
--- a/packages/bridge/src/convert/insert.ts
+++ b/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,10 +9,10 @@ const insertTextOp = ({ index, path, value }) => () => ({
   marks: []
 })
 
-const insertNodeOp = ({ value, obj, index, path }) => map => {
+const insertNodeOp = ({ value, obj, index, path }: Automerge.Diff) => map => {
   const ops = []
 
-  const insertRecoursive = ({ nodes, ...json }: any, path) => {
+  const inserate = ({ nodes, ...json }: any, path) => {
     const node = nodes ? { ...json, nodes: [] } : json
 
     if (node.object === 'mark') {
@@ -28,12 +29,12 @@ const insertNodeOp = ({ value, obj, index, path }) => map => {
       })
     }
 
-    nodes && nodes.forEach((n, i) => insertRecoursive(n, [...path, i]))
+    nodes && nodes.forEach((n, i) => inserate(n, [...path, i]))
   }
 
   const source = map[value] || (map[obj] && toJS(map[obj]))
 
-  source && insertRecoursive(source, [...toSlatePath(path), index])
+  source && inserate(source, [...toSlatePath(path), index])
 
   return ops
 }
@@ -43,7 +44,7 @@ const insertByType = {
   list: insertNodeOp
 }
 
-const opInsert = (op, [map, ops]) => {
+const opInsert = (op: Automerge.Diff, [map, ops]) => {
   try {
     const { link, obj, path, index, type, value } = op
 
diff --git a/packages/bridge/src/convert/remove.ts b/packages/bridge/src/convert/remove.ts
index 29b67f4..a768cdf 100644
--- a/packages/bridge/src/convert/remove.ts
+++ b/packages/bridge/src/convert/remove.ts
@@ -1,7 +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,
@@ -9,7 +10,7 @@ const removeTextOp = ({ index, path }) => () => ({
   marks: []
 })
 
-const removeMarkOp = ({ path, index }) => (map, doc) => {
+const removeMarkOp = ({ path, index }: Automerge.Diff) => (map, doc) => {
   const slatePath = toSlatePath(path)
   const target = getTarget(doc, slatePath)
 
@@ -22,7 +23,7 @@ const removeMarkOp = ({ path, index }) => (map, doc) => {
   }
 }
 
-const removeNodesOp = ({ index, obj, path }) => (map, doc) => {
+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)
@@ -45,7 +46,7 @@ const removeByType = {
   marks: removeMarkOp
 }
 
-const opRemove = (op, [map, ops]) => {
+const opRemove = (op: Automerge.Diff, [map, ops]) => {
   try {
     const { index, path, obj } = op
 
diff --git a/packages/bridge/src/convert/set.ts b/packages/bridge/src/convert/set.ts
index e729257..8189597 100644
--- a/packages/bridge/src/convert/set.ts
+++ b/packages/bridge/src/convert/set.ts
@@ -1,6 +1,7 @@
+import * as Automerge from 'automerge'
 import { toSlatePath, toJS } from '../utils/index'
 
-const setDataOp = ({ path, value }) => map => ({
+const setDataOp = ({ path, value }: Automerge.Diff) => map => ({
   type: 'set_node',
   path: toSlatePath(path),
   properties: {},
@@ -13,7 +14,7 @@ const setByType = {
   data: setDataOp
 }
 
-const opSet = (op, [map, ops]) => {
+const opSet = (op: Automerge.Diff, [map, ops]) => {
   const { link, value, path, obj, key } = op
   try {
     const set = setByType[key]
diff --git a/packages/bridge/src/utils/hexGen.ts b/packages/bridge/src/utils/hexGen.ts
new file mode 100644
index 0000000..86fa08c
--- /dev/null
+++ b/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
diff --git a/packages/bridge/src/utils/index.ts b/packages/bridge/src/utils/index.ts
index 19b47f6..e33660e 100644
--- a/packages/bridge/src/utils/index.ts
+++ b/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 }
diff --git a/packages/client/src/Connection.ts b/packages/client/src/Connection.ts
index f59f523..6971d33 100644
--- a/packages/client/src/Connection.ts
+++ b/packages/client/src/Connection.ts
@@ -35,8 +35,6 @@ class Connection {
 
     this.docSet = new Automerge.DocSet()
 
-    window['getDoc'] = () => toJS(this.docSet.getDoc(this.docId))
-
     this.connect()
   }
 
@@ -62,12 +60,6 @@ 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)
-
         this.editor.remote = true
 
         this.editor.withoutSaving(() => {
@@ -84,8 +76,6 @@ class Connection {
   }
 
   receiveSlateOps = (operations: Immutable.List<Operation>) => {
-    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,8 +85,6 @@ class Connection {
       applySlateOps(d, operations)
     )
 
-    // console.log('changed!!!', toJS(changed))
-
     this.docSet.setDoc(this.docId, changed)
   }
 
diff --git a/packages/client/src/Controller.tsx b/packages/client/src/Controller.tsx
index a62a3f3..da41219 100644
--- a/packages/client/src/Controller.tsx
+++ b/packages/client/src/Controller.tsx
@@ -1,4 +1,7 @@
-import React, { Component, ReactNode } from 'react'
+import React, { Component } from 'react'
+import { KeyUtils } from 'slate'
+
+import { hexGen } from '@slate-collaborative/bridge'
 
 import Connection from './Connection'
 
@@ -14,6 +17,8 @@ class Controller extends Component<ControllerProps> {
   componentDidMount() {
     const { editor, url, connectOpts } = this.props
 
+    KeyUtils.setGenerator(() => hexGen())
+
     editor.connection = new Connection({
       editor,
       url,