Tiptap as a new rich text editor

[iOvergaard]

We are going to implement Tiptap as a new property editor UI in Umbraco 15. The reason for selecting Tiptap is that it checks off all the boxes related to licensing and extensibility. We have also not been able to find another editor that supports working inside a Shadow DOM.

It also supports our goal to deprecate and eventually remove TinyMCE: umbraco/Announcements#20

The aim is that the editor will support the same custom actions as TinyMCE: Media picker/upload, Embed, Link picker, and Block picker.

We are also checking to see what other features need to be supported:

• Has the time come to update the toolbar configuration as the structure of the data format behind the configuration is flat and most modern editors support a multi-level toolbar?
• What exactly is the relationship between a "plugin" and a toolbar action button? Could that be defined in a manifest?
• Rich text editor stylesheets are rather simplistic and flat/one-level only, how do we best support them?
• Should drag & drop media upload be its own thing rather than connected with the media picker, i.e. should it have a toggle of its own?
• We can now finally support "inline mode" again (hovering toolbar when you select text), but should that toolbar be configurable on its own?
• Are we overlooking anything else?

Plan

15.0

• Add Tiptap as a property editor ui
• Add HTML support
• Add Media Picker
• Add Embed plugin
• Add Link Picker
• Add Block Picker
• Create new toolbar designer with rows and groups
• Add configuration to (de)select extensions

15.1

• Support for rich text editor stylesheets
• Improve the "Insert table" UI
• Improve the "edit table" functionality
• Inline mode (hide toolbar, buttons appear when elements are selected)
• Ability to resize images/objects

Update 2024-09-30

We have now been implementing this editor for the better part of a month. There are of course a lot of differences between TinyMCE and Tiptap, however, I think we have managed to get all the specialized inputs to work -- all the pickers and blocks. I have added a plan to this discussion to indicate what we expect to have ready and when. All the features mentioned under "15.0" should be ready to test in the Release Candidate coming out October 2nd.

[simonech]

Would be good if some features that TinyMCE moved to "premium" plans were brought back, especially the "paste from Word" feature that cleaned all the garbage in the html and converted list properly.
I never even heard of tiptap before so might be already implemented, but worth mentioning.

[iOvergaard]

I tried our latest feature branch out and it looks ok for Word and HTML:

tiptap-copypaste-demo.mp4

Here's what the HTML content looks like for TinyMCE:

tinymce-html-copypaste.mp4

[DanDiplo]

@iOvergaard But what does the HTML source look like? One of the issues you get pasting from Word or external HTML pages is that it brings back inline styles or badly-formed HTML that is either not valid, or has semantic or accessibility issues. So you want it to retain the general structure of the pasted document but strip out extraneous formatting / tags.

[iOvergaard]

@DanDiplo I agree, the formatting has been a problem before. It seems like Tiptap is a lot less accepting of different elements. It seems it strips away any element that is currently not loaded/recognized through a plugin. For instance, if I paste a table into an editor that doesn't have the table extension, then it strips away all table-related elements such as table, tr, and td and leaves the text there. For better or for worse, TinyMCE would leave any HTML that you pasted in apart from the elements, you specifically disallowed, but Umbraco's setup was/is very unrestricted towards allowed HTML elements in TinyMCE.

There is a fine balance here to get Tiptap to accept the same markup as TinyMCE does without letting it be too open, which leads to the horror examples we saw from pasting Word text into TinyMCE.

This is the HTML generated from pasting from Word in the video:

<h1>This is a Heading 1</h1>
<p>
  Here is a paragraph with a
  <a
    target="_blank"
    rel="noopener noreferrer nofollow"
    href="https://www.umbraco.com/"
    >link</a
  >.
</p>
<p>&nbsp;</p>
<h2>This is a Heading 2</h2>
<p>Here is another paragraph with an accompanying table:</p>
<table style="min-width: 75px">
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td colspan="1" rowspan="1"><p>Name</p></td>
      <td colspan="1" rowspan="1"><p>Value</p></td>
      <td colspan="1" rowspan="1"><p>Comments</p></td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1"><p>Entry 1</p></td>
      <td colspan="1" rowspan="1"><p>Value 1</p></td>
      <td colspan="1" rowspan="1"><p>Lorem</p></td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1"><p>Entry 2</p></td>
      <td colspan="1" rowspan="1"><p>Value 2</p></td>
      <td colspan="1" rowspan="1"><p>Ipsum</p></td>
    </tr>
  </tbody>
</table>

[c9mb]

@iOvergaard

There is a fine balance here to get Tiptap to accept the same markup as TinyMCE does without letting it be too open, which leads to the horror examples we saw from pasting Word text into TinyMCE.

