Tiptap RTE updates for v15.4 and v16.0 #7092
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| # Style Menu | ||
|
|
||
| A Style Menu is configurable extension to add a cascading menu to the toolbar, to apply text styles and formatting. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
|  | ||
|
|
||
| {% hint style="info" %} | ||
| Any custom stylesheets associated with the Rich Text Editor will not auto generate a style menu in the toolbar. | ||
| {% endhint %} | ||
|
|
||
| ### Creating a Style Menu | ||
|
|
||
| In this article you can find an example of how to setup a Style Menu using the package manifest file. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| {% code title="umbraco-package.json" %} | ||
|
Check warning on line 15 in 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md
|
||
| ```json | ||
| { | ||
| "name": "Name of your package", | ||
| "alias": "My.Package", | ||
| "extensions": [ | ||
| { | ||
| "type": "tiptapToolbarExtension", | ||
| "kind": "styleMenu", | ||
| "alias": "MyCustom.Tiptap.StyleMenu", | ||
| "name": "My Custom Tiptap Style Menu", | ||
| "meta": { | ||
| "alias": "myCustomStyleMenu", | ||
| "icon": "icon-palette", | ||
| "label": "My custom styles" | ||
| }, | ||
| "items": [ | ||
| { | ||
| "label": "Headings", | ||
| "items": [ | ||
| { | ||
| "label": "Heading 2", | ||
| "data": { "tag": "h2" }, | ||
| "appearance": { "icon": "icon-heading-2" } | ||
| }, | ||
| { | ||
| "label": "Heading 3", | ||
| "data": { "tag": "h3" }, | ||
| "appearance": { "style": "font-size: large;" } | ||
| }, | ||
| { | ||
| "label": "Heading 4", | ||
| "data": { "tag": "h4" } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Attributes", | ||
| "items": [ | ||
| { | ||
| "label": "Classes", | ||
| "data": { "class": "foo" } | ||
| }, | ||
| { | ||
| "label": "IDs", | ||
| "data": { "id": "bar" } | ||
| }, | ||
| { | ||
| "label": "Mixed", | ||
| "data": { "tag": "span", "class": "foo", "id": "bar" } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ``` | ||
| {% endcode %} | ||
|
|
||
|
|
||
| The "`items`" property defines the structure of the style menu. Each menu item has the following options. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| - `label`: _(required)_ The label of the menu item. This supports localization keys. | ||
| - `appearance`: This defines the appearance of the menu item. The value has 2 optional properties: | ||
| - `icon`: To prefix an icon to the menu item. | ||
| - `style`: To apply CSS rules to the menu item. | ||
| - `data`: To configure the function of the style menu item. The value has 3 optional properties: | ||
| - `tag`: A supported HTML tag name, _(see below)_, this will be applied to the selected text. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| - `class`: Applies a class attribute with the defined class name to the containing tag of the selected text. | ||
| - `id`: Applies an ID attribute with the defined ID value to the containing tag of the selected text. | ||
| - `separatorAfter`: When `true`, it will add a line separator after the menu item. | ||
| - `items`: To enable a cascading menu, an array of nested menu items may be added. | ||
|
|
||
|
|
||
| Once configured, all custom style menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article. | ||
|
|
||
|
|
||
| #### Supported HTML tags | ||
|
|
||
| Since the Tiptap has a strict rich-text schema, only supported HTML tags can be used in the style menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `blockquote`, `code`, `codeBlock`, `div`, `em` (italic), `ol`, `strong` (bold), `s` (strike-through), `span`, `u` (underline) and `ul`. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| # Style Menu | ||
|
|
||
| A Style Menu is configurable extension to add a cascading menu to the toolbar, to apply text styles and formatting. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
|  | ||
|
|
||
| {% hint style="info" %} | ||
| Any custom stylesheets associated with the Rich Text Editor will not auto generate a style menu in the toolbar. | ||
| {% endhint %} | ||
|
|
||
| ### Creating a Style Menu | ||
|
|
||
| In this article you can find an example of how to setup a Style Menu using the package manifest file. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| {% code title="umbraco-package.json" %} | ||
|
Check warning on line 15 in 16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md
|
||
| ```json | ||
| { | ||
| "name": "Name of your package", | ||
| "alias": "My.Package", | ||
| "extensions": [ | ||
| { | ||
| "type": "tiptapToolbarExtension", | ||
| "kind": "styleMenu", | ||
| "alias": "MyCustom.Tiptap.StyleMenu", | ||
| "name": "My Custom Tiptap Style Menu", | ||
| "meta": { | ||
| "alias": "myCustomStyleMenu", | ||
| "icon": "icon-palette", | ||
| "label": "My custom styles" | ||
| }, | ||
| "items": [ | ||
| { | ||
| "label": "Headings", | ||
| "items": [ | ||
| { | ||
| "label": "Heading 2", | ||
| "data": { "tag": "h2" }, | ||
| "appearance": { "icon": "icon-heading-2" } | ||
| }, | ||
| { | ||
| "label": "Heading 3", | ||
| "data": { "tag": "h3" }, | ||
| "appearance": { "style": "font-size: large;" } | ||
| }, | ||
| { | ||
| "label": "Heading 4", | ||
| "data": { "tag": "h4" } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Attributes", | ||
| "items": [ | ||
| { | ||
| "label": "Classes", | ||
| "data": { "class": "foo" } | ||
| }, | ||
| { | ||
| "label": "IDs", | ||
| "data": { "id": "bar" } | ||
| }, | ||
| { | ||
| "label": "Mixed", | ||
| "data": { "tag": "span", "class": "foo", "id": "bar" } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ``` | ||
| {% endcode %} | ||
|
|
||
|
|
||
| The "`items`" property defines the structure of the style menu. Each menu item has the following options. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| - `label`: _(required)_ The label of the menu item. This supports localization keys. | ||
| - `appearance`: This defines the appearance of the menu item. The value has 2 optional properties: | ||
| - `icon`: To prefix an icon to the menu item. | ||
| - `style`: To apply CSS rules to the menu item. | ||
| - `data`: To configure the function of the style menu item. The value has 3 optional properties: | ||
| - `tag`: A supported HTML tag name, _(see below)_, this will be applied to the selected text. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| - `class`: Applies a class attribute with the defined class name to the containing tag of the selected text. | ||
| - `id`: Applies an ID attribute with the defined ID value to the containing tag of the selected text. | ||
| - `separatorAfter`: When `true`, it will add a line separator after the menu item. | ||
| - `items`: To enable a cascading menu, an array of nested menu items may be added. | ||
|
|
||
|
|
||
| Once configured, all custom style menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article. | ||
|
|
||
|
|
||
| #### Supported HTML tags | ||
|
|
||
| Since the Tiptap has a strict rich-text schema, only supported HTML tags can be used in the style menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `blockquote`, `code`, `codeBlock`, `div`, `em` (italic), `ol`, `strong` (bold), `s` (strike-through), `span`, `u` (underline) and `ul`. | ||
eshanrnh marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.