Merge pull request #80 from ueberdosis/docs/typos-grammar-fixes

Fix typos and formatting in Comments and Editor getting started

src/content/comments/core-concepts/configure.mdx

@@ -2,17 +2,15 @@
 title: Configure comments
 meta:
   title: Configure | Tiptap Comments Docs
-  description: Configure TiptapCollabProvider and customize thread classes in your Tiptap editor. More in the documentation!
+  description: Configure TiptapCollabProvider and customize thread classes in your Tiptap editor. More in the docs!
   category: Comments
 ---
 
-import { Callout } from '@/components/ui/Callout'
-
 Comments are embedded within documents in the Collaboration Cloud. To enable comments, integrate the TiptapCollabProvider and configure your setup to support comment functionality.
 
-## provider
+## Provider
 
-The TiptapCollabProvider instance
+The `TiptapCollabProvider` instance
 
 Default: `null`
 
@@ -26,7 +24,7 @@ Comments.configure({
 })
 ```
 
-## classes
+## Classes
 
 The classes used for the threads.
 
@@ -60,13 +58,13 @@ Comments.configure({
 
 ## onClickThread
 
-A callback that is called when a thread is clicked. If the thread is clicked, the id of the thread is passed to the callback. If no thread is clicked, `null` is passed.
+A callback that is called when a thread is clicked. If the thread is clicked, the thread ID is passed to the callback. If no thread is clicked, `null` is passed.
 
 Default: `undefined`
 
 ```js
