Editor

Rich text editor with Duo-themed Froala toolbar presets.

Examples

Usage

Editor (duo-editor) is published as a separate package: @duo/editor. It is not included in @duo/ui. Install and import it in addition to the usual Duo packages.

It wraps Froala for formatted HTML. Toolbar icons render as <duo-icon>. Load tokens and @duo/ui before the editor so --duo-* variables and icons resolve.

import "@duo/tokens/css";
import "@duo/styles";
import "@duo/ui";
import "@duo/editor";
import "@duo/editor/css";

A default Froala key is included. Override config.key only if a product needs a different license.

Do

  • Pick a preset (minimal, media, or full) instead of assembling a toolbar from scratch.
  • Merge extra Froala options through config when you need language, height, or upload endpoints.
  • Use AIOptions when the product exposes generate/rewrite actions; listen for aiOptionSelected.

Don’t

  • Don’t use this for single-line or unformatted input — use a native field.
  • Don’t skip @duo/ui; toolbar glyphs are <duo-icon> and need the icon map.
  • Don’t pass an empty config.key unless you intend to show Froala’s unlicensed banner.

Presets

PresetTools
minimal (default)Bold, italic, underline, lists, link. Image paste off.
mediaMinimal plus image and video.
fullUndo/redo, headings, strike, clear formatting, AI, media, fullscreen, HTML view.

To add tools that are not in a preset (for example tables), pass a full config.toolbarButtons object. The table plugin is bundled; include insertTable in the button list. Deep-merge does not replace arrays, so send the complete toolbar you want.

Events

  • initialized — editor ready
  • change / blur — current HTML in event.detail
  • aiOptionSelected — { option: string }