RichTextEditor

Write formatted HTML with a toolbar, optional variables and preview.

Category: Forms and selection
Import: @neural-ui/core/rich-text-editor
Selector: neu-rich-text-editor

import { NeuRichTextEditorComponent } from '@neural-ui/core/rich-text-editor';

Usage

Bind the HTML string through value. Toolbar commands operate on the editor selection; variables inserts application-defined placeholders. showPreview renders a read-only preview. maxPastedImageBytes limits pasted images; imageRejected reports rejected content. Validate and sanitize rich content again at your application boundary before storing or rendering it elsewhere.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Description

Variables

Neural UI

Current value: "<p>Neural UI</p>"

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Description

Variables

Neural UI

Current value: "<p>Neural UI</p>"

Events: 0

disabled

readonly

invalid

showPreview

minHeight

Advanced options · 13

<neu-rich-text-editor
  [value]="value()"
  (valueChange)="value.set($event)"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [showPreview]="false"
  [size]="'sm'"
  [minHeight]="'180px'"
  [previewLabel]="'Preview'"
  [labels]="labels()"
  [variables]="['customer', 'reference']"
  [variablesLabel]="'Variables'"
  [variablesAriaLabel]="'Available variables'"
  (valueCommitted)="record('valueCommitted', $event)"
  (imageRejected)="record('imageRejected', $event)"
  [label]="'Description'"
  [placeholder]="'Write here…'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const value = signal("<p>Neural UI</p>");

export const labels = signal({
  "toolbar": "Rich text editor",
  "formatGroup": "Text formatting",
  "listsGroup": "Lists",
  "insertGroup": "Insert",
  "clearGroup": "Clear",
  "bold": "Bold",
  "italic": "Italic",
  "underline": "Underline",
  "unorderedList": "Bullet list",
  "orderedList": "Numbered list",
  "addLink": "Add link",
  "addImageUrl": "Add image by URL",
  "clearFormat": "Clear formatting",
  "linkUrlPrompt": "Link URL",
  "linkTextPrompt": "Link text",
  "imageUrlPrompt": "Image URL",
  "imageAltPrompt": "Alternative text",
  "imageAltFallback": "Image",
  "pastedImageAlt": "Pasted image"
});

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

editorId · string

In Source: define editorId with this type and use [editorId]="editorId" (or editorId() for a signal).

errors · readonly ValidationError.WithOptionalFieldTree[]

In Source: define errors with this type and use [errors]="errors" (or errors() for a signal).

labels · Partial<NeuRichTextEditorLabels>

In Source: define labels with this type and use [labels]="labels" (or labels() for a signal).

variables · readonly string[]

In Source: define variables with this type and use [variables]="variables" (or variables() for a signal).

State and events

Accessibility and keyboard

Tab navigates toolbar controls and the editable region. Native text editing and selection shortcuts work inside the editor.

Key	Action
`Tab`	Move through toolbar controls and the editable region.
`Enter`	On a toolbar button, apply its action. Inside the editable region, normal text-editing behaviour applies.
`Space`	On a toolbar button, apply its action. Inside the editable region, normal text-editing behaviour applies.
`Ctrl / Meta + C / X / V`	Use native copy, cut and paste in the editable region.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents interaction with this control.
`editorId`	`string`	`inject(NeuIdGenerator).getId('neu-rich-text-editor-')`Derived default	`[editorId]`	Stable id shared by the editable region, its label and descriptions.
`errorMessage`	`string`	`''`	`[errorMessage]`	Visible error message associated with the field.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`hint`	`string`	`''`	`[hint]`	Application-supplied descriptive help text.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`label`	`string`	`''`	`[label]`	Visible label naming the field or action.
`labels`	`Partial<NeuRichTextEditorLabels>`	`{}`	`[labels]`	Localized toolbar groups, commands and link/image prompts. Omitted fields retain package defaults.
`maxPastedImageBytes`	`number`	`1_500_000`	`[maxPastedImageBytes]`	Maximum size in bytes for an image pasted into the editor.
`minHeight`	`string`	`'180px'`	`[minHeight]`	CSS minimum height of the editable region, including its unit.
`pending`	`boolean`	`false`	`[pending]`	Form state indicating that asynchronous validation is pending.
`placeholder`	`string`	`'Write here...'`	`[placeholder]`	Text shown when the field has no selected value.
`previewLabel`	`string`	`'Preview'`	`[previewLabel]`	Visible label of the formatted-content preview disclosure.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the applied value visible but prevents user edits.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`showPreview`	`boolean`	`false`	`[showPreview]`	Show a read-only formatted preview of the editor value.
`size`	`NeuRichTextEditorSize`	`'md'`	`[size]`	Control size. The accepted scale or numeric unit is specified by its type.
`touched`	`boolean`	`false`	`[touched]`	Form state indicating that the control has been visited.
`variables`	`readonly string[]`	`[]`	`[variables]`	Application-defined placeholder names available for insertion.
`variablesAriaLabel`	`string`	`'Available variables'`	`[variablesAriaLabel]`	Accessible or visible label for the variable controls.
`variablesLabel`	`string`	`'Variables'`	`[variablesLabel]`	Accessible or visible label for the variable controls.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`value`	`string`	`''`	`[(value)]`	HTML string edited by this control.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`imageRejected`	`NeuRichTextImageRejectedEvent`	`(imageRejected)="onImageRejected($event)"`	Reports a pasted image rejected by the configured size or content rules.
`touch`	`void`	`(touch)="onTouch($event)"`	Notifies the form that the control has been touched; not a value change.
`valueCommitted`	`string`	`(valueCommitted)="onValueCommitted($event)"`	Reports a completed edit. Inspect its payload type: some controls emit the value, while InlineEditor emits previousValue and value.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuRichTextEditorCommandTypeScript

import type { NeuRichTextEditorCommand } from '@neural-ui/core/rich-text-editor';

// Public declaration (reference only)
type NeuRichTextEditorCommand = 'bold' | 'italic' | 'underline' | 'insertUnorderedList' | 'insertOrderedList' | 'removeFormat';

NeuRichTextEditorLabelsTypeScript

import type { NeuRichTextEditorLabels } from '@neural-ui/core/rich-text-editor';

// Public declaration (reference only)
interface NeuRichTextEditorLabels {
  addImageUrl: string;
  addLink: string;
  bold: string;
  clearFormat: string;
  clearGroup: string;
  formatGroup: string;
  imageAltFallback: string;
  imageAltPrompt: string;
  imageUrlPrompt: string;
  insertGroup: string;
  italic: string;
  linkTextPrompt: string;
  linkUrlPrompt: string;
  listsGroup: string;
  orderedList: string;
  pastedImageAlt: string;
  toolbar: string;
  underline: string;
  unorderedList: string;
}

NeuRichTextEditorSizeTypeScript

import type { NeuRichTextEditorSize } from '@neural-ui/core/rich-text-editor';

// Public declaration (reference only)
type NeuRichTextEditorSize = 'sm' | 'md' | 'lg';

NeuRichTextImageRejectedEventTypeScript

import type { NeuRichTextImageRejectedEvent } from '@neural-ui/core/rich-text-editor';

// Public declaration (reference only)
interface NeuRichTextImageRejectedEvent {
  file: File;
  maxBytes: number;
  reason: 'size';
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-border-focus`	Focused control border	Shared by other Core consumers; scope the override.	`var(--neu-primary)`
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-50`	Subtle brand surface for hover and focus states	Shared by other Core consumers; scope the override.	`#eff6ff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-primary-light`	Light brand shade; outline and ghost Button text in the dark theme	Shared by other Core consumers; scope the override.	`#339dff`