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.

All APIs on this page are exported from @ngstarter-ui/components/comment-editor. The component owns a scoped NgsHeadlessEditor; no Tiptap or ProseMirror adapter is involved.

Content contract

value and submitted use the versioned JSON document model.
sent is an HTML compatibility output derived from JSON at send time.
Toolbar, footer, and bubble-menu controls are projected, so products can choose the exact command set and icons.
Additional engine behavior is installed through the same lightweight NgsHeadlessEditorPlugin contract.

Inputs

JSON state, editor behavior, labels, layout, and integration callbacks.

Name	Type	Default	Description
`value`	ModelSignal<NgsHeadlessEditorDocument>	empty document	Two-way bound versioned JSON document. This is the canonical content value.
`plugins`	readonly NgsHeadlessEditorPlugin[]	[]	Additional editor plugins installed after the basic text, color, and Comment Editor feature plugins.
`contentMaxHeight`	number \| undefined	undefined	Maximum expanded content height in pixels before the editing surface scrolls.
`placeholder`	string	Write something …	Placeholder rendered while the JSON document is empty.
`ariaLabel`	string	Comment editor	Accessible label for the contenteditable surface.
`buttonCancelLabel`	string	Cancel	Cancel action label.
`buttonSendLabel`	string	Send	Send action label.
`buttonSubmitLabel`	string \| undefined	undefined	Optional submit-label alias. When set, it takes precedence over buttonSendLabel.
`toolbarAlwaysVisible`	boolean	false	Keeps the projected toolbar visible while the editor is expanded.
`fullViewMode`	boolean	false	Keeps the editor in its expanded layout.
`cancelButtonAlwaysVisible`	boolean	false	Shows cancel independently of interactive expansion state.
`allowEmptyContent`	boolean	false	Legacy-compatible option allowing an empty send.
`allowEmpty`	boolean	false	Allows an empty JSON document to be submitted.
`autoClear`	boolean	true	Clears the document and closes transient UI state after a successful send.
`loading`	boolean	false	Shows the send action loading state and prevents send/cancel.
`disabled`	boolean	false	Disables editing and component actions.
`readOnly`	boolean	false	Keeps content visible while preventing document mutations.
`imageUploadFn`	(file: Blob) => Promise<string>	data URL fallback	Uploads an image and resolves its final URL. The editor inserts an immediate preview placeholder and retains rejected upload state.

Outputs

JSON-first submission with an HTML compatibility output.

Name	Type	Default	Description
`submitted`	NgsHeadlessEditorDocument	—	Emits the canonical JSON document on send.
`sent`	string	—	Emits escaped serialized HTML generated from the same JSON document.
`canceled`	void	—	Emits after cancel clears content and transient toolbar/full-view state.

Component methods and signals

Public surface available through a template reference such as #editor.

Name	Type	Default	Description
`editor`	NgsHeadlessEditor	scoped instance	Signal-based editor service owned by this Comment Editor.
`api`	CommentEditorAPI	scoped facade	Stable facade used by command directives and application code.
`isEditorActivated`	Signal<boolean>	computed	Whether the expanded editor layout is active.
`isToolbarVisible`	Signal<boolean>	computed	Whether the projected toolbar is currently rendered.
`isBubbleMenuVisible`	Signal<boolean>	computed	Whether a non-collapsed selection should show the projected bubble menu.
`isCancelVisible`	Signal<boolean>	computed	Whether the cancel action is currently visible.
`sendDisabled`	Signal<boolean>	computed	Combines disabled, loading, allow-empty, and editor-empty state.
`send(event?) / submit(event?)`	void	—	Emits JSON and HTML outputs, then applies autoClear.
`cancel(event?)`	void	—	Clears content, resets transient view state, and emits canceled.
`clear()`	void	—	Resets the scoped editor to an empty paragraph.
`focus()`	void	—	Focuses the editor surface and restores its model selection.
`showFullView() / hideFullView()`	void	—	Controls transient expanded state.
`showToolbar() / hideToolbar() / toggleToolbar()`	void	—	Controls the projected toolbar.
`insertText(text)`	void	—	Programmatically inserts text at the selection; a standalone emoji receives the single-emoji mark.
`insertImage(file)`	void	—	Creates an upload placeholder, invokes imageUploadFn, and replaces or annotates the media block.
`insertYoutube(url)`	boolean	—	Validates a YouTube URL and inserts a privacy-enhanced embed block.
`setTextColor(color) / unsetTextColor()`	boolean	—	Applies or removes the textColor mark for the current selection or caret.
`setBackgroundColor(color) / unsetBackgroundColor()`	boolean	—	Applies or removes the backgroundColor highlight mark for the current selection or caret.
`setLink(url) / unsetLink()`	boolean	—	Applies, edits, or removes the link mark for the current text selection.

