chore(use-case): add documentation for the wrex use case

CMS-1088

Author: Fafnor

docs/javascript/assets/use-case-wrex-toolbar-item.png

@@ -191,6 +191,120 @@ window.lumapps.customize(({ targets, components, render, placement, constants })
 });
 ```
 
+## Add new button on the rich text editor toolbar (widget RTE, article or event)
+
+![Use case wrex button](./assets/use-case-wrex-toolbar-item.png "Use case wrex button")
+
+In this use case, you'll probably want to have a new button on the rich text editor toolbar allowing you to insert specific elements from an external provider.
+
+```js
+window.lumapps.customize(({
+    targets,
+    components,
+    render,
+    placement
+}) => {
+    const { DropdownSection, DropdownItem, RawHTML } = components;
+
+    const onVideoButtonClick = async (context) => {
+        // It will open a dialog with the component in it
+        context.openWrexConfigurationDialog({
+            componentToRender:  RawHTML({ html: '<p>My HTML for my iframe configuration</p>' })
+        });
+
+        // Set the element attributes to be inserted on dialog confirmation button click
+        context.setWrexIframeAttributes({
+            src: 'https://lumapps.com',
+            title: 'Lumapps',
+            provider: 'my-website',
+        });
+    };
+
+    const onImageButtonClick = async (context) => {
+        context.openWrexConfigurationDialog({
+            componentToRender: RawHTML({ html: '<p>My HTML for my image configuration</p>' })
+        });
+        
+        context.setWrexImageAttributes({
+            images: [{
+                id: '1234',
+                src: 'https://picsum.photos/id/17/367/267',
+                width: 367,
+                height: 267,
+                alt: 'Some alt text',
+            }, ],
+        });
+    };
+
+    render({
+        placement: placement.UNDER,
+        target: targets.WREX_TOOLBAR,
+        toRenderWithContext: (context) => {
+            return DropdownSection({
+                children: [
+                    DropdownItem({
+                        title: 'My videos',
+                        icon: 'video-account',
+                        onClick: () => onVideoButtonClick(context),
+                    }),
+                    DropdownItem({
+                        title: 'My images',
+                        icon: 'image-area',
+                        onClick: () => onImageButtonClick(context),
+                    }),
+                ],
+            });
+        },
+    });
+});
+```
+### Use case information
+
+**openWrexConfigurationDialog** Function
+
+Open the configuration dialog and allows you to define his content.
+
+| Parameter | Description | Is required? | Option type | Default Value |
+|-----------|------|----------|---------|-------------|
+| `configuration` | Configuration options | Yes | object | `{}` |
+| `configuration.componentToRender` | The component to render inside the dialog | Yes | Component | `undefined` |
+| `configuration.isLoading` | Whether the dialog should be in a loading state | No | boolean | `false` |
+
+**setWrexIframeAttributes** Function
+
+Allows you to define the data of the iframe to insert
+
+*Note: calling this function will not insert an iframe, the insertion is done through the configuration dialog*
+
+| Parameter | Description | Is required? | Option type | Default Value |
+|-----------|------|----------|---------|-------------|
+| `attributes` | Configuration options | Yes | object | `{}` |
+| `attributes.src` | The url of the page to embed | Yes | string | `undefined` |
+| `attributes.srcDoc` | The html content of the iframe | No | string | `undefined` |
+| `attributes.title` | The title of the iframe, used for accessibility | No | string | `undefined` |
+| `attributes.provider` | The name of the provider of the iframe, used to identify an iframe | No | string | `undefined` |
+
+**setWrexImageAttributes** Function
+
+Allows you to define the data of the image to insert
+
+*Note: calling this function will not insert an image, the insertion is done through the configuration dialog*
+
+| Parameter | Description | Is required? | Option type | Default Value |
+|-----------|------|----------|---------|-------------|
+| `attributes` | Configuration options | Yes | object | `{}` |
+| `attributes.title` | The caption of the image group | No | string | `undefined` |
+| `attributes.images` | The image(s) to display | Yes | Image[] | `[]` |
+
+**Image** Object
+
+| Parameter | Description | Is required? | Option type | Default Value |
+|-----------|------|----------|---------|-------------|
+| `src` | The image url | Yes | string | `''` |
+| `alt` | The image alt text, should describe the image for accessibility purpose | No | string | `''` |
+| `height` | The image height (in px) | No | integer | `undefined` |
+| `width` | The image width (in px) | No | integer | `undefined` |
+
 ## Disabling bookmarks
 
 Bookmarks can be disabled in order to avoid them to be displayed by adding the following line of JavaScript to your site.