Concepts
Async Collaboration
- Comments
- Comment Dialog
- Overview
- Styling
- Variants
- Subcomponents
- All comments
- Approve
- Assignee banner
- Autocomplete option
- Autocomplete chip tooltip
- Body
- Composer
- Overview
- Subcomponents
- Annotation Dropdown
- Ghost banner
- Header
- Navigation button
- Options dropdown
- Priority dropdown
- Private banner
- Reactions panel
- Reaction pin
- Reaction pin tooltip
- Reaction tool
- Sign in
- Status dropdown
- Suggestion action
- Upgrade
- Comment Pin
- Comment Tool
- Comment Bubble
- Comment Video Player
- Comment Player Timeline
- Confirmation Dialog
- Inline Comments
- Multithread Comment Dialog
- Persistent Comment Mode Banner
- Text Comment Tool
- Text Comment Toolbar
- Standalone Components
- Comments Sidebar
- In-app Notifications
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
Composer
Overview
The subcomponent of the Comment Dialog that is used to compose new Comment replies.
<VeltWireframe>
<VeltCommentDialogWireframe.Composer>
<VeltCommentDialogWireframe.Composer.PrivateBadge />
<VeltCommentDialogWireframe.Composer.Avatar /> {/* used for inline comments */}
<VeltCommentDialogWireframe.Composer.Attachments>
... customizable
</VeltCommentDialogWireframe.Composer.Attachments>
<VeltCommentDialogWireframe.Composer.Recordings />
<VeltCommentDialogWireframe.Composer.Input placeholder='Custom Placeholder' />
<VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" /> {/* used for @mentions */}
<VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" /> {/* used for custom hotkey lists. The # is just an example. Whatever you use as the hotkey in the API should be used here as well. */}
<VeltCommentDialogWireframe.Composer.ActionButton type="attachments" />
<VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
<VeltCommentDialogWireframe.Composer.ActionButton type="video" />
<VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
<VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
<VeltCommentDialogWireframe.Composer.AssignUser />
</VeltCommentDialogWireframe.Composer>
</VeltWireframe>
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
When the composer is in focus, a dynamic CSS class velt-composer-focused
is added to the composer container.
Default Subcomponent
<VeltWireframe>
<VeltCommentDialogWireframe.Composer>
<VeltCommentDialogWireframe.Composer.PrivateBadge />
<VeltCommentDialogWireframe.Composer.Avatar /> {/* used for inline comments */}
<VeltCommentDialogWireframe.Composer.Attachments>
... customizable
</VeltCommentDialogWireframe.Composer.Attachments>
<VeltCommentDialogWireframe.Composer.Recordings />
<VeltCommentDialogWireframe.Composer.Input placeholder='Custom Placeholder' />
<VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" /> {/* used for @mentions */}
<VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" /> {/* used for custom hotkey lists. The # is just an example. Whatever you use as the hotkey in the API should be used here as well. */}
<VeltCommentDialogWireframe.Composer.ActionButton type="attachments" />
<VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
<VeltCommentDialogWireframe.Composer.ActionButton type="video" />
<VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
<VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
<VeltCommentDialogWireframe.Composer.AssignUser />
</VeltCommentDialogWireframe.Composer>
</VeltWireframe>
Was this page helpful?
<VeltWireframe>
<VeltCommentDialogWireframe.Composer>
<VeltCommentDialogWireframe.Composer.PrivateBadge />
<VeltCommentDialogWireframe.Composer.Avatar /> {/* used for inline comments */}
<VeltCommentDialogWireframe.Composer.Attachments>
... customizable
</VeltCommentDialogWireframe.Composer.Attachments>
<VeltCommentDialogWireframe.Composer.Recordings />
<VeltCommentDialogWireframe.Composer.Input placeholder='Custom Placeholder' />
<VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" /> {/* used for @mentions */}
<VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" /> {/* used for custom hotkey lists. The # is just an example. Whatever you use as the hotkey in the API should be used here as well. */}
<VeltCommentDialogWireframe.Composer.ActionButton type="attachments" />
<VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
<VeltCommentDialogWireframe.Composer.ActionButton type="video" />
<VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
<VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
<VeltCommentDialogWireframe.Composer.AssignUser />
</VeltCommentDialogWireframe.Composer>
</VeltWireframe>