Projection components

The Comment Editor owns behavior and layout; applications project the controls they need.

Name	Type	Default	Description
`CommentEditorToolbar`	ngs-comment-editor-toolbar	optional	Projected top formatting toolbar controlled by toolbar visibility state.
`CommentEditorFooterBar`	ngs-comment-editor-footer-bar	optional	Projected footer tools placed before cancel and send actions.
`CommentEditorBubbleMenu`	ngs-comment-editor-bubble-menu	optional	Projected selection menu with link preview, editing, and formatting controls.
`CommentEditorDivider`	ngs-comment-editor-divider	optional	Visual separator for projected command groups.

Command directives

Composable behavior for projected buttons. Combine formatting directives with ngsCommentEditorCommand.

Name	Type	Default	Description
`ngsCommentEditorCommand`	directive	—	Applies the shared command button class.
`ngsCommentEditorCommandBold`	directive	Mod-b	Toggles bold and reflects active/disabled state.
`ngsCommentEditorCommandItalic`	directive	Mod-i	Toggles italic and reflects active/disabled state.
`ngsCommentEditorCommandStrike`	directive	Mod-Shift-x	Toggles strike.
`ngsCommentEditorCommandCode`	directive	Mod-e	Toggles inline code.
`ngsCommentEditorCommandBlockquote`	directive	Mod-Shift-b	Toggles the active text block between paragraph and blockquote.
`ngsCommentEditorCommandCodeBlock`	directive	Mod-Alt-c	Toggles a code block.
`ngsCommentEditorCommandBulletList`	directive	Mod-Shift-8	Toggles a bullet-list block.
`ngsCommentEditorCommandOrderedList`	directive	Mod-Shift-7	Toggles an ordered-list block.
`ngsCommentEditorCommandLink`	directive	—	Opens the link dialog and applies a normalized link mark.
`ngsCommentEditorCommandEditLink`	directive	—	Edits the active link from the bubble menu.
`ngsCommentEditorCommandUnsetLink`	directive	—	Removes the active link mark.
`ngsCommentEditorCommandImage`	directive	image/*	Opens file selection and forwards the chosen image to insertImage().
`ngsCommentEditorCommandYoutube`	directive	—	Opens the YouTube dialog and inserts a validated media block.
`ngsCommentEditorCommandToggleToolbar`	directive	—	Toggles projected toolbar visibility and reflects active state.

Comment Editor plugin and serialization

Public building blocks used by the prebuilt component and available to custom Angular shells.

Name	Type	Default	Description
`colorEditorPlugin()`	NgsHeadlessEditorPlugin	installed by CommentEditor	Adds text and background color marks and their set/unset commands.
`commentEditorPlugin()`	NgsHeadlessEditorPlugin	installed by CommentEditor	Adds blockquote, code block, list, image, upload, YouTube, link, and single-emoji definitions and commands.
`createCommentEditorMediaBlock(type, attrs)`	NgsHeadlessEditorBlock<null>	—	Creates a serializable image, upload-placeholder, or YouTube block.
`normalizeLinkUrl(value)`	string	—	Normalizes HTTP(S), mailto, and tel destinations and prefixes plain hosts with HTTPS.
`normalizeYoutubeUrl(value)`	string \| null	—	Accepts watch, short, shorts, or embed URLs and returns a youtube-nocookie embed URL.
`serializeCommentEditorDocument(document)`	string	—	Serializes supported JSON blocks and marks to escaped HTML. Unresolved upload placeholders are omitted.