Merge branch 'main' into feature/generate-html-from-json-document

# Conflicts:
#	packages/core/src/ExtensionManager.ts

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

@@ -9,12 +9,7 @@ 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 History from '@tiptap/extension-history'
-import Bold from '@tiptap/extension-bold'
-import Italic from '@tiptap/extension-italic'
 import Code from '@tiptap/extension-code'
-import CodeBlock from '@tiptap/extension-codeblock'
-import Heading from '@tiptap/extension-heading'
 import Focus from '@tiptap/extension-focus'
 
 export default {
@@ -31,16 +26,11 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        new Document(),
-        new History(),
-        new Paragraph(),
-        new Text(),
-        new Bold(),
-        new Italic(),
-        new Code(),
-        new CodeBlock(),
-        new Heading(),
-        new Focus({
+        Document(),
+        Paragraph(),
+        Text(),
+        Code(),
+        Focus({
           className: 'has-focus',
           nested: true,
         }),
@@ -48,16 +38,12 @@ export default {
       autoFocus: true,
       content: `
         <p>
-          With the focus extension you can add custom classes to focused nodes. Default options:
+          The focus extension adds custom classes to focused nodes. By default, it’ll add a <code>has-focus</code> class, even to nested nodes:
         </p>
-        <pre><code>{\n  className: 'has-focus',\n  nested: true,\n}</code></pre>
+        <pre><code>{ className: 'has-focus', nested: true }</code></pre>
         <ul>
-          <li>
-            When set <code>nested</code> to <code>true</code> also nested elements like this list item will be captured.
-          </li>
-          <li>
-            Otherwise only the wrapping list will get this class.
-          </li>
+          <li>With <code>nested: true</code> nested elements like this list item will be focused.</li>
+          <li>Otherwise the whole list will get the focus class, even if only a single list item is selected.</li>
         </ul>
       `,
     })

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

@@ -24,9 +24,9 @@ export default {
     this.editor = new Editor({
       content: '<p>This is a radically reduced version of tiptap for minimalisits. It has only support for a document, paragraphs and text, that’s it.</p>',
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
+        Document(),
+        Paragraph(),
+        Text(),
       ],
     })
 

docs/src/demos/ExtensionConfiguration/index.vue

@@ -26,10 +26,10 @@ export default {
     this.editor = new Editor({
       content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Bold(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Bold(),
       ],
     })
   },

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

@@ -30,10 +30,10 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Bold(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Bold(),
       ],
       content: `
         <p>This isn’t bold.</p>

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

@@ -30,10 +30,10 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Code(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Code(),
       ],
       content: `
         <p>This isn’t code.</p>

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

@@ -0,0 +1,5 @@
+context('/api/extensions/document', () => {
+  beforeEach(() => {
+    cy.visit('/api/extensions/document')
+  })
+})

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

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+      ],
+      content: `
+        <p>The Document extension is required. Though, you can write your own implementation, e. g. to give it custom name.</p>
+      `,
+    })
+
+    window.editor = this.editor
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>

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

@@ -33,10 +33,10 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new History(),
+        Document(),
+        Paragraph(),
+        Text(),
+        History(),
       ],
       content: `
         <p>Edit this text and press undo to test this extension.</p>

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

@@ -30,10 +30,10 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new Italic(),
+        Document(),
+        Paragraph(),
+        Text(),
+        Italic(),
       ],
       content: `
         <p>This isn’t italic.</p>

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

@@ -0,0 +1,5 @@
+context('/api/extensions/paragraph', () => {
+  beforeEach(() => {
+    cy.visit('/api/extensions/paragraph')
+  })
+})

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

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+      ],
+      content: `
+        <p>The Paragraph extension is not required, but it’s very likely you want to use it. It’s needed to write paragraphs of text. 🤓</p>
+      `,
+    })
+
+    window.editor = this.editor
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>

docs/src/demos/Guide/BuildYourEditor/index.vue

@@ -55,15 +55,15 @@ export default {
     this.editor = new Editor({
       content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
       extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new CodeBlock(),
-        new History(),
-        new Bold(),
-        new Italic(),
-        new Code(),
-        new Heading(),
+        Document(),
+        Paragraph(),
+        Text(),
+        CodeBlock(),
+        History(),
+        Bold(),
+        Italic(),
+        Code(),
+        Heading(),
       ],
     })
   },