Text Comment Toolbar

<VeltWireframe>
    <VeltTextCommentToolbarWireframe>
        <VeltTextCommentToolbarWireframe.CommentAnnotation />
        <VeltTextCommentToolbarWireframe.Divider />
        <VeltTextCommentToolbarWireframe.Copywriter />
        <VeltTextCommentToolbarWireframe.Generic />
    </VeltTextCommentToolbarWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-text-comment-toolbar-wireframe>
        <velt-text-comment-toolbar-comment-annotation-wireframe></velt-text-comment-toolbar-comment-annotation-wireframe>
        <velt-text-comment-toolbar-divider-wireframe></velt-text-comment-toolbar-divider-wireframe>
        <velt-text-comment-toolbar-copywriter-wireframe></velt-text-comment-toolbar-copywriter-wireframe>
        <velt-text-comment-toolbar-generic-wireframe></velt-text-comment-toolbar-generic-wireframe>
    </velt-text-comment-toolbar-wireframe>
</velt-wireframe>

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.CommentAnnotation />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-text-comment-toolbar-comment-annotation-wireframe></velt-text-comment-toolbar-comment-annotation-wireframe>
</velt-wireframe>

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Divider />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-text-comment-toolbar-divider-wireframe></velt-text-comment-toolbar-divider-wireframe>
</velt-wireframe>

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Copywriter />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-text-comment-toolbar-copywriter-wireframe></velt-text-comment-toolbar-copywriter-wireframe>
</velt-wireframe>

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Generic />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-text-comment-toolbar-generic-wireframe></velt-text-comment-toolbar-generic-wireframe>
</velt-wireframe>
```</Tab>
</Tabs>


## Styling
### Disable ShadowDOM
- By default, ShadowDOM is used to ensure that your app's CSS does not interfere with the styling of the SDK components.
- Disable the shadow dom to apply your custom CSS to the component.

Default: `true`

<Tabs>

<Tab title="React / Next.js">

```jsx
<VeltComments shadowDom={false} textCommentToolbarShadowDom={false} />

<velt-comments shadow-dom="false" text-comment-toolbar-shadow-dom="false"></velt-comments>

<VeltComments textCommentToolbarDarkMode={true} />

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

<velt-comments text-comment-toolbar-dark-mode="true"></velt-comments>

const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();