@veltdev/superdoc-velt-comments

Add Google Docs-style collaborative comments to your SuperDoc in-browser DOCX/Word editor using the Velt Collaboration SDK.

Comment highlights are rendered as view-only overlay elements (<velt-comment-text>) positioned over the commented text — your document is never modified. Each comment is anchored by a durable { text, occurrence } and re-resolved against the live ProseMirror document on every render, so the highlight follows the text as the document is edited and stays locked through scroll, resize, and reload.

Install

npm i @veltdev/superdoc-velt-comments
npm i @harbour-enterprises/superdoc   # peer dependency (the editor; never bundled)

Usage

import {
  SuperDocVeltComments,
  addComment,
  renderComments,
} from '@veltdev/superdoc-velt-comments';

// after the editor is ready (onReady):
const attached = SuperDocVeltComments.configure({ editorId: 'superdoc' }).attach(superdoc);

// create a comment for the current text selection:
await addComment({ instance: superdoc });

// render existing comments (driven by Velt's useCommentAnnotations):
renderComments({ instance: superdoc, commentAnnotations });

// teardown:
attached.detach();

API

| Export | Purpose | |---|---| | SuperDocVeltComments.configure(config).attach(instance) | Wire the extension to a SuperDoc instance; returns { detach() }. | | addComment({ instance }) | Create a comment on the current text selection. | | renderComments({ instance, commentAnnotations }) | Render/refresh comment highlights from Velt. |

Config (SuperDocVeltCommentsConfig): editorId? (default 'superdoc'), scrollToSelectedComment? (default true).

Source, tests, and demo: snippyly/superdoc-velt-comments.

About Velt SDK

With Velt SDK you can add powerful collaboration features to your product extremely fast — fully customizable UI on a fully-managed realtime backend. Features include Comments (Figma / Google Docs-style), Recording (Loom-style), Huddle (Slack-style), in-app & off-app notifications, @mentions, Presence, Cursors, Live Selection, and more.

Documentation

• Read the documentation for guides and API references.

Use cases

• Explore use cases to see what collaboration could look like in your product.

Releases

• See the latest changes.

Security

• Velt is SOC2 Type 2 and HIPAA compliant. Learn more.

Community

• X: updates, announcements, and general Velt tips.
• Discord: ask questions and share tips.

© Velt — Proprietary.