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

    Interface RichTextEditorStrategy

    Strategy interface that encapsulates all format-specific editing logic.

    The rich-text editor component delegates to an implementation of this interface for every operation that differs between HTML and Markdown (or any future format).

    Implementations are plain classes — not Angular injectables — because they are instantiated directly by the component based on the mode input.

    interface RichTextEditorStrategy {
        previewLabel: string;
        sourceToggleLabel: string;
        applyLink(
            result: LinkDialogResult,
            existingAnchor: HTMLAnchorElement | null,
            savedRange: Range | null,
            ctx: RichTextEditorContext,
        ): void;
        createPlaceholderChip(placeholder: RichTextPlaceholder): HTMLElement;
        deserialiseContent(value: string, ctx: RichTextEditorContext): string;
        execAction(
            action: RichTextFormatAction,
            ctx: RichTextEditorContext,
        ): boolean;
        handlePaste(event: ClipboardEvent, ctx: RichTextEditorContext): void;
        refreshActiveFormats(
            ctx: RichTextEditorContext,
        ): ReadonlySet<RichTextFormatAction>;
        sanitiseHtml(html: string): string;
        serialiseContent(
            editorEl: HTMLDivElement,
            ctx: RichTextEditorContext,
        ): string;
    }
    Index

    Properties

    previewLabel sourceToggleLabel

    Methods

    applyLink createPlaceholderChip deserialiseContent execAction handlePaste refreshActiveFormats sanitiseHtml serialiseContent

    Properties

    previewLabel: string

    Label shown above the WYSIWYG preview in source mode. Both strategies use 'Preview'.

    sourceToggleLabel: string

    Label shown on the source-mode toggle button. HTML strategy: 'Edit HTML source' Markdown strategy: 'Edit Markdown source'

    Methods

    • Applies a link result (from the link dialog) at the saved selection position.

      Parameters

      • result: LinkDialogResult

        URL + display text from the dialog

      • existingAnchor: HTMLAnchorElement | null

        The <a> element being edited, or null for a new link

      • savedRange: Range | null

        The selection range saved before the dialog opened

      • ctx: RichTextEditorContext

      Returns void

    • Creates a placeholder chip DOM element for insertion into the editor.

      Parameters

      Returns HTMLElement

    • Takes a raw value string and returns HTML suitable for inserting into the editor's innerHTML.

      • HTML strategy: expands {{key}} tokens to chip markup.
      • Markdown strategy: converts Markdown → HTML, then expands {{key}} tokens.

      Parameters

      Returns string

    • Executes a formatting action (e.g. bold, heading, list).

      For HTML this maps to document.execCommand. For Markdown this wraps the selection with the appropriate syntax characters.

      Parameters

      Returns boolean

      true if the action was handled synchronously and the caller should sync + refresh, or false if the action is deferred (e.g. link dialog).

    • Handles a paste event, inserting cleaned content into the editor.

      The implementation should call event.preventDefault() and manage insertion itself.

      Parameters

      Returns void

    • Sanitises HTML before it is written to the editor DOM.

      Called by the component whenever content is rendered into the WYSIWYG area (paste, value binding, source toggle).

      Parameters

      • html: string

      Returns string

    • Reads the editor element and returns the serialised output string.

      • HTML strategy: clones the DOM, replaces placeholder chips with {{key}} tokens, returns innerHTML.
      • Markdown strategy: converts the editor's Markdown text, replacing placeholder chips with {{key}} tokens.

      Parameters

      Returns string

    Settings

    Member Visibility

    On This Page

    Properties
    Methods