quill
Draft.js
DISCONTINUED
Our great sponsors
- Appwrite - The open-source backend cloud platform
- Onboard AI - Learn any GitHub repo in 59 seconds
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
quill | Draft.js | |
---|---|---|
53 | 40 | |
37,488 | 22,309 | |
1.2% | - | |
8.8 | 8.2 | |
8 days ago | 12 months ago | |
TypeScript | JavaScript | |
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
Draft.js
-
What is this called? how do you create it? any library? (react)
Draft JS
-
Is there a good alternative to Draft-js rich text editor?
Draft-js developed by Facebook, last update was over 2 years ago and it still got over 800k weekly downloads. I can't quite get it to work so I'm wondering if theres other good alternatives out there.
-
Making text editor in tauri
If you want to write the GUI code in Rust, you'd need something like Dioxus (which uses Tauri under the hood). But note that the Rust GUI ecosystem is still new, so I doubt we have something like Draft.js (a wysiwyg editor component for React). There's a lot of complexity involved in writing a text editor, and I'll suspect you'll have to handle a lot of that yourself.
-
Lexical – a web text editor framework that powers Facebook
How does this compare to Draft.js, another rich text editor created by Facebook?
- Does anybody a block-based rich text editor like notion that works with react?
-
Facebook open sources Lexical, an extensible text editor framework
FWIW, we updated the README to reflect the status of DraftJS today.
https://github.com/facebook/draft-js
Point taken about updating the site, though.
I think it would be helpful to explicitly say that draft.js is deprecated here [1]. I was recently caught out by this, and started using draft.js without realising it’s been abandoned.
>Sure, but indicate that it's an alpha product
Do you mean something like the banner on the README?
https://github.com/facebook/lexical
>They don't even have the decency to label it is such
Do you mean something like the big banner on the README?
-
Useful Utility React.js Libraries
Draft-js. It is a JavaScript rich text editor framework, built for React and backed by an immutable model. Here is a link to it: https://draftjs.org
What are some alternatives?
Editor.js - A block-style editor with clean JSON output
slate - A completely customizable framework for building rich text editors. (Currently in beta.)
tiptap - The headless editor framework for web artisans.
TinyMCE - The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
ProseMirror - The ProseMirror WYSIWYM editor
react-quill - A Quill component for React.
CodeMirror - In-browser code editor (version 5, legacy)
react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
trix - A rich text editor for everyday writing