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

# Conflicts:
#	docs/src/demos/Examples/Focus/index.vue
#	docs/src/docPages/api/extensions/placeholder.md
#	docs/src/docPages/general/roadmap.md

docs/src/demos/Examples/Basic/index.spec.js

@@ -1,4 +1,4 @@
-context('basic', () => {
+context('/examples/basic', () => {
   beforeEach(() => {
     cy.visit('/examples/basic')
 

docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js

@@ -1,4 +1,4 @@
-context('export-html-or-json', () => {
+context('/examples/export-html-or-json', () => {
   beforeEach(() => {
     cy.visit('/examples/export-html-or-json')
   })

docs/src/demos/Examples/Focus/index.spec.js

@@ -1,4 +1,4 @@
-context('focus', () => {
+context('/examples/focus', () => {
   beforeEach(() => {
     cy.visit('/examples/focus')
   })

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 {
@@ -32,14 +27,9 @@ export default {
     this.editor = new Editor({
       extensions: [
         Document(),
-        History(),
         Paragraph(),
         Text(),
-        Bold(),
-        Italic(),
         Code(),
-        CodeBlock(),
-        Heading(),
         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/History/index.spec.js

@@ -1,4 +1,4 @@
-context('history', () => {
+context('/examples/history', () => {
   beforeEach(() => {
     cy.visit('/examples/history')
   })

docs/src/demos/Examples/MarkdownShortcuts/index.spec.js

@@ -1,10 +1,10 @@
-context('markdown-shortcuts', () => {
+context('/examples/markdown-shortcuts', () => {
   beforeEach(() => {
     cy.visit('/examples/markdown-shortcuts')
 
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
-      editor.setContent('<p></p>')
+      editor.clearContent()
     })
   })
 
@@ -69,7 +69,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('code block', () => {
-    it('should create a code block without language', () => {
+    it.skip('should create a code block without language', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('``` {enter}const foo = bar{enter}```', {force: true})
@@ -79,7 +79,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('bullet list', () => {
-    it('should create a bullet list from asteriks', () => {
+    it.skip('should create a bullet list from asteriks', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('* foobar', {force: true})
@@ -87,7 +87,7 @@ context('markdown-shortcuts', () => {
       })
     })
 
-    it('should create a bullet list from dashes', () => {
+    it.skip('should create a bullet list from dashes', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('- foobar', {force: true})
@@ -95,7 +95,7 @@ context('markdown-shortcuts', () => {
       })
     })
 
-    it('should create a bullet list from pluses', () => {
+    it.skip('should create a bullet list from pluses', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('+ foobar', {force: true})
@@ -105,7 +105,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('ordered list', () => {
-    it('should create a ordered list', () => {
+    it.skip('should create a ordered list', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
         .type('1. foobar', {force: true})
@@ -115,7 +115,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('blockquote', () => {
-    it('should create a blockquote', () => {
+    it.skip('should create a blockquote', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
         .type('> foobar', {force: true})

docs/src/demos/Examples/ReadOnly/index.spec.js

@@ -1,10 +1,10 @@
-context('read-only', () => {
+context('/examples/read-only', () => {
   beforeEach(() => {
     cy.visit('/examples/read-only')
   })
 
   describe('editable', () => {
-    it('should be read-only', () => {
+    it.skip('should be read-only', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('#editable').uncheck()
 
@@ -15,7 +15,7 @@ context('read-only', () => {
       })
     })
 
-    it('should be editable', () => {
+    it.skip('should be editable', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('#editable').check()
 

docs/src/demos/Examples/Simple/index.spec.js

@@ -1,4 +1,4 @@
-context('simple', () => {
+context('/examples/simple', () => {
   beforeEach(() => {
     cy.visit('/examples/simple')
   })

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: [
+        new Document(),
+        new Paragraph(),
+        new 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.spec.js

@@ -38,7 +38,7 @@ context('/api/extensions/history', () => {
       })
     })
 
-    it('the keyboard shortcut should apply the last undone change again', () => {
+    it.skip('the keyboard shortcut should apply the last undone change again', () => {
       const undoShortcut = Cypress.platform === 'darwin' ? '{meta}z' : '{ctrl}z'
       const redoShortcut = Cypress.platform === 'darwin' ? '{meta}{shift}z' : '{ctrl}{shift}z'
 

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: [
+        new Document(),
+        new Paragraph(),
+        new 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>