> ## 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.
# CodeMirror Setup
## 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}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Step 2: Install the Velt CodeMirror extension
```bash theme={null}
npm i @veltdev/codemirror-velt-comments
```
#### Step 3: Configure the CodeMirror editor with the Velt Comments extension
> [tab] React / Next.js
>
> ```js theme={null}
> import { EditorView, basicSetup } from 'codemirror';
> import { CodemirrorVeltComments } from '@veltdev/codemirror-velt-comments';
>
> const view = new EditorView({
> doc: 'Your initial content here',
> extensions: [
> basicSetup,
> CodemirrorVeltComments(),
> // ... other extensions
> ],
> parent: editorRef.current,
> });
> ```
> [tab] Other Frameworks
>
> ```js theme={null}
> import { EditorView, basicSetup } from 'codemirror';
> import { CodemirrorVeltComments } from '@veltdev/codemirror-velt-comments';
>
> const editorView = new EditorView({
> doc: 'Your initial content here',
> extensions: [
> basicSetup,
> CodemirrorVeltComments(),
> // ... other extensions
> ],
> parent: document.querySelector('#editor'),
> });
> ```
#### Step 4: Add a comment button to your CodeMirror editor
Add a button that users can click to add comments after selecting text.
**Important:** When clicking a button, the browser moves focus to the button which clears the editor selection. You need to save the selection on `mousedown` (before focus changes) and restore it before adding the comment.
> [tab] React / Next.js
>
> ```js theme={null}
> import { useRef, useState, useEffect } from 'react';
> import { EditorView, basicSetup } from 'codemirror';
> import { CodemirrorVeltComments, addComment } from '@veltdev/codemirror-velt-comments';
>
> function CodeMirrorEditor() {
> const editorRef = useRef(null);
> const [editorView, setEditorView] = useState(null);
> const savedSelectionRef = useRef(null);
> const annotations = useCommentAnnotations();
>
> useEffect(() => {
> if (!editorRef.current) return;
>
> const view = new EditorView({
> doc: 'Your initial content here',
> extensions: [
> basicSetup,
> CodemirrorVeltComments(),
> ],
> parent: editorRef.current,
> });
>
> setEditorView(view);
> return () => view.destroy();
> }, []);
>
> const saveSelection = () => {
> if (editorView) {
> const { from, to } = editorView.state.selection.main;
> if (from !== to) {
> savedSelectionRef.current = { from, to };
> }
> }
> };
>
> const handleAddComment = () => {
> if (editorView) {
> if (savedSelectionRef.current) {
> const { from, to } = savedSelectionRef.current;
> if (from !== to) {
> editorView.dispatch({
> selection: { anchor: from, head: to }
> });
> }
> }
> addComment({ editor: editorView });
> savedSelectionRef.current = null;
> }
> };
>
> return (
>
>
>
>