docs: make all extenion settings a list

docs/api/extensions/bubble-menu.md

@@ -15,12 +15,32 @@ yarn add @tiptap/extension-bubble-menu
 ```
 
 ## Settings
-| Option       | Type                 | Default        | Description                                                             |
+
-| ------------ | -------------------- | -------------- | ----------------------------------------------------------------------- |
+### element
-| element      | `HTMLElement`        | `null`         | The DOM element that contains your menu.                                |
+The DOM element that contains your menu.
-| tippyOptions | `Object`             | `{}`           | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
+
-| pluginKey    | `string \| PluginKey` | `'bubbleMenu'` | The key for the underlying ProseMirror plugin.                          |
+Type: `HTMLElement`
-| shouldShow   | `(props) => boolean` |                | Controls whether the menu should be shown or not.                       |
+
+Default: `null`
+
+### tippyOptions
+Under the hood, the `BubbleMenu` uses [tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/). You can directly pass options to it.
+
+Type: `Object`
+
+Default: `{}`
+
+### pluginKey
+The key for the underlying ProseMirror plugin. Make sure to use different keys if you add more than one instance.
+
+Type: `string | PluginKey`
+
+Default: `'bubbleMenu'`
+
+### shouldShow
+A callback to control whether the menu should be shown or not.
+
+Type: `(props) => boolean`
 
 ## Source code
 [packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bubble-menu/)

docs/api/extensions/character-count.md

@@ -14,9 +14,18 @@ yarn add @tiptap/extension-character-count
 ```
 
 ## Settings
-| Option | Type     | Default | Description                                              |
+
-| ------ | -------- | ------- | -------------------------------------------------------- |
+### limit
-| limit  | `Number` | `0`     | The maximum number of characters that should be allowed. |
+
+The maximum number of characters that should be allowed. |
+
+Default: `0`
+
+```js
+CharacterCount.configure({
+  limit: 240,
+})
+```
 
 ## Source code
 [packages/extension-character-count/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/)

docs/api/extensions/collaboration-cursor.md

@@ -22,16 +22,28 @@ yarn add @tiptap/extension-collaboration-cursor
 This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
 
 ## Settings
-| Option   | Type       | Default                       | Description                                                                                                                                                                         |
+
-| -------- | ---------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+### provider
-| provider | `Object`   | `null`                        | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance.                                                                                |
+A Y.js network provider, for example a [y-websocket](https://github.com/yjs/y-websocket) instance.
-| user     | `Object`   | `{ user: null, color: null }` | Attributes of the current user, assumes to have a name and a color, but can be used with any attribute.                                                                             |
+
-| render   | `Function` | …                             | A render function for the cursor, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) for an example. |
+Default: `null`
+
+### user
+Attributes of the current user, assumes to have a name and a color, but can be used with any attribute. The values are synced with all other connected clients.
+
+Default: `{ user: null, color: null }`
+
+### render
+A render function for the cursor, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) for an example.
 
 ## Commands
-| Command | Parameters | Description                                                                                      |
+
-| ------- | ---------- | ------------------------------------------------------------------------------------------------ |
+### user()
-| user    | attributes | An object with the attributes of the current user, by default it expects a `name` and a `color`. |
+An object with the attributes of the current user. It expects a `name` and a `color`, but you can add additional fields, too.
+
+```js
+editor.commands.user({ name: 'Philipp Kühn', color: '#000000' })
+```
 
 ## Source code
 [packages/extension-collaboration-cursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/)

docs/api/extensions/collaboration.md

