Comment by hanspagel | Hacker News Reader

Comment by hanspagel | Hacker News Reader

Thanks for posting the new documentation on HN! Co-creator here.

tiptap v1 was pretty popular (more than 6M downloads) and an amazing community formed around it. It’s used in GitLab, Nextcloud, Statamic … and tons of other popular apps. But it was built 3 years ago, coupled to Vue, and had an awful documentation.

We couldn’t help but work on a new version over the last months and basically incorporated all the feedback that came up over the last years. We’ve been in a private beta for 4 months now, with sponsors and regular contributors. Now, we’re in public beta and can’t would like to hear what you think!

Here are a few things you can do with tiptap v2:

- Use with Vanilla JS, React, Vue, Alpine, Svelte …

- Bring your own markup and CSS

- Use Markdown shortcuts

- Render Vue or React components inside the editor content

- Use Vanilla JavaScript to render interactive things inside the editor

- Add collaborative editing capabilities

- Build offline-first apps

- Add autocompletes, for example for @mentions

- Use it with Tailwind CSS

- Automatically fix typographic mistakes (optional, as everything else)

- Add resizable tables

- …

Here are a few links to get started:

- Repository: https://github.com/ueberdosis/tiptap

- What’s tiptap/why it’s special: https://blog.ueber.io/post/tiptap-public-beta/

- Discord: https://discord.gg/WtJ49jGshW

Can I build a Typora-like editing experience? Specifically, I want nodes where the visibility depends on the caret position. This requires mutating the DOM of the editable area in response to cursor movement, which wreaks havoc on a lot of the existing WYSIWYG editors.

Sure, that’s possible!

Was wondering what makes this different form prosemirror but it looks like it uses it, why would I use this instead? For sure pm is hard at first but once you get the system it's like a new superpower.

How Tiptap does HTML cleaning and sanitizing from different browsers? E.g. edit rich text tables in IE and after this editing them in Safari could be broken. This has been an acute pain for all WYSIWYG editors for the last 20 years. Especially ProseMirror shines to solve this problem as it encodes everything to Markdown.

Tiptap builds on ProseMirror, so it uses the same approach.

The default way to persist a ProseMirror doc is JSON. There is a way to serialize that to Markdown via the prosemirror-markdown package, but not every node can be represented as plain text. You can also use html without a non core package since each node has to define a toDOM and parseDOM method.

A straightforward example showing how to set things up to replace a textarea on a web form would be really nice.

Reply on news.ycombinator.com