[HN Gopher] Quill v2 - Rich text editor
___________________________________________________________________
Quill v2 - Rich text editor
Author : ulrischa
Score : 421 points
Date : 2024-04-19 17:17 UTC (1 days ago)
(HTM) web link (quilljs.com)
(TXT) w3m dump (quilljs.com)
| skeptrune wrote:
| Man, I really should revisit whether or not TinyMCE is still the
| best open source option
| be_erik wrote:
| Quill is already over 10 years old! I've deployed it in
| multiple applications with a lot of success.
| b33j0r wrote:
| What a journey. Used it in production when I just needed
| arbitrary richtext documents in whole.
|
| Customizing has been harder than anyone would like. I became
| an event sourcing aficionado, initially to support
| parchment's delta format. It's a solid idea, but also
| required (unless you do backend diffs, which I tried too).
|
| My vanity test: I can't believe how hard it still is to make
| a TODO checklist with indented levels. I try like every 18
| months, surveying the plugin ecosystem.
|
| It never works well, so far. Editor.js isn't a one-stop rtf
| editor, but that was the first thing I noticed "just
| working."
|
| That said, I'm upgrading an old prototype to quill v2 today.
| ulrischa wrote:
| I really like to hear about experience with Editor.js. It
| looks like the most modern editor but seems complicated. Is
| this true?
| mati365 wrote:
| What about CKeditor?
| bklyn11201 wrote:
| I much prefer to CKEditor to TinyMCE, but CKEditor has done a
| lot around licensing:
|
| https://ckeditor.com/legal/ckeditor-oss-license/
|
| They also modified their last CKEditor 4 open release to
| check the version and prompt the user to buy the LTS support.
| romanhn wrote:
| TinyMCE just changed their licensing from MIT to GPL, which may
| impact your decision. Fun fact - TinyMCE and CKEditor are both
| owned by the same holding company (Tiugo Technologies).
| mbesto wrote:
| Curious - whats the real life implication of using GPL in
| this case?
| romanhn wrote:
| I'm not a lawyer, but it is my understanding that using a
| GPL library on the frontend triggers the "distrubution to
| users" clause of GPL. It's a strong copyleft license,
| turning the entire frontend portion of the application GPL-
| licensed, which means any user can now request the source
| code for it. That's an IP risk for any commercial code, and
| many companies shy away from GPL. Backend use of GPL should
| be fine since there's no distrubution (AGPL "fixes" this,
| and such libraries should just be avoided in commercial
| settings).
| davidkellis wrote:
| At first I couldn't figure out why Quill was being posted again,
| but now I see that a long awaited version 2.0 was released 3 days
| ago (see https://slab.com/blog/announcing-quill-2-0/ ). Thank you
| for the heads-up!
| dwallin wrote:
| Yeah, I think this link and title would be a better entry point
| into the topic.
| blain wrote:
| This is not obvious from the link but I guess this is posted
| because of v2 released 3 days ago.
|
| I have been working with Quill v1 not long ago and oh boy it is
| not good. Pain to make tables work with plugins and weird
| scrolling issues. Hopefully v2 fixes a lot but I'm sticking with
| TinyMCE as it is superior in term of features.
| jackconsidine wrote:
| I like TinyMCE too and swapped out a Quill editor in its favor
| 6 months ago. But I was annoyed that you needed an API key to
| use their static JS in your site and disturbed that they
| rapidly shrunk free tier "use" of rendering an editor a few
| days back [0]. Out of curiosity, is that not an issue for you?
|
| [0] https://news.ycombinator.com/item?id=40044544
| romanhn wrote:
| You can self-host without an API key. Unfortunately they just
| switched to the GPL license, which may or may not work for
| you.
| ulrischa wrote:
| Looks promising but I do not see advanced customization examples
| like a widget or dialogs to insert custom html elements
| toddmorey wrote:
| This isn't clear to me, either, and it also seems from the docs
| like images, videos, and formulas are the only embeddable
| content types. However, elsewhere they say "Quill exposes its
| own document model, a powerful abstraction over the DOM,
| allowing for extension and customization. The upper limit on
| the formats and content Quill can support is unlimited. Users
| have already used it to add embedded slide decks, interactive
| checklists, and 3D models."
|
| I wish they had a page covering what it takes to create a
| custom content type for the Quill DOM.
| claytongulick wrote:
| I developed a project that went _deep_ into quill and its
| capabilities.
|
| It's relatively straightforward to develop little widgets
| that can plug into the renderer. I did it for several classes
| of healthcare information, with "smart links" with embedded
| icons for things like appointments, medications, etc...
|
| Even better, I was able to use vanilla web components for the
| markup that got embedded, and quill was able to use it just
| fine.
|
| Was a huge success and worked great.
| toddmorey wrote:
| That's awesome news! Will have to investigate the renderer
| plugin model.
| ramon156 wrote:
| Funny, I'm using quill.js + tribute for a project last week
| dang wrote:
| Related. Others?
|
| _Announcing Quill 1.0_ -
| https://news.ycombinator.com/item?id=12437345 - Sept 2016 (82
| comments)
|
| _Quill - A cross browser rich text editor with an API_ -
| https://news.ycombinator.com/item?id=10446865 - Oct 2015 (47
| comments)
|
| _Quill - An Open Source Rich Text Editor with an API_ -
| https://news.ycombinator.com/item?id=7716376 - May 2014 (60
| comments)
| enraged_camel wrote:
| This announcement is for version 2, which I think was released
| a few days ago.
| toddmorey wrote:
| Kudos on the docs: I encourage all open source projects to have a
| "Why Quill"[1] type page so I can quickly understand the
| philosophy of the project and how it aligns with my goals.
|
| Even better when they also have "Why Not Quill" type content so
| you can quickly learn situations where it may not be the best
| fit. Every project makes tradeoffs and communicating those
| directly and clearly helps ensure users have a better experience.
|
| [1] https://quilljs.com/docs/why-quill
| robertlagrant wrote:
| Just a small bug report:
|
| On the custom fonts demo, select one of the paragraphs and change
| its font. Then select that paragraph and another paragraph (which
| has the original font).
|
| The font selection dropdown shows one of the paragraphs' fonts,
| and selecting it (to set both paragraphs to have that font) is
| not possible.
| crowcroft wrote:
| Am I crazy for having an obnoxiously strong opinion about how
| return should be handled by text editors?
|
| Plain text return = new line.
|
| Rich text return = new paragraph (shift + return = new line if
| you want).
|
| This was a big problem for me with earlier versions, unsure how
| customizable this behaviour is now.
|
| I do appreciate that I probably care too much about this, but I
| found TipTap worked well.
| dbalatero wrote:
| That seems correct to me!
| jdthedisciple wrote:
| No, you are 100% correct.
| oneeyedpigeon wrote:
| Totally agree - even that "shift+" support makes me nervous,
| but I'd probably concede it! The "<p><br></p> in the Quill
| example looks... awkward.
| hombre_fatal wrote:
| It should be easy to configure, but I don't think that behavior
| should be the default since it's less general and only works
| when you press Return from certain types of blocks.
|
| Shift + Return also isn't available on mobile. And it's
| annoying having a hidden key combo just to get behavior you
| want. I seem to regularly battle with Reddit's rich editor that
| does this.
|
| All to save me from having to press Return twice.
|
| Though I can appreciate the niceness of how clean it is to
| always keep the user inside a <p style="margin-bottom: 2em">
| while making them opt (with Shift + Return) into a <br>, I'd
| yield to UX over cleanliness when it comes to something as
| finicky as rich text editors.
| rodface wrote:
| If I am reading this correctly then it resembles the behavior
| of the Confluence/JIRA text input windows.
| majormunky wrote:
| At my last job I had built a system where users could enter text
| into a quill textbox (and style it), and then save it into a
| database in their delta format. Later, a different team member
| would pull that into an InDesign plugin where we could easily
| read what styles had been applied to the text in quill, and style
| that using the styling in InDesign. This was used when the front
| desk person would enter in a legal notice for a newspaper, and
| the production team would be the ones who would get that into
| InDesign for printing. The quill delta format that it uses made
| this process so much easier than if we were to have been given
| HTML like most other editors output / save. Glad to see this is
| still around, its been a few years since I had heard / used
| quill.
| joeriddles wrote:
| Sounds like an interesting system :)
| guessmyname wrote:
| What does _"trusted by"_ actually means? A friend of mine works
| at Microsoft and they have never heard of this project.
|
| * Is it that they know one person at Microsoft, any random
| employee among +221k, who uses the editor?
|
| * Or is it that one of the developers works at Microsoft? (which,
| unless they are Satya Nadella, shouldn't matter)
|
| * Or is it that their (not so anonymous) telemetry tells them
| that someone is using the editor from a Microsoft-owned IP
| address?
|
| * Or are the company logos simply there to mislead potential new
| users into thinking those companies actually trust the
| developer(s)?
| eropple wrote:
| Quill's an extremely well-known JavaScript rich text editing
| control, not an "app". Were you confused by the example at the
| top of the landing page? Your friend might not have heard of
| it, but I'd be more surprised if Microsoft _didn 't_ have
| significant projects using it because it's so well-established.
| And having large adopters of an open-source library featured on
| the landing page is not unusual.
|
| I'm unclear as to what there deserves this kind of accusatory
| posturing.
| gremlinunderway wrote:
| I don't think there was anything "accusatory", it's a
| legitimate question.
| aprilnya wrote:
| The comment reads like it's being accusatory to me
| throw10920 wrote:
| > I'm unclear as to what there deserves this kind of
| accusatory posturing.
|
| The project claims to be "trusted" by one of the largest tech
| companies in the US. Asking for a definition of "trusted" is
| _extremely_ reasonable, and calling it "accusatory
| posturing" is not only inaccurate (the comment itself reads
| pretty neutrally), but also somewhat emotionally
| manipulative.
| bearcobra wrote:
| I believe the implication is that those companies uses the
| library in their products to power rich text editing
| al_borland wrote:
| I've seen the company I work at show up on sites like this,
| when I've been explicitly told we can't use whatever the thing
| is.
|
| My guess is all it takes is 1 person inside Microsoft using it,
| or even 1 load of the library from a Microsoft owned IP.
| pembrook wrote:
| Considering the size of Microsoft and the hundreds/thousands of
| teams building various things, I would guess that _most_ well
| known open-source projects (like Quill) have been used by
| Microsoft at some point.
|
| I would be very surprised if no team there had used Quill
| before.
| efilife wrote:
| But there's 0 proof that Microsoft has ever used this.
| Without evidence, these claims are useless
| efilife wrote:
| No idea why you got downvoted. It's very reasonable to ask
| about this considering they didn't provide a definition of
| trusted and there's 0 proof anyone from MS used their product.
| False claims
| christkv wrote:
| Quill or Slate is the question im asking myself these days.
| eropple wrote:
| I've used Quill before, but I have Editor.js, Slate, and
| Tiptap2 on my to-do list to check out, probably for similar
| reasons as yours.
| christkv wrote:
| Problem i got is that i have to be able to support html
| documents from old tinymce as well as being suitable for use
| with collaborative editing with something like ys.js. I might
| just have to bite the bullet and write a html to some other
| representation parser.
| rnewme wrote:
| - https://discuss.prosemirror.net/t/prosemirror-for-live-
| editi... - https://prosemirror.net/examples/collab/#edit-1
| - https://docs.yjs.dev/ecosystem/editor-
| bindings/prosemirror
| _boffin_ wrote:
| Check out write-down.
| rnewme wrote:
| Neither, use prosemirror.
| kabes wrote:
| I think lexical is the future
| rnewme wrote:
| Relevant discussion on prosemirror forums
| https://discuss.prosemirror.net/t/differences-between-
| prosem...
| jjcm wrote:
| Release notes:
| https://github.com/quilljs/quill/releases/tag/v2.0.0 Announcement
| post: https://slab.com/blog/announcing-quill-2-0/
|
| I've used quill quite a bit. It's easy to integrate, the json
| delta format works decently well, and is pretty straightforward,
| but one thing I find myself doing whenever I use it is asking
| myself, "Should I just be using prosemirror?".
|
| I find Quill to be a great stopgap solution for when I need
| editing and I need it quick, but in the back of my mind I'm
| always mentally adding that I'll need a migration plan should
| that specific feature ever grow in requirements.
| eropple wrote:
| I've been looking at ProseMirror (mostly through tiptap2, which
| seems to wrangle it effectively) but taking the jump is
| daunting. I'd be interested in others' experiences.
| notresidenter wrote:
| Tiptap is a great wrapper around ProseMirror, and if you need
| to dig deep, TipTap lets you do that but the documentation,
| for both TipTap and PM isn't as good as it could be and the
| conceptual model for PM is _hard_ to pick up on the go. I've
| spent several days on it to get close to what we spec-ed,
| granted, that's probably a tenth of what I would've spent if
| I had to build it from scratch, but definitely an investment,
| because getting all the little interactive details and the
| way that the custom inline/block elements should work just as
| the user expects is _hard_.
|
| Overall, it's the only tool I found that makes it as easy as
| possible to create a good writing/editing experience but it's
| a hard easy.
| wgj wrote:
| I've used prosemirror enough to have written custom nodes,
| commands, and custom code around its collaboration model. I
| got good results with all of this and I don't know any other
| platform that could have matched it.
|
| The docs are thoughtful. There's an up-front learning curve
| to understand the architecture. When doing highly customized
| things, I referred to the source when needed.
|
| For standard rich text, there are a lot of options.
| Prosemirror shines when you want to build on it as a
| platform.
| tbeseda wrote:
| With the release of Quill v2, I went away from TipTap + PM to
| Quill. My use case is not super complex. I just want a decent
| editing experience (for trusted, technical people, not
| average end users) and solid HTML I can save to a db.
|
| Quill has `getSemanticHTML()` which is great for my
| implementation.
|
| PM is great, but expansive and overpowered for my needs.
| jasonjmcghee wrote:
| TipTap has the equivalent with `getHTML` which is calling a
| PM function that does the same.
| pembrook wrote:
| Tried Tiptap recently and it was fairly buggy even for basic
| stuff like lists. Apparently the team behind it went the VC
| route and raised a few million so ideally they'd be moving
| faster at this point, but it doesn't seem much improved from
| when I tried it a few years ago.
|
| That said, text editing in the browser is indeed a nightmare,
| so it's hard to fault anyone trying to make it easier.
| amelius wrote:
| I didn't know there was that much money in writing a rich
| text editor ...
| dubcanada wrote:
| CKEditor and TinyMCE seem to be doing fine.
| romanhn wrote:
| Are they? Both have been acquired by the same holding
| company.
| pier25 wrote:
| I spent weeks back in 2020 fighting with PM trying to
| customize behaviors such as bullet points etc. At the time
| the documentation was sparse and for me progress was
| extremely hard.
|
| I ended up abandoning the project but wrote a short
| introduction here which might help you get started.
|
| https://github.com/PierBover/prosemirror-cookbook
| ksec wrote:
| I wish we could change the submission to [1], since it really
| is about the new version. On the hand I sometimes wonder why we
| can have standardise rich text editor.
|
| [1] https://slab.com/blog/announcing-quill-2-0/
| runarberg wrote:
| I needed to implement rich text editing at my job. So I looked
| at many options, quill was among the first one I looked at, but
| I ended going with ProseMirror. The reason I picked ProseMirror
| was how low level it was, and the extensive documentation that
| goes with it (kind of reminds me of D3 really). Since picking
| it I've written a few custom nodes, custom commands, a custom
| tool bar, integrated with markown + custom markdown plugins,
| and it all integrates rather neatly with Vue (though with some
| glue code).
|
| So far I'm very pleased with my choice of ProseMirror.
| robotburrito wrote:
| For a second there I thought this was https://quill.art/
| pmlnr wrote:
| Is anyone aware of a word processor, text editor, whatever, that
| can handle HTML definition lists natively?
| netghost wrote:
| Probably prosemirror. I don't know that it's built in by
| default, but it's well within prosemirror's model, so it
| shouldn't require a large investment to use.
|
| That said, prosemirror's got a pretty steep learning curve.
| notyoutube wrote:
| Isn't the "flat markup" for inline elements in prosemirror
| kind of unnatural to work on html?
| bhl wrote:
| Nothing is built into ProseMirror except for the text span.
|
| For a definition list, you'd probably want two node types: a
| definition list, and a definition list item.
|
| And then create toDOM and parseDOM methods to render and
| parse respectively the html you want.
| crabmusket wrote:
| I'd really like a WYSIWYG editor that's designed to produce
| HTML documents. Not for web pages, but for documents. HTML has
| great prose features, but it seems like there's nothing in
| between Microsoft Word and "now you're building a website".
| oneeyedpigeon wrote:
| I guess one of the many Markdown editors is what you're
| looking for, then you just need to add a build step at the
| end. Unless you need any of the 'document' features of html
| that aren't in md, of course.
| bachmeier wrote:
| I don't think so. They were pretty specific: "I'd really
| like a WYSIWYG editor".
| oneeyedpigeon wrote:
| There are definitely Markdown editors that are WYSIWYG.
| In fact, md is a lot 'closer' to WYSIWYG than HTML is.
| crabmusket wrote:
| I think HTML is a pretty decent semantic structure for
| documents. The WYSIWYG is good for convenience, as is
| markdown text format.
| crabmusket wrote:
| I agree some of the WYSIWYG markdown editors are the
| closest thing to what I want. I quite like Obsidian's
| editor for what it is, which does a pretty good job
| balancing rendering and letting you edit the actual
| markdown syntax.
|
| But you're editing markdown, not HTML. And, for example,
| markdown doesn't have definition lists.
| pmlnr wrote:
| None of the visual markdown editors - the ones that render
| the text, eg. Typora - seem to support definition lists.
| forgotacc240419 wrote:
| An old project I worked on was badly bitten by using Quill. IMO
| the issue is that they didn't vet the limitations of the editor
| well enough compared to the project's requirements but the way
| the documents went on about the extensibility of the library did
| feel like it was going to cause harm.
|
| It's a great library provided you stick with its limitations (ie
| nothing too complicated with nested content). A "Why You Should
| NOT Use Quill?" type section on the website would probably go a
| long way
| Recursing wrote:
| I remember using https://github.com/facebook/lexical for a
| project a year ago and mostly things worked our of the box.
|
| Any reason to prefer quill?
| bkyan wrote:
| Is there support for CSS classes in Quill v2?
| nickbaum wrote:
| Ymmv, but I will never use Quill for a production project again.
|
| We started using Quill 1.x around 2016, I initially liked it a
| lot. Jason proactively reached out to me when I first tweeted
| about considering Quill, and he was helpful when I had questions
| about the implementation.
|
| Fast forward to 2019, we were running into some bugs, Quill 1.x
| was in maintenance mode, and 2.0 was effectively undocumented
| [1]. I reached out to Jason on Twitter [2] to get a sense for the
| timeline, and he basically told me to get lost. (Also his company
| Slab now blocks me on Twitter, though I imagine he just meant to
| block me from his personal account.)
|
| Everyone has stressful days, especially when building a startup,
| so maybe that was just a bad time for me to reach out. My best
| guess is that they were focused on their own company (fair!) and
| barely had the time to maintain Quill for their own internal
| usage, let alone release it as open source. If that's the case, I
| wish they'd been upfront about it.
|
| 5 years later, Quill v2 is finally live. I'm glad to see Slab is
| still around, and I hope they have the bandwidth to publicly
| maintain Quill going forward. But if you're thinking about using
| this in production, I would push on what their commitment is to
| supporting it, and have a plan for if they stop responding.
|
| (Jason, if you're on this thread, no hard feelings, water under
| the bridge. Feel free to ignore or chime in with your own
| perspective.)
|
| [1] https://github.com/quilljs/quill/issues/2435
|
| [2] https://twitter.com/nickbaum/status/1177240103925796865
| fovc wrote:
| No experience with Jason, but I have to say I've spent waaay
| too much time reading the Quill code trying to figure out how
| to patch around weird behavior. Which is frustrating because
| that's what a RTE library (vs roll your own) is supposed to be.
| Not sure about v2, but the v1 code is just not very well
| architected.
|
| There are basic features we've held off on implementing for
| fear that it will lead to a million little bugs.
|
| The Delta format is the best thing about Quill by far. But I'd
| advise anyone looking for more than bold/underline/italics to
| use prose mirror.
| lukasb wrote:
| Can anyone compare to Lexical?
| kabes wrote:
| Lexical is more of a framework comparable to prosemirror.
| Learning curve is therefore higher, but IMO way more flexible
| and better designed than quill.
| ulrischa wrote:
| Is Gutenberg a good alternative these days?
| hulitu wrote:
| No download link, no mention of RTF. What "rich text editor" is
| that ?
| thih9 wrote:
| Is there a way to do nested bullet lists on mobile?
| aitchnyu wrote:
| Which one is easiest to implement hashtags (predefined list,
| associated colors) and @ mentions, which insert an <a> tag we can
| programmatically define. I can compromise on formatting features.
| firecall wrote:
| I'd honestly wondered if Quill had been abandoned!
|
| Great to see a release!
| J_Shelby_J wrote:
| I have this project[1] that you can run from a GitHub code space,
| drop a some markdown files in, and push to GitHub pages.
| Basically trying to be as low code or no code as possible for a
| blog replacement.
|
| Feedback from non-technical users is markdown is still annoying.
| Could quill be used in to edit as a wisywig with the output being
| markdown? That way the user could start the dev server and edit
| from there without having to touch the vscode file explorer.
|
| [1] https://github.com/easy-astro-blog-creator/easy-astro-
| blog-c...
| bloopernova wrote:
| This looks perfect for a nascent guide I wanted to write, thank
| you for creating and sharing it!
___________________________________________________________________
(page generated 2024-04-20 23:01 UTC)