slate-collaborative - GitLite

KO | EN

gitlite — search

#react #ai #llm #golang #rust #deep-learning #linux #nodejs #windows #awesome #kubernetes #vue #ios #openai

slate-collaborative

(★ 389)

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

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - .babelrc
  - License.md
  - package.json
  - tsconfig.json
- - .babelrc
  - License.md
  - package.json
  - tsconfig.json
- - .babelrc
  - License.md
  - package.json
  - tsconfig.json
- - package.json
  - server.js
  - tsconfig.extend.json
  - tsconfig.json
  - tsconfig.production.json
.gitignore
.prettierrc
.travis.yml
changelog-template.hbs
CHANGELOG.md
commitlint.config.js
lerna.json
License.md
package.json
README.md
tsconfig.base.json
tslint.json

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd slate-collaborative

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn

Downloads and installs the libraries listed in package.json.

yarn dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# slate-collaborative. Check [demo](https://slate-collaborative.herokuapp.com/)
slatejs collaborative plugin &amp; 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> | boolean
  onDocumentLoad: ( // request slate document callback
    pathname: string,
    query?: Object
  ) => Promise<Node[]> | Node[]
  onDocumentSave: (pathname: string, doc: Node[]) => Promise<void> | void // save document callback
}
```

# Contribute

You welcome to contribute!

start it ease:
```
yarn
yarn dev
```