The question I'd have there is: Who's making that decision? - Umbraco, Developer, Editor ?

I've had times where I've needed to move an existing WordPress site and "just get it up and live" ASAP. Having TinyMCE accept whatever I throw at it (because I've intentionally configured it that way) allowed me to paste the horrible WP html - complete with its inline styles and other rubbish, and satisfy the immediate requirement.

In my experience, the problem with TinyMCE is not with the editor itself, but with the way it's configured by default and the difficulty in customizing that config. It can be done, but it's an awkward and unpleasant experience in the Umbraco environment - and adding "premium" features at a site level to match expectations of an existing WP site... not so much.

[simonech]

The problem with tiny now is that if I paste from Word, I get lots of mso attributes, styles and also lists are not converted to ul-li but stay as tabs.
This was not happening in the previous tiny used before.
We need to make sure tiptap works better, not just in the wysiwyg but also in the html code produced.

[c9mb]

I'm not sure they are directly comparable: https://www.tiny.cloud/tinymce-vs-tiptap/
You will apparently need to do a lot of work with the UI, and particularly in the area of Language translations.
I would think it important to maintain the TinyMCE UI and its functions, as not only are these expected by existing users, but are also common-place in other CMS platforms - most notably WordPress.
As with the previous poster, the lack of some 'premium' features in TinyMCE is one of its current limitations, but obviously that involves licensing.

[bielu]

WordPress dropped tinymce year ago... 😉 But yeah they implemented similar editor.

[DanDiplo]

I think there are two POVs to this - one for Editors and one for Developers:

As an Editor I want something that works in a way that I am familiar with e.g. similar toolbar to Word or Google Docs with same shortcuts. I want it to automatically clean-up Word or HTML I paste in and strip-out extraneous tags / inline styles. I want it to produce valid HTML that aligns with that in the site templates and won't break anything. I may want to embed things like Tweets or Soundcloud or other things, but only if it has been configured to allow this.

I'd like the layout in the editor to closely reflect what it would look like on the published site, where possible and reasonable.

As a Developer I want to ensure that Editors stick to the styles we give them and aren't able to "import" styles when they paste stuff. I want the HTML generated to be semantic and accessible.

I want to be able to extend the toolbar and add custom buttons that trigger custom functionality. I want good documentation on this. For instance, I'd love to be able to easily have a way of adding an "AI" rewriter to the toolbar that sends content to a local back endpoint where I can process it before returning it. Extensibility would be key for me. The ability to add 3rd party "community" plugins would be great.

I'd like control over things like images e.g. the ability to be able to specify that any images added always get assigned a specific class(es) however they are added.

I'd like control over the toolbar and to be able to have multiple different configurations for different types of content. I'd love to be able to limit the amount of content in an editor (whilst acknowledging that word counts are difficult with HTML).

I'd like native features of the browser, such as spellcheck and other extensions, to continue to work.

[simonech]

One thing that is probably obvious: if I switch a tinymce property to tiptap everything should work seamlessly.
I'm pointing this out because I've seen that tiptap has kind of blocks approach, and stores data in json format instead of just plain html.

[iOvergaard]

Agreed. Tiptap's default is JSON but it also supports outputting as HTML, which we use. The goal is to switch property editors without losing any content, but you will have to set up the toolbar again.

[jaandrews]

It would be nice to maintain support for "Umbraco:CMS:RichTextEditor:CustomConfig:style_formats" (or at least the functional equivalent). I regularly use it to control classes on the various elements and to apply headers, as it allows better organization of the classes/elements and more control over the elements they are allowed on. An example configuration I use for the current tinymce can be seen below.

[
  {
    "title": "Headings",
    "items": [
      {
        "title": "Header 1",
        "block": "h1"
      },
      {
        "title": "Header 2",
        "block": "h2"
      },
      {
        "title": "Header 3",
        "block": "h3"
      },
      {
        "title": "Header 4",
        "block": "h4"
      },
      {
        "title": "Header 5",
        "block": "h5"
      },
      {
        "title": "Header 6",
        "block": "h6"
      }
    ]
  },
  {
    "title": "Margins",
    "items": [
      {
        "title": "No Margin",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "noMargin"
      },
      {
        "title": "Margin Top Small",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "small-margin-top-1"
      },
      {
        "title": "Margin Top Medium",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "small-margin-top-1 medium-margin-top-2"
      },
      {
        "title": "Margin Top Large",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "small-margin-top-2 medium-margin-top-3"
      },
      {
        "title": "Margin Bottom Small",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "small-margin-bottom-1"
      },
      {
        "title": "Margin Bottom Medium",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "small-margin-bottom-1 medium-margin-bottom-2"
      },
      {
        "title": "Margin Bottom Large",
        "selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
        "classes": "small-margin-bottom-2 medium-margin-bottom-3"
      }
    ]
  },
  {
    "title": "Buttons",
    "items": [
      {
        "title": "Outline Button",
        "selector": "a",
        "classes": "outlineButton"
      },
      {
        "title": "Primary Button",
        "selector": "a",
        "classes": "primaryButton"
      },
      {
        "title": "Round Button",
        "selector": "a",
        "classes": "roundButton"
      },
      {
        "title": "Square Button",
        "selector": "a",
        "classes": "squareButton"
      }
    ]
  },
  {
    "title": "Images",
    "items": [
      {
        "title": "Float Left",
        "selector": "img",
        "classes": "floatLeft"
      },
      {
        "title": "Float Right",
        "selector": "img",
        "classes": "floatRight"
      }
    ]
  },
  {
    "title": "Text",
    "items": [
      {
        "title": "Small Text",
        "inline": "span",
        "classes": "smallText"
      },
      {
        "title": "Large Text",
        "inline": "span",
        "classes": "largeText"
      },
      {
        "title": "Eyebrow",
        "selector": "h1,h2,h3,h4,h5,h6,p,a",
        "classes": "eyebrow"
      },
      {
        "title": "Light Grey Text",
        "selector": "h1,h2,h3,h4,h5,h6,p,a",
        "classes": "lightGreyText"
      },
      {
        "title": "White Text",
        "selector": "h1,h2,h3,h4,h5,h6,p,a",
        "classes": "whiteText"
      }
    ]
  }
]

Doesn't have to be handled the same way, but being able to group styles is important as the toolbar will quickly become bloated if separate buttons are needed for each option.

[iOvergaard]

Hi there, I generally agree. The style_formats option is a native TinyMCE option and was ever really just proxied from Umbraco's side. However, it's the same option we are using to bring "Rich Text Editor Styles" to TinyMCE, where we try and be smart about mapping classes and elements back into this format with a lot of limitations.

Tiptap doesn't come with anything like this out of the box. We plan to support some form of RTE Styles again, but we have an opportunity to fix the inherent issues with the old format as well. Meanwhile, Tiptap provides ample support to build whatever UI you would like in the toolbar, and we enable you to do that through Umbraco's extension system with a new type called tiptapToolbarExtension. It is available to use in the release candidate of V15, but we are still in the process of writing the documentation for it.

[Myster]

I see TipTap also has non-free tiers. https://tiptap.dev/pricing
How confident are we that we won't hit similar issues to those we have with TinyMCE?

[bielu]

Based on experience closer to 0 😆

[leekelleher]

@Myster Tiptap's pricing structure is for their own cloud offering, which has a range of commercial extensions/features.
For Umbraco CMS, we are using the main Tiptap Editor component, installed as a standalone npm package, (free, under the MIT license).

Will this change in future? That's an unknown, we certainly hope not, but we do have the confidence enough to know that we can handle replacing any backoffice components with viable alternatives.

[jureles]

Hi there! I'm currious if you guys were considering Lexical as a replacement candidate. It is being developed by Facebook and they are using it in their products which is a guarantee they will be investing in it. At the same time it is open sourced and free - I don't think there will be any apetites by Facebook to change license down the road. Indeed, this is not an editor but a more a platfrm for building editors - which would require a lot of development. Unlike TinyMCE, Lexical (like Tiptap) also uses custom DOM to represent its content which might not be a perfect match for Umraco, but provides better exensibility and content manipulation/filtering capabilities.

I just wanted to hear if you considered this product as well, and if so, what deterred you from using choosing it as the replacement for TinyMCE.

[iOvergaard]

Yes, we went through quite a few: Quill, Lexical, CKEditor, EditorJS, Froala, Trix, and more. We disqualified most of them due to either licensing or lack of extensibility. A few refused to run inside our web components in the new Backoffice, Lexical was one of them, whereas others had to be "monkey patched" to run. This was very surprising to me.

Tiptap was one of the few that just ran, and it hit all of the other parameters on licensing and extensibility. We would like the one Umbraco ships with by default to be of as little of a nuisance as possible and partly abstracted away UI-wise. However, you will be able to hook into the Editor instance of Tiptap in your plugins, the plugins are registered as an Umbraco extension.

That being said, one of the benefits of the V14 split of property editors into schema and UI is that anyone can bring their own rich text editor and still utilize the HTML and block capabilities of the rich text editor system on the server.