Merge branch 'main' into feature/node-views

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

@@ -1,10 +1,13 @@
 <template>
   <div>
     <button @click="setName">
-      set username
+      Set Name
+    </button>
+    <button @click="changeName">
+      Random Name
     </button>
     <button @click="changeColor">
-      change color
+      Random Color
     </button>
 
     <div class="collaboration-status">
@@ -89,7 +92,16 @@ export default {
 
   methods: {
     setName() {
-      this.name = window.prompt('Name')
+      const name = window.prompt('Name')
+
+      if (name) {
+        this.name = name
+        return this.updateUser()
+      }
+    },
+
+    changeName() {
+      this.name = this.getRandomName()
       this.updateUser()
     },
 
@@ -108,28 +120,26 @@ export default {
     },
 
     getRandomColor() {
-      const colors = [
+      return this.getRandomElement([
-        '#f03e3e',
+        '#616161',
-        '#d6336c',
+        '#A975FF',
-        '#ae3ec9',
+        '#FB5151',
-        '#7048e8',
+        '#fd9170',
-        '#4263eb',
+        '#FFCB6B',
-        '#1c7ed6',
+        '#68CEF8',
-        '#1098ad',
+        '#80cbc4',
-        '#0ca678',
+        '#9DEF8F',
-        '#37b24d',
+      ])
-        '#74b816',
-        '#f59f00',
-        '#f76707',
-      ]
-
-      return colors[Math.floor(Math.random() * colors.length)]
     },
 
     getRandomName() {
-      const names = ['🙈', '🙉', '🙊', '💥', '💫', '💦', '💨', '🐵', '🐒', '🦍', '🦧', '🐶', '🐕', '🦮', '🐕‍🦺', '🐩', '🐺', '🦊', '🦝', '🐱', '🐈', '🦁', '🐯', '🐅', '🐆', '🐴', '🐎', '🦄', '🦓', '🦌', '🐮', '🐂', '🐃', '🐄', '🐷', '🐖', '🐗', '🐽', '🐏', '🐑', '🐐', '🐪', '🐫', '🦙', '🦒', '🐘', '🦏', '🦛', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐿', '🦔', '🦇', '🐻', '🐨', '🐼', '🦥', '🦦', '🦨', '🦘', '🦡', '🐾', '🦃', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', '🕊', '🦅', '🦆', '🦢', '🦉', '🦩', '🦚', '🦜', '🐸', '🐊', '🐢', '🦎', '🐍', '🐲', '🐉', '🦕', '🦖', '🐳', '🐋', '🐬', '🐟', '🐠', '🐡', '🦈', '🐙', '🐚', '🐌', '🦋', '🐛', '🐜', '🐝', '🐞', '🦗', '🕷', '🕸', '🦂', '🦟', '🦠']
+      return this.getRandomElement([
+        'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
+      ])
+    },
 
-      return names[Math.floor(Math.random() * names.length)]
+    getRandomElement(list) {
+      return list[Math.floor(Math.random() * list.length)]
     },
 
     updateState() {
@@ -151,7 +161,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+/* A list of all available users */
 .collaboration-users {
   margin-top: 0.5rem;
 
@@ -165,6 +176,7 @@ export default {
   }
 }
 
+/* Some information about the status */
 .collaboration-status {
   background: #eee;
   color: #666;
@@ -183,7 +195,7 @@ export default {
   }
 }
 
-/* This gives the remote user caret */
+/* Give a remote user a caret */
 .collaboration-cursor__caret {
   position: relative;
   margin-left: -1px;
@@ -194,7 +206,7 @@ export default {
   pointer-events: none;
 }
 
-/* This renders the username above the caret */
+/* Render the username above the caret */
 .collaboration-cursor__label {
   position: absolute;
   top: -1.4em;

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

@@ -7,6 +7,12 @@
       <button class="button" @click="clearContent">
         Clear Content
       </button>
+      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        Bold
+      </button>
+      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        Italic
+      </button>
     </div>
 
     <editor-content :editor="editor" />
@@ -70,7 +76,7 @@ export default {
           content: [
             {
               type: 'text',
-              text: 'This is some inserted text. 👋',
+              text: 'It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.',
             },
           ],
         }],
@@ -95,11 +101,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .export {
+  padding: 1rem 0 0;
+
   h3 {
-    margin: 0.5rem 0;
+    margin: 1rem 0 0.5rem;
   }
+
   pre {
     border-radius: 5px;
     color: #333;
@@ -109,7 +118,9 @@ export default {
     display: block;
     white-space: pre-wrap;
     font-size: 0.8rem;
-    padding: 1rem;
+    padding: 0.75rem 1rem;
+    background-color:#e9ecef;
+    color: #495057;
   }
 }
 </style>

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

@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .has-focus {
   border-radius: 3px;
   box-shadow: 0 0 0 3px #3ea4ffe6;

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

@@ -52,7 +52,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .checkbox {
   margin-bottom: 1rem;
 

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

@@ -61,8 +61,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-/* This gives the remote user caret */
+/* Give a remote user a caret */
 .collaboration-cursor__caret {
   position: relative;
   margin-left: -1px;
@@ -73,7 +73,7 @@ export default {
   pointer-events: none;
 }
 
-/* This renders the username above the caret */
+/* Render the username above the caret */
 .collaboration-cursor__label {
   position: absolute;
   top: -1.4em;

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

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

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

@@ -6,10 +6,10 @@ Type <code>>&nbsp;</code> at the beginning of a new line and it will magically t
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-blockquote
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-blockquote
 ```
 

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-bold
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-bold
 ```
 

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

@@ -9,10 +9,10 @@ The `BulletList` extension is intended to be used with the [`ListItem`](/api/ext
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 ```
 

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

@@ -9,10 +9,10 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-code-block
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-code-block
 ```
 

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

@@ -5,10 +5,10 @@ Type something with <code>\`back-ticks around\`</code> and it will magically tra
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-code
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-code
 ```
 

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

@@ -6,10 +6,10 @@ Using this in production requires a **tiptap pro** license. [Read more](/sponsor
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-collaboration-cursor
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-collaboration-cursor
 ```
 

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

@@ -7,10 +7,10 @@ Using this in production requires a **tiptap pro** license. [Read more](/sponsor
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-collaboration yjs y-webrtc
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-collaboration yjs y-webrtc
 ```
 

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

@@ -9,10 +9,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. A tiny,
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-document
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-document
 ```
 

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

@@ -3,10 +3,10 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-hard-break
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-hard-break
 ```
 

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

@@ -5,10 +5,10 @@ Type <code>#&nbsp;</code> at the beginning of a new line and it will magically t
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-heading
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-heading
 ```
 

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

@@ -3,10 +3,10 @@ This extension provides history support. All changes to the document will be tra
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-history
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-history
 ```
 

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

@@ -5,10 +5,10 @@ Type three dashes (<code>---</code>) or three underscores and a space (<code>___
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-horizontal-rule
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-horizontal-rule
 ```
 

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

@@ -2,10 +2,10 @@
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-image
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-image
 ```
 

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-italic
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-italic
 ```
 

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

@@ -7,10 +7,10 @@ Pasted URLs will be linked automatically.
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-link
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-link
 ```
 

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

@@ -7,10 +7,10 @@ This extensions is intended to be used with the [`BulletList`](/api/extensions/b
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-list-item
 ```
 

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

@@ -9,10 +9,10 @@ The `OrderedList` extension is intended to be used with the [`ListItem`](/api/ex
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 ```
 

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

@@ -7,10 +7,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. You hav
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-paragraph
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-paragraph
 ```
 

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-strike
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-strike
 ```
 

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

@@ -2,10 +2,10 @@
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-text-align
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-text-align
 ```
 

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

@@ -7,10 +7,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. You hav
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-text
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-text
 ```
 

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-underline
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-underline
 ```
 

docs/src/docPages/examples.md

@@ -1,9 +1,3 @@
 # Examples
 
-We put together a few examples to show the capabilities of tiptap, but keep in mind: tiptap is renderless and highly customizable. Everything you see can be changed, modified, combined or remixed. Feel free to copy the code to your project and change it to your liking.
+TODO: This page should redirect to [/examples/basic](/examples/basic).
-
-A few examples show what you’d probably expect from a text editor anyway: [Basic](/examples/basic), [Links](/examples/links), [History](/examples/history), [Read-only](/examples/read-only), [Export HTML or JSON](/examples/export-html-or-json).
-
-Some examples show how you can improve the user experience: [Markdown shortcuts](/examples/markdown-shortcuts).
-
-Or they show advanced use cases, like the [Collaborative editing](/examples/collaborative-editing) example, which is basically tiptap in multiplayer mode.

docs/src/docPages/examples/basic.md

@@ -1,4 +1,3 @@
 # Basic
-BUG: Headings can’t be transformed to a bullet or ordered list.
 
 <demo name="Examples/Basic" />

docs/src/docPages/examples/read-only.md

@@ -1,3 +1,3 @@
 # Read-only
 
-<demo name="Examples/ReadOnly" highlight="3-6,22,28,40-46" />
+<demo name="Examples/ReadOnly" highlight="3-6,22,28,41-47" />

docs/src/docPages/guide/build-custom-extensions.md

@@ -40,7 +40,6 @@ The extension name is used in a whole lot of places and changing it isn’t too
 The extension name is also part of the JSON. If you [store your content as JSON](http://localhost:3000/guide/store-content#option-1-json), you need to change the name in there too.
 
 ### Settings
-
 All settings can be overwritten through the extension anyway, but if you want to change the defaults, for example to provide a library on top of tiptap for other developers, you can do it like that:
 
 ```js
@@ -53,12 +52,15 @@ const CustomHeading = Heading.extend({
 })
 ```
 
-### Schema
+### Node Schema
-
 Tiptap works with a [strict schema](/api/schema), which configures how the content can be structured, nested, how it behaves and many more things. You can change all aspects of the schema for existing extensions. Let’s walk through a few common use cases.
 
 The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
 
+
+#### Content
+> The content expression for this node, as described in the schema guide. When not given, the node does not allow any content.
+
 ```js
 // blockquotes include paragraphs only
 import Blockquote from '@tiptap/extension-blockquote'
@@ -68,10 +70,28 @@ const CustomBlockquote = Blockquote.extend({
 })
 ```
 
+#### Marks
+> The marks that are allowed inside of this node. May be a space-separated string referring to mark names or groups, "_" to explicitly allow all marks, or "" to disallow marks. When not given, nodes with inline content default to allowing all marks, other nodes default to not allowing marks.
+
+#### Group
+> The group or space-separated groups to which this node belongs, which can be referred to in the content expressions for the schema.
+
+#### Inline
+> Should be set to true for inline nodes. (Implied for text nodes.)
+
+#### Atom
+> Can be set to true to indicate that, though this isn't a leaf node, it doesn't have directly editable content and should be treated as a single unit in the view.
+
+#### Selectable
+> Controls whether nodes of this type can be selected as a node selection. Defaults to true for non-text nodes.
+
+#### Draggable
+> Determines whether nodes of this type can be dragged without being selected. Defaults to false.
+
 The schema even allows to make your nodes draggable, that’s what the `draggable` option is for, which defaults to `false`. Here is an example for draggable paragraphs:
 
 ```js
-// draggable paragraphs
+// Draggable paragraphs
 import Paragraph from '@tiptap/extension-paragraph'
 
 const CustomParagraph = Paragraph.extend({
@@ -79,6 +99,109 @@ const CustomParagraph = Paragraph.extend({
 })
 ```
 
+#### Code
+> Can be used to indicate that this node contains code, which causes some commands to behave differently.
+
+#### Defining
+> Determines whether this node is considered an important parent node during replace operations (such as paste). Non-defining (the default) nodes get dropped when their entire content is replaced, whereas defining nodes persist and wrap the inserted content. Likewise, in inserted content the defining parents of the content are preserved when possible. Typically, non-default-paragraph textblock types, and possibly list items, are marked as defining.
+
+#### Isolating
+> When enabled (default is false), the sides of nodes of this type count as boundaries that regular editing operations, like backspacing or lifting, won't cross. An example of a node that should probably have this enabled is a table cell.
+
+### Mark Schema
+#### Inclusive
+> Whether this mark should be active when the cursor is positioned at its end (or at its start when that is also the start of the parent node). Defaults to true.
+
+#### Excludes
+> Determines which other marks this mark can coexist with. Should be a space-separated strings naming other marks or groups of marks When a mark is added to a set, all marks that it excludes are removed in the process. If the set contains any mark that excludes the new mark but is not, itself, excluded by the new mark, the mark can not be added an the set. You can use the value "_" to indicate that the mark excludes all marks in the schema.
+
+> Defaults to only being exclusive with marks of the same type. You can set it to an empty string (or any string not containing the mark's own name) to allow multiple marks of a given type to coexist (as long as they have different attributes).
+
+#### Group
+> The group or space-separated groups to which this mark belongs.
+
+#### Spanning
+> Determines whether marks of this type can span multiple adjacent nodes when serialized to DOM/HTML. Defaults to true.
+
+### Attributes
+You can use attributes to store additional information in the content. Let’s say you want to extend the default paragraph extension with a color attribute to allow paragraphs to have different colors:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: 'pink',
+      },
+    },
+  },
+})
+
+// Result:
+// <p data-color="pink">Example Text</p>
+```
+
+That’s already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a data-attributes by default, and parsed as data-attributes from the content.
+
+Let’s stick with the color example and assume you’ll probably want to add an inline style to actually color the text. Add a `renderHTML` function and return the attributes that should be added to the rendered HTML. This examples adds a style attribute based on the value of color:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        renderHTML: attributes => {
+          return {
+            style: `color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+// Result:
+// <p data-color="pink" style="color: pink">Example Text</p>
+```
+
+You can also control how the attribute is parsed from the HTML. Let’s say you want to store the color in an attribute called `data-my-fancy-color-attribute`. Legit, right? Anyway, here’s how you would do that:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: element => {
+          return {
+            color: element.getAttribute('data-my-fancy-color-attribute'),
+          }
+        },
+        renderHTML: attributes => {
+          return {
+            'data-my-fancy-color-attribute': atttributes.color,
+            style: `color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+// Result:
+// <p data-my-fancy-color-attribute="pink" style="color: pink">Example Text</p>
+```
+
+### Global Attributes
+> TextAlign
+
+### Parse HTML
+> Associates DOM parser information with this mark (see the corresponding node spec field). The mark field in the rules is implied.
+
+### Render HTML
+> Defines the default way marks of this type should be serialized to DOM/HTML. When the resulting spec contains a hole, that is where the marked content is placed. Otherwise, it is appended to the top node.
+
 ### Commands
 
 ```js
@@ -99,7 +222,7 @@ const CustomParagraph = Paragraph.extend({
 Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:
 
 ```js
-// change the bullet list keyboard shortcut
+// Change the bullet list keyboard shortcut
 import BulletList from '@tiptap/extension-bullet-list'
 
 const CustomBulletList = BulletList.extend({
@@ -114,7 +237,7 @@ const CustomBulletList = BulletList.extend({
 ### Input rules
 
 ```js
-// use the ~single tilde~ markdown shortcut
+// Use the ~single tilde~ markdown shortcut
 import Strike from '@tiptap/extension-strike'
 import { markInputRule } from '@tiptap/core'
 
@@ -132,7 +255,7 @@ const CustomStrike = Strike.extend({
 ### Paste rules
 
 ```js
-// overwrite the underline regex for pasted text
+// Overwrite the underline regex for pasted text
 import Underline from '@tiptap/extension-underline'
 import { markPasteRule } from '@tiptap/core'
 

docs/src/docPages/guide/store-content.md

@@ -85,6 +85,6 @@ Unfortunately, **tiptap doesn’t support Markdown as an input or output format*
 
 You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
 
-If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap to work with Markdown. Their code is open source, so maybe you can learn from them.
+If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Their code is open source, so maybe you can learn from them.
 
 That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example.

docs/src/docPages/introduction.md

@@ -1,15 +1,17 @@
-:::warning Don’t try this at home
+:::error Don’t try this at home
-This version of tiptap is not production-ready, don’t use it anywhere.
+Nothing here is production-ready, don’t use it anywhere.
 :::
 
 # Introduction
 
-[![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core)
+<!-- [![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core) -->
-[![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true)
+<!-- [![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true) -->
-[![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core)
+<!-- [![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core) -->
+<!-- [![Filesize](https://img.badgesize.io/https://unpkg.com/tiptap/dist/tiptap.min.js?compression=gzip&label=size&colorB=000000)](https://www.npmjs.com/package/tiptap) -->
+<!-- [![Build Status](https://github.com/ueberdosis/tiptap-next/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap-next/actions) -->
 [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
 
-tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
 Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
 
@@ -29,3 +31,6 @@ Although tiptap tries to hide most of the complexity of ProseMirror, it’s buil
 - [Directus CMS](https://directus.io)
 - [Nextcloud](https://apps.nextcloud.com/apps/text)
 - [and many more →](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
+
+## License
+Tiptap is licensed under MIT, so you’re free to whatever you want. Anyway, we kindly ask you to [become a sponsor](https://github.com/sponsors/ueberdosis) on GitHub to fund the development, maintenance and support of tiptap.

docs/src/docPages/overview/contributing.md

@@ -6,8 +6,9 @@
 Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution:
 
 ## Welcome examples
-* Improve the documentation, e. g. fix a typo, add a section
+* Failing regression tests as bug reports
-* New features for existing extensions, e. g. a new option
+* Documentation improvements, e. g. fix a typo, add a section
+* New features for existing extensions, e. g. a new configureable option
 * New extensions, which don’t require changes to the core or other core extensions
 * Well explained, non-breaking changes to the core
 

docs/src/docPages/overview/installation.md

@@ -9,10 +9,10 @@ You’re free to use tiptap with the framework of your choice. Depending on what
 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
-# With npm
+# with npm
 npm install @tiptap/core @tiptap/starter-kit
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/core @tiptap/starter-kit
 ```
 
@@ -33,10 +33,10 @@ new Editor({
 To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
 ```
 
@@ -44,9 +44,10 @@ Create a new component and add the following content to get a basic version of t
 
 <demo name="Overview/Installation" />
 
-::: warning Nuxt.js
+### Nuxt.js
-If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
+Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
-:::
+
+[Read more](https://nuxtjs.org/api/components-client-only)
 
 <!-- ## Option 3: CodeSandbox