Markdown editor improvements

[trustedtomato]

Hello,

First of all, thank you for the great library!:) I've been in the exact situation as you, namely that a lot of my clients are using Decap CMS, but I experienced a bunch of performance and Slate related issues with it, and this project fixes all issues I had!:)

However, there are several issues related to the markdown editor. If you don't have time to fix them, then can also take a shot at them in a few weeks, looks appealing that there is no tech debt in this repo yet, and I'm also developing everything I can in Svelte:)

[trustedtomato]

Sorry, accidentally hit Ctrl+Enter haha. The issues are:

• No way to indent lists (at least not with Tab and Shift+Tab) (This is a blocking issue with my migration)
• Links could be more user friendly, by having the link input right on the text, as in the Lexical playground. (https://playground.lexical.dev/), see attached image.
• When I click on a formatting button, the focus goes out, so I have to refocus into the editor manually to the same position. The editor should probably auto-refocus when clicking one of those buttons.

Image showing better link UX:

[kyoshino]

@trustedtomato Thanks for checking out Sveltia CMS! Will have a look at these issues later today.

[kyoshino]

The indent and focus issues are now solved in v0.34.5. I’ll work on the floating link editor later.

[trustedtomato]

Another item, just dumping it here:

• Ctrl+Z works inconsistently, Ctrl+Y (redo) doesn't work.

Steps to reproduce the Ctrl+Z issue:

1. Go into a markdown editor
2. Remove a chunk of text by highlighting it with a cursor and then Backspace
3. Try hitting Ctrl+Z - It won't work

Interestingly, if I then type something, and then try Ctrl+Z, then it starts to work - until a certain point, seems like the history length is limited.

On the same note - what do you think, would it make sense to just use a stripped down version of https://playground.lexical.dev/ ? When you implement custom widgets, I might want to experiment with that, it's such a snappy markdown editor, and includes everything one might ever need (YouTube videos, tables, images).

[kyoshino]

Not sure why the undo/redo stack is having some problems. Will check.

Lexical Playground is built with React, so it cannot be reused in Sveltia CMS, which is written in Svelte.

For now, I’m just trying to rebuild the Markdown editor in Netlify/Decap CMS. We could have more built-in features in the future. 🙂

[trustedtomato]

I mean, it can, it's just not pretty:D I have had the pleasure of implementing React components in Svelte. The React ecosystem is just too good to miss out on sometimes. But yeah, it's not pretty, and the playground website is 400 kB, so it'd be quite an overhead to the CMS. But I think having it as a custom widget later would make sense, since it's so feature rich and snappy. Though I can also see that with your speed, this Svelte based markdown editor will also quickly catch up on the most important features :) So let's see in what state the markdown editor will be when custom widgets are ready. And good job on the effort and huge thanks for the quick replies, I'm definitely feeling a lot more confident about migrating a client project to Sveltia in the summer. (Even if you don't support such a decision at this early stage haha.)

[kyoshino]

I’m still struggling with the undo issue. Not only undo/redo, but keyboard shortcuts like Ctrl+B for bold text are completely broken in Firefox. Hopefully I can fix this soon. Implementing Lexical is soooo difficult.

[trustedtomato]

I haven't worked with Lexical before. It seems nice, but it also seems like only the React integration is taken very seriously. I have worked with TipTap + Svelte before though with a similar feature set compared to what's required here, and that was a very pleasant experience, it really seems to treat vanilla JS as its first class citizen. They even have a Svelte example on their "default text editor" example:)

If you look at the example code they have for Svelte, that's pretty much all we need, with the need to

• Tweak the design of those buttons
• The requirement of markdown conversion and dynamic feature enabling/disabling
• Hooking up the state (which is also suuper seamless, a default content and an onUpdate function can be supplied, and a setContent function can be called to have a complete two-way binding)
• The need to wrap it in a component

And probably that's it:) Probably I'm missing some points, but those are the biggest complexities at first glance.

Disclaimer, I don't have any connection to the TipTap guys whatsover, I just used their library before, and I it seems to be a good fit here, without the need for such solutions as that setTimeout 500 :D So I think some experimentation with it could be worthwhile, if Lexical is annoying to work with.

[kyoshino]

The keyboard shortcut issues solved with v0.34.8 💦