Final framework of the TW editor: Monaco+SlateJS

[Gk0Wk]

A friend of mine (and author of TidGi, @linonetwo) is developing a WYSIWYG editor for TW based on SlateJS, and has already implemented some of the features, which look cool (here). I think that's enough for the average user.

However, I don't think Monaco's work is redundant. There is still a need for a tool that directly edits wikitext for more advanced features (like using wikitext a lot to write interesting features); also Monaco can be used to edit Markdown, JSON, or other content.

So I think TW5 will eventually produce a solution that best allows a tiddler to be edited WYSIWYG and also edit its wikitext in chunks (using Monaco) to achieve content that would be difficult to achieve with a WYSIWYG editor.

[SmilyOrg]

I think that would be great! I also tried to go down that path first by integrating Editor.js, but it proved tricky for a lot of reasons which I can go into later.

Then I thought that at least having a nicer code editing experience would help a lot already even though it would only be useful to a subset of coders. And integrating Monaco proved to be way easier than trying to handle WYSIWYG non-destructively 😅

I think there was a discussion on Google Groups about this back then, I can try to find it later 👍

[linonetwo]

The most tricky parts of WYSIWYG editor are serializing JSON to wikitext (which is not hard after my trial) and handling custom widget rendering, I hadn't solved the widget part yet.

[SmilyOrg]

The biggest problem I saw was setting up a non-destructible two-way conversion between the TiddlyWiki parse tree and whatever the internal model of the editor was. As mentioned above I was trying to integrate Editor.js, which still seems pretty neat :)

I was also struggling a bit to get a good plugin development environment going. I'm pretty happy with what I ended up with for this plugin though.

I spent a lot of time fighting the wikitext parser as it doesn't have a well-defined tokenizer, it's incomplete as it often skips whitespace and so on and only includes source start/end ranges for a limited amount of parse tree nodes. There's a big piece of code in tw5-monaco that just deals with this part and kind-of reverse-engineers the parse tree into a token stream. 🤷‍♂️

I also talked a bit more about these issues in the redesign thread, though I'm not sure how much of it is understandable.

[SmilyOrg]

Here's the whole Google Groups thread on a redesign of TiddlyWiki, which includes many of these ideas: https://groups.google.com/g/tiddlywiki/c/gX0o8j7Coa8/m/eMJBQKQrAwAJ