https://github.com/luccalb/tiptap-annotation-magic
An extension for the Tiptap editor, enabling the annotation of text. Comes with support for overlapping annotations, useful for e.g. NLP tokenization.
https://github.com/luccalb/tiptap-annotation-magic
angular annotation extension javascript js nlp react rich-text-editor tiptap tokenization tokenizer vue wysiwyg wysiwyg-editor
Last synced: 1 day ago
JSON representation
An extension for the Tiptap editor, enabling the annotation of text. Comes with support for overlapping annotations, useful for e.g. NLP tokenization.
- Host: GitHub
- URL: https://github.com/luccalb/tiptap-annotation-magic
- Owner: luccalb
- License: mit
- Created: 2023-08-16T07:50:17.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-04T17:24:16.000Z (over 2 years ago)
- Last Synced: 2025-09-09T17:07:08.216Z (7 months ago)
- Topics: angular, annotation, extension, javascript, js, nlp, react, rich-text-editor, tiptap, tokenization, tokenizer, vue, wysiwyg, wysiwyg-editor
- Language: TypeScript
- Homepage:
- Size: 309 KB
- Stars: 35
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tiptap Annotation Magic
## Description
This is an extension for the [Tiptap](https://github.com/ueberdosis/tiptap) editor (based on ProseMirror). It's unique
for its ability to **render overlapping annotations** as fragments. Annotations are rendered as [Decorations](https://prosemirror.net/docs/ref/#view.Decorations)
and are therefore not a part of the Prosemirror Document.
## Setup
### Install Tiptap
`npm install --save @tiptap/core @tiptap/pm @tiptap/starter-kit`
### Install Annotation Magic
`npm install --save tiptap-annotation-magic`
### Configuration
Define a model if you want to store data in annotations.
```{ts}
interface AnnotationData {
name: string;
magicNumber: number;
}
```
Add `AnnotationMagic` to the list of your extensions.
```{ts}
extensions: [
StarterKit,
AnnotationMagic().configure({
onAnnotationListChange: (annotations: Annotation[]) => {
// Callback when annotation is created/deleted/updated
},
onSelectionChange: (selectedAnnotations: Annotation[]) => {
// Callback when the selected editor text changes
},
styles: {
// CSS classes to use for different fragments
leftFragment: 'fragment-left',
rightFragment: 'fragment-right',
middleFragment: 'fragment-middle',
normal: 'annotation-normal',
}
})
]
```
## Commands
```{ts}
// Create an annotation containing `data` at the selected text location
editor.chain().focus().addAnnotation(data).run();
// Update an annotations `data`
editor.chain().focus().addAnnotation(id, data).run();
// Remove an existing annotation
editor.chain().focus().deleteAnnotation(id).run();
```
## Demo
See a Demo using React on [Stackblitz](https://stackblitz.com/edit/stackblitz-starters-4gxggz?file=src%2FTiptap.tsx)