umbraco tiptap rte insert custom content

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Stefan Stankovic 15 posts 142 karma points

19 hours ago

I'm trying to implement a custom extension for the new RTE (Tiptap). This is how my manifest:

{
  "type": "tiptapToolbarExtension",
  "kind": "button",
  "alias": "Tiptap.Toolbar.SoftHyphen",
  "name": "Soft Hyphen",
  "api": "/App_Plugins/CustomExtensions/softHyphenTiptap.js",
  "meta": {
    "alias": "softHyphen",
    "icon": "icon-brush",
    "label": "Soft Hyphen"
  }
}

This is my extension:

import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';

export default class KwSoftHyphenTiptapExtensionApi extends UmbTiptapToolbarElementApiBase {
    override execute(editor?: Editor) {
        editor?.commands.insertContent("&shy;")
    }
}

The extension inserts to the selected place, but the & symbol has been encoded.

View:

enter image description here

The source code:

enter image description here

The same happens if you use some HTML such as < mark >, but an example from their support page with < h1 > tag works.