Igloo branding


The text editor is a multiline text component with text formatting capabilities. It supports bold, italic, underline, strikethrough and markdown shortcuts as well as adding links and lists.


To install @igloo-ui/text-editor in your project, you will need to run the following command using npm:

npm install @igloo-ui/text-editor

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/text-editor


Then to use the component in your code just import it!

import TextEditor from '@igloo-ui/text-editor';

<TextEditor placeholder="Enter text here" />;


autoFocusbooleanWhether or not the editor should be focused on load
classNamestringAdd a class name to the rich text editor
dataTeststringAdd a data-test tag for automated tests
disabledbooleanWhether or not the rich text editor is disabled
errorbooleanWhether or not the right text editor has an error
initialStatestringThe initial editor state, which will preload the editor with content
isClearablebooleanWhether or not the text can be cleared
isPrivatebooleanWhether or not the rich text editor should have a private look
maxLengthnumberThe maximum amount or characters allowed (Automatically adds a character limit indicator)
messagesMessagesMessages for buttons, tooltips and text to localize the text editor
onBlur(editor?: LexicalEditor) => voidThe event that is called when the editor loses focus
onChange(editorState: string) => voidThe event that is called when the editor text changes
onFocus(editor?: LexicalEditor) => voidThe event that's called when the editor gains focus
onContentIsEmpty(empty: boolean) => voidThe event that's called for validate if the editor is empty
placeholderstringThe placeholder text to display in the editor
primaryBtnReactElement<any, string | JSXElementConstructor<any>>Usually the save button for the editor
readOnlybooleanWhether or not the editor is read only
showToolbarbooleanWhether or not the editor should display the toolbar
showToolbarOnFocusbooleanWhether or not the editor should display the toolbar when editor is focused
canSelectLinkOpeningModebooleanWether the user can choose the opening mode of a link