add content to the extensions overview, improve the basic example

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

@@ -7,6 +7,7 @@ context('basic', () => {
     it('should return html', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
         const html = editor.html()
 
         expect(html).to.equal('<p>foo</p>')
@@ -16,6 +17,7 @@ context('basic', () => {
     it('should return json', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
         const json = editor.json()
 
         expect(json).to.deep.equal({
@@ -60,6 +62,7 @@ context('basic', () => {
     it('should prepend', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
 
         editor.focus('start').insertHTML('<p>bar</p>')
         cy.get('.ProseMirror p:first').should('contain', 'bar').should('not.contain', 'foo')
@@ -70,6 +73,7 @@ context('basic', () => {
     it('should append', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
 
         editor.focus('end').insertHTML('<p>bar</p>')
         cy.get('.ProseMirror p:first').should('contain', 'foo').should('not.contain', 'bar')

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

@@ -2,13 +2,7 @@
   <div>
     <div v-if="editor">
       <button @click="editor.focus().removeMarks()">
-        clear formatting
-      </button>
-      <button @click="editor.focus().undo()">
-        undo
-      </button>
-      <button @click="editor.focus().redo()">
-        redo
+        clear format
       </button>
       <button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
@@ -19,7 +13,7 @@
       <button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.focus().code_block()" :class="{ 'is-active': editor.isActive('code_block') }">
+      <button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('code_block') }">
         code_block
       </button>
       <button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
@@ -40,6 +34,12 @@
       <button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
+      <button @click="editor.focus().undo()">
+        undo
+      </button>
+      <button @click="editor.focus().redo()">
+        redo
+      </button>
     </div>
     <editor-content :editor="editor" />
   </div>
@@ -67,6 +67,8 @@ export default {
       `,
       extensions: defaultExtensions(),
     })
+
+    window.editor = this.editor
   },
 
   beforeDestroy() {

docs/src/demos/Examples/Basic/style.scss

@@ -1,3 +0,0 @@
-.this-is-a-test {
-  color: black;
-}

docs/src/docPages/api/extensions.md

@@ -1,32 +1,55 @@
 # Extensions
 
-> ⚠️ TODO: This is old content.
-
-By default, the editor will only support paragraphs. Other nodes and marks are available as **extensions**. You must
-install `tiptap-extensions` package separately so that you can use basic Nodes, Marks, or Plugins. An extension is
-usually tied to a Command. The official set of commands are part of the
-[`tiptap-commands`][@npmjs-tiptap-commands] package.
-
-## Default extensions
-
-Starterkits have defaultExtensions, that include ...
+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
 
-Document, Paragraph, Text
+You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/simple).
 
-## List of extensions
+## Default extensions
 
-* Bold
-* Italic
-...
+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 Extensions | Source Code |
+| ----- | ------- | ----------- |
+| [Blockquote](/api/extensions/blockquote) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
+| [Bold](/api/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
+| [BulletList](/api/extensions/bullet-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
+| [Code](/api/extensions/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
+| [CodeBlock](/api/extensions/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
+| [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/)
+| [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/)
+| [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
+| [HardBreak](/api/extensions/hard-break) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
+| [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
+| [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)
+| [HorizontalRule](/api/extensions/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
+| [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
+| [Link](/api/extensions/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
+| [ListItem](/api/extensions/list-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
+| [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)
+| [OrderedList](/api/extensions/ordered-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
+| [Paragraph](/api/extensions/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
+| [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/)
+| [Strike](/api/extensions/strike) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
+| [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/)
+| [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/)
+| [TableTow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/)
+| [Text](/api/extensions/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
+| [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/)
+| [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/)
+| [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
 
 ## Community extensions
 
-How does that work?
+:::warning Work in Progress
+This section is not ready yet. Meanwhile, [search through the GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets.
+:::
 
 ## Your custom extensions
 
-Link to the Guide
+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/extensions/bold.md

@@ -10,7 +10,7 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
 
 ## Commands
 | Command | Options | Description |
-| ------ | ---- | ---------------- |
+| ------- | ------- | ----------- |
 | bold | — | Mark text bold. |
 
 ## Keybindings

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

@@ -0,0 +1 @@
+# Document

docs/src/links.yaml

@@ -96,6 +96,8 @@
           link: /api/extensions/code-block-highlight
         - title: Collaboration
           link: /api/extensions/collaboration
+        - title: Document
+          link: /api/extensions/document
         - title: Hardbreak
           link: /api/extensions/hard-break
         - title: Heading
@@ -114,10 +116,14 @@
           link: /api/extensions/mention
         - title: OrderedList
           link: /api/extensions/ordered-list
+        - title: Paragraph
+          link: /api/extensions/paragraph
         - title: Placeholder
           link: /api/extensions/placeholder
         - title: Strike
           link: /api/extensions/strike
+        - title: Text
+          link: /api/extensions/text
         - title: TableCell
           link: /api/extensions/table-cell
         - title: TableHeader

packages/extension-codeblock/index.ts

@@ -8,7 +8,7 @@ export default class CodeBlock extends Node {
   schema(): NodeSpec {
     return {
       content: 'text*',
-      marks: '',  
+      marks: '',
       group: 'block',
       code: true,
       defining: true,