[HN Gopher] Switching Rich Text Editors, Part 1: Picking Tiptap
___________________________________________________________________
Switching Rich Text Editors, Part 1: Picking Tiptap
Author : dbbk
Score : 66 points
Date : 2022-02-11 10:43 UTC (12 hours ago)
(HTM) web link (www.ashbyhq.com)
(TXT) w3m dump (www.ashbyhq.com)
| amelius wrote:
| Are all these editors based on contenteditable?
|
| https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Edit...
| nmcfarl wrote:
| The prosemirror based ones are. I suspect the other ones are as
| well.
| pqb wrote:
| You're right. Slate, Quill.js and ProseMirror-based use
| contenteditable. Hacking browser for custom cursor (similarly
| as Zoho Docs does [0]) is quite hacky and often leads to more
| problems than advantages it provides.
|
| [0]: I suggest you to take a look in Chrome debugger how it
| works. Quite funny piece of code. It is written in jQuery +
| vanilla JS, so it will be very easy to spot the whole
| algorithm.
| scary-size wrote:
| > We took a chance that Slate would support more browsers and its
| API would remain stable (despite the maintainers strongly
| suggesting that both might not happen!). Unfortunately, our
| gamble didn't pay off, and the maintainers introduced significant
| breaking changes to the API and document model...
|
| You have been warned...
| pqb wrote:
| Not only maintainers introduces significant breaking changes,
| but then they have also lost interest in a whole project that
| lead to change of ownership (Ian doesn't commit much to Slate).
| AFAIK, Sunny is now still the main maintainer.
| evnp wrote:
| I'm glad OP didn't end up recommending Quill, though their
| representation of that library seems way off. To help others
| avoid the state we're currently in, a PSA:
|
| https://github.com/quilljs/quill/issues/3359 ("Is quill dead?")
| Multiple open CVE with no plans to address, 1.1k open issues.
|
| We're on the lookout for better options and a way forward, so
| apart from that this post is much appreciated!
| jacobmischka wrote:
| I just added tiptap to our new app last week, it was a great
| experience compared to all other RTE libraries I've used, would
| highly recommend it.
| hanspagel wrote:
| Great to hear! (Co-creator here)
| rbaudibert wrote:
| > A significant disadvantage was that we couldn't have both
| 0.47.x and 0.63.0 in our application simultaneously.
|
| You definetily can! We used Slate `0.47.x` at Leadsimple[0] and
| we went through the same hustle and decided to go with Slate
| again! We have both versions running in production for 3 months
| now, and we didn't have any problem. You can add separate
| versions of the same library using a feature of `yarn` which
| allows you to declare `"slate": "^0.47"` and `"slate-latest":
| "npm:slate@^0.72.0"`. Then, in your code you just need import
| `slate` when you want the older version, and `slate-latest` when
| you use the new one. We also had to inline some stuff because
| `yarn` isn't the smartest when solving dependencies, but it sure
| is possible :). It wasn't easy, but the end result is amazing,
| and REALLY fast, hasn't caused any problem to us.
|
| [0] https://www.leadsimple.com
| iliaznk wrote:
| Thanks for submission! Very timely. Been searching for a stable
| and flexible editor (or rather a tool to build such an editor)
| and Tiptap looks like a good candidate.
|
| I was also considering Slate, but have found this rather annoying
| bug https://github.com/ianstormtaylor/slate/issues/4833, which is
| surprising as it doesn't look like some rare edge case, and
| breaks something that seems to be like basic functionality for an
| editor. Had to re-consider.
| pqb wrote:
| As a person, who lost some time to dive into Slate.js
| internals, I can say those issues will pop up more often and
| often. There are so many moving parts that makes pushing a fix
| problematic. It is a like pipe having tens of leaks, but you
| have only a duct tape that won't be enough for all holes. It is
| great there are still some people who take care this project
| seriously, and it has very nice unit tests to reproduce faulty
| scenario.
| jitl wrote:
| Slate's poor Android support makes it a bad choice for anything
| but personal projects or when you can commit to only supporting
| English/ASCII input. Android appears to work okay for English
| input, but is completely broken for Chinese/Japanese/Korean or
| other languages that use composition or an input method editor.
| falcolas wrote:
| I have to belie my age a bit here - Rich Text here is referring
| to browser-based WYSIWYG editors, not RTF text editors.
|
| I'm not sure when that changed, but it's definitely worth noting.
| gilli wrote:
| I've been using Tiptap for my little brand design app
| (https://baseline.is) and it's been awesome to work with. The
| guys over at Uberdosis are constantly working on it making it
| even more powerful and you can easily bend it to your will, which
| is very necessary in my case since I'm using it as a part of a
| design tool.
|
| I would definitely recommend it to pretty much anyone since you
| can adapt it to your needs.
| hanspagel wrote:
| Thanks gilli! Great to have you in the community. (Tiptap co-
| creator here)
| jdavis703 wrote:
| This post is actually a great way to review any library. But
| there are two things I'd add:
|
| > While Google is useful, ranking in Google Search is a
| popularity contest, not a quality test. To be exhaustive, we
| started with the initial list of libraries we found back in 2019
| and used the references to other libraries in their documentation
| to find more.
|
| In this case NPM and GitHub search are great for this. You can
| also sort by many important attributes and filter by keywords.
|
| The other point that was unaddressed is to actually read the
| source code. Is the source easy to understand? Depending on the
| library the source code might be an important source of
| documentation.
| zem wrote:
| i had no idea what ashby was or how they were using tiptap, so i
| clicked on the logo at the top of the page - and i still have no
| idea what ashby is, or how they are using tiptap!
| projektfu wrote:
| They seem to be enterprise focused. I guess they want to pick
| their customers, not the other way around.
| RichardChu wrote:
| When evaluating rich text editors for the note-taking app I
| started about a year ago (https://notabase.io), I ended up going
| with Slate because of its flexible schema and customizable plugin
| architecture.
|
| I sort of regret that choice now. I ran into a lot of bugs when
| integrating it which I had to manually work around; issues go
| months without being addressed; and there still isn't good cross-
| platform support, especially for Android. With a more active
| contributor base, Slate could be a fantastic library, but I get
| the feeling that it's in maintenance mode now, with not many
| major changes in the past year and a v1.0 still far in the
| future.
|
| Tiptap looks like it might be a good choice now, but I find it
| off-putting that I can't insert links in the demo editor on
| Tiptap's website (https://tiptap.dev), especially for my use case
| (a note-taking app whose core concept revolves around links).
| j4yav wrote:
| ToastUI (https://ui.toast.com/tui-editor), which builds on
| ProseMirror, was really easy to set up and has been very stable
| for us. It's a WYSIWYG editor that just renders markdown, which
| is what we wanted to have as the base representation for written
| content so we have some portability later depending on how our
| product evolves.
| mtlynch wrote:
| I use TipTap as a rich text editor in my open-source weekly
| journaling app.[0]
|
| One of the big gotchas I've had with TipTap is that it's
| extremely sluggish once you get to more than 300 words or so and
| you're using different formatting options. There's a multi-second
| delay between typing the word and the text appearing in the
| screen.
|
| The APIs are pretty nice, and I was able to convert to/from
| Markdown with it easier than other solutions I looked at, but the
| performance really reduces usability.
|
| I've only used the FOSS version, so maybe TipTap Pro is better.
|
| [0] https://github.com/mtlynch/whatgotdone
| Arr0wH34D wrote:
| Are you sure that it's not something else interfering with
| TipTap? Their long demo https://tiptap.dev/examples/book which
| has 200,000 words was still very responsive.
| bener wrote:
| That page just freezes the browser using Brave on Android.
| jacobmischka wrote:
| Weird, works very responsively for me on Firefox Nightly on
| Android.
| bener wrote:
| Yeah it's strange, it locks up the whole browser and
| makes it really hard to exit the tab.
| hanspagel wrote:
| That's actually an issue with the syntax highlighting in
| brave. :-(
| mtlynch wrote:
| It's possible. I write with a lot of bullet points and
| formatting, so I might be hitting one of their edge cases.
| hanspagel wrote:
| Try disabling spellcheck, this has serious performance issues
| for content editable in recent chrome versions.
|
| https://bugs.chromium.org/p/chromium/issues/detail?id=107671...
| mtlynch wrote:
| Oh, interesting. I'll try that. I feel like I've seen it on
| FF too, so I'm not sure if that's the problem.
| rambambram wrote:
| Ah, the joy and horror of rich text editors. I completely
| understand the selling points and the attraction, but I gave up
| on 'm for my projects. Not saying that OP must do the same,
| though.
|
| I eventually settled for plain text in a simple textarea, with
| basic possibilities for markup by allowing Markdown. No more
| struggling with different browsers, no struggling with how the
| RTE looks and feels, no incompatibility issues with the
| underlying database, etc.
|
| Still not saying everybody has the same use case as I have (no
| code website system), but I wouldn't trade my current peace of
| mind for even the best looking RTE.
| jamil7 wrote:
| I try to argue for this approach as much as possible but it
| rarely gets through to product people.
| rambambram wrote:
| A slick interface and the age old adage "don't make me think"
| are hard to argue with. ;)
| earthboundkid wrote:
| Another opt-out route, which I am currently going down, is
| using Google Docs as an RTE and then just doing a good job of
| importing from it.
| amelius wrote:
| > Ah, the joy and horror of rich text editors.
|
| The problem: there is no money to be made in writing software
| libraries these days, no matter how much a working solution is
| needed. So sadly, we're going to be stuck with all these
| suboptimal solutions for many years to come.
| rambambram wrote:
| Maybe that's true. A lot of people tried the RTE stuff, and
| Basecamp/37Signals came close with a solution (I forgot the
| name). I guess it's a hard problem by definition, dealing
| with copypasted stuff from Word, dealing with browsers, etc.
| After using my simple Markdown solution for some years now, I
| came to appreciate the bare basic style of it. But it's not
| for every use case.
| gopet3r wrote:
| It's called Trix and I've switched from Trix to TipTap
| because the whole plugin system works way better. And
| having the ability to process the document programmaticaly
| (TipTap = JSON, Trix = HTML) has opened a lot of
| possibilities for us.
| j4yav wrote:
| This analysis that GitLab did was really valuable for helping me
| do my research on an editor architecture for my app. It almost
| reads like a blog post, it's an incredibly well-written issue.
| https://gitlab.com/gitlab-org/gitlab/-/issues/273238
| dbbk wrote:
| Yeah this is fascinating, thanks for sharing. Also the proof-
| of-concept issue has lots of great detail and challenges;
| https://gitlab.com/gitlab-org/gitlab/-/issues/231725
| john-doe wrote:
| And this is their current implementation, for those interested:
| https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/asset...
| CPLX wrote:
| Very timely topic. For those of us looking for more flexible
| options, like for an online news publication that needs to show
| well placed and sized images and so on, I wonder what everyone is
| using that isn't Wordpress but has the same sort of core
| functionality.
|
| Like for example if you wanted a Wordpress style story editor in
| rails is there an obvious option?
| jacobmischka wrote:
| I came across react-page[1] the other day, it seemed like a
| reasonably powerful block editor but was too much for our
| purpose so I haven't actually used it.
|
| [1]: https://github.com/react-page/react-page
| pqb wrote:
| Great article and fantastic choice!
|
| This is a topic I have been very interested lately. I had been
| lucky to start using since Slate 0.61.x, but I cannot say
| anything good about it. It has a major problem with managing
| large documents [0]. I tried to introduce multiple improvements
| of performance, but it is very ungrateful project - change in one
| place affects many things at the same time. I am shocked, how
| many projects are still using it. For example, open-sourced
| Notabase [1]. My 4+ weeks with Slate.js completely killed
| motivation, and I was only thinking to put a whole project to
| litter.
|
| In the result of being unhappy, I switched to Draft.js. It was
| 2020, and I was eager to try it out, so I did. Sadly, in 2020
| there was also the last release [2]. Initially, I didn't like how
| it works. I preferred the Slate data model. Also, the draft.js
| project felt not maintained at that time (by looking at commits
| activity, issues and pull-requests). It is written in the Flow
| which I detest. I spent few weeks to try "merge" the draft.js and
| sentry with doing a "rewrite" to TypeScript. Obviously, quickly I
| realized myself it is stupid idea.
|
| Then, I took a look at ReMirror. Yet another problem that was
| struggling with maintenance and active contributors. It is based
| on ProseMirror, so I thought it is better choice than previous.
| ReMirror is overly complex for simple things. It was hard to find
| any help - neither by googling examples nor via ReMirror's
| Discord (it was dead silence there).
|
| After that, I have found information about the TipTap. Back then,
| there was only provided support for Vue.js. Fortunately, it was
| that time, when they have promised the v2 with React support. I
| skipped it to wait for the new version.
|
| Maybe, a raw ProseMirror with React? Yep, tried it, but I wasn't
| very happy of the result. I knew the TipTap v2 will be released
| and there were already existing projects that were using
| ProseMirror behind the scene, for example: Outline's rich-
| markdown-editor[3]. It has tons of built-in components that I had
| with Slate. I was extremely happy about it, because "everything
| what I needed" was there - typical bold, italic, code, code
| block, quote, multi-level list and even table editing. Really
| awesome piece of code! However, authors decided they are opting
| for TipTap and they have archived repository on GitHub, which
| means officially the project is dead.
|
| I had no time to test Quill.js. It looked interesting, but it has
| noticeable poor development pace, and it looks a dead project
| with many bugs.
|
| Currently, I am using the TipTap v2 and I can't say how happy I
| am now. I guess I will stick with it for longer. However, I know
| the journey to find the best Rich Text Editor has not ended
| :sweat-emoji:. There are more alternatives, for example Stylo [4]
| that I've found in this week.
|
| [0] Try to copy the contents of
| https://www.slatejs.org/examples/huge-document and paste it back.
| In a result, my Firefox on Macbook M1 hangs.
|
| [1]: https://notabase.io/
|
| [2]: https://github.com/facebook/draft-js/releases/tag/v0.11.7
|
| [3]: https://github.com/outline/rich-markdown-editor
|
| [4]: https://stylojs.com/
| gadders wrote:
| What does Ashby actually do as a company? It might be my locked
| down corporate network but I can't find a description anywhere.
| kyawzazaw wrote:
| A lot of companies use it currently as a job application
| submission. At least from what I know.
|
| I guess they have a product that is similar to lever or
| greenhouse atm
| Onewildgamer wrote:
| Really. I couldn't find it either for a good 10 minutes. I went
| through all the links painfully and got to careers and there
| they have some glimpse into their precious company.
|
| > _What we 're building At Ashby, we're on a mission to help
| professionals excel at their jobs with software. We believe
| current software is barely scratching the surface and the most
| promising productivity improvements haven't materialized yet.
|
| We're starting with a suite of products that help talent
| leaders, recruiters, and managers excel at hiring. Prior to
| starting Ashby, our Co-Founder and CEO, Benji, experienced the
| limitations of current products first hand. This experience has
| created a relentless focus to solve recruiting's toughest
| problems with powerful and delightful software._
| seumars wrote:
| Glad to see Tiptap getting more attention. I've used 1.0 and 2.0
| and they've both been great to work with. However one GIANT
| roadblock in the project I was working on was the inability to
| create custom inline components, like say a link with inline
| buttons for removing/changing the url. I believe there still
| isn't support for this type of functionality.
| samwillis wrote:
| If I follow you, I think this is unfortunately a limitation of
| ProseMirror witch is the underling library TipTap is built on.
| From memory they haven't completed it due to issues with how
| browsers handle text cursors in online nodes.
|
| It's a year since I last tried something similar and I think I
| ended up layering elements on top of where I wanted them from
| outside the editable element in combination with marks.
|
| Don't take my word for it though as a little out of practice
| with TipTap, it and ProseMirror are awesome though!
| lewisjoe wrote:
| > "To us, Prosemirror stood out as the most powerful solution. We
| wouldn't have needed any third-party dependencies (except for a
| React integration) and would have been able to define our
| document schema from the ground up. We didn't go with it because
| it took a lot of code to get started (even the official
| ProseMirror guides state this) and defining our custom schema,
| while powerful, was not worth the effort since we didn't have
| many custom requirements."
|
| Custom schema is not just powerful but also essential for cross
| platform rich text editing/rendering. For example most rich text
| editors that work really well on the web is almost always broken
| in some way in a native android/ios app. Why? usually we ignore
| the schema and dump a black box json/html as rendering format and
| then deal with editing issues with that format when we actually
| port the app to mobile platforms.
|
| For me it makes sense to just go with markdown or a very
| customizable rich text schema if it's worth it - so that rich
| text editing works smoothly across platforms.
| mxstbr wrote:
| We were using Slate at Spectrum[0] back in 2017/2018, eventually
| switched to DraftJS due to cross-browser issues but that was
| honestly equally frustrating to use and support across many
| browsers.
|
| In hindsight, we should've just had a GitHub-style markdown
| editor: https://mxstbr.com/thoughts/tech-choice-regrets-at-
| spectrum
|
| It sounds like the situation has improved since then! I'll
| definitely try Tiptap if I ever need to build another RTE.
|
| [0]: https://github.com/withspectrum/spectrum
| dividedbyzero wrote:
| I guess that's pretty hard to get right on the first try
| though. Use WYSIWYG and you have to deal with all the
| complexity and risks that involves; use markdown with some
| quality-of-life features on top any you may turn off users who
| expect a Microsoft Word experience. Depending on the app that
| isn't an easy decision.
|
| That said, I haven't had to make that decision for a long time.
| Markdown editors have become noticeably friendlier, perhaps the
| difference isn't that big anymore and I'm out of date?
___________________________________________________________________
(page generated 2022-02-11 23:02 UTC)