update content

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 = [
-        '#f03e3e',
-        '#d6336c',
-        '#ae3ec9',
-        '#7048e8',
-        '#4263eb',
-        '#1c7ed6',
-        '#1098ad',
-        '#0ca678',
-        '#37b24d',
-        '#74b816',
-        '#f59f00',
-        '#f76707',
-      ]
-
-      return colors[Math.floor(Math.random() * colors.length)]
+      return this.getRandomElement([
+        '#616161',
+        '#A975FF',
+        '#FB5151',
+        '#fd9170',
+        '#FFCB6B',
+        '#68CEF8',
+        '#80cbc4',
+        '#9DEF8F',
+      ])
     },
 
     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">
-/* This gives the remote user caret */
+<style lang="scss" scoped>
+/* 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.
-
-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.
+TODO: This page should redirect to [/examples/basic](/examples/basic).

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
@@ -54,7 +53,6 @@ const CustomHeading = Heading.extend({
 ```
 
 ### 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:
@@ -95,6 +93,9 @@ const CustomParagraph = Paragraph.extend({
 })
 ```
 
+### Attributes
+
+
 ### Keyboard shortcuts
 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:
 

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
-This version of tiptap is not production-ready, don’t use it anywhere.
+:::error Don’t try this at home
+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)
-[![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)
+<!-- [![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) -->
+<!-- [![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
-* New features for existing extensions, e. g. a new option
+* Failing regression tests as bug reports
+* 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
-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.
-:::
+### 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.
+
+[Read more](https://nuxtjs.org/api/components-client-only)
 
 <!-- ## Option 3: CodeSandbox