-Comments.Configure({
-  // id can be a string or null
+Comments.configure({
+  // ID can be a string or null
   onClickThread: (id) => console.log('Thread clicked', id),
 })
 ```

src/content/comments/core-concepts/manage-threads.mdx

@@ -8,15 +8,15 @@ meta:
 
 import { Callout } from '@/components/ui/Callout'
 
-You can use the following guide to integrate comments directly into your editor. For a full list of all Comments editor commands see the [Editor Commands](/comments/integrate/editor-commands) documentation page.
+Use this guide to integrate comments directly into your editor. For a complete list of all Comments editor commands, see the [Editor Commands](/comments/integrate/editor-commands) page.
 
 You can also interact with comments from outside your editor via our [Comments REST API](/comments/integrate/rest-api).
 
 ## Learn about threads
 
-Tiptap's Comments feature organizes discussions into threads for clear, context-relevant collaboration, distinguishing between threads and individual comments.
+Tiptap's Comments feature organizes discussions into threads, enabling clear and context-relevant collaboration by distinguishing between threads and individual comments.
 
-Threads are overarching containers for discussions related to specific document parts, while comments are individual contributions within those threads.
+Threads serve as containers for discussions related to specific document sections, while comments represent individual contributions within those threads.
 
 ## Create a new thread
 
@@ -33,7 +33,7 @@ const createThread = () => {
 }
 ```
 
-This will create a new thread at the current selection and add a comment with the given content. By default comments and threads don't have a user or any other meta data assigned. Lets say you want to add the author to the thread **and** the comment. You can do this by passing through the `data` and `commentData` property to the `setThread` command.
+This will create a new thread at the current selection and add a comment with the given content. By default comments and threads don't have a user or any other metadata assigned. Let's say you want to add the author to the thread **and** the comment. You can do this by passing through the `data` and `commentData` property to the `setThread` command.
 
 ```js
 const createThread = () => {
@@ -90,7 +90,7 @@ To receive the list of threads on your current document manually, you can simply
 This is a static array which won't update on its own. If you want to keep the list of threads up to date, you can listen to changes via the `provider.watchThreads` and `provider.unwatchThreads` functions.
 
 ```js
-// lets save threads in a variable
+// let's save threads in a variable
 let threads = []
 
 // this function is called whenever the threads change
@@ -105,13 +105,13 @@ getThreads()
 provider.watchThreads(getThreads)
 ```
 
-to unwatch the threads you can call `provider.unwatchThreads(getThreads)`.
+To unwatch the threads you can call `provider.unwatchThreads(getThreads)`.
 
 ```js
 provider.unwatchThreads(getThreads)
 ```
 
-Lets say you want to write a react hook to get the threads and keep them up to date, you could write a hook like this.
+Let's say you want to write a react hook to get the threads and keep them up to date, you could write a hook like this.
 
 ```jsx
 const useThreads = (provider) => {
@@ -156,11 +156,11 @@ editor.commands.updateThread({
 })
 ```
 
-This will update the thread with the id `123` and set the `seen` property to `true`.
+This will update the thread with the ID `123` and set the `seen` property to `true`.
 
 ## Delete a thread
 
-To delete a thread you can use the `removeThread` command. This command will delete the thread with the given id.
+To delete a thread you can use the `removeThread` command. This command will delete the thread with the given ID.
 
 <Callout title="How to delete threads" variant="default">
   By default, threads removed won't be deleted from the yjs document. To do this, you can pass
@@ -178,7 +178,7 @@ editor.commands.removeThread({
 
 Comments can be added, edited, and removed within threads but cannot be marked as resolved, as they are considered parts of the thread discussions.
 
-To create a comment on a thread you can use the `createComment` command. This command will create a new comment on the thread with the given id.
+To create a comment on a thread you can use the `createComment` command. This command will create a new comment on the thread with the given ID.
 
 ```js
 editor.commands.createComment({
@@ -190,9 +190,9 @@ editor.commands.createComment({
 })
 ```
 
-This will create a new comment on the thread with the id `123` and set the content to `This is a new comment`. You can also pass through any meta data you want to the comment.
+This will create a new comment on the thread with the ID `123` and set the content to `This is a new comment`. You can also pass through any metadata you want to the comment.
 
-To update a comment you can use the `updateComment` command. This command will update the comment with the given id and update the content of the comment.
+To update a comment you can use the `updateComment` command. This command will update the comment with the given ID and update the content of the comment.
 
 ```js
 editor.commands.updateComment({
@@ -205,9 +205,9 @@ editor.commands.updateComment({
 })
 ```
 
-This will update the comment with the id `456` on the thread with the id `123` and set the content to `Now this is the new content`. You can also pass through any meta data you want to the comment.
+This will update the comment with the ID `456` on the thread with the ID `123` and set the content to `Now this is the new content`. You can also pass through any metadata you want to the comment.
 
-Finally you can delete a comment by using the `deleteComment` command. This command will delete the comment with the given id.
+Finally you can delete a comment by using the `deleteComment` command. This command will delete the comment with the given ID.
 
 ```js
 editor.commands.deleteComment({
@@ -218,17 +218,17 @@ editor.commands.deleteComment({
 
 ## Resolve and unresolve threads
 
-To resolve a thread you can use the `resolveThread` command. This command will resolve the thread with the given id.
+To resolve a thread you can use the `resolveThread` command. This command will resolve the thread with the given ID.
 
 ```js
 editor.commands.resolveThread({
   id: '123',
 })
 ```
 
-This will resolve the thread with the id `123`. To unresolve a thread you can use the `unresolveThread` command. This command will unresolve the thread with the given id.
+This will resolve the thread with the ID `123`. To unresolve a thread you can use the `unresolveThread` command. This command will unresolve the thread with the given ID.
 
-If you want to resolve a thread and add information on which user resolved the thread, you can set the threads data to include the user who resolved the thread. Just make sure to clear the data when unresolving the thread.
+If you want to resolve a thread and add information on which user resolved the thread, you can set the threads data to include the user who resolved the thread. Be sure to clear the data when unresolving the thread.
 
 ```js
 editor.commands.unresolveThread({
@@ -238,22 +238,22 @@ editor.commands.unresolveThread({
 
 ## Select a thread
 
-To select a thread you can use the `selectThread` command. This command will select the thread with the given id.
+To select a thread you can use the `selectThread` command. This command selects the thread with the specified ID.
 
 ```js
 editor.commands.selectThread({
   id: '123',
 })
 ```
 
-This will move the cursor to the thread with the id `123`.
+This will move the cursor to the thread with the ID `123`.
 
-To deselect a thread you can use the `unselectThread` command. This command will deselect the thread with the given id.
+To deselect a thread you can use the `unselectThread` command. This command deselects the thread with the specified ID.
 
 ```js
 editor.commands.unselectThread({
   id: '123',
 })
 ```
 
-You can also select or unselect threads without an id. In that case, the editor will select or unselect the thread at the current selection.
+You can also select or unselect threads without ID. In that case, the editor will select or unselect the thread at the current selection.

src/content/comments/core-concepts/style-threads.mdx

@@ -6,9 +6,9 @@ meta:
   category: Comments
 ---
 
-To style threads in your Tiptap editor, we use decoration classes that are wrapped around the threads. Since threads can also include block nodes, we have two different types of decorations. One for inline threads that are wrapped around the text and one for block threads that are wrapped around the block node.
+To style threads in your Tiptap editor, we use decoration classes that are wrapped around the threads. Since threads can include block nodes, we have two types of decorations: one for inline threads, which are wrapped around the text, and one for block threads, which are wrapped around the block node.
 
-By default the following css classes are used for the threads:
+By default, the following css classes are used for the threads:
 
 ```css
 .tiptap-thread {} // the thread class for any type of thread
@@ -44,7 +44,7 @@ const editor = new Editor({
 
 ## Handling hover events
 
-Lets say you have a sidebar with a list of threads and you want to highlight the thread currently hovered in your sidebar inside the editor, you can simply dispatch a transaction to the editor with the meta `threadMouseOver` or `threadMouseOut` to give the editor the information which thread is currently hovered.
+Let's say you have a sidebar with a list of threads, and you want to highlight the thread currently hovered in your sidebar inside the editor. You can dispatch a transaction to the editor with the meta `threadMouseOver` or `threadMouseOut` to indicate which thread is currently hovered.
 
 ```jsx
 const onHoverThread = (threadId) => {
@@ -57,7 +57,7 @@ const onHoverThread = (threadId) => {
 const onUnhoverThread = (threadId) => {
   const { tr } = editor.state
 
-  tr.setMeta('threadMouseOut', threadID)
+  tr.setMeta('threadMouseOut', threadId)
   editor.view.dispatch(tr)
 }
 

src/content/comments/getting-started/install.mdx

@@ -11,8 +11,8 @@ import { CodeDemo } from '@/components/CodeDemo'
 
 <Callout title="Subscription required" variant="warning">
   This extension requires a valid Entry, Business or Enterprise subscription and a running [Tiptap
-  Cloud instance](https://cloud.tiptap.dev/). To install the extension you need [access to our
-  private registry](/guides/pro-extensions), set this up first.
+  Cloud instance](https://cloud.tiptap.dev/). To install the extension, you need [access to our
+  private registry](/guides/pro-extensions). Set this up before proceeding.
 </Callout>
 
 ```bash
@@ -23,7 +23,7 @@ npm install @tiptap-pro/extension-comments
 
 After installing the `comments` extension via npm or any other package manager, you can use it in your editor by registering the extension in the `extensions` property of your editor instance.
 
-Since the Comments extension consists of multiple parts including multiple nodes and plugins, you will need to use the `CommentsKit` extension to add all the required parts to your editor.
+The Comments extension consists of multiple components, including nodes and plugins. To include all the required features, use the `CommentsKit` extension.
 
 ```js
 import { ThreadsKit } from '@tiptap-pro/extension-comments'

src/content/comments/getting-started/overview.mdx

@@ -9,27 +9,27 @@ meta:
 import { CodeDemo } from '@/components/CodeDemo'
 import { Callout } from '@/components/ui/Callout'
 
-The `comments` extension allows users to create threads and comments in your editor. Threads can be used to discuss specific parts of the document, or to add comments to specific parts of the document.
+The `Comments` extension lets users create threads and comments in the editor. Threads can be used to discuss specific parts of the document, while individual comments can be added to particular sections.
 
-Comments can be accessed and manipulated through the Comments REST API or received via Webhooks, enabling the creation of notification systems and the addition of comments from outside the Editor.
+Comments can be accessed and manipulated through the [Comments REST API](/comments/integrate/rest-api) or received via [webhooks](/comments/integrate/webhook), enabling the creation of notification systems and the ability to add comments from outside the Editor.
 
 <Callout title="Subscription required" variant="warning">
   This extension requires a valid Entry, Business or Enterprise subscription and a running [Tiptap
-  Cloud instance](https://cloud.tiptap.dev/). To install the extension you need [access to our
-  private registry](/guides/pro-extensions), set this up first.
+  Cloud instance](https://cloud.tiptap.dev/). To install the extension, you need [access to our
+  private registry](/guides/pro-extensions). Set this up before proceeding.
 </Callout>
 
 <CodeDemo isPro path="/Extensions/Comments?inline=false&hideSource=false" />
-For simpler examples, begin with the [Install](/comments/getting-started/install) section.
+For simpler use cases, start with the [install](/comments/getting-started/install) section.
 
 ## Comments features
 
-- Inline, Documents and Sidebar comments<br />
-- Commenting on text, nodes, custom nodes and across a selection of nodes<br />
-- Rich text support within comments (bold, emojis, etc.)<br />
-- Resolving, editing and deletion of comments<br />
-- Offline commenting support<br />
-- Overlapping comments<br />
-- Mentioning of users within comments<br />
-- A webhook that allows you to integrate your own notification service in case someone is mentioned<br />
-- A comments API that allows to programmatically interact with the comments<br />
+- Add inline, document, or sidebar comments
+- Comments on text, nodes, custom nodes, or across a selection of nodes
+- Rich text support within comments (e.g., bold, emojis)
+- Resolve, edit, or delete comments
+- Offline commenting support
+- Handle overlapping comments
+- Mention users directly within comments
+- Webhooks to  trigger custom notifications services when users are mentioned
+- Programmatically manage comments using the Comments API