Tiptap: Community Extensions

Created on 1 Sep 2020 · 6Comments · Source: ueberdosis/tiptap

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

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

Roadmap

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

[x] Build a proof of concept
[x] 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.

feature request

Source

hanspagel

🎉24 ❤8 👍7 👀3 🚀3 😄3

Most helpful comment

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 on 5 Sep 2020

👍7 🎉1

All 6 comments

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

ramsane on 5 Sep 2020

👍7 🎉1

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.

ramsane on 3 Oct 2020

Increasing the collection with

Custom Link from https://github.com/ueberdosis/tiptap/issues/783#issue-672739256 (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,
        ]
      },
    }
  }