Community Extensions

[hanspagel]

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
• 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 Indent Extension For Tiptap 2 (just want to share) #1036 (comment)
• Resizeable images: How I achieved image sizing, and a question about setNode (Low priority) #1283
• YouTube, Vimeo, Loom iFrame: Community Extensions #819 (comment)
• YouTube Lite embeds https://gist.github.com/forresto/733db674953fb7dd4f46ab131137423d
• Search and Replace Search and Replace #2075
• Alternative collaborative editing approach: https://github.com/nextcloud/text/blob/84d253545ebd9268b7dd15a123a1eec9165baef8/src/extensions/Collaboration.js

Tiptap v1

• KaTeX integration: KaTeX Integration #179
• Resizeable images: Using non-vue html constructor in custom node #740, https://gist.github.com/mvind/e89948b9ab1c1f2557805bf3c9ea7f6c, https://gist.github.com/zachjharris/a5442efbdff11948d085b6b1406dfbe6
• Image with figure + figcaption: Embedding image in a figure element with a figcaption #573 (comment)
• Image with upload: Image upload from file system #89 (comment), https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
• Pasting images https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521 and/or Pasting an image #508
• :emoji: Support tiptap v2 #547 (comment)
• Giphy integration tiptap v2 #547 (comment)
• Code Block with manual language selection https://gist.github.com/philippkuehn/32fa6e0a08b47ac7225d7d1c65e8cc7e
• Variables Ability to insert variables, similar to suggestions #329 (comment)
• YouTube embeds Better Clarification in Docs for examples #112 (comment)
• 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 General block dragging feature #323 (comment)
• Heading with anchors Add IDs to headings and make "isActive" state work #621 (comment)
• Heading anchor links extension Text Anchor Extension For Jump Marks #662
• Video https://github.com/ueberdosis/tiptap/pull/726/files
• Comment with other examples!

Not needed with Tiptap v2

• Alignment: Alignment #544
• Link with target Attribute Add an attribute to link for target="_blank" #161 (comment)
• Text Color and Background extensions, and additional supporting of the "type" attribute to OrderedList Text Color and Background extensions, and additional supporting of the "type" attribute to OrderedList  #880
• Character Limit Chars limit / chars count #629 (comment)
• 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.

[ramsane]

I would love to. I am working for a project that involves rich content editor. I am trying to bring each feature one by one. Till now, I was able to get inline math and block level math integrations without any errors. There were few minor issues. But I was able to correct them.

I am more than happy to share it. But I am not writing any unit tests. Is it okay ?

[ramsane]

like this, there are so many places where the import sizes are huge. This increased just the editor component size in total. Is there any work around for this ?

This is an another example for such cases.

[andreasvirkus]

Increasing the collection with

• Custom Link from Auto Link when click Enter #783 (comment) (only enhancement on the existing Link currently is that it converts input as well instead of only paste links)

export class CustomLink extends Link {
  get schema() {
    return {
      attrs: {
        href: {
          default: null,
        },
        'data-link-type': {
          default: 'link',
        },
        target: {
          default: null,
        },
        rel: {
          default: null,
        },
        class: {
          default: 'oct-a',
        },
      },
      inclusive: false,
      parseDOM: [
        {
          tag: 'a[href]',
          getAttrs: (dom) => {
            return {
              href: dom.getAttribute('href'),
              target: dom.getAttribute('target'),
              rel: dom.getAttribute('rel'),
              'data-link-type': dom.getAttribute('data-link-type'),
            }
          },
        },
      ],
      toDOM: (node) => {
        return [
          'a',
          {
            ...node.attrs,
            target: '__blank',
            class: 'content-link',
            rel: 'noopener noreferrer nofollow',
          },
          0,
        ]
      },
    }
  }

[andreasvirkus]

Found a plugin that supports pasting images under #686 (comment) 👇

https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
and/or: #508

[andreasvirkus]

Leaving this here as a request: heading anchor links extension #662

[andreasvirkus]

Resizable image plugin: #740 (comment) (links to this gist)