@@ -20,17 +20,56 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
 ```
 
 ## Settings
-| Option   | Type     | Default     | Description                                                                             |
+
-| -------- | -------- | ----------- | --------------------------------------------------------------------------------------- |
+### document
-| document | `Object` | `null`      | An initialized Y.js document.                                                           |
+An initialized Y.js document.
-| field    | `String` | `'default'` | Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document. |
+
-| fragment | `Object` | `null`      | A raw Y.js fragment, can be used instead of `document` and `field`.                     |
+Default: `null`
+
+```js
+Collaboration.configure({
+  document: new Y.Doc(),
+})
+```
+
+### field
+Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document.
+
+Default: `'default'`
+
+```js
+Collaboration.configure({
+  document: new Y.Doc(),
+  field: 'title',
+})
+```
+
+### fragment
+A raw Y.js fragment, can be used instead of `document` and `field`.
+
+Default: `null`
+
+```js
+Collaboration.configure({
+  fragment: new Y.Doc().getXmlFragment('body'),
+})
+```
 
 ## Commands
-| Command | Parameters | Description           |
+The `Collboration` extension comes with its own history extension. Make sure to disable the default extension, if you’re working with the `StarterKit`.
-| ------- | ---------- | --------------------- |
+
-| undo    | —          | Undo the last change. |
+### undo()
-| redo    | —          | Redo the last change. |
+Undo the last change.
+
+```js
+editor.commands.undo()
+```
+### redo()
+Redo the last change.
+
+```js
+editor.commands.redo()
+```
 
 ## Keyboard shortcuts
 | Command | Windows/Linux                                         | macOS                                         |

docs/api/extensions/color.md

@@ -16,14 +16,33 @@ yarn add @tiptap/extension-text-style @tiptap/extension-color
 This extension requires the [`TextStyle`](/api/marks/text-style) mark.
 
 ## Settings
-| Option | Type    | Default         | Description                                                              |
+
-| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
+### types
-| types  | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
+A list of marks to which the color attribute should be applied to.
+
+Default: `['textStyle']`
+
+```js
+Color.configure({
+  types: ['textStyle'],
+})
+```
 
 ## Commands
-| Command | Parameters | Description                                  |
+
-| ------- | ---------- | -------------------------------------------- |
+### setColor()
-| color   | color      | Applies the given font color as inline style |
+Applies the given font color as inline style.
+
+```js
+editor.commands.setColor('#ff0000')
+```
+
+### unsetColor()
+Removes any font color.
+
+```js
+editor.commands.unsetColor()
+```
 
 ## Source code
 [packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)

docs/api/extensions/dropcursor.md

@@ -16,11 +16,37 @@ yarn add @tiptap/extension-dropcursor
 ```
 
 ## Settings
-| Option | Type     | Default          | Description                                                           |
+
-| ------ | -------- | ---------------- | --------------------------------------------------------------------- |
+### color
-| color  | `String` | `'currentcolor'` | Color of the dropcursor.                                              |
+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. |
+Default: `'currentcolor'`
+
+```js
+Dropcursor.configure({
+  color: '#ff0000'
+})
+```
+
+### width
+Width of the dropcursor.
+
+Default: `1`
+
+```js
+Dropcursor.configure({
+  width: 2,
+})
+```
+
+### class
+One or multiple CSS classes that should be applied to the dropcursor.
+
+```js
+Dropcursor.configure({
+  class: 'my-custom-class',
+})
+```
 
 ## Source code
 [packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)

docs/api/extensions/floating-menu.md

@@ -13,12 +13,32 @@ yarn add @tiptap/extension-floating-menu
 ```
 
 ## Settings
-| Option       | Type                 | Default          | Description                                                             |
+
-| ------------ | -------------------- | ---------------- | ----------------------------------------------------------------------- |
+### element
-| element      | `HTMLElement`        | `null`           | The DOM element of your menu.                                           |
+The DOM element that contains your menu.
-| tippyOptions | `Object`             | `{}`             | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
+
-| pluginKey    | `string | PluginKey` | `'floatingMenu'` | The key for the underlying ProseMirror plugin.                          |
+Type: `HTMLElement`
-| shouldShow   | `(props) => boolean` |                  | Controls whether the menu should be shown or not.                       |
+
+Default: `null`
+
+### tippyOptions
+Under the hood, the `BubbleMenu` uses [tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/). You can directly pass options to it.
+
+Type: `Object`
+
+Default: `{}`
+
+### pluginKey
+The key for the underlying ProseMirror plugin. Make sure to use different keys if you add more than one instance.
+
+Type: `string | PluginKey`
+
+Default: `'floatingMenu'`
+
+### shouldShow
+A callback to control whether the menu should be shown or not.
+
+Type: `(props) => boolean`
 
 ## Source code
 [packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-floating-menu/)

docs/api/extensions/focus.md

@@ -16,10 +16,28 @@ yarn add @tiptap/extension-focus
 ```
 
 ## Settings
