Quick nav

TextEditor

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.

Version 0.7.11

Installation

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

Usage

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

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

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

API

Prop	Type	Default	Description
`autoFocus`	boolean		Whether or not the editor should be focused on load
`className`	string	-	Add a class name to the rich text editor
`dataTest`	string	-	Add a data-test tag for automated tests
`disabled`	boolean	-	Whether or not the rich text editor is disabled
`error`	boolean	-	Whether or not the right text editor has an error
`initialState`	string	-	The initial editor state, which will preload the editor with content
`isClearable`	boolean		Whether or not the text can be cleared
`isPrivate`	boolean	-	Whether or not the rich text editor should have a private look
`maxLength`	number	-	The maximum amount or characters allowed (Automatically adds a character limit indicator)
`messages`	Messages	-	Messages for buttons, tooltips and text to localize the text editor
`onBlur`	(editor?: LexicalEditor) => void	-	The event that is called when the editor loses focus
`onChange`	(editorState: string) => void	-	The event that is called when the editor text changes
`onFocus`	(editor?: LexicalEditor) => void	-	The event that's called when the editor gains focus
`onContentIsEmpty`	(empty: boolean) => void	-	The event that's called for validate if the editor is empty
`placeholder`	string	-	The placeholder text to display in the editor
`primaryBtn`	ReactElement<any, string \| JSXElementConstructor<any>>	-	Usually the save button for the editor
`readOnly`	boolean		Whether or not the editor is read only
`showToolbar`	boolean		Whether or not the editor should display the toolbar
`showToolbarOnFocus`	boolean		Whether or not the editor should display the toolbar when editor is focused
`canSelectLinkOpeningMode`	boolean		Wether the user can choose the opening mode of a link