open-index/open-npm huggingface dataset:
npm package: @sereneinserenade/tiptap-comment-extension
Description: Tiptap Extension for adding comments
Author: Jeet Mandaliya
Latest version: 0.2.0

# Tiptap Comment Extension:

<p align="center">
  <img src="assets/logo.svg" width="200"/>
  
  ![GitHub Sponsors](https://img.shields.io/github/sponsors/sereneinserenade?color=%23bf3989&label=Sponsor%20Me&style=for-the-badge)
  ![GitHub Repo stars](https://img.shields.io/github/stars/sereneinserenade/tiptap-comment-extension?label=Star%20the%20Repo&style=for-the-badge)
  DM Me on Discord - sereneinserenade#4869
</p>

[Tiptap Extension](https://tiptap.dev/guide/custom-extensions) for having Google-Docs like pro-commenting in Tiptap.

Supports both TipTap 2 and TipTap 3.

A ⭐️ to the repo if you 👍 / ❤️ what I'm doing would be much appreciated. If you're using this extension and making money from it, it'd be very kind of you to **[❤️ Sponsor me](https://github.com/sponsors/sereneinserenade)**. If you're looking for a **dev to work you on your project's Rich Text Editor** with or as **a frontend developer**, [DM me on Discord/Twitter/LinkedIn](https://github.com/sereneinserenade)👨‍💻🤩.

I've made a bunch of extensions for Tiptap 2, some of them are **Resiable Images And Videos**, **Search and Replace**, **LanguageTool integration** with tiptap. You can check it our here <https://github.com/sereneinserenade#a-glance-of-my-projects>.

## Demo:

Try live demo: https://sereneinserenade.github.io/tiptap-comment-extension/

https://github.com/sereneinserenade/tiptap-comment-extension/assets/45892659/5d66b6b7-7de0-4cc4-bfe4-0ec00d34aa4a

## How to use

```bash
npm i @sereneinserenade/tiptap-comment-extension
```

```ts
import StarterKit from "@tiptap/starter-kit";
import CommentExtension from "@sereneinserenade/tiptap-comment-extension";

/* or
import { CommentExtension } from "@sereneinserenade/tiptap-comment-extension";
*/

const extensions = [
  StarterKit,
  Comment.configure({
    HTMLAttributes: {
      class: "my-comment",
    },
    onCommentActivated: (commentId) => {
      setActiveCommentId(commentId);

      if (commentId) setTimeout(() => focusCommentWithActiveId(commentId));
    },
  }),
];
```

For more details, look at [react demo.](https://github.com/sereneinserenade/tiptap-comment-extension/blob/main/demos/react/src/components/Tiptap.tsx#L77-L91)

## API:

### Comment.configure

```ts
Comment.configure({
  HTMLAttributes: {
    class: "my-comment",
  },
  onCommentActivated: (commentId) => {
    setActiveCommentId(commentId);

    if (commentId) setTimeout(() => focusCommentWithActiveId(commentId));
  },
});
```

## Commands:

- `setComment`: Sets the comment for the current selection with the given commentId. <br/>
  Example: `editor.commands.setComment('<a-comment-id>')`
- `unsetComment`: Unsets the comment for the given commentId. <br/>
  Example: `editor.commands.unsetComment('<a-comment-id>')`

## Stargazers

[![Stargazers repo roster for @sereneinserenade/tiptap-comment-extension](https://reporoster.com/stars/dark/sereneinserenade/tiptap-comment-extension)](https://github.com/sereneinserenade/tiptap-comment-extension/stargazers)
npm package: @sereneinserenade/tiptap-extension-search-n-replace
Description: Search and Replace extension for TipTap 2.
Author: Jeet Mandaliya
Latest version: 2.0.0-beta.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# tiptap-extension-search-n-replace
Tiptap Search&amp;Replace extension
npm package: @sereneinserenade/tiptap-inline-suggestion
Description: Tiptap Extension for adding inline suggestions. Ex. for AI autocompletion.
Author: Jeet Mandaliya
Latest version: 0.0.2

# InlineSuggestion

A tiptap extension that allows you to add inline suggestions to your editor.

**Live Demo**: https://sereneinserenade.github.io/tiptap-inline-suggestion/

<details open>
<summary> Video Demo </summary>

https://github.com/sereneinserenade/tiptap-inline-suggestion/assets/45892659/b69efd59-f853-4c03-9a03-85044e43f58a

</details>

## Installation

```bash
npm install @sereneinserenade/tiptap-inline-suggestion
```

## Usage

Add `InlineSuggestion` extension to your list of extension for tiptap. Add a `fetchAutocompletion` function to the configuration object. This function should return a string. This string will be shown as a suggestion to the user.

Add styles to show the suggestion that gets stored in the attribute `data-inline-suggestion`. Below are styles I used for the demo, adjust it to your liking.

```ts
import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import InlineSuggestion from "@sereneinserenade/tiptap-inline-suggestion";

const editor = new Editor(
  {
    extensions: [
      StarterKit,
      // add InlineSuggestions to the array of tiptap extensions
      InlineSuggestion.configure(
        {
          fetchAutocompletion: async (query) => {
            // make request to your API or something else
            const res = await fetch(`YOUR_API_ENDPOINT?query=${query}`)

            const stringRes = res.suggestion; // or whatever your API returns

            return stringRes; // return value should always be a string
          }
        }
      ),
    ],
  }
)
```

```css
[data-inline-suggestion]::after {
  content: attr(data-inline-suggestion);
  color: #999;
}
```

## My

A ⭐️ to the repo if you 👍 / ❤️  what I'm doing would be much appreciated. If you're using this extension, it'd be very kind of you to **[:heart: Sponsor me](https://github.com/sponsors/sereneinserenade)**.

I've made a bunch of extensions for Tiptap 2, some of them are **Resiable Images And Videos**, **Search and Replace**, **LanguageTool integration** with tiptap. You can check it our here https://github.com/sereneinserenade#a-glance-of-my-projects.


## License

MIT © Jeet Mandaliya(github: sereneinserenade)