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

Insert the Text Editor

To integrate the text editor into your project:

1. Go to the Components tab.
2. Select and insert the 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.

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 (PandaSuite Database)

Ideal for personal notes without cross-device synchronization.

1. Create a PandaSuite Database 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 → PandaSuite Database → Create/Edit data (local) and set the value with the editor’s Content.
4. On screen load, use Act on a component → Text Editor → Set Content passing the value from your database.

Remote storage (Firebase)

Ideal for cross-device synchronization and cloud backup.

Prerequisites: Firebase project configured with Firebase Session component and active authentication.

1. On the Validated trigger, use Interact with a data source → Firebase Session → Modify data (function Set) with the editor’s Content.
2. On screen load, use Act on a component → Text Editor → Set Content passing the value from Firebase.

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 Act on 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.