quill
slate
Our great sponsors
- Appwrite - The open-source backend cloud platform
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
- Onboard AI - Learn any GitHub repo in 59 seconds
quill | slate | |
---|---|---|
53 | 26 | |
37,538 | 28,235 | |
0.8% | - | |
8.8 | 8.9 | |
8 days ago | 3 days ago | |
TypeScript | TypeScript | |
BSD 3-clause "New" or "Revised" License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
quill
-
You don't need a CRDT to build a collaborative experience
I agree. Yes, you can. Quill is the example here.
Actually, back in 2015 when we started prototyping CKEditor 5, we started with this approach as well. Our goal from the beginning was to combine real-time editing capabilities with an engine capable of storing and rendering complex rich-text structures (nested tables, complex nested lists, other rich widgets, etc.). We quickly realized that a linear structure is going to be a huge bottleneck. In the end, if you want to represent trees, storing them as a linear structure is counterproductive.
So, we went for a tree model. That got many things in the engine an order of magnitude harder (OT being one). But I choose to encapsulate this complexity in the model rather than make it leak to particular plugins.
In fact, from what I remember, https://github.com/quilljs/quill/issues/117 (e.g. https://github.com/quilljs/quill/issues/117#issuecomment-644...) is a good example of issues that we avoided.
I also talked to companies that built their platforms on top of Quill. One of them ended up gluing together countless Quill instances to power their editor and overcome the limitations of the linear data model but is now looking for a way to rebuild their editor from scratch due to the issues (performance, complexity, stability).
So, yes. You can implement a rich-text editor based on a linear model. But it has its immediate limitations that you need to take into consideration.
-
Which Rich Text Editor to use ?
I've always used Quill and always satisfied with it. It can be adapted to React Native as well. Despite the most popular RTE is Draft js it has some limitations on mobile.
-
Good Markdown Editor for SvelteKit?
Quill
-
Are WYSIWYG text entry areas difficult to implement in web and mobile apps? Because I see Markdown so much instead.
All you need to do is find a free library and add it.
So if one were to use https://quilljs.com/ as /u/ike_the_strangetamer suggested and just include a disclaimer that the site doesn't support pasting in some things, would that work?
-
Critical bug resulting in irretrievable (?) data loss
In short there are two different types of keyboards. One type, like GBoard sends entire words once you select an autocorrect recommendation from the list... it sends the whole word, all its characters, all at the same time [acts almost like pasting], whereas other keyboards send letter-by-letter. If you think about how autocorrect on phones work nowadays, if you type the word wrong, but then tap on the correct word on your keyboard, keyboards now have the ability to delete and replace entire words (and not just characters). So because of this, some android keyboards don't actually send the absolute cursor / text-selection position anymore. Instead they send it relative to the last words you've selected. You can see other note taking apps and editors plagued by keyboard issues due to this exact phenomenon on Android here as well, mainly relating to newline characters. (while the newline is added, cursor isn't updated etc) : Microsoft OneNote, Workflowy, CKEditor, Quill, RichEditor for Android, etc... Since you mentioned that your issue happened -after- you selected / copy / pasted some text, I cannot eliminate the possibility that an android os flavor (or its selection handling, since it's different for each android version and os vendor) / keyboard / browser might also be the cause. I.e. in Android Firefox, there is a bug and you cannot select words inside rich text editors by double tapping on them like you can in any other browser. This bug has been around for -6 years- now. Affecting even Github on Firefox Android. We also chimed in and tried to keep it moving, and despite our best attempts, after 2 years, Mozilla just closed the issue without even fixing the bug. You can see relevant links here. So unfortunately, browsers and keyboards on Android can cause really strange issues, and we cannot anticipate all the weird and unexpected ways they might break. 3 ) Since you also mentioned copy/pasting stuff, often people experiences issues like this when they use things like clipboard syncing tools on Android (i.e. pushbullet, or on iOS iCloud's clipboard sync etc) Because you never know what was leftover in the clipboard at the time you copy pasted, and sometimes if the sync is delayed, these things may misbehave, and paste twice, or with a delay, or paste a blank return key unexpectedly etc. 4 ) This is the silliest but still likely scenario that I still have to mention. Sometimes, depending on the OS/Browser combo, when users copy paste text from Cryptee while it's in dark mode, paste it into another part of the document, then open the document in light mode, it causes text to have white color, and makes it look invisible, causing panic.
-
Looking for the best React Editor library
Quill.js is a rich text editor that provides a configurable editor with various features. Compared to Slate and TipTap, Quill is a drop-in solution that doesn't require building common text editing functionality from scratch.
-
What's rich text editor we should use nowadays ?
It seems though that the last release for Quill was in 2019: https://github.com/quilljs/quill/releases
-
is there a library for this? those multifeature textareas where you can format the text and add attachments?
Honestly, QuillJs is your best option.
-
Quick and easy WYSIWYG recommendations?
Jodit Quill
slate
- 5 Not-So-Typical React Libraries for an Outstanding Project
-
Which Rich Text Editor to use ?
- 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
-
What is your goto WYSIWYG Editor?
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.
-
Looking for the best React Editor library
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.
-
Slate | Editor in 10min with Next.js and TS ✍️
Link to Repo
-
Is there a good alternative to Draft-js rich text editor?
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.
-
Lexical – a web text editor framework that powers Facebook
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...
-
A good rich text editor for reactjs?
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.
-
Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in Browser
You definitely need to give Slate (https://github.com/ianstormtaylor/slate) a try - the best editor framework I've used.
-
Best WYSIWYG editor for Vue that supports structured content?
Slate: Looks very promising, but it's for React. (Someone has floated the idea of making it framework-agnostic, but the maintainers haven't committed to that goal yet.)
What are some alternatives?
Draft.js - A React framework for building text editors.
Editor.js - A block-style editor with clean JSON output
tiptap - The headless editor framework for web artisans.
ProseMirror - The ProseMirror WYSIWYM editor
TinyMCE - The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
trix - A rich text editor for everyday writing
lexical - Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
TOAST UI Editor - 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
CodeMirror - In-browser code editor (version 5, legacy)