This commit is contained in:
Philipp Kühn
2020-11-18 12:35:45 +01:00
29 changed files with 138 additions and 89 deletions

View File

@@ -44,3 +44,17 @@ export default {
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
img {
max-width: 100%;
height: auto;
}
}
</style>

View File

@@ -44,3 +44,17 @@ export default {
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
img {
max-width: 100%;
height: auto;
}
}
</style>

View File

@@ -57,3 +57,17 @@ export default {
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
img {
max-width: 100%;
height: auto;
}
}
</style>

View File

@@ -95,7 +95,7 @@ new Editor({
| --------- | ------------------------------------------------------ |
| `'start'` | Sets the focus to the beginning of the document. |
| `'end'` | Sets the focus to the end of the document. |
| number | Sets the focus to a specific position in the document. |
| `Number` | Sets the focus to a specific position in the document. |
| `true` | Enables autofocus. |
| `false` | Disables autofocus. |
| `null` | Disables autofocus. |

View File

@@ -15,6 +15,7 @@ yarn add @tiptap/extension-collaboration yjs y-webrtc
```
## Settings
<!-- TODO -->
| Option | Type | Default | Description |
| -------- | ---- | ------- | ----------- |
| provider | | | |

View File

@@ -1,7 +1,7 @@
# Dropcursor
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged over the editor.
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged into the editor.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and youre free to add a custom CSS class.
## Installation
```bash
@@ -12,6 +12,13 @@ npm install @tiptap/extension-dropcursor
yarn add @tiptap/extension-dropcursor
```
## Settings
| Option | Type | Default | Description |
| ------ | -------- | --------- | --------------------------------------------------------------------- |
| color | `String` | `'black'` | Color of the dropcursor. |
| width | `Number` | `1` | Width of the dropcursor. |
| class | `String` | | One or multiple CSS classes that should be applied to the dropcursor. |
## Source code
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)

View File

@@ -13,10 +13,10 @@ yarn add @tiptap/extension-focus
```
## Settings
| Option | Type | Default | Description |
| --------- | ------- | --------- | ------------------------------------------------------ |
| className | string | has-focus | The class that is applied to the focused element. |
| nested | boolean | true | When enabled nested elements get the focus class, too. |
| Option | Type | Default | Description |
| --------- | --------- | ------------- | ------------------------------------------------------ |
| className | `String` | `'has-focus'` | The class that is applied to the focused element. |
| nested | `Boolean` | `true` | When enabled nested elements get the focus class, too. |
## Source code
[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)

View File

@@ -15,9 +15,9 @@ yarn add @tiptap/extension-text-style @tiptap/extension-font-family
```
## Settings
| Option | Type | Default | Description |
| ------ | ----- | ------------- | ------------------------------------------------------------------------ |
| types | array | ['textStyle'] | A list of marks to which the font family attribute should be applied to. |
| Option | Type | Default | Description |
| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
| types | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
## Commands
| Command | Parameters | Description |

View File

@@ -1,7 +1,7 @@
# Gapcursor
This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that dont allow regular selection. For example, after a table at the end of a document.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The [default CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts) is loaded through the Editor class.
## Installation
```bash

View File

@@ -11,10 +11,10 @@ yarn add @tiptap/extension-history
```
## Settings
| Option | Type | Default | Description |
| ------------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| depth | number | 100 | The amount of history events that are collected before the oldest events are discarded. Defaults to 100. |
| newGroupDelay | number | 500 | The delay between changes after which a new group should be started (in milliseconds). When changes arent adjacent, a new group is always started. |
| Option | Type | Default | Description |
| ------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| depth | `Number` | `100` | The amount of history events that are collected before the oldest events are discarded. Defaults to 100. |
| newGroupDelay | `Number` | `500` | The delay between changes after which a new group should be started (in milliseconds). When changes arent adjacent, a new group is always started. |
## Commands
| Command | Parameters | Description |

View File

@@ -11,11 +11,11 @@ yarn add @tiptap/extension-text-align
```
## Settings
| Option | Type | Default | Description |
| ---------------- | ------ | -------------------------------------- | -------------------------------------------------------------------- |
| types | array | ['heading', 'paragraph'] | A list of nodes where the text align attribute should be applied to. |
| alignments | array | ['left', 'center', 'right', 'justify'] | A list of available options for the text align attribute. |
| defaultAlignment | string | left | The default text align. |
| Option | Type | Default | Description |
| ---------------- | -------- | ---------------------------------------- | -------------------------------------------------------------------- |
| types | `Array` | `['heading', 'paragraph']` | A list of nodes where the text align attribute should be applied to. |
| alignments | `Array` | `['left', 'center', 'right', 'justify']` | A list of available options for the text align attribute. |
| defaultAlignment | `String` | `'left'` | The default text align. |
## Commands
| Command | Parameters | Description |

View File

@@ -17,14 +17,14 @@ yarn add @tiptap/extension-bold
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ------- | ------- | --------------- |
| bold | — | Mark text bold. |
| ------- | ---------- | --------------- |
| bold | — | Mark text bold. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`B`

View File

@@ -13,14 +13,14 @@ yarn add @tiptap/extension-code
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ------- | ------- | ------------------------- |
| code | — | Mark text as inline code. |
| ------- | ---------- | ------------------------- |
| code | — | Mark text as inline code. |
## Keyboard shortcuts
* `Alt`&nbsp;<code>`</code>

View File

@@ -13,9 +13,9 @@ yarn add @tiptap/extension-highlight
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Options | Description |

View File

@@ -17,14 +17,14 @@ yarn add @tiptap/extension-italic
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ------- | ------- | ----------------- |
| italic | — | Mark text italic. |
| ------- | ---------- | ----------------- |
| italic | — | Mark text italic. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`I`

View File

@@ -15,12 +15,10 @@ yarn add @tiptap/extension-link
```
## Settings
| Option | Type | Default | Description |
| ----------- | ------- | ---------------------------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| openOnClick | boolean | true | If enabled, links will be opened on click. |
| rel | string | noopener noreferrer nofollow | Configure the `rel` attribute. |
| target | string | _blank | Set the default `target` of links. |
| Option | Type | Default | Description |
| -------------- | --------- | ----------------------------------------------------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{ target: '_blank', rel: 'noopener noreferrer nofollow' }` | Custom HTML attributes that should be added to the rendered HTML tag. |
| openOnClick | `Boolean` | `true` | If enabled, links will be opened on click. |
## Commands
| Command | Parameters | Description |

View File

@@ -17,14 +17,14 @@ yarn add @tiptap/extension-strike
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ------- | ------- | --------------------------- |
| strike | — | Mark text as strikethrough. |
| ------- | ---------- | --------------------------- |
| strike | — | Mark text as strikethrough. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`D`

View File

@@ -17,9 +17,9 @@ yarn add @tiptap/extension-underline
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |

View File

@@ -14,9 +14,9 @@ yarn add @tiptap/extension-blockquote
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |

View File

@@ -17,13 +17,13 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |
| ----------- | ---------- | --------------------- |
| Command | Parameters | Description |
| ---------- | ---------- | --------------------- |
| bulletList | — | Toggle a bullet list. |
## Keyboard shortcuts

View File

@@ -17,10 +17,10 @@ yarn add @tiptap/extension-code-block
```
## Settings
| Option | Type | Default | Description |
| ------------------- | ------ | --------- | ---------------------------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. |
| Option | Type | Default | Description |
| ------------------- | -------- | ------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| languageClassPrefix | `String` | `'language-'` | Adds a prefix to language classes that are applied to code tags. |
## Commands
| Command | Parameters | Description |

View File

@@ -13,10 +13,10 @@ yarn add @tiptap/extension-heading
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------------------ | --------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| levels | array | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. |
| Option | Type | Default | Description |
| -------------- | -------- | -------------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| levels | `Array` | `[1, 2, 3, 4, 5, 6]` | Specifies which heading levels are supported. |
## Commands
| Command | Parameters | Description |

View File

@@ -13,9 +13,9 @@ yarn add @tiptap/extension-horizontal-rule
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |

View File

@@ -15,9 +15,10 @@ yarn add @tiptap/extension-image
```
## Settings
| Option | Type | Default | Description |
| ------ | ------- | ------- | ------------------------------ |
| inline | boolean | false | Renders the image node inline. |
| Option | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| inline | `Boolean` | `false` | Renders the image node inline. |
## Source code
[packages/extension-image/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)

View File

@@ -15,9 +15,9 @@ yarn add @tiptap/extension-list-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Keyboard shortcuts
* New list item: `Enter`

View File

@@ -17,9 +17,9 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |

View File

@@ -15,9 +15,9 @@ yarn add @tiptap/extension-paragraph
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |

View File

@@ -17,9 +17,9 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Keyboard shortcuts
* New list item: `Enter`

View File

@@ -17,9 +17,9 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
## Commands
| Command | Parameters | Description |