https://github.com/cudr/slate-collaborative

slatejs collaborative plugin & microservice https://slate-collaborative.herokuapp.com/
https://github.com/cudr/slate-collaborative

automerge collaboration collaborative-editing crdt react rich-text-editor slate slatejs

Last synced: about 2 months ago
JSON representation

slatejs collaborative plugin & microservice https://slate-collaborative.herokuapp.com/

• Host: GitHub
• URL: https://github.com/cudr/slate-collaborative
• Owner: cudr
• License: mit
• Created: 2019-10-05T08:25:29.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-14T17:42:11.000Z (10 months ago)
• Last Synced: 2024-07-05T08:22:03.475Z (3 months ago)
• Topics: automerge, collaboration, collaborative-editing, crdt, react, rich-text-editor, slate, slatejs
• Language: TypeScript
• Homepage:
• Size: 189 KB
• Stars: 377
• Watchers: 13
• Forks: 46
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: License.md

Awesome Lists containing this project

• awesome-list - slate-collaborative

README

        
# slate-collaborative. Check [demo](https://slate-collaborative.herokuapp.com/)

slatejs collaborative plugin & microservice

![screencast2019-10-2820-06-10](https://user-images.githubusercontent.com/23132107/67700384-ebff7280-f9be-11e9-9005-6ddadcafec47.gif)

A little experiment for co-editing.

Based on idea of https://github.com/humandx/slate-automerge

# API

## Client

Use it as a simple slatejs plugin

```ts

import { withIOCollaboration } from '@slate-collaborative/client'

const collaborationEditor = withIOCollaboration(editor, options)

```

Check [detailed example](https://github.com/cudr/slate-collaborative/blob/master/packages/example/src/Client.tsx)

### Options:

```ts

{

  docId?: // document id

  url?: string // url to open connection

  connectOpts?: SocketIOClient.ConnectOpts // socket.io-client options

  cursorData?: any // any data passed to cursor

  onConnect?: () => void // connect callback

  onDisconnect?: () => void // disconnect callback

  onError?: (reason: string) => void // error callback

  preserveExternalHistory?: boolean // preserve slate-history operations form other clients

}

```

You need to attach the useCursor decorator to provide custom cursor data in renderLeaf function

```ts

import { useCursor } from '@slate-collaborative/client'

const decorator = useCursor(editor)

```

## Backend

```ts

const { SocketIOConnection } = require('@slate-collaborative/backend')

const connection = new SocketIOConnection(options)

```

### options:

```ts

{

  entry: Server // or specify port to start io server

  defaultValue: Node[] // default value

  saveFrequency: number // frequency of onDocumentSave callback execution in ms

  onAuthRequest: ( // auth callback

    query: Object,

    socket?: SocketIO.Socket

  ) => Promise | boolean

  onDocumentLoad: ( // request slate document callback

    pathname: string,

    query?: Object

  ) => Promise | Node[]

  onDocumentSave: (pathname: string, doc: Node[]) => Promise | void // save document callback

}

```

# Contribute

You welcome to contribute!

start it ease:

```

yarn

yarn dev

```