Class UIRichTextEditor

Rich-text editor supporting basic formatting and placeholder insertion.

Supports two editing modes controlled by the mode input:

'html' (default) — WYSIWYG editing with a native contenteditable div and document.execCommand for formatting. Content is stored as HTML.
'markdown' — Plain-text Markdown editing in a <textarea> with a live HTML preview below. Formatting actions insert Markdown syntax. Content is stored as Markdown.

Placeholders are self-closing XML template blocks (e.g. <placeholder key="firstName" />) rendered as non-editable inline chips. A downstream template engine resolves them through the same block-provider path used by all other template blocks.

The editor exposes its content as a two-way [(value)] binding.

Example

<ui-rich-text-editor
  [(value)]="emailBody"
  [placeholders]="availablePlaceholders"
  ariaLabel="Email body"
/>

<ui-rich-text-editor
  mode="markdown"
  [(value)]="readmeContent"
  ariaLabel="README editor"
/>

Implements

OnInit
AfterViewInit

Constructors

constructor

new UIRichTextEditor(): UIRichTextEditor
Returns UIRichTextEditor

Properties

`Readonly`ariaLabel

ariaLabel: InputSignal<string> = ...

Accessible label forwarded to the editable region via aria-label.

`Readonly`blockEdited

blockEdited: OutputEmitterRef<RichTextTemplateBlockEvent> = ...

Fired when an existing template block is edited.

`Readonly`blockInserted

blockInserted: OutputEmitterRef<RichTextTemplateBlockEvent> = ...

Fired when a template block is inserted.

`Readonly`blockRemoved

blockRemoved: OutputEmitterRef<RichTextTemplateBlockEvent> = ...

Fired when a template block is removed.

`Readonly`compactToolbarActions

compactToolbarActions: InputSignal<readonly RichTextFormatAction[] | undefined> = ...

Optional compact-mode toolbar actions.

When omitted, compact presentation falls back to the built-in minimal toolbar set.

`Readonly`disabled

disabled: InputSignal<boolean> = ...

Whether the editor is disabled (non-interactive).

`Readonly`emojiCategories

emojiCategories: InputSignal<readonly EmojiCategory[]> = ...

Optional custom emoji categories for the inline emoji picker. When not provided the picker uses the default comprehensive emoji set.

`Readonly`imageHandler

imageHandler: InputSignal<RichTextImageHandler | undefined> = ...

Optional callback for handling pasted images.

When provided, the function receives the pasted image File and should return a Promise<string> resolving to a URL. The URL is then inserted as an <img> (HTML mode) or ![image](url) (Markdown mode).

When not provided, pasted images are embedded inline as base64 data: URIs.

Example

<ui-rich-text-editor [imageHandler]="uploadToS3" />

`Protected` `Readonly`isEmojiPickerOpen

isEmojiPickerOpen: WritableSignal<boolean> = ...

Whether the emoji picker dropdown is open.

`Protected` `Readonly`isFocused

isFocused: WritableSignal<boolean> = ...

Whether the editor area is currently focused.

`Readonly`isFullscreen

isFullscreen: WritableSignal<boolean> = ...

Whether the editor is in full-screen (full-window) mode.

`Protected` `Readonly`isPlaceholderPickerOpen

isPlaceholderPickerOpen: WritableSignal<boolean> = ...

Whether the placeholder picker dropdown is open.

`Protected` `Readonly`isSourceMode

isSourceMode: WritableSignal<boolean> = ...

Whether the editor is in raw source editing mode.

`Protected` `Readonly`isTablePickerOpen

isTablePickerOpen: WritableSignal<boolean> = ...

Whether the table size picker dropdown is open.

`Readonly`maxLength

maxLength: InputSignal<number | undefined> = ...

Optional maximum character count. When set, a character counter is shown below the editor. The count is based on the plain-text length of the content (HTML tags and Markdown syntax are excluded).

A value of 0 or undefined disables the limit.

`Readonly`mode

mode: InputSignal<RichTextEditorMode> = ...

Editing mode.

'html' — WYSIWYG editing (default)
'markdown' — Markdown source editing with live preview

`Readonly`placeholder

placeholder: InputSignal<string> = ...

Placeholder text shown when the editor is empty.

`Readonly`placeholderContext

placeholderContext: InputSignal<unknown> = ...

Sample context data used to derive the placeholder picker's shape.

When provided, the picker shows object keys and array item fields from this value instead of requiring a flat placeholder list. Array item fields are displayed with their collection path, e.g. lines[].description.

`Readonly`placeholders

placeholders: InputSignal<readonly RichTextPlaceholder[]> = ...

Available placeholder definitions. When non-empty a placeholder picker appears in the toolbar.

`Protected` `Readonly`placeholderSearchTerm

placeholderSearchTerm: WritableSignal<string> = ...

Search term for filtering the placeholder picker.

`Readonly`presentation

presentation: InputSignal<"compact" | "default"> = ...

Presentation style of the editor chrome.

'default' — full editor chrome with the standard toolbar.
'compact' — chat-style editor with a minimal floating toolbar.

