Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

docs/src/demos/Examples/Formatting/index.vue

@@ -28,6 +28,9 @@
       <button @click="editor.chain().focus().textAlign('right').run()">
         right
       </button>
+      <button @click="editor.chain().focus().textAlign('justify').run()">
+        justify
+      </button>
     </div>
     <editor-content :editor="editor" />
   </div>
@@ -70,22 +73,40 @@ export default {
         HardBreak(),
       ],
       content: `
-        <h2>Cyndi Lauper – Girls Just Want to Have Fun</h2>
-        <p>I come home in the morning light
-        My mother says, “When you gonna live your life right?”
-        Oh mother dear we’re not the fortunate ones
-        And girls, they wanna have fun
+        <h3>Girls Just Want to Have Fun (Cyndi Lauper)</h2>
+        <p>I come home in the morning light<br>
+        My mother says, “When you gonna live your life right?”<br>
+        Oh mother dear we’re not the fortunate ones<br>
+        And girls, they wanna have fun<br>
         Oh girls just want to have fun</p>
-        <p>The phone rings in the middle of the night
-        My father yells, "What you gonna do with your life?"
-        Oh daddy dear, you know you’re still number one
-        But girls, they wanna have fun
+        <p style="text-align: center">The phone rings in the middle of the night<br>
+        My father yells, "What you gonna do with your life?"<br>
+        Oh daddy dear, you know you’re still number one<br>
+        But girls, they wanna have fun<br>
         Oh girls just want to have</p>
-        <p>That’s all they really want
+        <p style="text-align:right">That’s all they really want<br>
+        Some fun<br>
+        When the working day is done<br>
+        Oh girls, they wanna have fun<br>
+        Oh girls just wanna have fun<br>
+        (girls, they wanna, wanna have fun, girls wanna have)</p>
+        <p style="text-align:justify">Some boys take a beautiful girl
+        And hide her away from the rest of the world
+        I want to be the one to walk in the sun
+        Oh girls, they wanna have fun
+        Oh girls just wanna have</p>
+        <p style="text-align:justify">That's all they really want
         Some fun
         When the working day is done
         Oh girls, they wanna have fun
-        Oh girls just wanna have fun (girls, they wanna, wanna have fun, girls wanna have)</p>
+        Oh girls just want to have fun (girls, they wanna, wanna have fun, girls wanna have)
+        They just wanna, they just wanna (girls)
+        They just wanna, they just wanna, oh girl (girls just wanna have fun)
+        Girls just wanna have fun
+        They just wanna, they just wanna
+        They just wanna, they just wanna (girls)
+        They just wanna, they just wanna, oh girl (girls just wanna have fun)
+        Girls just want to have fun</p>
       `,
     })
   },

docs/src/demos/Examples/MarkdownShortcuts/index.vue

@@ -22,13 +22,13 @@ export default {
     this.editor = new Editor({
       content: `
         <p>
-          Start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
+          Markdown shortcuts make it easy to format the text while typing.
         </p>
         <p>
-          Those conventions are called <strong>input rules</strong> in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code.
+          To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
         </p>
         <p>
-          You can add your own input rules to your Nodes and Marks or even to the default ones.
+          Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code. You can add your own input rules to existing extensions, and to your custom nodes and marks.
         </p>
       `,
       extensions: defaultExtensions(),

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/demos/Nodes/TaskList/index.spec.js

@@ -0,0 +1,119 @@
+context('/api/nodes/task-list', () => {
+  before(() => {
+    cy.visit('/api/nodes/task-list')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p>')
+      editor.selectAll()
+    })
+  })
+
+  it('should parse unordered lists correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<ul data-type="task_list"><li data-checked="true" data-type="task_item"><p>Example Text</p></li></ul>')
+      expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="true" data-type="task_item"><p>Example Text</p></li></ul>')
+    })
+  })
+
+  it('should parse unordered lists without paragraphs correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<ul data-type="task_list"><li data-checked="false" data-type="task_item">Example Text</li></ul>')
+      expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="false" data-type="task_item"><p>Example Text</p></li></ul>')
+    })
+  })
+
+  it('the button should make the selected line a task list item', () => {
+    cy.get('.ProseMirror ul')
+      .should('not.exist')
+
+    cy.get('.ProseMirror ul li')
+      .should('not.exist')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('ul[data-type="task_list"]')
+      .should('contain', 'Example Text')
+
+    cy.get('.ProseMirror')
+      .find('ul[data-type="task_list"] li')
+      .should('contain', 'Example Text')
+  })
+
+  it('the button should toggle the task list', () => {
+    cy.get('.ProseMirror ul')
+      .should('not.exist')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('ul[data-type="task_list"]')
+      .should('contain', 'Example Text')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror ul')
+      .should('not.exist')
+  })
+
+  it('should leave the list with double enter', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('[ ] List Item 1{enter}{enter}Paragraph')
+
+    cy.get('.ProseMirror')
+      .find('li')
+      .its('length')
+      .should('eq', 1)
+
+    cy.get('.ProseMirror')
+      .find('p')
+      .should('contain', 'Paragraph')
+  })
+
+  it('should make a task list from square brackets', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('[ ] List Item 1{enter}List Item 2')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'List Item 1')
+      .should('have.attr', 'data-checked', 'false')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', 'List Item 2')
+      .should('have.attr', 'data-checked', 'false')
+  })
+
+  it.only('should make a task list from checked square brackets', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('[x] List Item 1{enter}List Item 2')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'List Item 1')
+      .should('have.attr', 'data-checked', 'true')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', 'List Item 2')
+      .should('have.attr', 'data-checked', 'true')
+  })
+})

