@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    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 template variables (e.g. {{firstName}}) rendered as non-editable inline chips. In the serialised output they appear as {{key}} tokens that a downstream template engine can resolve.

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

    <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
    Index

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

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

    disabled: InputSignal<boolean> = ...

    Whether the editor is disabled (non-interactive).

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

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

    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.

    <ui-rich-text-editor [imageHandler]="uploadToS3" />
    
    isEmojiPickerOpen: WritableSignal<boolean> = ...

    Whether the emoji picker dropdown is open.

    isFocused: WritableSignal<boolean> = ...

    Whether the editor area is currently focused.

    isPlaceholderPickerOpen: WritableSignal<boolean> = ...

    Whether the placeholder picker dropdown is open.

    isSourceMode: WritableSignal<boolean> = ...

    Whether the editor is in raw source editing mode.

    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.

    mode: InputSignal<RichTextEditorMode> = ...

    Editing mode.

    • 'html' — WYSIWYG editing (default)
    • 'markdown' — Markdown source editing with live preview
    placeholder: InputSignal<string> = ...

    Placeholder text shown when the editor is empty.

    placeholderInserted: OutputEmitterRef<RichTextPlaceholder> = ...

    Fired when a placeholder chip is inserted.

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

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

    placeholderSearchTerm: WritableSignal<string> = ...

    Search term for filtering the placeholder picker.

    readonly: InputSignal<boolean> = ...

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

    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).

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

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

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

    Resolved toolbar button metadata from the actions list.

    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 {{key}} tokens in both modes.

    Methods

    • Parameters

      Returns 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

    • 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