move everything around, add more content and a first test for images

docs/src/demos/Extensions/Focus/index.spec.js

@@ -0,0 +1,9 @@
+context('/examples/focus', () => {
+  before(() => {
+    cy.visit('/examples/focus')
+  })
+
+  it('should have class', () => {
+    cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
+  })
+})

docs/src/demos/Extensions/Focus/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Focus from '@tiptap/extension-focus'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Focus({
+          className: 'has-focus',
+          nested: true,
+        }),
+      ],
+      autoFocus: true,
+      content: `
+        <p>
+          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
+        </p>
+        <p>
+          Nested elements will be focused with the default setting nested: true. Otherwise the whole item will get the focus class, even when just a single nested item is selected.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.has-focus {
+  border-radius: 3px;
+  box-shadow: 0 0 0 3px #68CEF8;
+}
+</style>

docs/src/demos/Nodes/Image/index.spec.js

@@ -0,0 +1,27 @@
+context('/api/nodes/image', () => {
+  before(() => {
+    cy.visit('/api/nodes/image')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p>')
+      editor.selectAll()
+    })
+  })
+
+  it('should add an img tag with the correct URL', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt').returns('foobar.png')
+
+      cy.get('.demo__preview button:first')
+        .click()
+
+      cy.window().its('prompt').should('be.called')
+
+      cy.get('.ProseMirror')
+        .find('img')
+        .should('have.attr', 'src', 'foobar.png')
+    })
+  })
+})

docs/src/docPages/api/extensions/collaboration-cursor.md

@@ -20,10 +20,9 @@ yarn add @tiptap/extension-collaboration-cursor
 | type     |      |         |             |
 
 ## Commands
-*None*
-
-## Keyboard shortcuts
-*None*
+| Command | Parameters    | Description                                                              |
+| ------- | ------------- | ------------------------------------------------------------------------ |
+| user    | name<br>color | The name of the current user.<br>The color of the current user’s cursor. |
 
 ## Source code
 [packages/extension-collaboration-cursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/)

docs/src/docPages/api/extensions/focus.md

@@ -10,7 +10,10 @@ yarn add @tiptap/extension-focus
 ```
 
 ## Settings
-*None*
+| 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. |
 
 ## Commands
 *None*
