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 of rich text editor
Corner radius4 px


PropertyValue(s)Default value
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
Text decoration
  • Bold
  • Italics
  • Underline
  • Strikethrough
Text color
  • Night
  • Stone
  • Neem
  • Jal
  • Mirch
  • Tawak
Text alignment
  • Left
  • Center
  • Right
List formatting
  • Bulleted list
  • Numbered list
  • Right
Insert options
  • Attachment
  • Image
  • Personalization
  • Link
  • More (extendable option)
Read only
  • True
  • False


Hover on options bar items

Hovering on options bar items Hovering on options bar items

Selection 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 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 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 personalized content

Users can add hyperlinks using the link button from the options bar.

Adding hyperlinks Adding hyperlinks

Users can edit the hyperlink using the options popover which can be revealed by clicking on the link.

Editing the hyperlink Editing the hyperlink

In the options popover -

  • Clicking the link opens it in a new tab.
  • Clicking on the edit button opens the same modal through which a link is added.
  • Clicking on the delete button removes the link and the displayed text altogether.

  • Was this page helpful?