https://github.com/sereneinserenade/tiptap-inline-suggestion
Tiptap inline suggestions. Give a ⭐️ if you like it!
https://github.com/sereneinserenade/tiptap-inline-suggestion
prosemirror tiptap tiptap-editor tiptap-inline-suggestion tiptap-v2
Last synced: 2 months ago
JSON representation
Tiptap inline suggestions. Give a ⭐️ if you like it!
- Host: GitHub
- URL: https://github.com/sereneinserenade/tiptap-inline-suggestion
- Owner: sereneinserenade
- License: mit
- Created: 2023-08-14T20:24:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-18T05:21:22.000Z (almost 2 years ago)
- Last Synced: 2024-10-24T21:38:11.296Z (8 months ago)
- Topics: prosemirror, tiptap, tiptap-editor, tiptap-inline-suggestion, tiptap-v2
- Language: TypeScript
- Homepage: https://sereneinserenade.github.io/tiptap-inline-suggestion/
- Size: 1.28 MB
- Stars: 48
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# InlineSuggestion
A tiptap extension that allows you to add inline suggestions to your editor.
**Live Demo**: https://sereneinserenade.github.io/tiptap-inline-suggestion/
Video Demo
https://github.com/sereneinserenade/tiptap-inline-suggestion/assets/45892659/b69efd59-f853-4c03-9a03-85044e43f58a
## 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)