You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: async-collaboration/comments/setup/ckeditor.mdx
+8-6Lines changed: 8 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,17 +3,17 @@ title: "CKEditor Setup"
3
3
description: "Add Velt comments to a CKEditor 5 editor with the Velt CKEditor comments plugin."
4
4
---
5
5
6
-

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
+

9
7
10
8
## Setup
11
9
12
10
#### Step 1: Add Comment components
13
11
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`.
15
16
- 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`.
17
17
- Add `VeltCommentsSidebar` if you want a Google Docs-style comment sidebar.
18
18
19
19
<Tabs>
@@ -243,7 +243,9 @@ The library automatically writes `context.textEditorConfig` with the selected te
243
243
244
244
#### Step 7: Re-apply highlights after reloading content
245
245
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.
247
249
248
250
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.
0 commit comments