Rich text editor
Rich text editor is a text box in which users can decorate and format the text.
Rich text editor also provides options to add media and other useful entities such as inserting images, adding hyperlinks, etc.
Structure
| Property | Value(s) |
|---|---|
| Corner radius | 4 px |
Configurations
| Property | Value(s) | Default value |
|---|---|---|
| Heading | - | |
| Text decoration | - | |
| Text color | Night | |
| Text alignment | Left | |
| List formatting | - | |
| Insert options | - | |
| Read only | False |
Usage
Hover on options bar items
Hovering on options bar items Selection on options bar items
Selection on options bar items Inserting images
Users can insert images in the rich text editor using the image button from the options bar.
Inserting images Deleting images
Users can delete any previously added images by either using backspace or from the selection popover. As the name suggests, selection popover appears when a user clicks on the image.
Deleting images Adding personalized content
Rich text editor comes with the option to add personalized content. This can be done either by using the personalize button from the options bar or by pressing ’@’ on the keyboard. Doing so will open a dropdown with custom options. The selected option then appears as a chip which can be cleared from the editor if needed.
Adding personalized content Adding hyperlinks
Users can add hyperlinks using the link button from the options bar.
Adding hyperlinks Editing the hyperlink
Users can edit the hyperlink using the options popover which can be revealed by clicking on the link.
Editing the hyperlink In the options popover -