-| Option    | Type     | Default       | Description                                                                  |
+
-| --------- | -------- | ------------- | ---------------------------------------------------------------------------- |
+### className
-| className | `String` | `'has-focus'` | The class that is applied to the focused element.                            |
+The class that is applied to the focused element.
-| mode      | `String` | `'all'`       | Apply the class to `'all'`, the `'shallowest'` or the `'deepest'` node. |
+
+Default: `'has-focus'`
+
+```js
+Focus.configure({
+  className: 'focus',
+})
+```
+
+### mode
+Apply the class to `'all'`, the `'shallowest'` or the `'deepest'` node.
+
+Default: `'all'`
+
+```js
+Focus.configure({
+  mode: 'deepest',
+})
+```
 
 ## Source code
 [packages/extension-focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/)

docs/api/extensions/font-family.md

@@ -16,14 +16,33 @@ yarn add @tiptap/extension-text-style @tiptap/extension-font-family
 This extension requires the [`TextStyle`](/api/marks/text-style) mark.
 
 ## Settings
-| Option | Type    | Default         | Description                                                              |
+
-| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
+### types
-| types  | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
+A list of marks to which the font family attribute should be applied to.
+
+Default: `['textStyle']`
+
+```js
+FontFamily.configure({
+  types: ['textStyle'],
+})
+```
 
 ## Commands
-| Command    | Parameters | Description                                   |
+
-| ---------- | ---------- | --------------------------------------------- |
+### setFontFamily()
-| fontFamily | fontFamily | Applies the given font family as inline style |
+Applies the given font family as inline style.
+
+```js
+editor.commands.setFontFamily('Inter')
+```
+
+### unsetFontFamily()
+Removes any font family.
+
+```js
+editor.commands.unsetFontFamily()
+```
 
 ## Source code
 [packages/extension-font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/)

docs/api/extensions/history.md

@@ -14,10 +14,28 @@ yarn add @tiptap/extension-history
 ```
 
 ## Settings
-| Option        | Type     | Default | Description                                                                                                                                         |
+
-| ------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+### depth
-| depth         | `Number` | `100`   | The amount of history events that are collected before the oldest events are discarded. Defaults to 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 aren’t adjacent, a new group is always started. |
+
+Default: `100`
+
+```js
+History.configure({
+  depth: 10,
+})
+```
+
+### newGroupDelay
+The delay between changes after which a new group should be started (in milliseconds). When changes aren’t adjacent, a new group is always started.
+
+Default: `500`
+
+```js
+History.configure({
+  newGroupDelay: 1000,
+})
+```
 
 ## Commands
 

docs/api/extensions/placeholder.md

@@ -14,13 +14,76 @@ yarn add @tiptap/extension-placeholder
 ```
 
 ## Settings
-| Option               | Type                | Default               | Description                                                 |
+
-| -------------------- | ------------------- | --------------------- | ----------------------------------------------------------- |
+### emptyEditorClass
-| emptyEditorClass     | `String`            | `'is-editor-empty'`   | The added CSS class if the editor is empty.                 |
+The added CSS class if the editor is empty.
-| emptyNodeClass       | `String`            | `'is-empty'`          | The added CSS class if the node is empty.                   |
+
-| placeholder          | `String | Function` | `'Write something …'` | The placeholder text added as `data-placeholder` attribute. |
+Default: `'is-editor-empty'`
-| showOnlyWhenEditable | `Boolean`           | `true`                | Show decorations only when editor is editable.              |
+
-| showOnlyCurrent      | `Boolean`           | `true`                | Show decorations only in currently selected node.           |
+```js
+Placeholder.configure({
+  emptyEditorClass: 'is-editor-empty',
+})
+```
+
+### emptyNodeClass
+The added CSS class if the node is empty.
+
+Default: `'is-empty'`
+
+```js
+Placeholder.configure({
+  emptyNodeClass: 'my-custom-is-empty-class',
+})
+```
+
+### placeholder
+The placeholder text added as `data-placeholder` attribute.
+
+Default: `'Write something …'`
+
+```js
+Placeholder.configure({
+  placeholder: 'My Custom Placeholder',
+})
+```
+
+You can even use a function to add placeholder depending on the node:
+
+```js
+Placeholder.configure({
+  placeholder: ({ node }) => {
+    if (node.type.name === 'heading') {
+      return 'What’s the title?'
+    }
+
+    return 'Can you add some further context?'
+  },
+})
+```
+
+### showOnlyWhenEditable
+Show decorations only when editor is editable.
+
+Default: `true`
+
+```js
+Placeholder.configure({
+  showOnlyWhenEditable: false,
+})
+```
+
+### showOnlyCurrent
+Show decorations only in currently selected node.
+
+Default: `true`
+
+```js
+Placeholder.configure({
+  showOnlyCurrent: false
+})
+```
+
 
 ## Source code
 [packages/extension-placeholder/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/)

