add basic highlight extension

This commit is contained in:
Hans Pagel
2020-10-02 15:28:00 +02:00
parent f96dca37d6
commit 1fc7a6b37e
7 changed files with 182 additions and 0 deletions

View File

@@ -24,6 +24,7 @@ You dont have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
| [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) |
| [HardBreak](/api/extensions/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) |
| [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) |
| [Highlight](/api/extensions/highlight) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/) |
| [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) |
| [HorizontalRule](/api/extensions/horizontal-rule) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) |
| [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) |

View File

@@ -0,0 +1,31 @@
# Highlight
Use this extension to render highlighted text with `<mark>`.
## Installation
```bash
# With npm
npm install @tiptap/extension-highlight
# Or: With Yarn
yarn add @tiptap/extension-highlight
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| --------- | ------- | ------------------------- |
| highlight | — | Mark text as highlighted. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`E`
* macOS: `Cmd`&nbsp;`E`
## Source code
[packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)
## Usage
<demo name="Extensions/Highlight" highlight="3-5,17,36" />