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.
<VeltProvider apiKey="API_KEY">
  <VeltComments textMode={false} />
</VeltProvider>
2

Install the Velt SlateJS extension

npm i @veltdev/slate-velt-comments
3

Import and add the extension to your SlateJS editor

import { withVeltComments } from '@veltdev/slate-velt-comments';
import { withReact, withHistory } from 'slate-react';

const editor = withVeltComments(
  withReact(withHistory(createEditor())),
  { HistoryEditor: SlateHistoryEditor }
);
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.
import type { VeltCommentsElement } from '@veltdev/slate-velt-comments';

type CustomElement = VeltCommentsElement;

declare module 'slate' {
  interface CustomTypes {
    Element: CustomElement;
  }
}
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.
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>
  );
};
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.
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>
  );
};
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[].
    import { renderComments } from '@veltdev/slate-velt-comments';

const commentAnnotations = useCommentAnnotations();

useEffect(() => {
  if (editor && commentAnnotations) {
    renderComments({ editor, commentAnnotations });
  }
}, [commentAnnotations, editor]);
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.
velt-comment-text[comment-available="true"] {
  background-color: #ffff00;
}