> ## 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

<img src="https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/Add-Text-Comments.gif?s=1da499b73486c2acd4667b517baab389" alt="" width="1280" height="720" data-path="gifs/Add-Text-Comments.gif" />

## 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.

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltProvider apiKey="API_KEY">
      <VeltComments textMode={false} />
    </VeltProvider>
    ```
  </Tab>
</Tabs>

#### 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

<Tabs>
  <Tab title="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 }
    );
    ```
  </Tab>
</Tabs>

#### 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.

<Tabs>
  <Tab title="React / Next.js">
    ```ts theme={null}
    import type { VeltCommentsElement } from '@veltdev/slate-velt-comments';

    type CustomElement = VeltCommentsElement;

    declare module 'slate' {
      interface CustomTypes {
        Element: CustomElement;
      }
    }
    ```
  </Tab>
</Tabs>

#### 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.

<Tabs>
  <Tab title="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>
      );
    };
    ```
  </Tab>
</Tabs>

#### 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](/async-collaboration/comments/customize-behavior#metadata).

<Tabs>
  <Tab title="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>
      );
    };
    ```
  </Tab>
</Tabs>

#### 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\[]

<Tabs>
  <Tab title="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]);
    ```
  </Tab>
</Tabs>

#### 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

<Frame>
  <iframe src="https://slatejs-app-demo.vercel.app/" className="w-full" height="500px" />
</Frame>

## APIs

#### [withVeltComments()](/api-reference/sdk/api/api-methods#withveltcomments)

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

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

<Tabs>
  <Tab title="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 }
    );
    ```
  </Tab>
</Tabs>

#### [addComment()](/api-reference/sdk/api/api-methods#addcomment)

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

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { addComment } from '@veltdev/slate-velt-comments';

    <button onMouseDown={(e) => { e.preventDefault(); addComment({ editor }); }}>
      Comment
    </button>
    ```
  </Tab>
</Tabs>

#### [renderComments()](/api-reference/sdk/api/api-methods#rendercomments)

Renders and highlights comment annotations in the editor.

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

<Tabs>
  <Tab title="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]);
    ```
  </Tab>
</Tabs>

#### [SlateVeltComment](/api-reference/sdk/api/api-methods#slateveltcomment)

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

* Params:
  * `props: RenderElementProps`
  * `element:` [VeltCommentsElement](/api-reference/sdk/models/data-models#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>;
};
```