initial commit

packages/client/src/Connection.ts

@@ -0,0 +1,141 @@
+import Automerge from 'automerge'
+import Immutable from 'immutable'
+import io from 'socket.io-client'
+
+import { Value, Operation } from 'slate'
+import { ConnectionModel } from './model'
+
+import { applySlateOps, toSlateOp, toJS } from '@slate-collaborative/bridge'
+
+class Connection {
+  url: string
+  docId: string
+  docSet: Automerge.DocSet<any>
+  connection: Automerge.Connection<any>
+  socket: SocketIOClient.Socket
+  editor: any
+  connectOpts: any
+  onConnect?: () => void
+  onDisconnect?: () => void
+
+  constructor({
+    editor,
+    url,
+    connectOpts,
+    onConnect,
+    onDisconnect
+  }: ConnectionModel) {
+    this.url = url
+    this.editor = editor
+    this.connectOpts = connectOpts
+    this.onConnect = onConnect
+    this.onDisconnect = onDisconnect
+
+    this.docId = connectOpts.path || new URL(url).pathname
+
+    this.docSet = new Automerge.DocSet()
+
+    this.connect()
+  }
+
+  sendData = (data: any) => {
+    this.socket.emit('operation', data)
+  }
+
+  recieveData = async (data: any) => {
+    if (this.docId !== data.docId || !this.connection) {
+      return
+    }
+
+    const currentDoc = this.docSet.getDoc(this.docId)
+    const docNew = this.connection.receiveMsg(data)
+
+    if (!docNew) {
+      return
+    }
+
+    try {
+      const operations = Automerge.diff(currentDoc, docNew)
+
+      if (operations.length !== 0) {
+        const slateOps = toSlateOp(operations, this.connectOpts.query.name)
+
+        this.editor.remote = true
+
+        this.editor.withoutSaving(() => {
+          slateOps.forEach(o => this.editor.applyOperation(o))
+        })
+
+        setTimeout(() => (this.editor.remote = false), 5)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  receiveSlateOps = (operations: Immutable.List<Operation>) => {
+    const doc = this.docSet.getDoc(this.docId)
+    const message = `change from ${this.socket.id}`
+
+    if (!doc) return
+
+    const changed = Automerge.change(doc, message, (d: any) =>
+      applySlateOps(d, operations)
+    )
+
+    this.docSet.setDoc(this.docId, changed)
+  }
+
+  recieveDocument = data => {
+    const currentDoc = this.docSet.getDoc(this.docId)
+
+    if (!currentDoc) {
+      const doc = Automerge.load(data)
+
+      this.docSet.removeDoc(this.docId)
+
+      this.docSet.setDoc(this.docId, doc)
+
+      this.editor.controller.setValue(Value.fromJSON(toJS(doc)))
+    }
+
+    this.editor.setFocus()
+
+    this.connection.open()
+
+    this.onConnect && setTimeout(this.onConnect, 0)
+  }
+
+  connect = () => {
+    this.socket = io(this.url, this.connectOpts)
+
+    this.socket.on('connect', () => {
+      this.connection = new Automerge.Connection(this.docSet, this.sendData)
+
+      this.socket.on('document', this.recieveDocument)
+
+      this.socket.on('operation', this.recieveData)
+
+      this.socket.on('disconnect', this.disconnect)
+    })
+  }
+
+  disconnect = () => {
+    this.onDisconnect()
+
+    this.connection && this.connection.close()
+
+    delete this.connection
+
+    this.socket.removeListener('document')
+    this.socket.removeListener('operation')
+  }
+
+  close = () => {
+    this.onDisconnect()
+
+    this.socket.close()
+  }
+}
+
+export default Connection

packages/client/src/Controller.tsx

@@ -0,0 +1,64 @@
+import React, { PureComponent, ReactNode } from 'react'
+
+import Connection from './Connection'
+
+import { ControllerProps } from './model'
+
+class Controller extends PureComponent<ControllerProps> {
+  connection?: Connection
+
+  state = {
+    preloading: true
+  }
+
+  componentDidMount() {
+    const { editor, url, connectOpts } = this.props
+
+    editor.connection = new Connection({
+      editor,
+      url,
+      connectOpts,
+      onConnect: this.onConnect,
+      onDisconnect: this.onDisconnect
+    })
+  }
+
+  componentWillUnmount() {
+    const { editor } = this.props
+
+    if (editor.connection) editor.connection.close()
+
+    delete editor.connection
+  }
+
+  render() {
+    const { children, preloader } = this.props
+    const { preloading } = this.state
+
+    if (preloader && preloading) return preloader()
+
+    return children
+  }
+
+  onConnect = () => {
+    const { onConnect, editor } = this.props
+
+    this.setState({
+      preloading: false
+    })
+
+    onConnect && onConnect(editor.connection)
+  }
+
+  onDisconnect = () => {
+    const { onDisconnect, editor } = this.props
+
+    this.setState({
+      preloading: true
+    })
+
+    onDisconnect && onDisconnect(editor.connection)
+  }
+}
+
+export default Controller

packages/client/src/index.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react'
+
+import onChange from './onChange'
+import renderEditor from './renderEditor'
+
+import Connection from './Connection'
+
+export interface PluginOptions {
+  url?: string
+  connectOpts?: SocketIOClient.ConnectOpts
+  preloader?: () => ReactNode
+  onConnect?: (connection: Connection) => void
+  onDisconnect?: (connection: Connection) => void
+}
+
+const defaultOpts = {
+  url: 'http://localhost:9000'
+}
+
+const plugin = (opts: PluginOptions = {}) => {
+  const options = { ...defaultOpts, ...opts }
+
+  return {
+    onChange: onChange(options),
+    renderEditor: renderEditor(options)
+  }
+}
+
+export default plugin

packages/client/src/model.ts

@@ -0,0 +1,20 @@
+import { Editor } from 'slate'
+import { PluginOptions } from './index'
+import Connection from './Connection'
+
+export interface ConnectionModel extends PluginOptions {
+  editor: Editor
+  onConnect: () => void
+  onDisconnect: () => void
+}
+
+export interface ExtendedEditor extends Editor {
+  remote: boolean
+  connection: Connection
+}
+
+export interface ControllerProps extends PluginOptions {
+  editor: ExtendedEditor
+  url?: string
+  connectOpts?: SocketIOClient.ConnectOpts
+}

packages/client/src/onChange.ts

@@ -0,0 +1,11 @@
+import { ExtendedEditor } from './model'
+
+const onChange = opts => (editor: ExtendedEditor, next: () => void) => {
+  if (!editor.remote) {
+    editor.connection.receiveSlateOps(editor.operations)
+  }
+
+  return next()
+}
+
+export default onChange

packages/client/src/renderEditor.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { PluginOptions } from './index'
+
+import Controller from './Controller'
+
+const renderEditor = (opts: PluginOptions) => (
+  props: any,
+  editor: any,
+  next: any
+) => {
+  const children = next()
+
+  return (
+    <Controller {...opts} editor={editor}>
+      {children}
+    </Controller>
+  )
+}
+
+export default renderEditor