slate-yjs-example
slate-yjs-example copied to clipboard
Update to newest slate version
When upgrading slate to 0.62, there are a lot of new errors and issues. It would be nice to have those fixed in the example/demo project.
Look like @BitPhinix stop working on it in May. If anyone can fork, bump version and share the result, please post here the link. I might do it but it will take some time and most probably be one time effort too.
Don't worry; I haven't given up on this repo - slate-yjs itself just hasn't been updated to use the latest version yet, but I will work on it this weekend and then update this repo as well. Unfortunately, it's hard to prioritize working on this atm since I have other projects I'm currently pursuing (which is why the progress is currently so slow). Still, I've talked to a company willing to sponsor my work on slate-yjs, which would allow me to justify putting way more time into this project, but they haven't come through with their promise so far.
@BitPhinix fantastic! really appreciate your efforts.
a bit offtopic
looking at slatejs code https://github.com/ianstormtaylor/slate/blob/main/packages/slate/src/interfaces/node.ts and slate-yjs https://github.com/BitPhinix/slate-yjs/tree/master/src
i'm just curious if a hardfork of slatejs with merged CRDT first data structure would be a perfect solution?
Syncin state model and logic of both slatejs and yjs looks like enormous efforts over time. please correct me if i'm wrong?
and it's not only a state model but the whole experience with example like slate-yjs-example would be a totally different story.
i want to use it for my pet project but seems there are companies who bet on such collaborative editors as a competitive edge
@reactima I guess I'm not deep enough into it, to truly understand the consequences, maybe @BitPhinix is the better person to stuck to on this point.
However, I've also done quite some reading and fore my understanding, the slate-js core is far from final right now and their are pretty open for changes and/or suggestions (while the project management seems a bit off, probably because they're growing quite fast). There are some suggestions for something like this e.g. here https://github.com/ianstormtaylor/slate/issues/3715#issuecomment-647037252
I guess it's depending on how the core development changes - if they would stay with the current model and not consider changes there, a hard fork would be an option. I would also be interested in it. if you need some support here. You can also give it a try in ask in the Slack group - they are much faster with answering there.
👋 So sorry, didn't manage to update slate-yjs to 0.60 this weekend but started implementing the improvements mentioned here. I'll use this opportunity to also clean up the codebase quite and upgrade the slate version. You can track my progress here
I hope to wrap it up by next weekend 🤞
@BitPhinix Just a side note, if you're cleaning up the project: For we it was one of the first time using slate, but after a bit of reading I was quite sure I wanted to stick to slate-yjs.
I was using typescript and probably the breaking version changes from above made it harder. But I guess the whole structure, including the create react app package made it a bit more confusing for me to dig deeper into the topic. My suggestion: Strip stuff out, that is not really used or mandatory for this example - a create a simple and plain example where just a plain textarea and yjs document is synced and you can test out the changes using multiple browser tabs. I know that this is maybe some overhead/more work, but it would still be nice to have the actual 'principle' of slate-ys a bit more clearly explained.
Yeah, I totally understand your point. The example is so "complex" because the ability to add multiple users/manually dc them makes debugging a lot easier. But I'll add a simpler example in the future (I'll need to create one for the https://www.hocuspocus.dev/ docs anyway)
When upgrading slate to the latest version, I get typescript errors that with the previous version do not appear:
(base) raphy@pc:~/slate-yjs-example$ yarn add slate@latest
src/Client.tsx:82:13 - error TS2322: Type '{ type: string; children: { text: string; }[]; }' is not assignable to type 'Node'.
Object literal may only specify known properties, and 'type' does not exist in type 'Node'.
82 { type: "paragraph", children: [{ text: "Hello world!" }] },
~~~~~~~~~~~~~~~~~
src/EditorFrame.tsx:102:12 - error TS2339: Property 'bold' does not exist on type 'BaseText'.
102 if (leaf.bold) {
~~~~
src/EditorFrame.tsx:106:12 - error TS2339: Property 'code' does not exist on type 'BaseText'.
106 if (leaf.code) {
~~~~
src/EditorFrame.tsx:110:12 - error TS2339: Property 'italic' does not exist on type 'BaseText'.
110 if (leaf.italic) {
~~~~~~
src/EditorFrame.tsx:114:12 - error TS2339: Property 'underline' does not exist on type 'BaseText'.
114 if (leaf.underline) {
~~~~~~~~~
src/EditorFrame.tsx:118:21 - error TS2339: Property 'data' does not exist on type 'BaseText'.
118 const data = leaf.data as any;
~~~~
src/EditorFrame.tsx:130:13 - error TS2339: Property 'isCaret' does not exist on type 'BaseText'.
130 {leaf.isCaret ? <Caret {...(leaf as any)} /> : null}
~~~~~~~
src/plugins/block.ts:10:41 - error TS2339: Property 'type' does not exist on type 'Node'.
Property 'type' does not exist on type 'BaseEditor'.
10 match: (n) => LIST_TYPES.includes(n.type as any),
~~~~
src/plugins/block.ts:15:5 - error TS2345: Argument of type '{ type: string; }' is not assignable to parameter of type 'Partial<Node>'.
Object literal may only specify known properties, and 'type' does not exist in type 'Partial<Node>'.
15 type: isActive ? "paragraph" : isList ? "list-item" : format,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/plugins/block.ts:26:21 - error TS2339: Property 'type' does not exist on type 'Node'.
Property 'type' does not exist on type 'BaseEditor'.
26 match: (n) => n.type === format,
~~~~
src/plugins/link.ts:14:20 - error TS2339: Property 'type' does not exist on type 'BaseElement'.
14 return element.type === "link" ? true : isInline(element);
~~~~
src/plugins/link.ts:45:57 - error TS2339: Property 'type' does not exist on type 'Node'.
Property 'type' does not exist on type 'BaseEditor'.
45 const [link] = Editor.nodes(editor, { match: (n) => n.type === "link" });
~~~~
src/plugins/link.ts:50:52 - error TS2339: Property 'type' does not exist on type 'Node'.
Property 'type' does not exist on type 'BaseEditor'.
50 Transforms.unwrapNodes(editor, { match: (n) => n.type === "link" });
~~~~
src/plugins/mark.ts:15:18 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Omit<BaseText, "text">'.
No index signature with a parameter of type 'string' was found on type 'Omit<BaseText, "text">'.
15 return marks ? marks[format] === true : false;
~~~~~~~~~~~~~
[5:30:08 PM] Found 14 errors. Watching for file changes.
And , may be , the typescript errors appearing after upgrading slate to the latest version, is related, somehow, to this issue: https://github.com/ianstormtaylor/slate/issues/3725