Skip to content

Commit 3825b33

Browse files
yoen-veltyoen-velt
committed
Align TinyMCE docs headings
1 parent cc03749 commit 3825b33

1 file changed

Lines changed: 120 additions & 120 deletions

File tree

‎async-collaboration/comments/setup/tinymce.mdx‎

Lines changed: 120 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ The TinyMCE integration renders comment highlights as view-only overlay elements
7171

7272
`tinymce` is a peer dependency and must be provided by your TinyMCE app. Import the self-hosted TinyMCE assets used by your editor so `@tinymce/tinymce-react` and the Velt plugin use the same TinyMCE instance.
7373

74-
#### Step 3: Create a TinyMCE editor component with Velt Comments
74+
#### Step 3: Configure the TinyMCE editor with the Velt Comments plugin
7575

7676
Add `VeltCommentsPlugin` to the TinyMCE `plugins` list and set `velt_comments_editor_id` in the editor init options. Capture the TinyMCE editor instance from `onInit` or the `init` event, then render Velt comment annotations into the editor with `renderComments`.
7777

@@ -336,6 +336,125 @@ velt-comment-text.velt-comment-selected {
336336
}
337337
```
338338

339+
#### Using TinyMCE without React
340+
341+
For a vanilla TinyMCE app, initialize Velt with `@veltdev/client`, add the Velt comments web component to the page, and subscribe to annotations through the Velt comment element.
342+
343+
```bash
344+
npm install @veltdev/client
345+
```
346+
347+
```html
348+
<velt-comments text-mode="false"></velt-comments>
349+
<button id="add-comment-btn">Add Comment</button>
350+
<div id="editor"></div>
351+
```
352+
353+
```ts
354+
import { initVelt } from '@veltdev/client';
355+
import tinymce from 'tinymce';
356+
import {
357+
VeltCommentsPlugin,
358+
addComment,
359+
renderComments,
360+
} from '@veltdev/tinymce-velt-comments';
361+
362+
const EDITOR_ID = 'my-editor';
363+
364+
const velt = await initVelt('YOUR_API_KEY');
365+
366+
await velt.identify({
367+
userId: 'user-1',
368+
organizationId: 'org-1',
369+
name: 'User One',
370+
email: 'user@example.com',
371+
});
372+
373+
velt.setDocument('document-id', { documentName: 'Document name' });
374+
375+
const [editor] = await tinymce.init({
376+
selector: '#editor',
377+
license_key: 'gpl',
378+
plugins: [VeltCommentsPlugin],
379+
toolbar: 'bold italic | addveltcomment',
380+
velt_comments_editor_id: EDITOR_ID,
381+
});
382+
383+
document.getElementById('add-comment-btn')?.addEventListener('mousedown', (event) => {
384+
event.preventDefault();
385+
});
386+
387+
document.getElementById('add-comment-btn')?.addEventListener('click', () => {
388+
void addComment({ editor, editorId: EDITOR_ID });
389+
});
390+
391+
velt.getCommentElement()?.getAllCommentAnnotations().subscribe((annotations) => {
392+
renderComments({ editor, editorId: EDITOR_ID, commentAnnotations: annotations });
393+
});
394+
```
395+
396+
#### Multiple TinyMCE editors
397+
398+
When using multiple editors on the same page, provide a unique `editorId` to TinyMCE's `velt_comments_editor_id` init option, `addComment`, and `renderComments`.
399+
400+
```ts
401+
const [editor1] = await tinymce.init({
402+
target: document.querySelector('#editor-1') as HTMLElement,
403+
license_key: 'gpl',
404+
plugins: [VeltCommentsPlugin],
405+
toolbar: 'addveltcomment',
406+
velt_comments_editor_id: 'editor-1',
407+
});
408+
409+
const [editor2] = await tinymce.init({
410+
target: document.querySelector('#editor-2') as HTMLElement,
411+
license_key: 'gpl',
412+
plugins: [VeltCommentsPlugin],
413+
toolbar: 'addveltcomment',
414+
velt_comments_editor_id: 'editor-2',
415+
});
416+
417+
await addComment({ editor: editor1, editorId: 'editor-1' });
418+
await addComment({ editor: editor2, editorId: 'editor-2' });
419+
420+
renderComments({
421+
editor: editor1,
422+
editorId: 'editor-1',
423+
commentAnnotations,
424+
});
425+
426+
renderComments({
427+
editor: editor2,
428+
editorId: 'editor-2',
429+
commentAnnotations,
430+
});
431+
```
432+
433+
#### TypeScript support
434+
435+
The package includes TypeScript definitions. Key type exports:
436+
437+
```ts
438+
import type {
439+
AddCommentRequest,
440+
RenderCommentsRequest,
441+
TinymceVeltCommentsConfig,
442+
CommentAnnotationContext,
443+
} from '@veltdev/tinymce-velt-comments';
444+
import type { CommentAnnotation } from '@veltdev/types';
445+
```
446+
447+
Runtime exports:
448+
449+
```ts
450+
import {
451+
VeltCommentsPlugin,
452+
registerVeltCommentsPlugin,
453+
addComment,
454+
renderComments,
455+
} from '@veltdev/tinymce-velt-comments';
456+
```
457+
339458
## Complete Example
340459

341460
<Frame>
@@ -485,122 +604,3 @@ Resolves Velt comment annotations back to TinyMCE DOM ranges and renders stable
485604
```
486605
</Tab>
487606
</Tabs>
488-
489-
## Using Without React
490-
491-
For a vanilla TinyMCE app, initialize Velt with `@veltdev/client`, add the Velt comments web component to the page, and subscribe to annotations through the Velt comment element.
492-
493-
```bash
494-
npm install @veltdev/client
495-
```
496-
497-
```html
498-
<velt-comments text-mode="false"></velt-comments>
499-
<button id="add-comment-btn">Add Comment</button>
500-
<div id="editor"></div>
501-
```
502-
503-
```ts
504-
import { initVelt } from '@veltdev/client';
505-
import tinymce from 'tinymce';
506-
import {
507-
VeltCommentsPlugin,
508-
addComment,
509-
renderComments,
510-
} from '@veltdev/tinymce-velt-comments';
511-
512-
const EDITOR_ID = 'my-editor';
513-
514-
const velt = await initVelt('YOUR_API_KEY');
515-
516-
await velt.identify({
517-
userId: 'user-1',
518-
organizationId: 'org-1',
519-
name: 'User One',
520-
email: 'user@example.com',
521-
});
522-
523-
velt.setDocument('document-id', { documentName: 'Document name' });
524-
525-
const [editor] = await tinymce.init({
526-
selector: '#editor',
527-
license_key: 'gpl',
528-
plugins: [VeltCommentsPlugin],
529-
toolbar: 'bold italic | addveltcomment',
530-
velt_comments_editor_id: EDITOR_ID,
531-
});
532-
533-
document.getElementById('add-comment-btn')?.addEventListener('mousedown', (event) => {
534-
event.preventDefault();
535-
});
536-
537-
document.getElementById('add-comment-btn')?.addEventListener('click', () => {
538-
void addComment({ editor, editorId: EDITOR_ID });
539-
});
540-
541-
velt.getCommentElement()?.getAllCommentAnnotations().subscribe((annotations) => {
542-
renderComments({ editor, editorId: EDITOR_ID, commentAnnotations: annotations });
543-
});
544-
```
545-
546-
## Multiple Editors
547-
548-
When using multiple editors on the same page, provide a unique `editorId` to TinyMCE's `velt_comments_editor_id` init option, `addComment`, and `renderComments`.
549-
550-
```ts
551-
const [editor1] = await tinymce.init({
552-
target: document.querySelector('#editor-1') as HTMLElement,
553-
license_key: 'gpl',
554-
plugins: [VeltCommentsPlugin],
555-
toolbar: 'addveltcomment',
556-
velt_comments_editor_id: 'editor-1',
557-
});
558-
559-
const [editor2] = await tinymce.init({
560-
target: document.querySelector('#editor-2') as HTMLElement,
561-
license_key: 'gpl',
562-
plugins: [VeltCommentsPlugin],
563-
toolbar: 'addveltcomment',
564-
velt_comments_editor_id: 'editor-2',
565-
});
566-
567-
await addComment({ editor: editor1, editorId: 'editor-1' });
568-
await addComment({ editor: editor2, editorId: 'editor-2' });
569-
570-
renderComments({
571-
editor: editor1,
572-
editorId: 'editor-1',
573-
commentAnnotations,
574-
});
575-
576-
renderComments({
577-
editor: editor2,
578-
editorId: 'editor-2',
579-
commentAnnotations,
580-
});
581-
```
582-
583-
## TypeScript Support
584-
585-
The package includes TypeScript definitions. Key type exports:
586-
587-
```ts
588-
import type {
589-
AddCommentRequest,
590-
RenderCommentsRequest,
591-
TinymceVeltCommentsConfig,
592-
CommentAnnotationContext,
593-
} from '@veltdev/tinymce-velt-comments';
594-
import type { CommentAnnotation } from '@veltdev/types';
595-
```
596-
597-
Runtime exports:
598-
599-
```ts
600-
import {
601-
VeltCommentsPlugin,
602-
registerVeltCommentsPlugin,
603-
addComment,
604-
renderComments,
605-
} from '@veltdev/tinymce-velt-comments';
606-
```

0 commit comments

Comments
 (0)