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

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

@@ -1,9 +1,7 @@
 <template>
   <div>
+    BUG: Headings can’t be transformed to a bullet or ordered list.
     <div v-if="editor">
-      <button @click="editor.chain().focus().removeMarks().run()">
-        clear format
-      </button>
       <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
@@ -19,14 +17,8 @@
       <button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+      <button @click="editor.chain().focus().removeMarks().run()">
-        bullet list
+        clear format
-      </button>
-      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
-        ordered list
-      </button>
-      <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-        code block
       </button>
       <button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
         paragraph
@@ -49,6 +41,15 @@
       <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
+      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+        bullet list
+      </button>
+      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+        ordered list
+      </button>
+      <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        code block
+      </button>
       <button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
         blockquote
       </button>

docs/src/demos/General/Installation/index.vue

@@ -18,7 +18,7 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
+      content: '<p>Hello, I’m tiptap running in Vue.js! 👋</p>',
       extensions: defaultExtensions(),
     })
   },

docs/src/docPages/api/commands.md

@@ -1,65 +1,35 @@
 # Commands
 
-:::warning Out of date
+## Chain commands
-This content is written for tiptap 1 and needs an update.
-:::
 
-- menus
+```js
-- buttons
+editor.chain().focus().bold().run()
-- commands
+```
 
-## .clearContent()
+## List of commands
 
-Clear the whole document.
+### Content
+| Command         | Description                                                 |
+| --------------- | ----------------------------------------------------------- |
+| .clearContent() | Clear the whole document.                                   |
+| .insertHTML()   | Insert a string of HTML at the currently selected position. |
+| .insertText()   | Insert a string of text at the currently selected position. |
+| .setContent()   | Replace the whole document with new content.                |
 
-## .deleteSelection()
+### Nodes & Marks
+| Command             | Description                                |
+| ------------------- | ------------------------------------------ |
+| .removeMark()       | Remove a mark in the current selection.    |
+| .removeMarks()      | Remove all marks in the current selection. |
+| .replaceWithNode()  | Replace a given range with a node.         |
+| .selectParentNode() | Select the parent node.                    |
+| .toggleMark()       | Toggle a mark on and off.                  |
+| .toggleNode()       | Toggle a node with another node.           |
+| .updateMark()       | Update a mark with new attributes.         |
 
-Delete the selection, if there is one.
+### Selection
-
+| Command            | Description                             |
-## .focus()
+| ------------------ | --------------------------------------- |
-
+| .deleteSelection() | Delete the selection, if there is one.  |
-Focus the editor at the given position.
+| .focus()           | Focus the editor at the given position. |
-
+| .selectAll()       | Select the whole document.              |
-## .insertHTML()
-
-Insert a string of HTML at the currently selected position.
-
-## .insertText()
-
-Insert a string of text at the currently selected position.
-
-## .removeMark()
-
-Remove a mark in the current selection.
-
-## .removeMarks()
-
-Remove all marks in the current selection.
-
-## .replaceWithNode()
-
-Replace a given range with a node.
-
-## .selectAll()
-
-Select the whole document.
-
-## .selectParentNode()
-
-Select the parent node.
-
-## .setContent()
-
-Replace the whole document with new content.
-
-## .toggleMark()
-
-Toggle a mark on and off.
-
-## .toggleNode()
-
-Toggle a node with another node.
-
-## .updateMark()
-
-Update a mark with new attributes.

docs/src/docPages/api/extensions.md

@@ -1,17 +1,13 @@
 # Extensions
-
 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).
-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
-
 | Title                                             | Default Extension | Source Code                                                                                       |
 | ------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
 | [Blockquote](/api/extensions/blockquote)          | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)      |
@@ -44,13 +40,9 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
 <!-- | [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/) -->
 
 ## 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.
 :::
 
 ## Your custom extensions
-
 Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/custom-extensions).
-
-[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands

docs/src/docPages/api/overview.md

@@ -0,0 +1,15 @@
+# Overview
+
+* tiptap is a friendly wrapped around ProseMirror.
+* ProseMirror works with a strict [Schema](/api/schema), which defines the allowed structure of a document.
+* A document is a tree of headings, paragraphs and others elements, so called nodes.
+* Marks can be attached to a node, e. g. to emphasize part of it.
+* [Commands](/api/commands) change that document programmatically.
+* The document is stored in a state.
+* All changes are applied as transactions to the state.
+* The state has details about the current content, cursor position and selection.
+* You can hook into a few different [events](/api/events), for example to alter transactions before they get applied.
+* [Extensions](/api/extensions) add functionality like nodes, marks and/or commands to the editor.
+* A huge amount of commands are bound to common [keyboard shortcuts](/api/keyboard-shortcuts).
+
+All of those concepts are explained in detail on the following pages.

docs/src/docPages/overview/installation.md

@@ -1,15 +1,7 @@
 # Installation
-
 You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
 
-## Overview <!-- omit in toc -->
-
-- [Option 1: Vanilla JavaScript](#option-1-vanilla-javascript)
-- [Option 2: Vue.js](#option-2-vuejs)
-- [Option 3: CodeSandbox](#option-3-codesandbox)
-
 ## Option 1: Vanilla JavaScript
-
 Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here.
 
 ```bash
@@ -39,7 +31,6 @@ new Editor({
 ```
 
 ## Option 2: Vue.js
-
 To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
 
 ```bash
@@ -60,10 +51,10 @@ Create a new component and add the following content to get a basic version of t
 
 <demo name="General/Installation" />
 
-## Option 3: CodeSandbox
+<!-- ## Option 3: CodeSandbox
 
 CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
 
 It’s also amazing for bug reports. Found it a bug? Try to recreate it there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new). That helps to fix bugs faster.
 
-* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
+* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28) -->

docs/src/links.yaml

@@ -105,10 +105,12 @@
 
 - title: API
   items:
+    - title: Overview
+      link: /api/overview
     - title: Editor
-      link: /api/editor/
+      link: /api/editor
     - title: Extensions
-      link: /api/extensions/
+      link: /api/extensions
       items:
         - title: Blockquote
           link: /api/extensions/blockquote
@@ -176,7 +178,6 @@
           link: /api/extensions/underline
     - title: Commands
       link: /api/commands
-      draft: true
     - title: Events
       link: /api/events
     - title: Schema