Merge pull request #7235 from umbraco/style-select

Added steps to add style select to RTE toolbar

Author: eshanrnh

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/images/adding-style-select-to-toolbar.png

@@ -1,16 +1,30 @@
-# Style Menu
+# Style Select Menu
 
-A Style Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting.
+A Style Select Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting.
 
 ![Rich Text Editor cascading style menu](images/rte-tiptap-stylemenu.png)
 
 {% hint style="info" %}
-Any custom stylesheets associated with the Rich Text Editor will not auto generate a style menu in the toolbar.
+Any custom stylesheets associated with the Rich Text Editor will not auto generate a style select menu in the toolbar.
 {% endhint %}
 
-### Creating a Style Menu
+## Adding Style Select to Rich Text Editor
 
-In this article, you can find an example of how to set up a Style Menu using the package manifest file.
+To add Style Select to the Rich Text Editor:
+
+1. Go to **Settings**.
+2. Navigate to **Data Types**.
+3. Select the relevant Data Type.
+4. Drag **Style Select** from **Available Actions** into the **Toolbar** section.
+5. Click **Save**.
+
+Alternatively, while configuring an editor on a Document Type, you can drag **Style Select** from **Available Actions** into the **Toolbar** section.
+
+![Adding Style Select to the Rich Text Editor](images/adding-style-select-to-toolbar.png)
+
+## Creating a Style Select Menu
+
+In this article, you can find an example of how to set up a Style Select Menu using the package manifest file.
 
 {% code title="umbraco-package.json" %}
 ```json
@@ -72,35 +86,32 @@ In this article, you can find an example of how to set up a Style Menu using the
 ```
 {% endcode %}
 
-
-The `items` property defines the structure of the style menu. Each menu item has the following options:
+The `items` property defines the structure of the style select menu. Each menu item has the following options:
 
 - `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:
+- `data`: To configure the function of the style select menu item. The value has 3 optional properties:
   - `tag`: A [supported HTML tag](#supported-html-tags) name. This will be applied to the selected text.
   - `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 select menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article.
 
-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
+### 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: 
+Due to Tiptap’s strict rich-text schema, only supported HTML tags are allowed in the style select menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported:
 
 - `h1`
 - `h2`
 - `h3`
 - `h4`
 - `h5`
 - `h6`
--  `p`
+- `p`
 - `blockquote`
 - `code`
 - `codeBlock`

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

@@ -1,16 +1,30 @@
-# Style Menu
+# Style Select Menu
 
-A Style Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting.
+A Style Select Menu is a configurable extension that adds a cascading menu to the toolbar for applying text styles and formatting.
 
 ![Rich Text Editor cascading style menu](images/rte-tiptap-stylemenu.png)
 
 {% hint style="info" %}
-Any custom stylesheets associated with the Rich Text Editor will not auto generate a style menu in the toolbar.
+Any custom stylesheets associated with the Rich Text Editor will not auto generate a style select menu in the toolbar.
 {% endhint %}
 
-### Creating a Style Menu
+## Adding Style Select to Rich Text Editor
 
-In this article, you can find an example of how to set up a Style Menu using the package manifest file.
+To add Style Select to the Rich Text Editor:
+
+1. Go to **Settings**.
+2. Navigate to **Data Types**.
+3. Select the relevant Data Type.
+4. Drag **Style Select** from **Available Actions** into the **Toolbar** section.
+5. Click **Save**.
+
+Alternatively, while configuring an editor on a Document Type, you can drag **Style Select** from **Available Actions** into the **Toolbar** section.
+
+![Adding Style Select to the Rich Text Editor](images/adding-style-select-to-toolbar.png)
+
+## Creating a Style Select Menu
+
+In this article, you can find an example of how to set up a Style Select Menu using the package manifest file.
 
 {% code title="umbraco-package.json" %}
 ```json
@@ -72,34 +86,32 @@ In this article, you can find an example of how to set up a Style Menu using the
 ```
 {% endcode %}
 
-
-The `items` property defines the structure of the style menu. Each menu item has the following options:
+The `items` property defines the structure of the style select menu. Each menu item has the following options:
 
 - `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:
+- `data`: To configure the function of the style select menu item. The value has 3 optional properties:
   - `tag`: A [supported HTML tag](#supported-html-tags) name. This will be applied to the selected text.
   - `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 select menus will appear in the Rich Text Editor toolbar options, as described in the [Rich Text Editor Configuration](configuration.md) article.
 
-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
 
-#### Supported HTML tags
+Due to Tiptap’s strict rich-text schema, only supported HTML tags are allowed in the style select menu, _(arbitrary markup will be excluded)._ The following HTML tag names are supported:
 
-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`
+- `p`
 - `blockquote`
 - `code`
 - `codeBlock`