Rich Text Editor Thoughts XD

[rchrdnsh]

Hi!

So, the rich text editor is something that the teams I am working with will need before we can use Sveltia, and I have some thoughts...

What I ultimately want is a rich text editor where I can create custom svelte components that can be used as "blocks" that the content authors and editors are able to use in the composition of their writing. I want to be able to make custom components for them at their request, and/or offer a library for them to pick and choose from to add to their individual editing experience...

I believe Decep CMS uses Slate under the hood, but there are other more modern solutions like Prose Mirror that you might want to (or already are) considering...

I also recently found some interesting svelte based projects as well that might be useful:

tiptap, of course - https://github.com/ueberdosis/tiptap
svelte wrapper for tiptap - https://github.com/andheller/svelte-tiptap
Editable Website - https://github.com/michael/editable-website
Website for Editable Website to check it out - https://editable.website/
Svelte Prosemirror - https://github.com/TeemuKoivisto/svelte-prosemirror

all cool and interesting projects that I am learning more about to help my own understanding of these things.

Anyway, just wanted to share these resources as you work on rich text editing for Sveltia XD

[kyoshino]

Yeah, for sure, a rich text editor is what I also need for my clients. The problem is some editor libraries have issues with editing multibyte characters like Chinese, Japanese, Korean and emojis. Anyway, I’ll implement one soonish.

[rchrdnsh]

oooh, just found about about Lexical from Facebook:

https://github.com/facebook/lexical

...and there is a svelte wrapper, it would seem

https://github.com/umaranis/svelte-lexical

...dunno anything about it yet, tho

starting to learn how Prose Mirror works ATM :-)

[ngdangtu-vn]

It would be great if you guys can add basic markdown editor.

[gryzzly]

hey, a thought on editors and varying needs – what would be really cool is some guidance/tutorial for how to add custom editing fields widgets – that way we could try with any of the solutions above, and it’d not interfere with an "official" support eventually.

thanks for this project!

[kyoshino]

Hi, thanks for your comments! I’ll try to get this done before my other projects start next month.

[kyoshino]

Sorry for the delay folks! 🙇🏻 I quickly played around with Lexical and it looked good. No problem with editing Japanese, which is a must for my own clients. I’ll try to include it in the next minor release.

[kyoshino]

As per decaporg/decap-cms#6905 Decap is switching to Plate. We should probably follow suit for plugin compatibility. Japanese (and probably Chinese and Korean) input works well on the Plate demo.

[kyoshino]

Well, but Plate is basically a React library so I have to build the Svelte port from scratch. Lexical is framework agnostic. 🤔

[ngdangtu-vn]

What about https://quilljs.com ?

[kyoshino]

What about https://quilljs.com ?

It looks pretty simple and framework agnostic, but not sure about the Markdown support. I’ll compare some options mentioned in this thread and make a final decision soon.

[frankbits]

Well, but Plate is basically a React library so I have to build the Svelte port from scratch. Lexical is framework agnostic. 🤔

maybe this "slate svelte view layer" can help?

[rchrdnsh]

IIRC Quill is kind of previous generation for rich text editors, and it looks like Plate is react based or only react? In any case I'm thinking Lexical or Prose Mirror / TipTap are maybe good choices...haven't look too deeply into the others however, just a quick glance at their sites...

[rchrdnsh]

Any updates on the Rich Text Editor progress?

[Natetronn]

A couple other options I've seen in my adventures, just in case it's of any use:

Editor.js - Svelte Editor.js

Slate - Svelte Slate

[kyoshino]

Sorry folks for making you wait so long! 🙇🏼 I’m working on this now.

• Lexical isn’t well documented, but it seems to offer great flexibility. I’m playing around with this.
• Looks like Quill has been updated very recently for the long-awaited v2 release. I’ll take a look at this as well.
• Slate is not an option because it has many issues related to IMEs (Chinese, Japanese, Korean and Taiwanese), which is actually one of the reasons my clients wanted to move away from Netlify CMS.

[zanhk]

Lexical looks promising

[kyoshino]

Yeah, I’ll stick with Lexical. Quill 2.0 is still in early beta and having 1.3k+ open issues is concerning.

[rchrdnsh]

I think lexical has svelte bindings as well, or there is a lib or something, so one could made nodes out of svelte components potentially...

[kyoshino]

You’ve already pointed out svelte-lexical 🙂 but I’m creating my own to keep using Sveltia UI, integrate the raw Markdown editor, and mimic the toolbar button layout of Netlify/Decap CMS.

[rchrdnsh]

whoops, forgot about that 😁

In any case, thank you for all your hard work on this :-)

[zanhk]

@kyoshino If you need help on this feature ping me!

[zanhk]

Hi, is there any update on the Rich Text Editor progress?

[kyoshino]

Another big task (#22) has just been completed, and I’ll be moving this forward shortly.

[zanhk]

Nice. Looking forward to this, you should also check out what they used on keystatic because the ability to add custom components in MDX and MDOC is neat

https://keystatic.com/docs/content-components

[kyoshino]

The long wait is over! Just shipped v0.20.0 to provide a rich text editor! 🚀

[fkrauthan]

Any plans/idea when additional editor components (and potentially custom components) are becoming available? I would love to have Table support as well as adding a couple of custom components for layouting (e.g. columns) and embedded youtube videos.

[kyoshino]

Editor improvements are now my top priority. The image component is being tracked in #156. Will work on these things this month.