https://github.com/streamich/collaborative-editor
JSON CRDT "str" node binding to any generic plain text editor UI.
https://github.com/streamich/collaborative-editor
Last synced: 11 months ago
JSON representation
JSON CRDT "str" node binding to any generic plain text editor UI.
- Host: GitHub
- URL: https://github.com/streamich/collaborative-editor
- Owner: streamich
- Created: 2023-12-02T14:53:45.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-08-07T18:29:28.000Z (11 months ago)
- Last Synced: 2025-08-07T20:36:39.637Z (11 months ago)
- Language: TypeScript
- Size: 17.8 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Collaborative plain text editor binding
This package provides binding for a generic text editor to a [JSON CRDT `str` node](https://jsonjoy.com/specs/json-crdt/model-document/node-types#The-str-RGA-String-Node-Type).
## Usage
Installation:
```
npm install json-joy collaborative-editor
```
Simple integration for any plain text editor, for the most basic integration
you only need to implement the `.get()` and `.set()` methods:
```ts
import {StrBinding, EditorFacade} from 'collaborative-editor';
import {Model} from 'json-joy/lib/json-crdt';
const str = model.api.str(['path', 'to', 'string']);
const unbind = StrBinding.bind(str, {
get: () => input.value,
set: (value: string) => input.value = value,
}, true);
```
For a better integration, implement as many `EditorFacade` methods as possible:
```ts
import {StrBinding, EditorFacade} from 'collaborative-editor';
const editor: EditorFacade = {
// ...
};
const str = model.api.str(['path', 'to', 'string']);
const binding = new StrBinding(str, editor);
binding.syncFromModel();
binding.bind(polling);
// When done, unbind the binding.
binding.unbind();
```
## Preview
- See [demo](https://streamich.github.io/collaborative-editor).