Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mountainflo/collaborative-text-editor
Collaborative Realtime Texteditor with gRPC
https://github.com/mountainflo/collaborative-text-editor
codemirror collaborative-editing crdt grpc grpc-go grpc-web realtime-collaboration
Last synced: 5 days ago
JSON representation
Collaborative Realtime Texteditor with gRPC
- Host: GitHub
- URL: https://github.com/mountainflo/collaborative-text-editor
- Owner: mountainflo
- Created: 2019-12-21T17:30:16.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-25T03:28:18.000Z (over 1 year ago)
- Last Synced: 2024-08-01T12:31:20.154Z (3 months ago)
- Topics: codemirror, collaborative-editing, crdt, grpc, grpc-go, grpc-web, realtime-collaboration
- Language: JavaScript
- Homepage:
- Size: 465 KB
- Stars: 29
- Watchers: 5
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - mountainflo/collaborative-text-editor - Collaborative Realtime Texteditor with gRPC (others)
README
# Collaborative Realtime Texteditor [![Build Status](https://travis-ci.com/mountainflo/collaborative-text-editor.svg?token=4zw9EzexndWUV9DTxZpz&branch=master)](https://travis-ci.com/mountainflo/collaborative-text-editor)
Collaborative realtime texteditor with gRPC using RGAs (Replicated Growable Arrays).
![Screenshoot Collaborative Texteditor](documentation/collab-texteditor-browser.png)
With the collaborative realtime texteditor several users can edit documents together in realtime.
Via Remote-Cursors the current editing positions of the other users are always visible.The implementation of the collaborative realtime editor is using a variant of RGAs (Replicated Growable Arrays).
The RGA-protocol is implemented as Timestamped Insertion Tree (TI Tree) and guarantees "Eventual Consistency".For more details about the implementation see: [documentation.md](documentation/documentation.md)
## Running the project
The project is built with docker-compose. Before getting started you have to install ```docker-compose```.
You can start the ```production```-configuration with the following docker-compose command:
```sh
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build
```Open a browser tab, and go to: ```http://localhost:8081/index.html```
To shutdown the containers: ```docker-compose down```
## Local development
### Remote debugging and hot reloads
The ```dev```-configuration uses hot-reloads (for js and scss files) and offers remote debugging for go files via `delve`.
Create a "Go Remote Debugging"-Configuration in your IDE and listen to port `40000`.
Start the ```dev```-configuration with:
```sh
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up --build
```### Compiling proto files for go
```sh
go get -u google.golang.org/grpc
go get -u github.com/golang/protobuf/protoc-gen-goprotoc -I collabTexteditorService/ collabTexteditorService/collabTexteditorService.proto --go_out=plugins=grpc:collabTexteditorService
```### Compiling proto files for js
```sh
protoc -I collabTexteditorService collabTexteditorService/collabTexteditorService.proto \
--js_out=import_style=commonjs:./frontend/src \
--grpc-web_out=import_style=commonjs,mode=grpcwebtext:./frontend/src
```### Debugging with docker
To open the console of a specific container run:
```sh
docker exec -it collaborative-text-editor_frontend-client_1 /bin/bash
```The following command gives you a list of status of all containers:
```sh
docker-compose ps
```### Bundling and building js-Frontend
```sh
npm install
npm run build
```