docs/api/extensions/text-align.md

@@ -18,16 +18,56 @@ yarn add @tiptap/extension-text-align
 ```
 
 ## Settings
-| Option           | Type     | Default                                  | Description                                                                                                             |
+
-| ---------------- | -------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+### types
-| types            | `Array`  | `[]`                                     | A list of nodes where the text align attribute should be applied to. Usually something like `['heading', 'paragraph']`. |
+A list of nodes where the text align attribute should be applied to. Usually something like `['heading', 'paragraph']`.
-| alignments       | `Array`  | `['left', 'center', 'right', 'justify']` | A list of available options for the text align attribute.                                                               |
+
-| defaultAlignment | `String` | `'left'`                                 | The default text align.                                                                                                 |
+Default: `[]`
+
+```js
+TextAlign.configure({
+  types: ['heading', 'paragraph'],
+})
+```
+
+### alignments
+A list of available options for the text align attribute.
+
+Default: `['left', 'center', 'right', 'justify']`
+
+```js
+TextAlign.configure({
+  alignments: ['left', 'right'],
+})
+```
+
+### defaultAlignment
+The default text align.
+
+Default: `'left'`
+
+```js
+TextAlign.configure({
+  defaultAlignment: 'right',
+})
+```
+
 
 ## Commands
-| Command   | Parameters | Description                                |
+
-| --------- | ---------- | ------------------------------------------ |
+### setTextAlign()
-| textAlign | alignment  | Set the text align to the specified value. |
+Set the text align to the specified value.
+
+```js
+editor.commands.setTextAlign('right')
+```
+
+### unsetTextAlign()
+Remove the text align value.
+
+```js
+editor.commands.unsetTextAlign()
+```
 
 ## Keyboard shortcuts
 | Command                 | Windows/Linux                | macOS                       |

docs/api/marks/highlight.md

@@ -16,10 +16,28 @@ yarn add @tiptap/extension-highlight
 ```
 
 ## Settings
-| Option         | Type      | Default | Description                                                           |
+
-| -------------- | --------- | ------- | --------------------------------------------------------------------- |
+### HTMLAttributes
-| multicolor     | `Boolean` | `false` | Add support for multiple colors.                                      |
+Custom HTML attributes that should be added to the rendered HTML tag.
-| HTMLAttributes | `Object`  | `{}`    | Custom HTML attributes that should be added to the rendered HTML tag. |
+
+```js
+Highlight.configure({
+  HTMLAttributes: {
+    class: 'my-custom-class',
+  },
+})
+```
+
+### multicolor
+Add support for multiple colors.
+
+Default: `false`
+
+```js
+Highlight.configure({
+  multicolor: true,
+})
+```
 
 ## Commands
 

docs/api/marks/link.md