docs/src/docPages/api/commands.md

@@ -67,4 +67,4 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .selectAll()       | Select the whole document.              |
 
 ### Extensions
-All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions) to learn more about that. Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell.
+All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions), [nodes](/api/nodes), and [marks](/api/marks) to learn more about that. Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell.

docs/src/docPages/api/extensions.md

@@ -5,51 +5,40 @@
 ## Introduction
 Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
 
-## A minimalist set of extensions
-You’ll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist).
-
-## Default extensions
-You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. See [how you can use the `defaultExtensions()`](/examples/basic).
-
-## List of supported extensions
+## List of provided extensions
 | Title                                                       | Default Extension | Source Code                                                                                            |
 | ----------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
-| [Blockquote](/api/extensions/blockquote)                    | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)           |
-| [Bold](/api/extensions/bold)                                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)                 |
-| [BulletList](/api/extensions/bullet-list)                   | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)          |
-| [Code](/api/extensions/code)                                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)                 |
-| [CodeBlock](/api/extensions/code-block)                     | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)           |
 | [Collaboration](/api/extensions/collaboration)              | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/)        |
 | [CollaborationCursor](/api/extensions/collaboration-cursor) | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/) |
-| [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/)              |
-| [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/)      |
-| [Image](/api/extensions/image)                              | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)                |
-| [Italic](/api/extensions/italic)                            | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)               |
-| [Link](/api/extensions/link)                                | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)                 |
-| [ListItem](/api/extensions/list-item)                       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)            |
-| [OrderedList](/api/extensions/ordered-list)                 | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)         |
-| [Paragraph](/api/extensions/paragraph)                      | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)            |
-| [Strike](/api/extensions/strike)                            | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)               |
-| [Text](/api/extensions/text)                                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)                 |
+| [Dropcursor](/api/extensions/dropcursor)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)           |
+| [Focus](/api/extensions/focus)                              | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)                |
+| [Gapcursor](/api/extensions/gapcursor)                      | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/)            |
+| [History](/api/extensions/history)                          | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)              |
 | [TextAlign](/api/extensions/text-align)                     | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)           |
-| [Underline](/api/extensions/underline)                      | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)            |
+| [Typography](/api/extensions/typography)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/)           |
 
-<!-- | [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/) -->
-<!-- | [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) -->
-<!-- | [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/) -->
-<!-- | [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/) -->
-<!-- | [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/) -->
-<!-- | [TableRow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) -->
-<!-- | [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/) -->
-<!-- | [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/) -->
+You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. Learn [how you can use the `defaultExtensions()`](/examples/basic).
 
-## Community extensions
-:::warning Work in Progress
-This section is not ready yet. Meanwhile, [search through GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets.
-:::
+## Create a new extension
+You’re free to create your own extensions for tiptap. Here is the boilerplate code that’s need to create and register your own extension:
 
-## Your custom extensions
-Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/build-custom-extensions).
+```js
+import { createExtension } from '@tiptap/core'
+
+const CustomExtension = createExtension({
+  // Your code here
+})
+
+const editor = new Editor({
+  extensions: [
+    // Register your custom extension with the editor.
+    CustomExtension(),
+    // … and don’t forget all other extensions.
+    Document(),
+    Paragraph(),
+    Text(),
+    // …
+  ],
+```
+
+Learn [more about custom extensions in our guide](/guide/build-custom-extensions).

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.md

