add moooore content

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

@@ -49,9 +49,11 @@ export default {
       extensions: defaultExtensions(),
     })
 
+    // Get the initial content …
     this.json = this.editor.json()
     this.html = this.editor.html()
 
+    // … and get the content after every change.
     this.editor.on('update', () => {
       this.json = this.editor.json()
       this.html = this.editor.html()
@@ -65,7 +67,7 @@ export default {
     },
 
     setContent() {
-      // you can pass a json document
+      // You can pass a JSON document …
       this.editor.setContent({
         type: 'document',
         content: [{
@@ -78,8 +80,11 @@ export default {
           ],
         }],
       }, true)
-      // HTML string is also supported
+
+      // … but HTML strings are also supported.
       // this.editor.setContent('<p>This is some inserted text. 👋</p>')
+
+      // It’s likely that you’d like to focus the Editor after most commands.
       this.editor.focus()
     },
   },

docs/src/docPages/examples/export-html-or-json.md

@@ -1,3 +1,3 @@
 # Export HTML or JSON
 
-<demo name="Examples/ExportHtmlOrJson" />
+<demo name="Examples/ExportHtmlOrJson" highlight="52-60"/>

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

@@ -2,14 +2,15 @@
 Let’s extend tiptap with a custom extension!
 
 ## Option 1: Change defaults
-Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `Bold` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/index.ts) and find the default you’d like to change. In that case, the keyboard shortcut.
+
+Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the default you’d like to change. In that case, the keyboard shortcut, and just that.
 
 ```js
 // 1. Import the extension
 import BulletList from '@tiptap/extension-bullet-list'
 
 // 2. Overwrite the keyboard shortcuts
-const CustomBulletList = new Node()
+const CustomBulletList = BulletList()
   .keys(({ editor }) => ({
     'Mod-l': () => editor.bulletList(),
   }))
@@ -24,6 +25,8 @@ new Editor({
 })
 ```
 
+You can overwrite every aspect of an existing extension. [Read more about that here.](/guide/custom-extensions/overwrite-defaults)
+
 ## Option 2: Extend existing extensions
 
 ## Option 3: Start from scratch

docs/src/docPages/guide/custom-extensions/change-defaults.md

@@ -0,0 +1,96 @@
+# Change defaults
+
+## Name
+
+```js
+import Document from '@tiptap/extension-document'
+
+const CustomDocument = Document()
+  .name('doc')
+  .create()
+```
+
+## Settings
+
+```js
+import Heading from '@tiptap/extension-heading'
+
+const CustomHeading = Heading()
+  .defaults({
+    levels: [1, 2, 3],
+    class: 'my-custom-heading',
+  })
+  .create()
+```
+
+## Schema
+
+```js
+import Code from '@tiptap/extension-code'
+
+const CustomCode = Code()
+  .schema(() => ({
+    excludes: '_',
+    parseDOM: [
+      { tag: 'code' },
+    ],
+    toDOM: () => ['code', { 'data-attribute': 'foobar' }, 0],
+  }))
+  .create()
+```
+
+## Commands
+
+```js
+import Paragraph from '@tiptap/extension-paragraph'
+
+const CustomParagraph = Paragraph()
+  .commands(() => ({
+    paragraph: () => ({ commands }) => {
+      return commands.toggleNode(name, 'paragraph')
+    },
+  }))
+  .create()
+```
+
+## Keyboard shortcuts
+
+```js
+import BulletList from '@tiptap/extension-bullet-list'
+
+const CustomBulletList = BulletList()
+  .keys(({ editor }) => ({
+    'Mod-l': () => editor.bulletList(),
+  }))
+  .create()
+```
+
+## Input rules
+
+```js
+import Strike from '@tiptap/extension-strike'
+import { markInputRule } from '@tiptap/core'
+
+const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
+
+const CustomStrike = Strike()
+  .inputRules(({ type }) => [
+    markInputRule(inputRegex, type),
+  ])
+  .create()
+```
+
+## Paste rules
+
+```js
+import Underline from '@tiptap/extension-underline'
+import { markPasteRule } from '@tiptap/core'
+
+const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
+
+const CustomUnderline = Underline()
+  .pasteRules(({ type }) => [
+    markPasteRule(pasteRegex, type),
+  ])
+  .create()
+```

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

@@ -0,0 +1 @@
+# Extend existing extensions

docs/src/docPages/guide/custom-extensions/start-from-scratch.md

@@ -0,0 +1,7 @@
+# Start from scratch
+
+## 1. Read the documentation
+
+## 2. Have a look at existing extensions
+
+## 3. Get started

docs/src/links.yaml

@@ -25,6 +25,16 @@
     - title: Custom extensions
       link: /guide/custom-extensions
       draft: true
+      items:
+        - title: Change defaults
+          link: /guide/custom-extensions/change-defaults
+          draft: true
+        - title: Extend extensions
+          link: /guide/custom-extensions/extend-extensions
+          draft: true
+        - title: Start from scratch
+          link: /guide/custom-extensions/start-from-scratch
+          draft: true
     - title: Use Vue Components
       link: /guide/use-vue-components
       draft: true