# Text Editor

> Integrate a rich text editor in your application to let users take formatted notes. Learn how to save content locally or in Firebase.

https://docs.pandasuite.com/essentials/components/text-editor/

**The Text Editor allows your users to take notes effectively and interactively directly within your application.**

This feature is ideal for:

- **E-learning applications**: allow learners to annotate their courses
- **Personal journals**: provide a space for free expression
- **Note-taking apps**: create rich notes with formatting
- **Advanced forms**: capture detailed responses

> **Info: Content persistence**
>
> The editor content **is not saved automatically**. To keep notes between
> sessions, you must set up a persistence solution: locally with the
> [Datastore](https://docs.pandasuite.com/essentials/data/datastore/) or remotely via
> [Firebase](https://docs.pandasuite.com/essentials/integrations/save-user-data-in-firebase/).

[Image: Text editor with a toolbar for bold, italic, strikethrough, link, undo and redo, and the word HELLO typed in italics]

## Insert the Text Editor

To integrate the text editor into your project:

1. Go to the **Components** tab.
2. Select and insert the **Rich Text Editor** component.
3. Drag and drop the component to the desired location on your interface.

## Style options

The text editor offers a multitude of options to customize the style and appearance of the text, to adapt the interface to the visual identity of your application.

[Image: Rich Text Editor on a Garden notes screen: Toolbar on Yes and the Header, Style, Color, Align, Clean and History options enabled, framed]

To use these options:

1. In the component properties, click **Yes** to enable the **Toolbar**.
2. Select the elements to display on the toolbar:
   - **Header**: Choice of size and format for titles.
   - **Style**: Bold, italic, underline.
   - **Block**: Quote, code.
   - **Media**: Adding images or videos.
   - **List**: Creating bullet or numbered lists.
   - **Script**: Superscript or subscript.
   - **Indent**: Increase or decrease indentation.
   - **Direction**: Aligning text to the left, right, or center.
   - **Color**: Selecting text or background color.
   - **Font**: Choice of font family.
   - **Align**: Aligning text within the block.
   - **Clean / History**: Options to clean formatting or undo/redo changes.

You can also set a **Default Text** and use data binding to link the content of the editor to a variable or another property in your application.

## Triggers

Here is the list of available triggers from the component:

- **Validated**: fires when the editor content is validated (manually or if **Auto validation** is enabled).
- **Targeted**: fires when the editor gains focus (is targeted by the user).
- **Blurred**: fires when the editor loses focus (the user clicks outside the editor).

## Persist content between sessions

By default, editor content is not saved. To keep it between sessions, two options are available:

### Local storage (Datastore)

Ideal for personal notes without cross-device synchronization.

1. Create a [Datastore](https://docs.pandasuite.com/essentials/data/datastore/) with a **Key / Value** property (for rich content) or **Text** (for simple text).
2. Enable **Auto validation** in the editor properties.
3. On the **Validated** trigger, use **Interact with a data source → Datastore → Create/Edit data (local)** and set the value with the editor's **Content**.
4. On screen load, use **Interact with a component → Text Editor → Set Content** passing the value from your database.

> **Info: Limitations**
>
> Local data is tied to the publication link and browser profile. It will not be
> found in private browsing or after app uninstallation.

### Remote storage (Firebase)

Ideal for cross-device synchronization and cloud backup.

**Prerequisites**: [Firebase project](https://docs.pandasuite.com/essentials/integrations/create-a-firebase-project/) configured with **Firebase Session** component and active authentication.

1. On the **Validated** trigger, use **Interact with a data source → Firebase Session → Modify the data**. Set your saved note field as the **Target**, choose the **Function** **Set**, and use the editor's **Content** as the **Value**.
2. On screen load, use **Interact with a component → Text Editor → Set Content** passing the value from Firebase.

> **Info: Advantages and limitations**
>
> - **Advantages**: automatic synchronization, cloud backup, accessible after
>   reinstallation. - **Limitations**: requires internet connection and user
>   authentication.

## Interact with the Text Editor

Select a trigger object, click **Actions** and create a new action.

Choose your **trigger** (for example, on a simple tap) and the action **Interact with a component**.

Select your **Text Editor component. Here are the available actions:**

- **Validate**
- **Set Text**
- **Set Content** (preferred for rich content and when restoring saved notes)
- **Delete Text / Content**
- **Target Text**

By integrating the **Text Editor** into your application, you offer your users a powerful tool for creating and managing textual content. Thanks to its extensive customization and interactive options, you can create a user experience that is enriching and tailored to your specific needs.