@@ -3,3 +3,13 @@
 ## toc
 
 ## Introduction
+
+## List of supported marks
+| Title                             | Default Extension | Source Code                                                                                 |
+| --------------------------------- | ----------------- | ------------------------------------------------------------------------------------------- |
+| [Bold](/api/marks/bold)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)      |
+| [Code](/api/marks/code)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)      |
+| [Italic](/api/marks/italic)       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)    |
+| [Link](/api/marks/link)           | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)      |
+| [Strike](/api/marks/strike)       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)    |
+| [Underline](/api/marks/underline) | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) |

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.md

@@ -3,3 +3,21 @@
 ## toc
 
 ## Introduction
+
+## List of supported nodes
+| Title                                        | Default Extension | Source Code                                                                                       |
+| -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
+| [Blockquote](/api/nodes/blockquote)          | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)      |
+| [BulletList](/api/nodes/bullet-list)         | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)     |
+| [CodeBlock](/api/nodes/code-block)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)      |
+| [Document](/api/nodes/document)              | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)        |
+| [HardBreak](/api/nodes/hard-break)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)      |
+| [Heading](/api/nodes/heading)                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)         |
+| [HorizontalRule](/api/nodes/horizontal-rule) | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) |
+| [Image](/api/nodes/image)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)           |
+| [ListItem](/api/nodes/list-item)             | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)       |
+| [OrderedList](/api/nodes/ordered-list)       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)    |
+| [Paragraph](/api/nodes/paragraph)            | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)       |
+| [TaskItem](/api/nodes/task-item)             | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)       |
+| [TaskList](/api/nodes/task-list)             | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)       |
+| [Text](/api/nodes/text)                      | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)            |

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

@@ -1,11 +1,11 @@
 # BulletList
-This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
+This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
 
 Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.
 
 ## Installation
 ::: warning Use with ListItem
-The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
+This extension requires the [`ListItem`](/api/nodes/list-item) extension.
 :::
 
 ```bash
@@ -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`&nbsp;`Shift`&nbsp;`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

@@ -2,8 +2,8 @@
 The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
 
 ## Installation
-::: warning Restrictions
-This extension is intended to be used with the [`BulletList`](/api/extensions/bullet-list) or [`OrderedList`](/api/extensions/ordered-list) extension. It doesn’t work without at least using one of them.
+::: warning Use with BulletList and/or OrderedList
+This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) extension.
 :::
 
 ```bash
@@ -19,9 +19,6 @@ yarn add @tiptap/extension-list-item
 | ------ | ------ | ------- | -------------------------------------------- |
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
-## Commands
-*None*
-
 ## Keyboard shortcuts
 * New list item: `Enter`
 * Sink a list item: `Tab`
@@ -31,4 +28,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

@@ -1,11 +1,11 @@
 # OrderedList
-This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags,
+This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.
 
 Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
 
 ## Installation
 ::: warning Use with ListItem
-The `OrderedList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
+This extension requires the [`ListItem`](/api/nodes/list-item) extension.
 :::
 
 ```bash
@@ -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 an ordered list. |
 
 ## Keyboard shortcuts
 * `Control`&nbsp;`Shift`&nbsp;`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

@@ -1,8 +1,8 @@
 # TaskItem
 
 ## Installation
-::: warning Restrictions
-This extension is intended to be used with the [`TaskList`](/api/extensions/task-list) extension. It doesn’t work without at least using one of them.
+::: warning Use with TaskList
+This extension requires the [`TaskList`](/api/nodes/task-list) extension.
 :::
 
 ```bash
@@ -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

@@ -1,16 +1,18 @@
 # TaskList
-This extension enables you to use task lists in the editor. They are rendered as `<ul>` HTML tags.
+This extension enables you to use task lists in the editor. They are rendered as `<ul data-type="task_list">`. This implementation doesn’t require any framework, it’s using plain JavaScript only.
+
+Type <code>[ ]&nbsp;</code> or <code>[x]&nbsp;</code> at the beginning of a new line and it will magically transform to a task list.
 
 ## Installation
 ::: warning Use with TaskItem
