Custom Umbraco 17 Property with Tiptap RTE and toolbar

Questions
1

Hi,

I’m trying to create a new custom property editor. I need to create it as a custom property for reasons that are hard to explain.

I’m using the <umb-input-tiptap> element to render the property editor. The property works as expected and I can save the value.

I want to add a toolbar to the editor but I can’t seem to figure out how to do this. I guess it must be possible in some way?

The UmbInputTiptapElement has a configuration property but I can’t find any information on if this can be used to configure a toolbar.

My property is based on this example.

2

Hi @andreasnylin

Welcome to the forum!

Yes, it’s doable - the toolbar comes from that configuration property you found.

<umb-input-tiptap> takes a UmbPropertyEditorConfigCollection (same config the built-in RTE data type builds up). Internally it pulls extensions and toolbar off it via getValueByAlias, so you just need to populate those two:

import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';

@state()
private _config = new UmbPropertyEditorConfigCollection([
  {
    alias: 'extensions',
    value: ['Umb.Tiptap.Bold', 'Umb.Tiptap.Italic', 'Umb.Tiptap.Link'],
  },
  {
    alias: 'toolbar',
    value: [[
      ['Umb.Tiptap.Toolbar.Bold', 'Umb.Tiptap.Toolbar.Italic'],
      ['Umb.Tiptap.Toolbar.Link', 'Umb.Tiptap.Toolbar.Unlink'],
    ]],
  },
]);

ts

<umb-input-tiptap .configuration=${this._config} value="..." @change=${this.#onChange}></umb-input-tiptap>

Couple of gotchas that catch people out:

  • toolbar is a three-level nested array - rows > groups > button aliases. The toolbar only renders if it’s got something in it (flat(2).length > 0), so a flat or empty array shows nothing.

  • A toolbar button only appears if its matching extension is enabled in extensions, so you need both.

  • Note the .configuration= property binding (the dot) rather than an attribute — it needs the actual collection object, not a string.

  • You don’t need to add Umb.Tiptap.RichTextEssentials yourself — the element prepends it automatically.

Easiest way to get the exact button aliases is to spin up a normal Tiptap RTE data type, configure the toolbar in the backoffice, and look at what it stores — then drop those same aliases into the arrays above.

(Researched with the help of AI)

Justin

3

Thanks! That’s exactly what I was looking for.