> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# SlateJS Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/Add-Text-Comments.gif?s=1da499b73486c2acd4667b517baab389)

## Setup

#### Step 1: Add Comment components

* Add the `Velt Comments` component to the root of your app.
* This component is required to render comments in your app.
* Set the `text mode` prop to `false` to hide the default text comment tool.

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltProvider apiKey="API_KEY">
>   <VeltComments textMode={false} />
> </VeltProvider>
> ```

#### Step 2: Install the Velt SlateJS extension

```bash theme={null}
npm i @veltdev/slate-velt-comments
```

#### Step 3: Configure the SlateJS editor with the Velt Comments extension

> [tab] React / Next.js
>
> ```js theme={null}
> import { withVeltComments } from '@veltdev/slate-velt-comments';
> import { withReact, withHistory } from 'slate-react';
>
> const editor = withVeltComments(
>   withReact(withHistory(createEditor())),
>   { HistoryEditor: SlateHistoryEditor }
> );
> ```

#### Step 4: Register Velt component type in SlateJS

* Register the Velt Comments Element type with your SlateJS editor's custom types.
* This ensures proper type checking for the comments functionality.

> [tab] React / Next.js
>
> ```ts theme={null}
> import type { VeltCommentsElement } from '@veltdev/slate-velt-comments';
>
> type CustomElement = VeltCommentsElement;
>
> declare module 'slate' {
>   interface CustomTypes {
>     Element: CustomElement;
>   }
> }
> ```

#### Step 5: Add a comment button to your SlateJS editor

* Add a button that appears in the context menu of your SlateJS editor when the user selects text.
* This button will be used to add a comment to the selected text.

> [tab] React / Next.js
>
> ```js theme={null}
> import { addComment } from '@veltdev/slate-velt-comments';
> import { useSlate } from 'slate-react';
>
> const CommentButton = (props) => {
>   const editor = useSlate();
>
>   return (
>     <Button
>       onMouseDown={(e) => {
>         e.preventDefault();
>         addComment({ editor });
>       }}
>     >
>       Comment
>     </Button>
>   );
> };
> ```

#### Step 6: Call `addComment` to add a comment

* Call this method to add a comment to selected text in the SlateJS editor. You can use this when the user clicks on the comment button in context menu or presses a keyboard shortcut.
* Params: `AddCommentRequest`
  * `editorId`: string, the id of the editor. Use this if you have multiple editors in your app.
  * `editor`: instance of the SlateJS editor.
  * `context`: optional object to set the Comment Annotation's [custom metadata](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#metadata).

> [tab] React / Next.js
>
> ```js theme={null}
> import { addComment } from '@veltdev/slate-velt-comments';
> import { useSlate } from 'slate-react';
>
> const CommentButton = (props) => {
>   const editor = useSlate();
>
>   return (
>     <Button
>       onMouseDown={(e) => {
>         e.preventDefault();
>         addComment({ editor });
>       }}
>     >
>       Comment
>     </Button>
>   );
> };
> ```

#### Step 7: Render comments in SlateJS editor

* Get the comment data.
* Render the comments in the SlateJS editor.
* Params: `RenderCommentsRequest`
  * `editorId`: string, the id of the editor. Use this if you have multiple editors in your app.
  * `editor`: instance of the SlateJS editor.
  * `commentAnnotations`: CommentAnnotation\[]

> [tab] React / Next.js
>
> ```js theme={null}
> import { renderComments } from '@veltdev/slate-velt-comments';
>
> const commentAnnotations = useCommentAnnotations();
>
> useEffect(() => {
>   if (editor && commentAnnotations) {
>     renderComments({ editor, commentAnnotations });
>   }
> }, [commentAnnotations, editor]);
> ```

#### Step 8: Style the commented text

* You can style the commented text by adding a CSS class to the `velt-comment-text` element.
* By using the `comment-available` attribute, you can apply styles only when the comment data has loaded.

```css theme={null}
velt-comment-text[comment-available="true"] {
  background-color: #ffff00;
}
```

## Complete Example

[https://slatejs-app-demo.vercel.app/](https://slatejs-app-demo.vercel.app/)

## APIs

#### [withVeltComments()](https://velt.dev/docs/api-reference/sdk/api/api-methods.md#withveltcomments)

Augment a Slate editor with Velt Comments support (adds schema/commands/normalizers).

* Params:
  * `editor: Editor`
  * `options?: VeltCommentsEditorOptions`
* Returns: `VeltCommentsEditor`

> [tab] React / Next.js
>
> ```jsx theme={null}
> import { withVeltComments } from '@veltdev/slate-velt-comments';
> import { withReact, withHistory } from 'slate-react';
>
> const editor = withVeltComments(
>   withReact(withHistory(createEditor())),
>   { HistoryEditor: SlateHistoryEditor }
> );
> ```

#### [addComment()](https://velt.dev/docs/api-reference/sdk/api/api-methods.md#addcomment)

Creates a comment annotation for the currently selected text in the editor.

* Signature: `async (request:` [AddCommentRequest](https://velt.dev/docs/api-reference/sdk/models/data-models.md#addcommentrequest)`) => Promise<void>`
* Params: `request:` [AddCommentRequest](https://velt.dev/docs/api-reference/sdk/models/data-models.md#addcommentrequest)
* Returns: `Promise<void>`

> [tab] React / Next.js
>
> ```jsx theme={null}
> import { addComment } from '@veltdev/slate-velt-comments';
>
> <button onMouseDown={(e) => { e.preventDefault(); addComment({ editor }); }}>
>   Comment
> </button>
> ```

#### [renderComments()](https://velt.dev/docs/api-reference/sdk/api/api-methods.md#rendercomments)

Renders and highlights comment annotations in the editor.

* Signature: `(request:` [RenderCommentsRequest](https://velt.dev/docs/api-reference/sdk/models/data-models.md#rendercommentsrequest)`) => void`
* Params: `request:` [RenderCommentsRequest](https://velt.dev/docs/api-reference/sdk/models/data-models.md#rendercommentsrequest)
* Returns: `void`

> [tab] React / Next.js
>
> ```jsx theme={null}
> import { renderComments } from '@veltdev/slate-velt-comments';
> import type { CommentAnnotation } from '@veltdev/types';
>
> useEffect(() => {
>   if (editor && commentAnnotations) {
>     renderComments({ editor, commentAnnotations });
>   }
> }, [editor, commentAnnotations]);
> ```

#### [SlateVeltComment](https://velt.dev/docs/api-reference/sdk/api/api-methods.md#slateveltcomment)

React component that renders a Velt comment text element with annotation ID.

* Params:
  * `props: RenderElementProps`
  * `element:` [VeltCommentsElement](https://velt.dev/docs/api-reference/sdk/models/data-models.md#veltcommentselement)
* Returns: `N/A`

```tsx theme={null}
import { SlateVeltComment } from '@veltdev/slate-velt-comments';
import type { RenderElementProps } from 'slate-react';
import type { VeltCommentsElement } from '@veltdev/slate-velt-comments';

const RenderElement = (props: RenderElementProps) => {
  if (props.element.type === 'veltComment') {
    return <SlateVeltComment {...props} element={props.element as VeltCommentsElement} />;
  }
  return <p {...props.attributes}>{props.children}</p>;
};
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.