mountainflo / collaborative-text-editor Goto Github PK
View Code? Open in Web Editor NEWCollaborative Realtime Texteditor with gRPC
Collaborative Realtime Texteditor with gRPC
Client can subscribe for updates at the server.
See:
Think about how to implement mass deletions, if the text is not inserted by mass insertions and each char is a single node.
Replace python "SimpleHTTPServer" with a better frontend-server, e.g. ngnix
Current python-server has a long startup time.
Implement graceful shutdown by:
use console.debug()
Get familiar with the Events CodeMirror offers:
Display the cursors of all users in the editor
Replace the text area with the text editor library.
Usage and behavior for sending and receiving text remains constant.
At the moment only one editor exists which all collaborators use together. The content of the editor is present as long as the server is running.
A generator for unique links should be implemented. A user can create a new share-link and invite other users to this link to collaborate with him.
If all users leave the session, by closing the window or clicking on a button. The server deletes the session and its history. By organizing the requests in sessions its a good starting point to implement offline sessions of the users.
Host with unique access link/token
e.g.: localhost:8081/asdjf239023
Problem
The Server-side stream which serves the updates to all clients automatically closes after some time with the message "stream timeout". No automatic reconnection of the stream is happening.
Possible Solution
It would be an idea to send keep-alive pings from time to time from the go server to the clients.
If a user leaves the collaborative editor, his remote cursors will stay in the editor.
The go backend knows when a replica leaves a session, the remote cursor of this replica should then be removed from the editor, because the replica is no longer active
local bundle building with npm run build
throws an error:
ERROR in ./node_modules/codemirror/theme/3024-night.css 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> .cm-s-3024-night.CodeMirror { background: #090300; color: #d6d5d4; }
| .cm-s-3024-night div.CodeMirror-selected { background: #3a3432; }
| .cm-s-3024-night .CodeMirror-line::selection, .cm-s-3024-night .CodeMirror-line > span::selection, .cm-s-3024-night .CodeMirror-line > span > span::selection { background: rgba(58, 52, 50, .99); }
@ ./src/main.js 6:0-41
ERROR in ./node_modules/codemirror/lib/codemirror.css 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* BASICS */
|
> .CodeMirror {
| /* Set height, width, borders, and global font properties here */
| font-family: monospace;
@ ./src/main.js 5:0-39
Find suitable implementations and optimizations in papers
Transfer Input of one client to other client (other uses server-side-streaming for updates)
as output (both clients see the same result)
Handle wrong incoming order of nodes. The ids of new incoming nodes should not be higher than the var nextFreeId
. Keep nodes in a buffer until the missing nodes arrive.
Implement Linter: https://eslint.org
Reduce the time-/performance effort for CRDT
do transition
function (a transition can be delete
or insert
)receive transition
function (receives transition by server-side streaming and calls do transition
)send transition
function (sends transition by unary call)During creation of a new session the user can select for which language he wants syntax highlighting
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.