Switching Rich Text Editors, Part 1: Picking Tiptap | Hacker News Reader

Switching Rich Text Editors, Part 1: Picking Tiptap

ashbyhq.com

80 pointsdbbk53 comments

> 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

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

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

And this is their current implementation, for those interested: https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/asset...

> "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.

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 Überdosis 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.

Thanks gilli! Great to have you in the community. (Tiptap co-creator here)

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.

I try to argue for this approach as much as possible but it rarely gets through to product people.

A slick interface and the age old adage "don't make me think" are hard to argue with. ;)

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.

> 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.

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.

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.

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

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?

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!

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

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.

That page just freezes the browser using Brave on Android.

Weird, works very responsively for me on Firefox Nightly on Android.

Yeah it's strange, it locks up the whole browser and makes it really hard to exit the tab.

That’s actually an issue with the syntax highlighting in brave. :-(

It's possible. I write with a lot of bullet points and formatting, so I might be hitting one of their edge cases.

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...

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.

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.

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).

There's a demo for links here https://tiptap.dev/api/marks/link

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.

Great to hear! (Co-creator here)

What does Ashby actually do as a company? It might be my locked down corporate network but I can't find a description anywhere.

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.

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

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.

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.

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.

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.

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!

They seem to be enterprise focused. I guess they want to pick their customers, not the other way around.

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.

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!

You can use the bubble menu for it!

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?

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

> 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…

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.

Tiptap is great, I made a few custom extensions for it to build an interstitial journaling app (https://heedful.app). The documentation is still lacking to some extent, but the source code is easy to understand.

Are all these editors based on contenteditable?

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Edit...

The prosemirror based ones are. I suspect the other ones are as well.

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.

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.

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/

Reply on news.ycombinator.com