cudr / slate-collaborative Goto Github PK
View Code? Open in Web Editor NEWslatejs collaborative plugin & microservice https://slate-collaborative.herokuapp.com/
License: MIT License
slatejs collaborative plugin & microservice https://slate-collaborative.herokuapp.com/
License: MIT License
I cloned the repo and installed respective packages as per the instruction
yarn
yarn dev
After compilation, it opens a new window but http://localhost:3000
returns the timeout. Since it uses react-scripts
underneath, I'm not sure why I'm unable to see the app and it gives timeout!
Please help on above so I can run and check the example locally
In my project when you make a new line at the beginning of a paragrah, other connected clients see the line repeating n
times, where n
is the number of new lines entered. It's hard to explain, here's a video:
(Firstly, I'd like to reiterate my thanks for making this library. I'm making a lot of issues these days, and I would like to hop in and help fix them, not just raise problems!)
TL;DR: Transforms.collapse(editor, { edge: "end" });
seems to crash other subscribers (not the client that runs this code). Other clients throw Unknown docId
errors. I was able to find an acceptable work-around, which was to replace it with Transforms.deselect(editor);
I have a link feature in my slate editor. When I use it, connected clients who are not the typer (subscribers), have the editor crash.
I can't quite pin down what the error is. The first that I see is Unknown docId
which is thrown here
TypeError: Unknown docId: /db291db4-aced-4691-bee2-dc42957b0742!
at _callee$ (automerge-editor.ts:63)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype.<computed> [as next] (runtime.js:97)
at asyncGeneratorStep (automerge-editor.ts:5)
at _next (automerge-editor.ts:5)
at automerge-editor.ts:5
at new Promise (<anonymous>)
at Object.<anonymous> (automerge-editor.ts:5)
at Object.applySlateOps (automerge-editor.ts:53)
at Object.e.onChange (withAutomerge.ts:75)
at create-editor.ts:86
I think the second error is probably not relevent, but including it, just in case.
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Socket'
| property 'io' -> object with constructor 'Manager'
| property 'nsps' -> object with constructor 'Object'
--- property '/db291db4-aced-4691-bee2-dc42957b0742' closes the circle
at JSON.stringify (<anonymous>)
at Object.get (node.ts:244)
at Object.node (editor.ts:607)
at editor.ts:761
at Object.withoutNormalizing (editor.ts:1587)
at Object.normalize (editor.ts:749)
at apply (create-editor.ts:74)
at e.apply (with-history.ts:110)
at Object.e.apply (with-react.ts:52)
at automerge-editor.ts:130
at Array.forEach (<anonymous>)
at automerge-editor.ts:129
at Object.withoutNormalizing (editor.ts:1587)
at Object.applyOperation (automerge-editor.ts:128)
at Object.e.receiveOperation (withAutomerge.ts:100)
at Object.e.receive (withSocketIO.ts:106)
at Socket.<anonymous> (withSocketIO.ts:71)
at Socket.Emitter.emit (index.js:133)
at Socket.onevent (socket.js:278)
at Socket.onpacket (socket.js:236)
at Manager.<anonymous> (index.js:21)
at Manager.Emitter.emit (index.js:133)
at Manager.ondecoded (manager.js:345)
at Decoder.<anonymous> (index.js:21)
at Decoder.Emitter.emit (index.js:133)
at Decoder.add (index.js:251)
at Manager.ondata (manager.js:335)
at Socket.<anonymous> (index.js:21)
at Socket.Emitter.emit (index.js:145)
at Socket.onPacket (socket.js:461)
at WS.<anonymous> (socket.js:278)
at WS.Emitter.emit (index.js:145)
at WS.Transport.onPacket (transport.js:149)
at WS.Transport.onData (transport.js:141)
at WebSocket.ws.onmessage (websocket.js:160)
I took it from Slate's example
export const wrapLink = (editor, url) => {
if (isLinkActive(editor)) {
unwrapLink(editor);
}
const { selection } = editor;
const isCollapsed = selection && Range.isCollapsed(selection);
const link = {
type: "link",
href: url,
children: isCollapsed ? [{ text: url }] : []
};
if (isCollapsed) {
Transforms.insertNodes(editor, link);
} else {
Transforms.wrapNodes(editor, link, { split: true });
// π π π THIS CODE IS THE LINE THAT BROKE IT
// Transforms.collapse(editor, { edge: "end" });
// π π π THIS IS WHAT I ADDED THAT WORKED.
Transforms.deselect(editor);
}
};
@cudr can I use the real time database Read data once
capability to read the initial data then listen for updates
on the documents.
Is this possible and where would I connect the function ?
Instead of having real time updates how do I implement the sync with a click of a button ?
Device (please complete the following information):
Describe the bug
When I import the slate-collaborative in my project, it's caught an error when running: ReferenceError: regeneratorRuntime is not defined. This error occurs at automerge-editor.ts and I can't solve this even I add transform-runtime at babel configuration.
Hi there!
I'm really enjoying playing around with this project. I think it'd be great if there were a way to resolve the cursor name on the backend instead of the frontend. In my case, I want to send a jwt to the backend over a websocket and then use that to resolve a name, instead of trusting the client.
Automerge 1.0dramatically change the
API`:
https://github.com/automerge/automerge
https://github.com/automerge/automerge/blob/main/CHANGELOG.md
Thus, what has been deployed here has to be upgraded accordingly
Is there any plan to support AWS AppSync as backend?
Or any advice and guidance for implementing that?
I think the onDocumentLoad() return type needs to be Promise<Element[]> | Element[]
https://github.com/cudr/slate-collaborative/blob/master/packages/backend/src/SocketIOConnection.ts#L23
If I have mulitple backend server, how can I sync the docment state between them.
Use redis pub/sub, or other?
Is it possible to use the firebase realtime database as the backend ?
Are there any plans to port this to Slate 0.5x?
Any plans to add a license?
This is awesome!
Thank you for the great work. This is more of a question. I started playing with the lib and discovered that the webSocket server plays a central role. As Automerge is pitched as a "serverless" solution compared to OT, I'm trying to figure out how a serverless slate-collaborative could look like.
Right now, the server is responsible for the initial coordination. When clients connect to it. It creates an Automerge doc out of a Slate Value, creates an Automerge connection, then sets the doc with setDoc
.
setDoc
(on the server) fires an operation message with the initial Clock. Doing so, it's guaranteed that clients starts off the same clock. (correct me if I'm wrong)
In a serverless world, let's say we use PubSub to send and subscribe to operations, how could we possibly start off the same clock? Clients need to run setDoc
but, by doing so, they send different initial clocks to each other.
Is it impossible to achieve this setup?
Thank you
Hi, thank you for making a great plugin.
We previously created our own plugin for our company based on this repository.
I'd like to share some points we noticed when we created it. We deleted it in the end because we no longer need collaborative editing features, though.
This is not an issue, so you can close this βissueβ after you read it. I just want to pay you back.
I'm sorry I haven't had time to put out PRs.
As mentioned in this issue, there is a demand for making backend servers scalable.
We've scaled our servers through Redis.
Use this if you need it. https://github.com/kazekyo/automerge-spider
catch
https://github.com/cudr/slate-collaborative/search?q=catch&unscoped_q=catch
catch
is used in this repository. I think this is dangerous.
Those catch
break the synchronization of Automerge <=> Slate
or Client <=> Backend
(especially, vector clock synchronization in Automerge.Connection). In most cases, there is no automatic recovery.
This leads to claims like "Hey, the text I wrote wasn't saved!".
If there are errors that you can't resolve as a result of removing the catch
, I will be happy to help you with your investigation.
https://github.com/cudr/slate-collaborative/blob/master/packages/bridge/src/convert/index.ts#L30-L35
I know this is not your idea, but I donβt think the temporary tree is a good idea.
If the create
operation is not included in the Diff
, no elements will be created in the temporary tree. So set_node
may not work properly.
Also, using a temporary tree makes the code more complex.
Anyway, it is safer to generate slate operations with the docs before and after applying Diff
.
I'll share the code.
https://github.com/kazekyo/collaborative-editing-fragment/blob/master/generateSlateOperation.ts#L198-L235
This is a part of our code that we can share. We didn't use cursors, so we don't have any code associated with them.
https://github.com/kazekyo/collaborative-editing-fragment
Again, thank you so much! You've saved us a lot of time.
Hi @cudr
I am very appreciate your work about this project.
We are currently using SlateJS 0.47.9 in JS.
If we would like to use your plugin how could I do it?
Do you know what is the implementation which is just to compare the Slate json object by using Automerge offline.
Thank you very much.
Hi! Love this plugin!! I cannot make it work with latest Slate API and the plugins example in the docs:
https://docs.slatejs.org/concepts/07-plugins
Will this plugin work with the latest Slate API? Can the plugin documentation be updated?
Thanks
Welcome any ideas about plugin and microservice API
Hey! Im trying to set up the "@slate-collaborative/backend" side of the project with "yarn add @slate-collaborative/backend". but after it runs it throws this error : Can't resolve 'uws' in '/Users////' @ dll renderer renderer[138] ' & ERROR in ./node_modules/engine.io/lib/server.js
Module not found: Error: Can't resolve 'uws' in '/Users/////node_modules/engine.io/lib'
Stack: Electron 7, Node.js, and "slate": "^0.58" .
Thanks.
If I load up two different browsers with slate-collaborative's demo open and each with their own slug, I see socket traffic in Browser 2 for every keystroke I make in Browser 1.
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.