Community Extensions

Hi everyone!

I’ve seen a ton of helpful Gists with custom extensions for Tiptap. It’s amazing what you all come up with! 🥰

Unfortunately, we don’t have the capabilities to maintain all of them in the core packages, but it’s sad to see those gems hidden in some Gists. What if you - the community - could easily provide those as separate npm packages?

Advantages of packages

• New extensions can be added without a need for approval
• Extensions can be updated and improved by everyone
• You can come up with extensions we don’t even understand (👋 Math integration)
• There is more room for “experimental” extensions, that aren’t stable enough for the core package
• We can have multiple flavors of extensions (e. g. an Image node including the Upload to S3 mechanic)

Proof of Concept

I built a tiny proof of concept for superscript and subscript, see here: https://github.com/hanspagel/tiptap-extension-superscript https://github.com/hanspagel/tiptap-extension-subscript

Usage:

$ yarn add tiptap-extension-superscript

import { Superscript } from 'tiptap-extension-superscript'

new Editor({
  extensions: [
    new Superscript(),
  ],
})

Examples of community Gists, code snippets, PRs and ideas

Tiptap v2

• Indent https://github.com/ueberdosis/tiptap/issues/1036#issue-864043820
• Resizeable images: #1283
• YouTube, Vimeo, Loom iFrame: https://github.com/ueberdosis/tiptap/issues/819#issuecomment-836534702
• YouTube Lite embeds https://gist.github.com/forresto/733db674953fb7dd4f46ab131137423d
• Search and Replace https://github.com/ueberdosis/tiptap/pull/2075
• Alternative collaborative editing approach: https://github.com/nextcloud/text/blob/84d253545ebd9268b7dd15a123a1eec9165baef8/src/extensions/Collaboration.js

Tiptap v1

• KaTeX integration: https://github.com/ueberdosis/tiptap/issues/179
• Resizeable images: #740, https://gist.github.com/mvind/e89948b9ab1c1f2557805bf3c9ea7f6c, https://gist.github.com/zachjharris/a5442efbdff11948d085b6b1406dfbe6
• Image with figure + figcaption: https://github.com/ueberdosis/tiptap/issues/573#issuecomment-622098184
• Image with upload: https://github.com/ueberdosis/tiptap/issues/89#issuecomment-443138315, https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
• Pasting images https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521 and/or #508
• :emoji: Support https://github.com/ueberdosis/tiptap/issues/547#issuecomment-686283945
• Giphy integration https://github.com/ueberdosis/tiptap/issues/547#issuecomment-686283945
• Code Block with manual language selection https://gist.github.com/philippkuehn/32fa6e0a08b47ac7225d7d1c65e8cc7e
• Variables https://github.com/ueberdosis/tiptap/issues/329#issuecomment-496447265
• YouTube embeds https://github.com/ueberdosis/tiptap/issues/112#issuecomment-444491358
• Iframe, TextAlign, Indent, LineHeight, FormatClear, TextColor, TextHighlight, Preview, Print, Fullscreen, SelectAll, FontType, FontSize, CodeView https://github.com/Leecason/element-tiptap/tree/master/src/utils 🤯
• Global drag handle https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
• Heading with anchors https://github.com/ueberdosis/tiptap/issues/621#issue-573868827
• Heading anchor links extension #662
• Video https://github.com/ueberdosis/tiptap/pull/726/files
• Comment with other examples!

Not needed with Tiptap v2

• Alignment: https://github.com/ueberdosis/tiptap/pull/544
• Link with target Attribute https://github.com/ueberdosis/tiptap/issues/161#issuecomment-694781612
• Text Color and Background extensions, and additional supporting of the “type” attribute to OrderedList https://github.com/ueberdosis/tiptap/pull/880
• Character Limit https://github.com/ueberdosis/tiptap/issues/629#issuecomment-690972208
• Realtime collaboration with Y.js https://github.com/yjs/yjs-demos/tree/master/tiptap/src
• TextColor extension https://gist.github.com/Aymkdn/9f993c5cfe8476f718c4fd2fd7bda1f0

Roadmap

I think we’d need to do a few things to make that easier for everyone:

• Build a proof of concept
• Ask for feedback
• Figure out testing
• Publish an extension boilerplate
• Write a guide
• Add a list of community extensions to the README

Your feedback

What do you all think? Would you be up to contribute a community extension?

Feel free to post links to Gists of others you’d love to see published as a package.

[wenerme]

Here is some extensions https://github.com/wenerme/wode/tree/main/apps/demo/src/components/TipTapWord/extensions

• classNames, column-count, margin-{left,right,top,bottom}, line-height, font-size, text-indent, letter-spacing
• video, indent
• slash command
• markdown parse, render

Online demo here

https://wode.vercel.app/tiptap

[davesag]

Two features I am looking for in a Rich Text Editor are

1. Tracked Changes (not necessarily real-time collaboration, but being able to see - Google Docs / MS Word / Apple Pages style - the changes others have made. and a way to ‘accept’ one, or all changes, and
2. Commenting (again ala Google Docs / MS Word / Apple Pages)

Commercial RTEs support this kind of thing and it would be amazing to have examples of this in TipTap. Maybe I’ve just not found the right extensions tho.