rich-text-editor/src/rich-text-editor/rich-text-editor.component.ts
Developer Preview: Rich Text Editor Component
A WYSIWYG editor with two-way markdown binding. Supports headings, text formatting, lists, quotes, and links.
The markdown model is automatically synced:
The editor is resizable vertically via dragging.
import { RichTextEditorComponent } from '@talenra/components/rich-text-editor';<!-- Two-way binding -->
<talenra-rich-text-editor [(content)]="markdownContent" />
<!-- One-way with change handler -->
<talenra-rich-text-editor [content]="content" (contentChange)="onContentChange($event)" />The editor height can be customized via CSS custom properties. The editor supports vertical resizing by dragging, so the CSS property sets the initial/default height.
| Property | Default | Description |
|---|---|---|
--height |
25rem (400px) |
Initial height of the editor area |
--min-height |
10rem (160px) |
Minimum height when resizing |
<talenra-rich-text-editor class="my-editor" />@use '@talenra/stylebox';
.my-editor {
--height: #{stylebox.px-to-rem(500)}; // 500px in rem
--min-height: #{stylebox.px-to-rem(200)}; // Optional: custom minimum
}
// Or using plain CSS values
.my-editor {
--height: 30rem;
}An optional placeholder text can be displayed when the editor is empty. The placeholder is only shown when no content is present.
Example :<talenra-rich-text-editor [(content)]="content" placeholder="Enter your content here..." />
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
MarkdownConversionService
CopyRichTextContentService
SelectionService
FormattingService
PasteSanitizingService
LinkTooltipService
LinkManagementService
ToolbarService
|
| selector | talenra-rich-text-editor |
| standalone | true |
| imports |
FormsModule
ButtonComponent
TooltipDirective
InfotipAnchorDirective
MenuComponent
MenuAnchorDirective
MenuLinkComponent
MenuSeparatorComponent
LinkInputPopoverComponent
FieldUnderlineComponent
TalenraBaseTranslatePipe
|
| templateUrl | ./rich-text-editor.component.html |
| styleUrl | ./rich-text-editor.component.scss |
Properties |
|
Methods |
|
Inputs |
Outputs |
| content |
Type : string
|
Default value : ''
|
|
Two-way bindable markdown content. Updates are debounced by 300ms when editor content changes. When set externally, the markdown is converted to HTML and displayed immediately. |
| placeholder |
Type : string
|
Default value : ''
|
|
Optional placeholder text displayed when the editor is empty. Only shown when no content is present and the placeholder is set. |
| content |
Type : string
|
|
Two-way bindable markdown content. Updates are debounced by 300ms when editor content changes. When set externally, the markdown is converted to HTML and displayed immediately. |
| Public ngOnDestroy |
ngOnDestroy()
|
|
Cleanup on component destruction. Removes event listeners for selection change tracking.
Returns :
void
|
| Public editorElement |
Type : unknown
|
Default value : viewChild<ElementRef<HTMLDivElement>>('editor')
|
|
Reference to the contenteditable editor element |
| Public linkInfotipTrigger |
Type : unknown
|
Default value : viewChild('linkInfotipTrigger', { read: CdkMenuTrigger })
|
|
Reference to the link popover menu trigger |
| Public linkManagementService |
Type : unknown
|
Default value : inject(LinkManagementService)
|
|
Service for managing link state and operations |
| Public toolbarElement |
Type : unknown
|
Default value : viewChild<ElementRef<HTMLDivElement>>('toolbar')
|
|
Reference to the toolbar container element |
| Public toolbarService |
Type : unknown
|
Default value : inject(ToolbarService)
|
|
Service for managing toolbar resize behavior |