@@ -18,11 +18,40 @@ yarn add @tiptap/extension-link
 ```
 
 ## Settings
-| Option         | Type      | Default                                                     | Description                                                                      |
+
-| -------------- | --------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------- |
+### HTMLAttributes
-| HTMLAttributes | `Object`  | `{ target: '_blank', rel: 'noopener noreferrer nofollow' }` | Custom HTML attributes that should be added to the rendered HTML tag.            |
+Custom HTML attributes that should be added to the rendered HTML tag.
-| openOnClick    | `Boolean` | `true`                                                      | If enabled, links will be opened on click.                                       |
+
-| linkOnPaste    | `Boolean` | `true`                                                      | Adds a link to the current selection if the pasted content only contains an url. |
+```js
+Link.configure({
+  HTMLAttributes: {
+    class: 'my-custom-class',
+  },
+})
+```
+
+### openOnClick
+If enabled, links will be opened on click.
+
+Default: `true`
+
+```js
+Link.configure({
+  openOnClick: false,
+})
+```
+
+### linkOnPaste
+Adds a link to the current selection if the pasted content only contains an url.
+
+Default: `true`
+
+```js
+Link.configure({
+  linkOnPaste: false,
+})
+```
+
 
 ## Commands
 

docs/api/nodes/code-block-lowlight.md

@@ -16,10 +16,28 @@ yarn add @tiptap/extension-code-block-lowlight
 ```
 
 ## Settings
-| Option              | Type     | Default       | Description                                                           |
+
-| ------------------- | -------- | ------------- | --------------------------------------------------------------------- |
+### HTMLAttributes
-| HTMLAttributes      | `Object` | `{}`          | Custom HTML attributes that should be added to the rendered HTML tag. |
+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.      |
+
+```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
 

docs/api/nodes/code-block.md

@@ -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
+::: warning No syntax highlighting
-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.
+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
-| HTMLAttributes      | `Object` | `{}`          | Custom HTML attributes that should be added to the rendered HTML tag. |
+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.      |
+
+```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
 

docs/api/nodes/hard-break.md

@@ -14,10 +14,28 @@ yarn add @tiptap/extension-hard-break
 ```
 
 ## Settings
-| Option         | Type      | Default | Description                                                                                    |
+
-| -------------- | --------- | ------- | ---------------------------------------------------------------------------------------------- |
+### HTMLAttributes
-| HTMLAttributes | `Object`  | `{}`    | Custom HTML attributes that should be added to the rendered HTML tag.                          |
+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. |
+
+```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
 

docs/api/nodes/heading.md

@@ -16,10 +16,28 @@ yarn add @tiptap/extension-heading
 ```
 
 ## Settings
-| Option         | Type     | Default              | Description                                                           |
+
-| -------------- | -------- | -------------------- | --------------------------------------------------------------------- |
+### HTMLAttributes
-| HTMLAttributes | `Object` | `{}`                 | Custom HTML attributes that should be added to the rendered HTML tag. |
+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.                         |
+
+```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
 

docs/api/nodes/image.md

@@ -18,10 +18,30 @@ yarn add @tiptap/extension-image
 ```
 
 ## Settings
-| Option         | Type      | Default | Description                                                           |
+
-| -------------- | --------- | ------- | --------------------------------------------------------------------- |
+### HTMLAttributes
-| HTMLAttributes | `Object`  | `{}`    | Custom HTML attributes that should be added to the rendered HTML tag. |
+Custom HTML attributes that should be added to the rendered HTML tag.
-| inline         | `Boolean` | `false` | Renders the image node inline.                                        |
+
+```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
 

docs/api/nodes/mention.md

@@ -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
-| HTMLAttributes | `Object` | `{}`                       | Custom HTML attributes that should be added to the rendered HTML tag. |
+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)                                |
 

docs/api/nodes/table.md

@@ -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
-| HTMLAttributes          | `Object`  | `{}`        | Custom HTML attributes that should be added to the rendered HTML tag. |
+Custom HTML attributes that should be added to the rendered HTML tag.
-| resizable               | `Boolean` | `false`     |                                                                       |
+
-| handleWidth             | `Number`  | `5`         |                                                                       |
+```js
-| cellMinWidth            | `Number`  | `25`        |                                                                       |
+Table.configure({
-| View                    | `View`    | `TableView` |                                                                       |
+  HTMLAttributes: {
-| lastColumnResizable     | `Boolean` | `true`      |                                                                       |
+    class: 'my-custom-class',
-| allowTableNodeSelection | `Boolean` | `false`     |                                                                       |
+  },
+})
+```
+
+### resizable
+Default: `false`
+
+### handleWidth
+Default: `5`
+
+### cellMinWidth
+Default: `25`
+
+### View
+Default: `TableView`
+
+### lastColumnResizable
+Default: `true`
+
+### allowTableNodeSelection
+Default: `false`
 
 ## Commands