|
| 1 | +--- |
| 2 | +description: Information on how to work with Tiptap extensions in the rich text editor. |
| 3 | +--- |
| 4 | + |
| 5 | +# Extensions |
| 6 | + |
| 7 | +The Rich Text Editor (RTE) in Umbraco is based on the open source editor [Tiptap](https://tiptap.dev/). |
| 8 | + |
| 9 | +Out of the box, Tiptap has limited capabilities, everything is an extension, by design. Basic text formatting features such as bold, italic, underline are their own extensions. This offers great flexibility, making the rich text editor highly configurable. The implementation in Umbraco offers a wide range of built-in extensions to enhance the Tiptap editor capabilities. |
| 10 | + |
| 11 | +Using the same extensions points, this article will show you how to add a custom extension to the rich text editor. |
| 12 | + |
| 13 | + |
| 14 | +## Native Tiptap extensions |
| 15 | + |
| 16 | +Tiptap has a library of supported native extensions. You can find a list of these extensions on the [Tiptap website](https://tiptap.dev/docs/editor/extensions/overview). While many of these are open source, there are also several [pro extensions](https://tiptap.dev/docs/guides/pro-extensions) available for commercial subscriptions. |
| 17 | + |
| 18 | + |
| 19 | +### Tiptap extension types |
| 20 | + |
| 21 | +There are two types of extension: `tiptapExtension` and `tiptapToolbarExtension`. |
| 22 | + |
| 23 | +The `tiptapExtension` extension is used to register a native [Tiptap Extension](https://tiptap.dev/docs/editor/extensions/), these will enhance the capabilities of the rich text editor itself. For example, to enable text formatting, drag-and-drop functionality, spell checking, etc. |
| 24 | + |
| 25 | +The `tiptapToolbarExtension` extension is used to make a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions). |
| 26 | + |
| 27 | + |
| 28 | +## Adding an native extension |
| 29 | + |
| 30 | +{% hint style="info" %} |
| 31 | +This example assumes that you will be creating an Umbraco package using the Vite/Lit/TypeScript set-up. |
| 32 | +You can learn how to do this [Vite Package Setup](../../../../../customizing/development-flow/vite-package-setup.md) article. |
| 33 | +{% endhint %} |
| 34 | + |
| 35 | +In this example, we will take the native Tiptap open source extension [Task List](https://tiptap.dev/docs/editor/extensions/nodes/task-list). Then register it with the rich text editor and add a toolbar button to invoke the Task List action. |
| 36 | + |
| 37 | +First, you will need to install both the Task List and Task Item extensions from the npm registry. |
| 38 | + |
| 39 | +``` |
| 40 | +npm install @tiptap/extension-task-list @tiptap/extension-task-item |
| 41 | +``` |
| 42 | + |
| 43 | +Next, you will need to create the code to register the native Tiptap extensions in the rich text editor. |
| 44 | + |
| 45 | +```js |
| 46 | +import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap'; |
| 47 | +import { TaskItem } from '@tiptap/extension-task-item'; |
| 48 | +import { TaskList } from '@tiptap/extension-task-list'; |
| 49 | + |
| 50 | +export default class UmbTiptapTaskListExtensionApi extends UmbTiptapExtensionApiBase { |
| 51 | + getTiptapExtensions = () => [TaskList, TaskItem]; |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +Next, you will need to create the toolbar action to invoke the Task List extension. |
| 56 | + |
| 57 | +``` |
| 58 | +import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap'; |
| 59 | +import type { Editor } from '@umbraco-cms/backoffice/external/tiptap'; |
| 60 | +
|
| 61 | +export default class UmbTiptapToolbarTaskListExtensionApi extends UmbTiptapToolbarElementApiBase { |
| 62 | + override execute(editor?: Editor) { |
| 63 | + editor?.chain().focus().toggleTaskList().run(); |
| 64 | + } |
| 65 | +} |
| 66 | +``` |
| 67 | + |
| 68 | +Once you have the above code in place, they can be referenced in the [package manifest](../../../../../extending/property-editors/package-manifest.md) file. |
| 69 | + |
| 70 | + |
| 71 | +{% code title="App_Plugins/MyTiptapTaskList/umbraco-package.json" lineNumbers="true" %} |
| 72 | +```json |
| 73 | +{ |
| 74 | + "name": "My Tiptap Task List", |
| 75 | + "version": "1.0.0", |
| 76 | + "extensions": [ |
| 77 | + { |
| 78 | + "type": "tiptapExtension", |
| 79 | + "alias": "My.Tiptap.TaskList", |
| 80 | + "name": "My Task List Tiptap Extension", |
| 81 | + "api": "/App_Plugins/MyTiptapTaskList/task-list.tiptap-api.js", |
| 82 | + "meta": { |
| 83 | + "icon": "icon-thumbnail-list", |
| 84 | + "label": "Task List", |
| 85 | + "group": "#tiptap_extGroup_interactive" |
| 86 | + } |
| 87 | + }, |
| 88 | + { |
| 89 | + "type": "tiptapToolbarExtension", |
| 90 | + "alias": "My.Tiptap.Toolbar.TaskList", |
| 91 | + "name": "My Task List Tiptap Toolbar Extension", |
| 92 | + "api": "/App_Plugins/MyTiptapTaskList/task-list.tiptap-toolbar-api.js", |
| 93 | + "meta": { |
| 94 | + "alias": "taskList", |
| 95 | + "icon": "icon-thumbnail-list", |
| 96 | + "label": "Task List" |
| 97 | + } |
| 98 | + } |
| 99 | + ] |
| 100 | +} |
| 101 | +``` |
| 102 | +{% endcode %} |
| 103 | + |
| 104 | +Upon restarting Umbraco, the new extension and toolbar action should be available to use in the Tiptap data type configuration settings. |
| 105 | + |
0 commit comments