`Readonly`readonly

readonly: InputSignal<boolean> = ...

Whether the editor is read-only (content visible but not editable).

`Readonly`sanitise

sanitise: InputSignal<boolean> = ...

Whether to sanitise HTML content before rendering.

When true (default) the editor strips dangerous elements (<script>, <iframe>, etc.), on* event handlers, javascript: URIs, and style attributes from all content — whether pasted, set via value(), or typed in source mode.

Set to false to allow arbitrary HTML. Only disable this for trusted users/roles (e.g. developers crafting bookmarklets or embed snippets).

Default

true

`Readonly`showMarkdownPreview

showMarkdownPreview: WritableSignal<boolean> = ...

Whether the Markdown preview pane is visible. Toggled by the preview toolbar button in Markdown mode.

`Readonly`splitDirection

splitDirection: InputSignal<"horizontal" | "vertical"> = ...

Layout of the markdown editor + preview split pane. Only meaningful when mode === 'markdown'.

'vertical' — textarea above, preview below (default).
'horizontal' — textarea left, preview right (side-by-side).

`Protected` `Readonly`tablePickerCols

tablePickerCols: WritableSignal<number> = ...

Columns currently highlighted in the table size picker.

`Protected` `Readonly`tablePickerRows

tablePickerRows: WritableSignal<number> = ...

Rows currently highlighted in the table size picker.

`Readonly`toolbarActions

toolbarActions: InputSignal<readonly RichTextFormatAction[]> = ...

Which formatting actions to show in the toolbar. Defaults to DEFAULT_TOOLBAR_ACTIONS.

`Protected` `Readonly`toolbarButtons

toolbarButtons: Signal<ToolbarButtonMeta[]> = ...

Resolved toolbar button metadata from the actions list.

`Readonly`value

value: ModelSignal<string> = ...

Content of the editor. Two-way bindable via [(value)].

In HTML mode this is an HTML string. In Markdown mode this is a Markdown string. Placeholder chips are serialised as self-closing XML template blocks in both modes.

Methods

`Protected`execAction

execAction(action: RichTextFormatAction, anchorEl?: Element): void
Parameters
- action: RichTextFormatAction
- OptionalanchorEl: Element
Returns void
- Defined in packages/ui-blocks/src/lib/rich-text-editor/rich-text-editor.component.ts:1221

ngAfterViewInit

ngAfterViewInit(): void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in packages/ui-blocks/src/lib/rich-text-editor/rich-text-editor.component.ts:1110

ngOnInit

ngOnInit(): void
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns void
Implementation of OnInit.ngOnInit
- Defined in packages/ui-blocks/src/lib/rich-text-editor/rich-text-editor.component.ts:1066

Class UIRichTextEditor

Example

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Returns UIRichTextEditor

Properties

ReadonlyariaLabel

ReadonlyblockEdited

ReadonlyblockInserted

ReadonlyblockRemoved

ReadonlycompactToolbarActions

Readonlydisabled

ReadonlyemojiCategories

ReadonlyimageHandler

Example

Protected ReadonlyisEmojiPickerOpen

Protected ReadonlyisFocused

ReadonlyisFullscreen

Protected ReadonlyisPlaceholderPickerOpen

Protected ReadonlyisSourceMode

Protected ReadonlyisTablePickerOpen

ReadonlymaxLength

Readonlymode

Readonlyplaceholder

ReadonlyplaceholderContext

Readonlyplaceholders

Protected ReadonlyplaceholderSearchTerm

Readonlypresentation

Readonlyreadonly

Readonlysanitise

Default

ReadonlyshowMarkdownPreview

ReadonlysplitDirection

Protected ReadonlytablePickerCols

Protected ReadonlytablePickerRows

ReadonlytoolbarActions

Protected ReadonlytoolbarButtons

Readonlyvalue

Methods

ProtectedexecAction

Parameters

Returns void

ngAfterViewInit

Returns void

ngOnInit

Returns void

Settings

On This Page

`Readonly`ariaLabel

`Readonly`blockEdited

`Readonly`blockInserted

`Readonly`blockRemoved

`Readonly`compactToolbarActions

`Readonly`disabled

`Readonly`emojiCategories

`Readonly`imageHandler

`Protected` `Readonly`isEmojiPickerOpen

`Protected` `Readonly`isFocused

`Readonly`isFullscreen

`Protected` `Readonly`isPlaceholderPickerOpen

`Protected` `Readonly`isSourceMode

`Protected` `Readonly`isTablePickerOpen

`Readonly`maxLength

`Readonly`mode

`Readonly`placeholder

`Readonly`placeholderContext

`Readonly`placeholders

`Protected` `Readonly`placeholderSearchTerm

`Readonly`presentation

`Readonly`readonly

`Readonly`sanitise

`Readonly`showMarkdownPreview

`Readonly`splitDirection

`Protected` `Readonly`tablePickerCols

`Protected` `Readonly`tablePickerRows

`Readonly`toolbarActions

`Protected` `Readonly`toolbarButtons

`Readonly`value

`Protected`execAction