-The `TaskList` extension is intended to be used with the [`TaskItem`](/api/extensions/task-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
+This extension requires the [`TaskItem`](/api/nodes/task-item) extension.
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-task-list @tiptap/extension-task-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-task-list @tiptap/extension-task-item
 ```
 
@@ -20,12 +22,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" highlight="3-5,17-18,37-38" />

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/docPages/api/nodes/todo-item.md

@@ -1,17 +0,0 @@
-# TodoItem
-It renders a single toggleable item of a list.
-
-::: warning Restrictions
-This extensions is intended to be used with the `TodoList` extension.
-:::
-
-## Settings
-| Option | Type    | Default | Description                           |
-| ------ | ------- | ------- | ------------------------------------- |
-| nested | Boolean | false   | Specifies if you can nest todo lists. |
-
-## Commands
-*None*
-
-## Keyboard shortcuts
-*None*

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

@@ -1,69 +0,0 @@
-# TodoList
-Renders a toggleable list of items.
-
-::: warning Restrictions
-This extensions is intended to be used with the `TodoItem` extension.
-:::
-
-## Settings
-*None*
-
-## Commands
-| Command   | Options | Description       |
-| --------- | ------- | ----------------- |
-| todo_list | —       | Toggle todo list. |
-
-## Keyboard shortcuts
-*None*
-
-## Usage
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
-        Todo List
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { TodoItem, TodoList } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          TodoItem({
-            nested: true,
-          }),
-          TodoList(),
-        ],
-        content: `
-          <ul data-type="todo_list">
-            <li data-type="todo_item" data-done="true">
-              Checked item
-            </li>
-            <li data-type="todo_item" data-done="false">
-              Unchecked item
-            </li>
-          </ul>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```

docs/src/docPages/overview/upgrade-guide.md

@@ -5,7 +5,7 @@
 ## Reasons to upgrade to tiptap 2.x
 Yes, it’s tedious work to upgrade your favorite text editor to a new API, but we made sure you’ve got enough reasons to upgrade to the newest version
 
-* Autocomplete in your IDE (thanks to TypeScript)
+* Autocompletion in your IDE (thanks to TypeScript)
 * Amazing documentation with 100+ pages
 * Active development, new features in the making
 * Tons of new extensions planned
@@ -18,7 +18,7 @@ The new API will look pretty familiar too you, but there are a ton of changes th
 …
 
 ### Explicitly register the Document, Text and Paragraph extensions
-tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions.
+tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/nodes/document), [Paragraph](/api/nodes/paragraph) and [Text](/api/nodes/text) extensions.
 
 ```js
 import Document from '@tiptap/extension-document'

docs/src/layouts/App/style.scss

@@ -184,7 +184,16 @@ $menuBreakPoint: 800px;
     }
 
     &--draft {
-      color: rgba($colorWhite, 0.2);
+      color: rgba($colorWhite, 0.4);
+
+      &::after {
+        content: 'draft';
+        font-family: 'JetBrainsMono', monospace;
+        color: $colorGrey;
+        background-color: rgba($colorGrey, 0.1);
+        padding: 0 0.5em;
+        border-radius: 5px;
+      }
     }
 
     &--premium {

docs/src/links.yaml

@@ -6,6 +6,7 @@
       link: /overview/installation
     - title: Upgrade Guide
       link: /overview/upgrade-guide
+      draft: true
     - title: Contributing
       link: /overview/contributing
     - title: Examples
@@ -28,6 +29,7 @@
           link: /examples/formatting
         - title: Links
           link: /examples/links
+          draft: true
         # - title: Images
         #   link: /examples/images
         #   draft: true
@@ -79,8 +81,10 @@
   items:
     - title: Getting started
       link: /guide/getting-started
+      draft: true
     - title: Configuration
       link: /guide/configuration
+      draft: true
     - title: Create your editor
       link: /guide/create-your-editor
       draft: true
@@ -123,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
@@ -132,7 +135,6 @@
           link: /api/nodes/paragraph
         - title: TaskList
           link: /api/nodes/task-list
-          draft: true
         - title: TaskItem
           link: /api/nodes/task-item
           draft: true

packages/extension-text-align/index.ts

@@ -9,7 +9,7 @@ type TextAlignOptions = {
 const TextAlign = createExtension({
   defaultOptions: <TextAlignOptions>{
     types: ['heading', 'paragraph'],
-    alignments: ['left', 'center', 'right'],
+    alignments: ['left', 'center', 'right', 'justify'],
     defaultAlignment: 'left',
   },