ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: make all extenion settings a list

Browse Source
This commit is contained in:
Hans Pagel
2021-10-02 01:20:09 +02:00
parent 4487fb0d75
commit 9ed883edd4
21 changed files with 586 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/api/nodes/code-block-lowlight.md
View File

@@ -16,10 +16,28 @@ yarn add @tiptap/extension-code-block-lowlight
```
## Settings
| 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. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
CodeBlockLowlight.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### languageClassPrefix
Adds a prefix to language classes that are applied to code tags.
Default: `'language-'`
```js
CodeBlockLowlight.configure({
languageClassPrefix: 'language-',
})
```
## Commands

30
docs/api/nodes/code-block.md
View File

@@ -6,8 +6,8 @@ With the CodeBlock extension you can add fenced code blocks to your documents. I
Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
::: warning Restrictions
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s [on our roadmap](/api/nodes/code-block-lowlight) though.
::: warning No syntax highlighting
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. Try the [CodeBlockLowlight](/api/nodes/code-block-lowlight) extension if you’re looking for code blocks with syntax highlighting.
:::
## Installation
@@ -20,10 +20,28 @@ yarn add @tiptap/extension-code-block
```
## Settings
| 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. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
CodeBlock.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### languageClassPrefix
Adds a prefix to language classes that are applied to code tags.
Default: `'language-'`
```js
CodeBlock.configure({
languageClassPrefix: 'language-',
})
```
## Commands

26
docs/api/nodes/hard-break.md
View File

@@ -14,10 +14,28 @@ yarn add @tiptap/extension-hard-break
```
## Settings
| Option | Type | Default | Description |
| -------------- | --------- | ------- | ---------------------------------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| keepMarks | `Boolean` | `true` | Decides whether to keep marks after a line break. Based on the `keepOnSplit` option for marks. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
HardBreak.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### keepMarks
Decides whether to keep marks after a line break. Based on the `keepOnSplit` option for marks.
Default: `true`
```js
HardBreak.configure({
keepMarks: false,
})
```
## Commands

26
docs/api/nodes/heading.md
View File

@@ -16,10 +16,28 @@ yarn add @tiptap/extension-heading
```
## Settings
| 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. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Heading.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### levels
Specifies which heading levels are supported.
Default: `[1, 2, 3, 4, 5, 6]`
```js
Heading.configure({
levels: [1, 2],
})
```
## Commands

28
docs/api/nodes/image.md
View File

@@ -18,10 +18,30 @@ yarn add @tiptap/extension-image
```
## Settings
| 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. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Image.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### inline
Renders the image node inline, for example in a paragraph tag: `<p><img src="spacer.gif"></p>`. By default images are on the same level as paragraphs.
It totally depends on what kind of editing experience you’d like to have, but can be useful if you (for example) migrate from Quill to tiptap.
Default: `false`
```js
Image.configure({
inline: true,
})
```
## Commands

15
docs/api/nodes/mention.md
View File

@@ -56,9 +56,18 @@ And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactR
It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | -------------------------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Mention.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
| renderLabel | `String` | `({ options, node }) => …` | Define how a mention label should be rendered. |
| suggestion | `Object` | `{ … }` | [Read more](/api/utilities/suggestion) |

38
docs/api/nodes/table.md
View File

@@ -24,15 +24,35 @@ yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-t
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
## Settings
| Option | Type | Default | Description |
| ----------------------- | --------- | ----------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| resizable | `Boolean` | `false` | |
| handleWidth | `Number` | `5` | |
| cellMinWidth | `Number` | `25` | |
| View | `View` | `TableView` | |
| lastColumnResizable | `Boolean` | `true` | |
| allowTableNodeSelection | `Boolean` | `false` | |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Table.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### resizable
Default: `false`
### handleWidth
Default: `5`
### cellMinWidth
Default: `25`
### View
Default: `TableView`
### lastColumnResizable
Default: `true`
### allowTableNodeSelection
Default: `false`
## Commands