@@ -22,4 +25,4 @@ yarn add @tiptap/extension-focus
 [packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
 
 ## Usage
-<demo name="Extensions/Focus" highlight="" />
+<demo name="Extensions/Focus" highlight="31-34,12" />

docs/src/docPages/api/extensions/history.md

@@ -17,7 +17,7 @@ yarn add @tiptap/extension-history
 | 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. |
 
 ## Commands
-| Command | Options | Description           |
+| Command | Parameters | Description           |
 | ------- | ------- | --------------------- |
 | undo    | —       | Undo the last change. |
 | redo    | —       | Redo the last change. |

docs/src/docPages/api/extensions/text-align.md

@@ -9,6 +9,15 @@ npm install @tiptap/extension-text-align
 yarn add @tiptap/extension-text-align
 ```
 
+## Settings
+*None*
+
+## Commands
+*None*
+
+## Keyboard shortcuts
+*None*
+
 ## Source code
 [packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)
 

docs/src/docPages/api/marks/bold.md

@@ -22,7 +22,7 @@ yarn add @tiptap/extension-bold
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description     |
+| Command | Parameters | Description     |
 | ------- | ------- | --------------- |
 | bold    | —       | Mark text bold. |
 
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-bold
 [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
 
 ## Usage
-<demo name="Extensions/Bold" highlight="3-5,17,36" />
+<demo name="Marks/Bold" highlight="3-5,17,36" />

docs/src/docPages/api/marks/code.md

@@ -18,7 +18,7 @@ yarn add @tiptap/extension-code
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description               |
+| Command | Parameters | Description               |
 | ------- | ------- | ------------------------- |
 | code    | —       | Mark text as inline code. |
 
@@ -29,4 +29,4 @@ yarn add @tiptap/extension-code
 [packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
 
 ## Usage
-<demo name="Extensions/Code" highlight="3-5,17,36" />
+<demo name="Marks/Code" highlight="3-5,17,36" />

docs/src/docPages/api/marks/italic.md

@@ -22,7 +22,7 @@ yarn add @tiptap/extension-italic
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description       |
+| Command | Parameters | Description       |
 | ------- | ------- | ----------------- |
 | italic  | —       | Mark text italic. |
 
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-italic
 [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
 
 ## Usage
-<demo name="Extensions/Italic" highlight="3-5,17,36" />
+<demo name="Marks/Italic" highlight="3-5,17,36" />

docs/src/docPages/api/marks/link.md

@@ -23,17 +23,17 @@ yarn add @tiptap/extension-link
 | target      | string  | _blank                       | Set the default `target` of links.           |
 
 ## Commands
-| Command | Options        | Description                                                 |
+| Command | Parameters     | Description                                                 |
 | ------- | -------------- | ----------------------------------------------------------- |
 | link    | href<br>target | Link the selected text. Removes a link, if `href` is empty. |
 
 ## Keyboard shortcuts
 :::warning Doesn’t have a keyboard shortcut
-This extension doesn’t bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though.
+This extension doesn’t bind a specific keyboard shortcut. You would probably open your custom UI on `Mod-k` though.
 :::
 
 ## Source code
 [packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
 
 ## Usage
-<demo name="Extensions/Link" highlight="3-8,19,38,55" />
+<demo name="Marks/Link" highlight="3-8,19,38,55" />

docs/src/docPages/api/marks/strike.md

@@ -22,7 +22,7 @@ yarn add @tiptap/extension-strike
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description                 |
+| Command | Parameters | Description                 |
 | ------- | ------- | --------------------------- |
 | strike  | —       | Mark text as strikethrough. |
 
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-strike
 [packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
 
 ## Usage
-<demo name="Extensions/Strike" highlight="3-5,17,36" />
+<demo name="Marks/Strike" highlight="3-5,17,36" />

docs/src/docPages/api/marks/underline.md

@@ -22,9 +22,9 @@ yarn add @tiptap/extension-underline
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command   | Options | Description              |
-| --------- | ------- | ------------------------ |
-| underline | —       | Mark text as underlined. |
+| Command   | Parameters | Description              |
+| --------- | ---------- | ------------------------ |
+| underline | —          | Mark text as underlined. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control` `U`
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-underline
 [packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
 
 ## Usage
-<demo name="Extensions/Underline" highlight="3-5,17,36" />
+<demo name="Marks/Underline" highlight="3-5,17,36" />

docs/src/docPages/api/nodes/blockquote.md

@@ -19,9 +19,9 @@ yarn add @tiptap/extension-blockquote
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command    | Options | Description                   |
-| ---------- | ------- | ----------------------------- |
-| blockquote | —       | Wrap content in a blockquote. |
+| Command    | Parameters | Description                   |
+| ---------- | ---------- | ----------------------------- |
+| blockquote | —          | Wrap content in a blockquote. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control` `Shift` `9`
@@ -31,4 +31,4 @@ yarn add @tiptap/extension-blockquote
 [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
 
 ## Usage
-<demo name="Extensions/Blockquote" highlight="3-5,17,36" />
+<demo name="Nodes/Blockquote" highlight="3-5,17,36" />

docs/src/docPages/api/nodes/bullet-list.md

@@ -22,9 +22,9 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command     | Options | Description           |
-| ----------- | ------- | --------------------- |
-| bullet_list | —       | Toggle a bullet list. |
+| Command     | Parameters | Description           |
+| ----------- | ---------- | --------------------- |
+| bullet_list | —          | Toggle a bullet list. |
 
 ## Keyboard shortcuts
 * `Control` `Shift` `8`
@@ -33,4 +33,4 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
 
 ## Usage
-<demo name="Extensions/BulletList" highlight="3-5,17-18,37-38" />
+<demo name="Nodes/BulletList" highlight="3-5,17-18,37-38" />

docs/src/docPages/api/nodes/code-block.md

@@ -23,9 +23,9 @@ yarn add @tiptap/extension-code-block
 | languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. |
 
 ## Commands
-| Command   | Options | Description                   |
-| --------- | ------- | ----------------------------- |
-| codeBlock | —       | Wrap content in a code block. |
+| Command   | Parameters | Description                   |
+| --------- | ---------- | ----------------------------- |
+| codeBlock | —          | Wrap content in a code block. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control` `Shift` `C`
@@ -35,4 +35,4 @@ yarn add @tiptap/extension-code-block
 [packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
 
 ## Usage
-<demo name="Extensions/CodeBlock" highlight="3-5,17,36" />
+<demo name="Nodes/CodeBlock" highlight="3-5,17,36" />

docs/src/docPages/api/nodes/document.md

@@ -20,4 +20,4 @@ yarn add @tiptap/extension-document
 [packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
 
 ## Usage
-<demo name="Extensions/Document" highlight="10,28" />
+<demo name="Nodes/Document" highlight="10,28" />

docs/src/docPages/api/nodes/hard-break.md

@@ -10,13 +10,10 @@ npm install @tiptap/extension-hard-break
 yarn add @tiptap/extension-hard-break
 ```
 
-## Settings
-*None*
-
 ## Commands
-| Command   | Options | Description       |
-| --------- | ------- | ----------------- |
-| hardBreak | —       | Add a line break. |
+| Command   | Parameters | Description       |
+| --------- | ---------- | ----------------- |
+| hardBreak | —          | Add a line break. |
 
 ## Keyboard shortcuts
 * `Shift` `Enter`
@@ -27,4 +24,4 @@ yarn add @tiptap/extension-hard-break
 [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
 
 ## Usage
-<demo name="Extensions/HardBreak" highlight="3-5,17,36" />
+<demo name="Nodes/HardBreak" highlight="3-5,17,36" />

docs/src/docPages/api/nodes/heading.md

@@ -19,9 +19,9 @@ yarn add @tiptap/extension-heading
 | levels | Array  | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. |
 
 ## Commands
-| Command | Options | Description             |
-| ------- | ------- | ----------------------- |
-| heading | level   | Creates a heading node. |
+| Command | Parameters | Description                                      |
+| ------- | ---------- | ------------------------------------------------ |
+| heading | level      | Creates a heading node with the specified level. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control` `Alt` `1-6`
@@ -31,4 +31,4 @@ yarn add @tiptap/extension-heading
 [packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
 
 ## Usage
-<demo name="Extensions/Heading" highlight="3-11,23,42-44" />
+<demo name="Nodes/Heading" highlight="3-11,23,42-44" />

docs/src/docPages/api/nodes/horizontal-rule.md

@@ -18,9 +18,9 @@ yarn add @tiptap/extension-horizontal-rule
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command         | Options | Description               |
-| --------------- | ------- | ------------------------- |
-| horizontalRule | —       | Create a horizontal rule. |
+| Command        | Parameters | Description               |
+| -------------- | ---------- | ------------------------- |
+| horizontalRule | —          | Create a horizontal rule. |
 
 ## Keyboard shortcuts
 *None*
@@ -29,4 +29,4 @@ yarn add @tiptap/extension-horizontal-rule
 [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
 
 ## Usage
-<demo name="Extensions/HorizontalRule" highlight="3-5,17,36" />
+<demo name="Nodes/HorizontalRule" highlight="3-5,17,36" />

docs/src/docPages/api/nodes/image.md

@@ -1,4 +1,9 @@
 # Image
+Use this extension to render `<img>` HTML tags. By default, those images are blocks. If you want to render images in line with text  set the `inline` option to `true`.
+
+:::warning Restrictions
+This extension does only the rendering of images. It doesn’t upload images to your server, that’s a whole different story.
+:::
 
 ## Installation
 ```bash
@@ -10,12 +15,12 @@ yarn add @tiptap/extension-image
 ```
 
 ## Settings
-| Option | Type    | Default | Description              |
-| ------ | ------- | ------- | ------------------------ |
-| inline | boolean | false   | Renders the node inline. |
+| Option | Type    | Default | Description                    |
+| ------ | ------- | ------- | ------------------------------ |
+| inline | boolean | false   | Renders the image node inline. |
 
 ## Source code
 [packages/extension-image/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)
 
 ## Usage
-<demo name="Extensions/Image" />
+<demo name="Nodes/Image" />

docs/src/docPages/api/nodes/list-item.md

@@ -31,4 +31,4 @@ yarn add @tiptap/extension-list-item
 [packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
 
 ## Usage
-<demo name="Extensions/ListItem" highlight="3-8,20-22,41-43" />
+<demo name="Nodes/ListItem" highlight="3-8,20-22,41-43" />

docs/src/docPages/api/nodes/ordered-list.md

@@ -22,9 +22,9 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command      | Options | Description            |
-| ------------ | ------- | ---------------------- |
-| ordered_list | —       | Toggle a ordered list. |
+| Command     | Parameters | Description            |
+| ----------- | ---------- | ---------------------- |
+| orderedList | —          | Toggle a ordered list. |
 
 ## Keyboard shortcuts
 * `Control` `Shift` `9`
@@ -33,4 +33,4 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 [packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
 
 ## Usage
-<demo name="Extensions/OrderedList" highlight="3-5,17-18,37-38" />
+<demo name="Nodes/OrderedList" highlight="3-5,17-18,37-38" />

docs/src/docPages/api/nodes/paragraph.md

@@ -20,9 +20,9 @@ yarn add @tiptap/extension-paragraph
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command   | Options | Description                                  |
-| --------- | ------- | -------------------------------------------- |
-| paragraph | —       | Transforms all selected nodes to paragraphs. |
+| Command   | Parameters | Description                                  |
+| --------- | ---------- | -------------------------------------------- |
+| paragraph | —          | Transforms all selected nodes to paragraphs. |
 
 ## Keyboard shortcuts
 * Windows & Linux: `Control` `Alt` `0`
@@ -32,4 +32,4 @@ yarn add @tiptap/extension-paragraph
 [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
 
 ## Usage
-<demo name="Extensions/Paragraph" highlight="11,29" />
+<demo name="Nodes/Paragraph" highlight="11,29" />

docs/src/docPages/api/nodes/task-item.md

@@ -25,4 +25,4 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
 [packages/extension-task-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)
 
 ## Usage
-<demo name="Extensions/TaskItem" />
+<demo name="Nodes/TaskItem" />

docs/src/docPages/api/nodes/task-list.md

@@ -20,12 +20,12 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command  | Options | Description         |
-| -------- | ------- | ------------------- |
-| taskList | —       | Toggle a task list. |
+| Command  | Parameters | Description         |
+| -------- | ---------- | ------------------- |
+| taskList | —          | Toggle a task list. |
 
 ## Source code
 [packages/extension-task-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)
 
 ## Usage
-<demo name="Extensions/TaskList" />
+<demo name="Nodes/TaskList" />

docs/src/docPages/api/nodes/text.md

@@ -18,4 +18,4 @@ yarn add @tiptap/extension-text
 [packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
 
 ## Usage
-<demo name="Extensions/Text" highlight="12,30" />
+<demo name="Nodes/Text" highlight="12,30" />

docs/src/links.yaml

@@ -127,7 +127,6 @@
           link: /api/nodes/horizontal-rule
         - title: Image
           link: /api/nodes/image
-          draft: true
         - title: ListItem
           link: /api/nodes/list-item
         - title: OrderedList