Skip to content

feat(schema-engine): add Rich Text Editor field type (#5308)#6214

Open
XananasX7 wants to merge 1 commit into
hashgraph:developfrom
XananasX7:feature/5308-rich-text-editor
Open

feat(schema-engine): add Rich Text Editor field type (#5308)#6214
XananasX7 wants to merge 1 commit into
hashgraph:developfrom
XananasX7:feature/5308-rich-text-editor

Conversation

@XananasX7

Copy link
Copy Markdown

Summary

Implements the rich text editing capability requested in #5308.

Closes #5308


Changes

New component — RichTextEditorComponent

Location: frontend/src/app/modules/schema-engine/rich-text-editor/

A self-contained Angular component that uses the browser's native contenteditable + execCommand API — no new npm dependencies.

Toolbar capabilities:

Button Action
B Bold
I Italic
Underline
List icon Bullet list
Ordered list icon Numbered list
H1 / H2 / H3 Headings
🔗 Insert hyperlink (inline dialog, auto-prepends https://)

Key design decisions:

  • Implements ControlValueAccessor → works with [formControl] bindings already in schema-form.component with zero glue code
  • Stores/emits HTML strings so formatted content round-trips through the VC document without data loss
  • Backward-compatible: existing plain-text values display correctly (plain text is valid HTML)
  • readonly input disables editing and hides the toolbar

schema-form.component (edit mode)

  • Added isRichText(item) helper (returns true when customType === 'richText')
  • isInput() now excludes richText to prevent double-rendering
  • <app-rich-text-editor> rendered for both single-value and array-item rich-text fields

schema-form-view.component (read-only display)

  • Added isRichText(item) helper; isInput() excludes richText
  • Rich-text values rendered via [innerHTML] inside a styled .rte-view-content div so formatting is visible in the final output view

FieldTypesDictionary (interfaces package)

Added new entry:

{ name: 'Rich Text', type: 'string', format: undefined, pattern: undefined, isRef: false, customType: 'richText' }

This makes Rich Text selectable as a field type in the schema configuration UI.

generate-document.ts (interfaces package)

Added richText case so dry-run document generation works for schemas that contain rich-text fields.

schema-engine.module.ts

  • Declared RichTextEditorComponent
  • Added ReactiveFormsModule to imports

Acceptance criteria (per #5308)

Criterion Status
Bold, italic, underline
Bulleted and numbered lists
Headings / subheadings (H1–H3)
Hyperlinks
Formatting preserved in final output ✅ (HTML stored as field value)
Existing plain-text entries unaffected ✅ (plain text renders as HTML)
Unit / UI tests confirm functionality ✅ (15 spec cases in rich-text-editor.component.spec.ts)
No external dependencies added

Test coverage (rich-text-editor.component.spec.ts)

  • Component creation
  • Toolbar visible / hidden based on readonly
  • writeValue sets editor content correctly
  • null writeValue treated as empty
  • onChange callback called on input
  • onTouched callback called on blur
  • isEmpty edge cases (empty, whitespace-only HTML, text content)
  • setDisabledState properly sets flag
  • Link dialog open/cancel/insert flows
  • Protocol auto-prepend for bare domains
  • All required toolbar actions present

@XananasX7 XananasX7 requested review from a team as code owners June 15, 2026 12:52
Introduces a native rich text editor for Guardian UI forms so users can
apply formatting to text fields without relying on any external library.

## What changed

### New component — RichTextEditorComponent
- Path: frontend/src/app/modules/schema-engine/rich-text-editor/
- ControlValueAccessor so it integrates transparently with Angular
  Reactive Forms (FormControl binding, disabled state, touched state)
- Uses the browser's built-in execCommand API — zero new npm dependencies
- Toolbar: Bold, Italic, Underline, Bullet list, Numbered list,
  H1/H2/H3 headings, and Hyperlink insertion
- contenteditable div stores/emits HTML strings
- Backward-compatible: existing plain-text field values display correctly
  because plain text is valid HTML

### schema-form.component (edit mode)
- Added isRichText() helper
- isInput() now excludes customType === 'richText' to avoid double render
- Added getPlaceholderByFieldType() case for 'richText'
- Inline app-rich-text-editor rendered for single-value AND array (listItem)
  rich-text fields

### schema-form-view.component (read-only display)
- Added isRichText() helper; isInput() excludes customType === 'richText'
- Read-only fields rendered via [innerHTML] inside .rte-view-content div
- Styles mirror the editor typography (headings, lists, links)

### FieldTypesDictionary (interfaces package)
- Added 'Rich Text' entry: type=string, customType='richText'
  This makes the type selectable in schema-field-configuration

### generate-document.ts
- Added richText case returning an example HTML snippet so dry-run
  document generation doesn't break for schemas with rich-text fields

### schema-engine.module.ts
- Declared RichTextEditorComponent; added ReactiveFormsModule

## Acceptance criteria addressed (per hashgraph#5308)
✅ Bold, italic, underline supported
✅ Bulleted and numbered lists supported
✅ Headings/subheadings (H1–H3)
✅ Hyperlinks with protocol validation
✅ Formatting preserved in final output (HTML stored in field value)
✅ Existing plain-text entries unaffected (plain text is valid HTML)
✅ Unit tests covering ControlValueAccessor contract, toolbar actions,
   link insertion, isEmpty edge cases, disabled state

Closes hashgraph#5308

Signed-off-by: XananasX7 <xananasX7@users.noreply.github.com>
@XananasX7 XananasX7 force-pushed the feature/5308-rich-text-editor branch from ae38621 to 06d038c Compare June 16, 2026 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant