Comment Editor

Comment Editor is a simplified text editor for quick messages, comments, threads, and replies. Use it when users need to compose a short or medium response and send it immediately. It can include lightweight formatting, links, lists, images, and media when the comment flow needs them.

Use it for:

Writing comments in tasks, projects, activity feeds, reviews, and support threads.
Replying to a conversation with a compact compose box.
Sending message HTML through the sent event.
Adding a small toolbar, footer actions, cancel behavior, or image upload to a comment composer.

Do not use Comment Editor for long-form documents, CMS pages, complex content editing, markdown editing, code editing, search, or display-only comments. Use Content Editor or Text Editor when users need a fuller editing surface.

ngs-comment-editor - the main component for the rich text editor.

Prop	Type	Default
contentMaxHeight Maximum height of the content area in pixels.	number	–
buttonCancelLabel Label for the cancel button.	string	Cancel
buttonSendLabel Label for the send button.	string	Send
placeholder Placeholder text for the editor.	string	Write something …
toolbarAlwaysVisible Whether the toolbar should always be visible.	boolean	false
fullViewMode Whether the editor should be in full view mode by default.	boolean	false
cancelButtonAlwaysVisible Whether the cancel button should always be visible.	boolean	false
imageUploadFn Function to handle image uploads.	(file: Blob) => Promise<string>	–

Event	Description
sent	Event emitted when the send button is clicked. Emits the HTML content.
canceled	Event emitted when the cancel button is clicked.

ngs-comment-editor-toolbar component - adds a toolbar to the editor.

ngs-comment-editor-footer-bar component - adds a footer bar with buttons.

ngs-comment-editor-divider component - adds a divider between editor sections.

ngs-comment-editor-bubble-menu component - adds a bubble menu for text selection.

Various ngsCommentEditorCommand* directives are available to bind editor actions to buttons (e.g., ngsCommentEditorCommandBold).

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Comment Editor

Source code, templates, and commercial support

Build the surrounding workflow