|
1 | 1 | --- |
2 | 2 | title: "SpreadJS Setup" |
| 3 | +description: "Add Velt comments to a SpreadJS workbook with the Velt SpreadJS comments extension." |
3 | 4 | --- |
4 | 5 |
|
5 | | - |
| 6 | + |
6 | 7 |
|
7 | 8 | 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. |
8 | 9 |
|
@@ -62,7 +63,7 @@ npm i @veltdev/spreadjs-velt-comments @mescius/spread-sheets @mescius/spread-she |
62 | 63 | </Tab> |
63 | 64 | </Tabs> |
64 | 65 |
|
65 | | -#### Step 3: Configure a SpreadJS workbook with Velt Comments |
| 66 | +#### Step 3: Configure the SpreadJS workbook with the Velt Comments extension |
66 | 67 |
|
67 | 68 | Create the workbook, import your spreadsheet, then attach `SpreadJSVeltComments` after the import completes. The same workbook instance is used by `addComment` and `renderComments`. |
68 | 69 |
|
@@ -143,9 +144,9 @@ Create the workbook, import your spreadsheet, then attach `SpreadJSVeltComments` |
143 | 144 | </Tab> |
144 | 145 | </Tabs> |
145 | 146 |
|
146 | | -#### Step 4: Add a comment button or selection bubble |
| 147 | +#### Step 4: Add a comment button to your SpreadJS workbook |
147 | 148 |
|
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 })`. |
149 | 150 |
|
150 | 151 | <Tabs> |
151 | 152 | <Tab title="React / Next.js"> |
@@ -189,7 +190,7 @@ To scope comments to a specific workbook on pages with multiple SpreadJS instanc |
189 | 190 | SpreadJSVeltComments.configure({ editorId: 'EDITOR_ID' }).attach(workbook); |
190 | 191 | ``` |
191 | 192 |
|
192 | | -#### Step 6: Render comments in the workbook |
| 193 | +#### Step 6: Render comments in SpreadJS workbook |
193 | 194 |
|
194 | 195 | - Get comment data from the Velt SDK and render it in the SpreadJS workbook. |
195 | 196 | - Params: [`RenderCommentsArgs`](/api-reference/sdk/models/data-models#spreadjs-rendercommentsargs). It has the following properties: |
@@ -231,7 +232,7 @@ return () => { |
231 | 232 | }; |
232 | 233 | ``` |
233 | 234 |
|
234 | | -#### Step 8: Style the commented cells |
| 235 | +#### Step 8: Style the commented text |
235 | 236 |
|
236 | 237 | - Each comment is rendered through a `.velt-spreadjs-overlay` layer with a `.velt-spreadjs-highlight` range fill and a `velt-comment-text` marker. |
237 | 238 | - Override the default inline highlight styles with `!important`. |
|
0 commit comments