Rich Text Editor

qds-rich-text-editor is a form-associated control for concise, structured narrative HTML. It uses a curated toolbar rather than exposing editor-library configuration to consumers.

Use qds-inline-rich-text only inside the QDS content-authoring canvas. That component has a canvas-specific commit event and is not a general-purpose form input.

Usage

<qds-rich-text-editor
  name="summary"
  label="Investment summary"
  placeholder="Write an investment summary…"
  required>
</qds-rich-text-editor>

Attributes

• value — Current HTML value.
• name — Submitted form key.
• label — Visible editor label.
• hint — Helper text shown below the editor.
• error-text — Error message used for validation.
• placeholder — Placeholder shown when empty.
• toolbar — basic (bold, italic, underline), narrative (default; adds links, lists, and quotations), or full (adds document formatting controls). minimal remains a compatibility alias for basic.
• disabled — Disables interaction and excludes the editor from form submission.
• readonly — Displays the value without allowing edits.
• required — Requires non-empty text content.
• invalid — Forces the invalid visual and validity state.
• validate-on — blur (default), input, or submit.

Properties and Methods

• value: string — Current normalized HTML value.
• name: string
• disabled: boolean
• readonly: boolean
• required: boolean
• validity: QdsValidity
• form: HTMLFormElement | null
• checkValidity()
• reportValidity()
• setCustomValidity(message)

Events

• input — Fires on every user edit; detail is { component, value }.
• change — Fires when a changed value is committed on blur; detail is { component, value }.
• qds-validity-change — Fires when validity or the validation message changes.

CSS Parts

• container — Complete control including label and messages.
• label — Label element.
• required — Required marker within the label.
• wrapper — Editor border surface.
• toolbar — Formatting toolbar.
• editor — Quill editor mount.
• hint — Helper text.
• error — Validation message.

Full Toolbar

The full preset additionally exposes headings, a QDS font dialog, a QDS text color picker, alignment, indentation, superscript, subscript, and code blocks. The font dialog applies its selected family, size, emphasis, and text color to the current selection. Tables, file uploads, embedded media, and footnotes are deliberately not included in this preset.

Form Example

<form>
  <qds-rich-text-editor
    name="committeeSummary"
    label="Committee summary"
    required
    error-text="A committee summary is required.">
  </qds-rich-text-editor>
  <button type="submit">Save</button>
</form>