quill VS slate

> One thing I learned is that you should lean towards letting non-technical people choose their own tools like why we largely let developers choose their own tools.

IMHO: I think a more sustainable variant of this (for your own sanity) might be to ask them which tool(s) they like and then take some time to understand WHY. But then instead of just letting them use those directly, you would either vet them first yourself or else find a similar one to those that can satisfy their needs (as an editor) AND yours (as a dev).

If I let every client/friend/family member who came to me for this sort of advice just pick their own tools, I'd end up with a bunch of Word docs with embedded copied & pasted crap from five other tools and no easy way to clean and publish them or back them up and version control them for diffing and rollbacks, etc.

I guess the dev version of this would be like letting every individual dev set up their own production deploys however they like, even if it's just some rando FTP client, instead of having some sort orderly CI/CD process.

If it's just you and your buddy and you don't mind taking the time to clean up their docs every time there's a new blog post... that's fine, I guess. But it can quickly get pretty overwhelming if you have more than user/tool to support, or you just publish updates frequently. In that case, having a nice WYSIWYG for them that's good enough, but can also generate clean structured output for you (something like Markdown or a API, as opposed to RTF, Word XML, HTML, etc.) can make life MUCH easier for you. And anyone that comes after you.

You can also build your own system off something like https://quilljs.com/, https://prosemirror.net/, or https://github.com/ianstormtaylor/slate to customize it to their needs while still getting clean enough input.

SLATE is an excellent library for creating WYSIWYG editors in REACT, I find it superior to QUILL.

Quill is a free, open-source WYSIWYG editor designed for the modern web. Let's use Quill js in form element. You can check the final HTML code at the bottom of this post. (￣y▽,￣)╭

React-Quill is a React component that wraps the Quill rich text editor, providing a seamless integration with React applications. Quill itself is a powerful, customizable, and open-source rich text editor that offers a variety of formatting options, such as bold, italics, lists, links, and more. React-Quill leverages the flexibility of Quill while fitting perfectly into the React ecosystem, making it easy to manage and extend.

Speaking of text, here's another one for you. Quill is a rich text editor also built for compatibility and extensibility. The latest version prevents mistakenly overriding theme default toolbar settings, and Quill is now a valid ESM package for better ecosystem. There's nested Quill support, improved spelling support, and improved support for pasting from Google Docs and Microsoft Word. Check out all the changes on the Slab website.

Ontop of that this [issue](https://github.com/quilljs/quill/issues/3806) exists - which forces us to upgrade once primeNg lets us. Anyone knows a good alternative? I am done with quill and would love to use something more stable.

However, I had difficulties inserting editable BLOCKS with syntax highlighting for code. Yes, there is an official example, but at least for me, it's not very clear.

This work looks very promising. "HTML for email" is indeed hard to design and hard to implement. Especially editing on mobile, table decices, or Asian language input nightmare.

I do lot of email templating for B2B CRM use cases and decided to opt out for a bit different approach based on slatejs/platejs editor

https://docs.slatejs.org/

https://github.com/ianstormtaylor/slate

https://github.com/udecode/plate

The internal representation of slatejs/platejs is json format. Ex:

{

- it creates a layout based on rows and cells, so it support multi-column layout - each cell can contain a different "cell-plugin", - richt-text editor based on https://github.com/ianstormtaylor/slate is built in and comes with its own plugin system. It can do weight, italic, block-types, alignment and lists and can be extended as you want (even with elements storing data and interactive components) - you can create custom cell plugins based on a schema (or custom control ui) and a component that should be rendered - it stores an object tree that represent it, not html. It therefore can contain any react component, which is great if you want to allow your editors to add interactive components or components that you already built as part of the app - i carefully optimized for SSR and bundle size, so no editor ui is rendered nor loaded. editor ui is only loaded on the client if you disable readOnly. (lazy loading) - it mainly tested with nextjs, since i used it for content-heavy pages. - its not yet tested with react-server components, but it should actually work in read-only mode

Finally there's Slate and Lexical which are super powerful in terms of customizability and extensibility. They're great options for when the editing experience plays a major role in the product.

Slate, as per its documentation, is a completely customizable framework for building rich text editors. Therefore, it doesn't offer a feature-rich text editor but instead provides tools to build one. Let's create a component called Slate and see what the Slate editor looks like.

Link to Repo

Word of warning about Slate: I love the API and the design goals, but it appears to suffer from some fundamental issues. We were experiencing issues similar to this one and a team of multiple 10+ year experienced frontend devs couildn't figure out what was going on. I had to completely rip out a feature we had built with Slate and had to reimplement a new version from scratch with Lexical. So far we have no issues other than those inherent to rich text editing.

We're trying to choose between Lexical and Slate at work. Do you have any examples that would be similar to this? https://github.com/ianstormtaylor/slate/blob/main/site/examp...

If you are going to customise a ton of functionalities and/or implement new functionality I suggest using SlateJS. If not, have a look at Sun editor.