Skip to content

Commit f47c203

Browse files
committed
Polish SpreadJS comments docs
1 parent fc2cfd3 commit f47c203

1 file changed

Lines changed: 7 additions & 6 deletions

File tree

async-collaboration/comments/setup/spreadjs.mdx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
---
22
title: "SpreadJS Setup"
3+
description: "Add Velt comments to a SpreadJS workbook with the Velt SpreadJS comments extension."
34
---
45

5-
![](/gifs/Add-Text-Comments.gif)
6+
![Add text comments in a spreadsheet](/gifs/Add-Text-Comments.gif)
67

78
The SpreadJS integration renders each Velt comment as a view-only overlay positioned over the commented cell or range. It does not modify your workbook. Comment anchors are stored as durable `{ sheetName, row, col, rowCount, colCount }` data and re-resolved to pixels with SpreadJS cell geometry whenever comments render.
89

@@ -62,7 +63,7 @@ npm i @veltdev/spreadjs-velt-comments @mescius/spread-sheets @mescius/spread-she
6263
</Tab>
6364
</Tabs>
6465

65-
#### Step 3: Configure a SpreadJS workbook with Velt Comments
66+
#### Step 3: Configure the SpreadJS workbook with the Velt Comments extension
6667

6768
Create the workbook, import your spreadsheet, then attach `SpreadJSVeltComments` after the import completes. The same workbook instance is used by `addComment` and `renderComments`.
6869

@@ -143,9 +144,9 @@ Create the workbook, import your spreadsheet, then attach `SpreadJSVeltComments`
143144
</Tab>
144145
</Tabs>
145146

146-
#### Step 4: Add a comment button or selection bubble
147+
#### Step 4: Add a comment button to your SpreadJS workbook
147148

148-
SpreadJS renders the grid to a canvas, so there is no DOM text selection for a default text bubble menu. Use the workbook's selected cell/range state to show your own button or contextual bubble, then call `addComment({ instance })`.
149+
SpreadJS renders the grid to a canvas, so there is no DOM text selection for a default text bubble menu. Add a toolbar button or contextual selection bubble that uses the workbook's selected cell/range state, then call `addComment({ instance })`.
149150

150151
<Tabs>
151152
<Tab title="React / Next.js">
@@ -189,7 +190,7 @@ To scope comments to a specific workbook on pages with multiple SpreadJS instanc
189190
SpreadJSVeltComments.configure({ editorId: 'EDITOR_ID' }).attach(workbook);
190191
```
191192

192-
#### Step 6: Render comments in the workbook
193+
#### Step 6: Render comments in SpreadJS workbook
193194

194195
- Get comment data from the Velt SDK and render it in the SpreadJS workbook.
195196
- Params: [`RenderCommentsArgs`](/api-reference/sdk/models/data-models#spreadjs-rendercommentsargs). It has the following properties:
@@ -231,7 +232,7 @@ return () => {
231232
};
232233
```
233234

234-
#### Step 8: Style the commented cells
235+
#### Step 8: Style the commented text
235236

236237
- Each comment is rendered through a `.velt-spreadjs-overlay` layer with a `.velt-spreadjs-highlight` range fill and a `velt-comment-text` marker.
237238
- Override the default inline highlight styles with `!important`.

0 commit comments

Comments
 (0)