Skip to content

Commit 5d34e56

Browse files
authored
Minor corrections
1 parent 81b854c commit 5d34e56

File tree

1 file changed

+13
-17
lines changed
  • 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor

1 file changed

+13
-17
lines changed

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,41 @@ description: Information on how to work with Tiptap extensions in the rich text
44

55
# Extensions
66

7-
The Rich Text Editor (RTE) in Umbraco is based on the open source editor [Tiptap](https://tiptap.dev/).
7+
The Rich Text Editor (RTE) in Umbraco is based on the open-source editor [Tiptap](https://tiptap.dev/).
88

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.
9+
Out of the box, Tiptap has limited capabilities and everything is an extension by design. Basic text formatting features such as bold, italic, and 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.
1210

11+
Using the same extension points, this article will show you how to add a custom extension to the rich text editor.
1312

1413
## Native Tiptap extensions
1514

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-
15+
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 [pro extensions](https://tiptap.dev/docs/guides/pro-extensions) available for commercial subscriptions.
1816

1917
### Tiptap extension types
2018

2119
There are two types of extension: `tiptapExtension` and `tiptapToolbarExtension`.
2220

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.
21+
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 and spell-checking.
2422

25-
The `tiptapToolbarExtension` extension is used to make a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions).
23+
The `tiptapToolbarExtension` extension adds a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions).
2624

2725

28-
## Adding an native extension
26+
## Adding a native extension
2927

3028
{% hint style="info" %}
31-
This example assumes that you will be creating an Umbraco package using the Vite/Lit/TypeScript set-up.
29+
This example assumes that you will be creating an Umbraco package using the Vite/Lit/TypeScript setup.
3230
You can learn how to do this [Vite Package Setup](../../../../../customizing/development-flow/vite-package-setup.md) article.
3331
{% endhint %}
3432

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.
33+
In this example, you 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.
3634

37-
First, you will need to install both the Task List and Task Item extensions from the npm registry.
35+
1. Install both the Task List and Task Item extensions from the npm registry.
3836

3937
```
4038
npm install @tiptap/extension-task-list @tiptap/extension-task-item
4139
```
4240

43-
Next, you will need to create the code to register the native Tiptap extensions in the rich text editor.
41+
2. Create the code to register the native Tiptap extensions in the rich text editor.
4442

4543
```js
4644
import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
@@ -52,7 +50,7 @@ export default class UmbTiptapTaskListExtensionApi extends UmbTiptapExtensionApi
5250
}
5351
```
5452

55-
Next, you will need to create the toolbar action to invoke the Task List extension.
53+
3. Create the toolbar action to invoke the Task List extension.
5654

5755
```
5856
import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap';
@@ -67,7 +65,6 @@ export default class UmbTiptapToolbarTaskListExtensionApi extends UmbTiptapToolb
6765

6866
Once you have the above code in place, they can be referenced in the [package manifest](../../../../../extending/property-editors/package-manifest.md) file.
6967

70-
7168
{% code title="App_Plugins/MyTiptapTaskList/umbraco-package.json" lineNumbers="true" %}
7269
```json
7370
{
@@ -101,5 +98,4 @@ Once you have the above code in place, they can be referenced in the [package ma
10198
```
10299
{% endcode %}
103100

104-
Upon restarting Umbraco, the new extension and toolbar action should be available to use in the Tiptap data type configuration settings.
105-
101+
Upon restarting Umbraco, the new extension and toolbar action will be available in the Tiptap Data Type configuration settings.

0 commit comments

Comments
 (0)