From 8ee85ca03543de4f2a58b5a64698e27ceb99f2b6 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 13 Nov 2020 11:46:51 +0100
Subject: [PATCH 1/4] update content

---
 docs/src/demos/Marks/Link/index.spec.js | 2 ++
 docs/src/docPages/api/schema.md         | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/demos/Marks/Link/index.spec.js b/docs/src/demos/Marks/Link/index.spec.js
index 4af1852d..cdd95fbf 100644
--- a/docs/src/demos/Marks/Link/index.spec.js
+++ b/docs/src/demos/Marks/Link/index.spec.js
@@ -72,4 +72,6 @@ context('/api/marks/link', () => {
         .should('have.attr', 'href', url)
     })
   })
+
+  // TODO: Test invalid URLs
 })
diff --git a/docs/src/docPages/api/schema.md b/docs/src/docPages/api/schema.md
index ffe81ebf..d5f0bd14 100644
--- a/docs/src/docPages/api/schema.md
+++ b/docs/src/docPages/api/schema.md
@@ -179,7 +179,7 @@ createNode({
 #### Defining
 Nodes get dropped when their entire content is replaced (for example, when pasting new content) by default. If a node should be kept for such replace operations, configure them as `defining`.
 
-Typically, that applies to [`Blockquote`](/api/extensions/blockquote), [`CodeBlock`](/api/extensions/code-block), [`Heading`](/api/extensions/heading), and [`ListItem`](/api/extensions/list-item).
+Typically, that applies to [`Blockquote`](/api/node/blockquote), [`CodeBlock`](/api/node/code-block), [`Heading`](/api/node/heading), and [`ListItem`](/api/node/list-item).
 
 ```js
 createNode({

From 48be5d1f16cd9dc3bb5d1b3bb1d811af91564377 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 13 Nov 2020 11:57:31 +0100
Subject: [PATCH 2/4] fix page navigation

---
 docs/src/components/PageNavigation/index.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue
index c5549552..6f2073a2 100644
--- a/docs/src/components/PageNavigation/index.vue
+++ b/docs/src/components/PageNavigation/index.vue
@@ -14,7 +14,7 @@
       <g-link
         class="page-navigation__link"
         exact
-        :to="nextPage.link"
+        :to="nextPage.redirect || nextPage.link"
         v-if="nextPage"
       >
         {{ nextPage.title }} →
@@ -41,10 +41,11 @@ export default {
     flattenedItems() {
       const flattenedItems = []
 
-      this.items.forEach(({ title, link, items }) => {
+      this.items.forEach(({ title, link, redirect, items }) => {
         flattenedItems.push({
           title,
           link,
+          redirect,
         })
 
         if (items) {
@@ -68,7 +69,13 @@ export default {
     },
 
     previousPage() {
-      return this.flattenedItems[this.currentIndex - 1]
+      let previousIndex = this.currentIndex - 1
+
+      while (this.flattenedItems[previousIndex].redirect) {
+        previousIndex -= 1
+      }
+
+      return this.flattenedItems[previousIndex]
     },
   },
 }

From 5b76bf514123381cc3f9017050b499671557266d Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 13 Nov 2020 15:08:30 +0100
Subject: [PATCH 3/4] add comments to all commands

---
 docs/src/docPages/api/commands.md             | 16 ++--
 .../docPages/guide/build-custom-extensions.md |  4 +
 packages/core/src/extensions/commands.ts      | 84 +++++++++++++++++++
 packages/extension-blockquote/src/index.ts    |  3 +
 packages/extension-bold/src/index.ts          |  2 +-
 packages/extension-bullet-list/src/index.ts   |  3 +
 packages/extension-code-block/src/index.ts    |  3 +
 packages/extension-code/src/index.ts          |  3 +
 .../src/index.ts                              |  3 +
 packages/extension-font-family/src/index.ts   |  3 +
 packages/extension-hard-break/src/index.ts    |  3 +
 packages/extension-heading/src/index.ts       |  2 +-
 packages/extension-highlight/src/index.ts     |  3 +
 packages/extension-history/src/index.ts       |  6 ++
 .../extension-horizontal-rule/src/index.ts    |  3 +
 packages/extension-image/src/index.ts         |  3 +
 packages/extension-italic/src/index.ts        |  3 +
 packages/extension-link/src/index.ts          |  3 +
 packages/extension-ordered-list/src/index.ts  |  3 +
 packages/extension-paragraph/src/index.ts     |  3 +
 packages/extension-strike/src/index.ts        |  3 +
 packages/extension-task-list/src/index.ts     |  3 +
 packages/extension-text-align/src/index.ts    |  3 +
 packages/extension-text-style/src/index.ts    |  3 +
 24 files changed, 158 insertions(+), 10 deletions(-)

diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md
index 49787cec..b6822a65 100644
--- a/docs/src/docPages/api/commands.md
+++ b/docs/src/docPages/api/commands.md
@@ -95,18 +95,18 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .updateNodeAttributes() | Update attributes of a node.                              |
 
 ### Lists
-| Command          | Description                                            |
-| ---------------- | ------------------------------------------------------ |
-| .liftListItem()  | Lift the list item into a wrapping list.               |
-| .sinkListItem()  | Sink the list item down into an inner list.            |
-| .splitListItem() | Splits a textblock of a list item into two list items. |
-| .toggleList()    | Toggle between different list types.                   |
-| .wrapInList()    | Wrap a node in a list.                                 |
+| Command          | Description                                 |
+| ---------------- | ------------------------------------------- |
+| .liftListItem()  | Lift the list item into a wrapping list.    |
+| .sinkListItem()  | Sink the list item down into an inner list. |
+| .splitListItem() | Splits one list item into two list items.   |
+| .toggleList()    | Toggle between different list types.        |
+| .wrapInList()    | Wrap a node in a list.                      |
 
 ### Selection
 | Command            | Description                             |
 | ------------------ | --------------------------------------- |
-| .blur()            | Blurs the editor.                       |
+| .blur()            | Removes focus from the editor.          |
 | .deleteSelection() | Delete the selection, if there is one.  |
 | .focus()           | Focus the editor at the given position. |
 | .scrollIntoView()  | Scroll the selection into view.         |
diff --git a/docs/src/docPages/guide/build-custom-extensions.md b/docs/src/docPages/guide/build-custom-extensions.md
index 0699265e..dec30098 100644
--- a/docs/src/docPages/guide/build-custom-extensions.md
+++ b/docs/src/docPages/guide/build-custom-extensions.md
@@ -282,6 +282,10 @@ const CustomParagraph = Paragraph.extend({
 })
 ```
 
+:::warning Use the commands parameter inside of addCommands
+All commands are also available through ~~this.editor.commands~~, but inside of `addCommands` you must use the `commands` parameter that’s passed to it.
+:::
+
 ### 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:
 
diff --git a/packages/core/src/extensions/commands.ts b/packages/core/src/extensions/commands.ts
index 98d4c3ab..5b7e7a67 100644
--- a/packages/core/src/extensions/commands.ts
+++ b/packages/core/src/extensions/commands.ts
@@ -31,33 +31,117 @@ import wrapInList from '../commands/wrapInList'
 export const Commands = createExtension({
   addCommands() {
     return {
+      /**
+       * Removes focus from the editor.
+       */
       blur,
+      /**
+       * Clear the whole document.
+       */
       clearContent,
+      /**
+       * Normalize nodes to a simple paragraph.
+       */
       clearNodes,
+      /**
+       * Delete the selection, if there is one.
+       */
       deleteSelection,
+      /**
+       * Extends the text selection to the current mark.
+       */
       extendMarkRange,
+      /**
+       * Focus the editor at the given position.
+       */
       focus,
+      /**
+       * Insert a string of HTML at the current position.
+       */
       insertHTML,
+      /**
+       * Insert a string of text at the current position.
+       */
       insertText,
+      /**
+       * Lift the list item into a wrapping list.
+       */
       liftListItem,
+      /**
+       * Remove all marks in the current selection.
+       */
       removeMark,
+      /**
+       * Remove all marks in the current selection.
+       */
       removeMarks,
+      /**
+       * Resets all node attributes to the default value.
+       */
       resetNodeAttributes,
+      /**
+       * Scroll the selection into view.
+       */
       scrollIntoView,
+      /**
+       * Select the whole document.
+       */
       selectAll,
+      /**
+       * Select the parent node.
+       */
       selectParentNode,
+      /**
+       * Replace a given range with a node.
+       */
       setBlockType,
+      /**
+       * Replace the whole document with new content.
+       */
       setContent,
+      /**
+       * Sink the list item down into an inner list.
+       */
       sinkListItem,
+      /**
+       * Forks a new node from an existing node.
+       */
       splitBlock,
+      /**
+       * Splits one list item into two list items.
+       */
       splitListItem,
+      /**
+       * Toggle a node with another node.
+       */
       toggleBlockType,
+      /**
+       * Toggle between different list types.
+       */
       toggleList,
+      /**
+       * Toggle a mark on and off.
+       */
       toggleMark,
+      /**
+       * Wraps nodes in another node, or removes an existing wrap.
+       */
       toggleWrap,
+      /**
+       * Runs one command after the other and stops at the first which returns true.
+       */
       try: tryCommand,
+      /**
+       * Update a mark with new attributes.
+       */
       updateMarkAttributes,
+      /**
+       * Update attributes of a node.
+       */
       updateNodeAttributes,
+      /**
+       * Wrap a node in a list.
+       */
       wrapInList,
     }
   },
diff --git a/packages/extension-blockquote/src/index.ts b/packages/extension-blockquote/src/index.ts
index 2f9dc137..850f418f 100644
--- a/packages/extension-blockquote/src/index.ts
+++ b/packages/extension-blockquote/src/index.ts
@@ -24,6 +24,9 @@ const Blockquote = createNode({
 
   addCommands() {
     return {
+      /**
+       * Toggle a blockquote node
+       */
       blockquote: (): Command => ({ commands }) => {
         return commands.toggleWrap('blockquote')
       },
diff --git a/packages/extension-bold/src/index.ts b/packages/extension-bold/src/index.ts
index 2f42f747..0ba735a7 100644
--- a/packages/extension-bold/src/index.ts
+++ b/packages/extension-bold/src/index.ts
@@ -33,7 +33,7 @@ const Bold = createMark({
   addCommands() {
     return {
       /**
-       * bold command
+       * Toggle a bold mark
        */
       bold: (): Command => ({ commands }) => {
         return commands.toggleMark('bold')
diff --git a/packages/extension-bullet-list/src/index.ts b/packages/extension-bullet-list/src/index.ts
index 4b4bbc87..460a0261 100644
--- a/packages/extension-bullet-list/src/index.ts
+++ b/packages/extension-bullet-list/src/index.ts
@@ -22,6 +22,9 @@ const BulletList = createNode({
 
   addCommands() {
     return {
+      /**
+       * Toggle a bullet list
+       */
       bulletList: (): Command => ({ commands }) => {
         return commands.toggleList('bulletList', 'listItem')
       },
diff --git a/packages/extension-code-block/src/index.ts b/packages/extension-code-block/src/index.ts
index 8b7c1fc4..c058d52b 100644
--- a/packages/extension-code-block/src/index.ts
+++ b/packages/extension-code-block/src/index.ts
@@ -70,6 +70,9 @@ const CodeBlock = createNode({
 
   addCommands() {
     return {
+      /**
+       * Toggle a code block
+       */
       codeBlock: (attrs?: CodeBlockOptions): Command => ({ commands }) => {
         return commands.toggleBlockType('codeBlock', 'paragraph', attrs)
       },
diff --git a/packages/extension-code/src/index.ts b/packages/extension-code/src/index.ts
index 655e4d10..7f13dfb2 100644
--- a/packages/extension-code/src/index.ts
+++ b/packages/extension-code/src/index.ts
@@ -22,6 +22,9 @@ const Code = createMark({
 
   addCommands() {
     return {
+      /**
+       * Toggle inline code
+       */
       code: (): Command => ({ commands }) => {
         return commands.toggleMark('code')
       },
diff --git a/packages/extension-collaboration-cursor/src/index.ts b/packages/extension-collaboration-cursor/src/index.ts
index cc2a4627..ce71674b 100644
--- a/packages/extension-collaboration-cursor/src/index.ts
+++ b/packages/extension-collaboration-cursor/src/index.ts
@@ -30,6 +30,9 @@ const CollaborationCursor = createExtension({
 
   addCommands() {
     return {
+      /**
+       * Update details of the current user
+       */
       user: (attributes: {
         name: string,
         color: string,
diff --git a/packages/extension-font-family/src/index.ts b/packages/extension-font-family/src/index.ts
index 8d1bacbc..6af0cc0e 100644
--- a/packages/extension-font-family/src/index.ts
+++ b/packages/extension-font-family/src/index.ts
@@ -37,6 +37,9 @@ const FontFamily = createExtension({
 
   addCommands() {
     return {
+      /**
+       * Update the font family
+       */
       fontFamily: (fontFamily: string | null = null): Command => ({ chain }) => {
         return chain()
           .updateMarkAttributes('textStyle', { fontFamily })
diff --git a/packages/extension-hard-break/src/index.ts b/packages/extension-hard-break/src/index.ts
index 2112c195..3dd994d5 100644
--- a/packages/extension-hard-break/src/index.ts
+++ b/packages/extension-hard-break/src/index.ts
@@ -22,6 +22,9 @@ const HardBreak = createNode({
 
   addCommands() {
     return {
+      /**
+       * Add a hard break
+       */
       hardBreak: (): Command => ({ commands, state, dispatch }) => {
         return commands.try([
           () => exitCode(state, dispatch),
diff --git a/packages/extension-heading/src/index.ts b/packages/extension-heading/src/index.ts
index bf1e5c43..02f5467f 100644
--- a/packages/extension-heading/src/index.ts
+++ b/packages/extension-heading/src/index.ts
@@ -49,7 +49,7 @@ const Heading = createNode({
   addCommands() {
     return {
       /**
-       * heading command
+       * Toggle a heading node
        */
       heading: (options: { level: Level }): Command => ({ commands }) => {
         if (!this.options.levels.includes(options.level)) {
diff --git a/packages/extension-highlight/src/index.ts b/packages/extension-highlight/src/index.ts
index d0a6370d..db044450 100644
--- a/packages/extension-highlight/src/index.ts
+++ b/packages/extension-highlight/src/index.ts
@@ -48,6 +48,9 @@ const Highlight = createMark({
 
   addCommands() {
     return {
+      /**
+       * Toggle a highlight mark
+       */
       highlight: (attributes?: { color: string }): Command => ({ commands }) => {
         return commands.toggleMark('highlight', attributes)
       },
diff --git a/packages/extension-history/src/index.ts b/packages/extension-history/src/index.ts
index c4170503..bb7f0224 100644
--- a/packages/extension-history/src/index.ts
+++ b/packages/extension-history/src/index.ts
@@ -14,9 +14,15 @@ const History = createExtension({
 
   addCommands() {
     return {
+      /**
+       * Undo recent changes
+       */
       undo: (): Command => ({ state, dispatch }) => {
         return undo(state, dispatch)
       },
+      /**
+       * Reapply reverted changes
+       */
       redo: (): Command => ({ state, dispatch }) => {
         return redo(state, dispatch)
       },
diff --git a/packages/extension-horizontal-rule/src/index.ts b/packages/extension-horizontal-rule/src/index.ts
index a4dd2ca1..db666cd0 100644
--- a/packages/extension-horizontal-rule/src/index.ts
+++ b/packages/extension-horizontal-rule/src/index.ts
@@ -17,6 +17,9 @@ const HorizontalRule = createNode({
 
   addCommands() {
     return {
+      /**
+       * Add a horizontal rule
+       */
       horizontalRule: (): Command => ({ tr }) => {
         tr.replaceSelectionWith(this.type.create())
 
diff --git a/packages/extension-image/src/index.ts b/packages/extension-image/src/index.ts
index 09ee1318..0b5d11cc 100644
--- a/packages/extension-image/src/index.ts
+++ b/packages/extension-image/src/index.ts
@@ -51,6 +51,9 @@ const Image = createNode({
 
   addCommands() {
     return {
+      /**
+       * Add an image
+       */
       image: (options: { src: string, alt?: string, title?: string }): Command => ({ tr }) => {
         const { selection } = tr
         const node = this.type.create(options)
diff --git a/packages/extension-italic/src/index.ts b/packages/extension-italic/src/index.ts
index 9847378d..b12752dd 100644
--- a/packages/extension-italic/src/index.ts
+++ b/packages/extension-italic/src/index.ts
@@ -31,6 +31,9 @@ const Italic = createMark({
 
   addCommands() {
     return {
+      /**
+       * Toggle an italic mark
+       */
       italic: (): Command => ({ commands }) => {
         return commands.toggleMark('italic')
       },
diff --git a/packages/extension-link/src/index.ts b/packages/extension-link/src/index.ts
index 16c81d95..b33556d8 100644
--- a/packages/extension-link/src/index.ts
+++ b/packages/extension-link/src/index.ts
@@ -45,6 +45,9 @@ const Link = createMark({
 
   addCommands() {
     return {
+      /**
+       * Toggle or update a link mark
+       */
       link: (options: { href?: string, target?: string } = {}): Command => ({ commands }) => {
         if (!options.href) {
           return commands.removeMark('link')
diff --git a/packages/extension-ordered-list/src/index.ts b/packages/extension-ordered-list/src/index.ts
index 931c0c08..22521180 100644
--- a/packages/extension-ordered-list/src/index.ts
+++ b/packages/extension-ordered-list/src/index.ts
@@ -41,6 +41,9 @@ const OrderedList = createNode({
 
   addCommands() {
     return {
+      /**
+       * Toggle an ordered list
+       */
       orderedList: (): Command => ({ commands }) => {
         return commands.toggleList('orderedList', 'listItem')
       },
diff --git a/packages/extension-paragraph/src/index.ts b/packages/extension-paragraph/src/index.ts
index 8704dc92..1525a8ac 100644
--- a/packages/extension-paragraph/src/index.ts
+++ b/packages/extension-paragraph/src/index.ts
@@ -20,6 +20,9 @@ const Paragraph = createNode({
 
   addCommands() {
     return {
+      /**
+       * Toggle a paragraph
+       */
       paragraph: (): Command => ({ commands }) => {
         return commands.toggleBlockType('paragraph', 'paragraph')
       },
diff --git a/packages/extension-strike/src/index.ts b/packages/extension-strike/src/index.ts
index a8b3e57a..651d35bb 100644
--- a/packages/extension-strike/src/index.ts
+++ b/packages/extension-strike/src/index.ts
@@ -31,6 +31,9 @@ const Strike = createMark({
 
   addCommands() {
     return {
+      /**
+       * Toggle a strike mark
+       */
       strike: (): Command => ({ commands }) => {
         return commands.toggleMark('strike')
       },
diff --git a/packages/extension-task-list/src/index.ts b/packages/extension-task-list/src/index.ts
index 7f3173d3..f6d28975 100644
--- a/packages/extension-task-list/src/index.ts
+++ b/packages/extension-task-list/src/index.ts
@@ -22,6 +22,9 @@ const TaskList = createNode({
 
   addCommands() {
     return {
+      /**
+       * Toggle a task list
+       */
       taskList: (): Command => ({ commands }) => {
         return commands.toggleList('taskList', 'taskItem')
       },
diff --git a/packages/extension-text-align/src/index.ts b/packages/extension-text-align/src/index.ts
index 6f79df2f..785736ae 100644
--- a/packages/extension-text-align/src/index.ts
+++ b/packages/extension-text-align/src/index.ts
@@ -34,6 +34,9 @@ const TextAlign = createExtension({
 
   addCommands() {
     return {
+      /**
+       * Update the text align attribute
+       */
       textAlign: (alignment: string): Command => ({ commands }) => {
         if (!this.options.alignments.includes(alignment)) {
           return false
diff --git a/packages/extension-text-style/src/index.ts b/packages/extension-text-style/src/index.ts
index 73f35981..efa9414b 100644
--- a/packages/extension-text-style/src/index.ts
+++ b/packages/extension-text-style/src/index.ts
@@ -26,6 +26,9 @@ const TextStyle = createMark({
 
   addCommands() {
     return {
+      /**
+       * Remove spans without inline style attributes.
+       */
       removeEmptyTextStyle: (): Command => ({ state, commands }) => {
         const attributes = getMarkAttrs(state, this.type)
         const hasStyles = Object.entries(attributes).every(([, value]) => !!value)

From 8f00a09b76b3dd97c0c596778d7ddbfbdb4d4449 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 13 Nov 2020 15:46:55 +0100
Subject: [PATCH 4/4] add styles to examples, add content to the typescript
 page

---
 docs/src/demos/Examples/Basic/index.vue       | 47 +++++++++++++
 .../Examples/CollaborativeEditing/index.vue   | 45 +++++++++++++
 .../demos/Examples/ExportHtmlOrJson/index.vue | 46 +++++++++++++
 docs/src/demos/Examples/Links/index.vue       | 14 ++++
 .../Examples/MarkdownShortcuts/index.vue      | 59 ++++++++++++++++-
 docs/src/demos/Examples/Minimalist/index.vue  |  9 +++
 docs/src/demos/Examples/ReadOnly/index.vue    |  7 ++
 .../docPages/guide/working-with-typescript.md | 41 +++++++++++-
 docs/src/layouts/App/base.scss                | 66 +++++++++----------
 docs/src/links.yaml                           |  1 -
 10 files changed, 298 insertions(+), 37 deletions(-)

diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue
index f2597399..6bcbf6b5 100644
--- a/docs/src/demos/Examples/Basic/index.vue
+++ b/docs/src/demos/Examples/Basic/index.vue
@@ -124,3 +124,50 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
+</style>
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index b9c65f58..36403f81 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -281,4 +281,49 @@ export default {
   border-radius: 3px;
   white-space: nowrap;
 }
+
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
 </style>
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
index d5a53f87..e7c2ccb6 100644
--- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
@@ -105,6 +105,7 @@ export default {
 </script>
 
 <style lang="scss">
+/* Style the export */
 .export {
   padding: 1rem 0 0;
 
@@ -126,4 +127,49 @@ export default {
     color: #495057;
   }
 }
+
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
 </style>
diff --git a/docs/src/demos/Examples/Links/index.vue b/docs/src/demos/Examples/Links/index.vue
index e3240fc7..933dd0f8 100644
--- a/docs/src/demos/Examples/Links/index.vue
+++ b/docs/src/demos/Examples/Links/index.vue
@@ -64,3 +64,17 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  a {
+    text-decoration: underline;
+    color: blue;
+  }
+}
+</style>
diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
index f67923d3..d2176b57 100644
--- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue
+++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
@@ -6,6 +6,8 @@
 
 <script>
 import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+import Strike from '@tiptap/extension-strike'
+import Highlight from '@tiptap/extension-highlight'
 
 export default {
   components: {
@@ -28,10 +30,16 @@ export default {
           To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
         </p>
         <p>
-          Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code. You can add your own input rules to existing extensions, and to your custom nodes and marks.
+          Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
+        </p>
+        <p>
+          You can overwrite existing input rules or add your own to new nodes and marks.
         </p>
       `,
-      extensions: defaultExtensions(),
+      extensions: [
+        ...defaultExtensions(),
+        Highlight(),
+      ],
     })
   },
 
@@ -40,3 +48,50 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
+</style>
diff --git a/docs/src/demos/Examples/Minimalist/index.vue b/docs/src/demos/Examples/Minimalist/index.vue
index 9b676326..8f53dc21 100644
--- a/docs/src/demos/Examples/Minimalist/index.vue
+++ b/docs/src/demos/Examples/Minimalist/index.vue
@@ -42,3 +42,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
diff --git a/docs/src/demos/Examples/ReadOnly/index.vue b/docs/src/demos/Examples/ReadOnly/index.vue
index 08e61ba5..a4f16e8f 100644
--- a/docs/src/demos/Examples/ReadOnly/index.vue
+++ b/docs/src/demos/Examples/ReadOnly/index.vue
@@ -53,6 +53,13 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
 .checkbox {
   margin-bottom: 1rem;
 
diff --git a/docs/src/docPages/guide/working-with-typescript.md b/docs/src/docPages/guide/working-with-typescript.md
index 72678065..37dbdc1e 100644
--- a/docs/src/docPages/guide/working-with-typescript.md
+++ b/docs/src/docPages/guide/working-with-typescript.md
@@ -3,10 +3,49 @@
 ## toc
 
 ## Introduction
+The whole tiptap is code base is written in TypeScript. If you haven’t heard of it or never used it, no worries. You don’t have to.
 
+TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesn’t exist in plain JavaScript. It’s actually removed before running in the browser, but this step – the compilation – is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, that’s very valuable. It means we’ll get notified of lot of bugs, before shipping code to you.
+
+Anyway, if you don’t use TypeScript in your project, that’s fine. You’ll still be able to use tiptap and even get a really nice autocomplete for the tiptap API (if your editor supports it, but most do).
+
+If you’re using TypeScript in your project and want to extend tiptap, there are two things that are good to know.
 
 ## Options type
+To extend or create default options for an extension, you’ll need to define a custom type, here is an example:
 
+```js
+import { createExtension } from '@tiptap/core'
 
-## Create a command
+export interface CustomExtensionOptions {
+  awesomeness: number,
+}
 
+const CustomExtension = createExtension({
+  defaultOptions: <CustomExtensionOptions>{
+    awesomeness: 100,
+  },
+})
+```
+
+## Command type
+The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example:
+
+```js
+import { Command, createExtension } from '@tiptap/core'
+
+const CustomExtension = createExtension({
+  addCommands() {
+    return {
+      /**
+       * Comments will be added to the autocomplete.
+       */
+      yourCommand: (): Command => ({ commands }) => {
+        // …
+      },
+    }
+  },
+})
+```
+
+That’s basically it. We’re doing all the rest automatically.
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index c666d4d9..0f0542b7 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -90,45 +90,45 @@ code {
   color: white;
 }
 
-.ProseMirror {
+// TODO: Move to examples
+// .ProseMirror {
+//   > * + * {
+//     margin-top: 0.75em;
+//   }
 
-  > * + * {
-    margin-top: 0.75em;
-  }
+//   ul,
+//   ol {
+//     padding: 0 1rem;
+//   }
 
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
+//   pre {
+//     background: $colorBlack;
+//     color: $colorWhite;
+//     font-family: 'JetBrainsMono', monospace;
+//     padding: 0.75rem 1rem;
+//     border-radius: 0.5rem;
 
-  pre {
-    background: $colorBlack;
-    color: $colorWhite;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
+//     code {
+//       color: inherit;
+//       background: none;
+//       font-size: 0.8rem;
+//     }
+//   }
 
-    code {
-      color: inherit;
-      background: none;
-      font-size: 0.8rem;
-    }
-  }
+//   img {
+//     max-width: 100%;
+//     height: auto;
+//   }
 
-  img {
-    max-width: 100%;
-    height: auto;
-  }
+//   hr {
+//     margin: 1rem 0;
+//   }
 
-  hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba($colorBlack, 0.1);
-  }
-}
+//   blockquote {
+//     padding-left: 1rem;
+//     border-left: 2px solid rgba($colorBlack, 0.1);
+//   }
+// }
 
 .DocSearch {
   filter: saturate(0);
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 8b8473fb..28277793 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -62,7 +62,6 @@
       draft: true
     - title: Working with TypeScript
       link: /guide/working-with-typescript
-      draft: true
 
 - title: API
   items: