GitHub

Rich Text Editor

esa-rich-text-editor is a WYSIWYG field: a formatting toolbar above an editable content area, wired as a form control. The Angular source ships a dependency-free baseline (a contenteditable region driven by document.execCommand) and is explicitly designed to be upgraded to TinyMCE via @tinymce/tinymce-angular.

Reference wraps TinyMCE

Overview

Non-functional reference. The editor further down is a static, token-styled mock — its toolbar buttons and content area do not respond to input. The config object (menubar, plugins, toolbar string) is TinyMCE's init shape; ProseMirror/TipTap is an equivalent target.

What it wraps

  • Target library: TinyMCE (tinymce + @tinymce/tinymce-angular). The EsaEditorConfig fields are passed straight to TinyMCE's init.
  • Baseline: with no library installed, a contenteditable div plus a small toolbar (bold, italic, underline, bullet/numbered lists, link) provides a working editor. Swapping to TinyMCE keeps the same inputs and form-control contract.
  • Forms: implements Angular's ControlValueAccessor, so the value is HTML and binds via ngModel / reactive forms. In the Astro hub this corresponds to a form-associated custom element.

API

Inputs

InputTypeDefaultPurpose
configEsaEditorConfig{}Editor config, merged with ESA_EDITOR_DEFAULT_CONFIG.
labelstringnoneLabel rendered above the editor.
size'small' | 'medium' | 'large''medium'Controls min content height (120 / 200 / 300px).
disabledbooleanfalseDims and blocks interaction.
requiredbooleanfalseRenders an asterisk on the label.

Value is the editor's HTML string, exchanged through ControlValueAccessor (write + change). No dedicated @Output — the form value carries the content.

EsaEditorConfig (TinyMCE init shape)

KeyTypeDefault
heightnumber300
menubarbooleanfalse
pluginsstring[]['lists', 'link', 'paste', 'table', 'code']
toolbarstring'undo redo | formatselect | bold italic underline | bullist numlist | link table | code'
placeholderstring'Start typing...'
readonlybooleanunset

Anatomy & static mock

Label (with required marker), toolbar with grouped actions and dividers, then the content surface. The baseline toolbar exposes bold / italic / underline · bullet / numbered list · link.

Site visit summary. Outfall flow within permitted range; sampling scheduled for next quarter.

  • pH and turbidity nominal
  • Signage replaced at the north gate

View full inspection record →

Empty / placeholder & sizes

Start typing…
Read-only content.

States: rest · focus-within (border switches to --color-primary + soft ring) · disabled (opacity: 0.5; pointer-events: none) · empty (placeholder text via ::before).

Tokens

  • Shell: --form-border-color → --color-border, --form-radius-medium → --radius-200; focus uses --form-border-color-focus → --color-primary + --form-focus-ring-width.
  • Toolbar: --color-surface-sunken background, buttons --color-text-secondary hovering to --color-surface; dividers --color-border; gap --spacing-050.
  • Content: --color-surface background, --color-text-primary text, padding --spacing-300; placeholder --color-text-muted.
  • Label / required: --color-text-primary label, --color-danger asterisk.
  • Focus rings: --focus-ring-width / --focus-ring-color on toolbar buttons.