Skip to content

Commit 9dbad1f

Browse files
committed
Polish CKEditor setup docs
1 parent 4478962 commit 9dbad1f

1 file changed

Lines changed: 8 additions & 6 deletions

File tree

async-collaboration/comments/setup/ckeditor.mdx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ title: "CKEditor Setup"
33
description: "Add Velt comments to a CKEditor 5 editor with the Velt CKEditor comments plugin."
44
---
55

6-
![Add text comments in an editor](/gifs/Add-Text-Comments.gif)
7-
8-
The CKEditor integration renders comment highlights as view-only overlay elements positioned over the commented text. It does not modify your CKEditor schema, saved HTML, or undo history. Highlight positions are tracked with CKEditor model ranges and re-positioned as the document changes.
6+
![](/gifs/Add-Text-Comments.gif)
97

108
## Setup
119

1210
#### Step 1: Add Comment components
1311

14-
- Add the `Velt Comments` component to the root of your app. This component is required to create and render comments in your app.
12+
- Add the `Velt Comments` component to the root of your app.
13+
- This component is required to render comments in your app.
14+
- Set the `text mode` prop to `false` to hide the default text comment tool.
15+
- CKEditor selections are handled by `@veltdev/ckeditor-velt-comments`.
1516
- Authenticate the user with `authProvider` and set the Velt document before users add comments.
16-
- Set the `textMode` prop to `false` to hide the default Velt text comment tool. CKEditor selections are handled by `@veltdev/ckeditor-velt-comments`.
1717
- Add `VeltCommentsSidebar` if you want a Google Docs-style comment sidebar.
1818

1919
<Tabs>
@@ -243,7 +243,9 @@ The library automatically writes `context.textEditorConfig` with the selected te
243243

244244
#### Step 7: Re-apply highlights after reloading content
245245

246-
Comment highlights are view-only overlay elements. They are not stored in the CKEditor document, so your saved HTML, schema, and undo history stay clean.
246+
Comment highlights are view-only overlay elements positioned over the commented text. They are not stored in the CKEditor document, so your saved HTML, schema, and undo history stay clean.
247+
248+
Highlight positions are tracked with CKEditor model ranges and re-positioned as the document changes.
247249

248250
Call `renderComments` whenever the editor is recreated or its content is replaced. The `useEffect` in Step 6 handles this automatically when the `editor` instance or the annotation list changes.
249251

0 commit comments

Comments
 (0)