feat(schema-engine): add Rich Text Editor field type (#5308)#6214
Open
XananasX7 wants to merge 1 commit into
Open
feat(schema-engine): add Rich Text Editor field type (#5308)#6214XananasX7 wants to merge 1 commit into
XananasX7 wants to merge 1 commit into
Conversation
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>
ae38621 to
06d038c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the rich text editing capability requested in #5308.
Closes #5308
Changes
New component —
RichTextEditorComponentLocation:
frontend/src/app/modules/schema-engine/rich-text-editor/A self-contained Angular component that uses the browser's native
contenteditable+execCommandAPI — no new npm dependencies.Toolbar capabilities:
Key design decisions:
ControlValueAccessor→ works with[formControl]bindings already inschema-form.componentwith zero glue codereadonlyinput disables editing and hides the toolbarschema-form.component(edit mode)isRichText(item)helper (returns true whencustomType === 'richText')isInput()now excludesrichTextto prevent double-rendering<app-rich-text-editor>rendered for both single-value and array-item rich-text fieldsschema-form-view.component(read-only display)isRichText(item)helper;isInput()excludesrichText[innerHTML]inside a styled.rte-view-contentdiv so formatting is visible in the final output viewFieldTypesDictionary(interfacespackage)Added new entry:
This makes Rich Text selectable as a field type in the schema configuration UI.
generate-document.ts(interfacespackage)Added
richTextcase so dry-run document generation works for schemas that contain rich-text fields.schema-engine.module.tsRichTextEditorComponentReactiveFormsModuleto importsAcceptance criteria (per #5308)
rich-text-editor.component.spec.ts)Test coverage (
rich-text-editor.component.spec.ts)readonlywriteValuesets editor content correctlynullwriteValue treated as emptyonChangecallback called on inputonTouchedcallback called on blurisEmptyedge cases (empty, whitespace-only HTML, text content)setDisabledStateproperly sets flag