Merge branch 'master' of github.com:tiptap/tiptap-next

# Conflicts: # docs/src/docPages/licensing.md
2024-11-25 04:19:02 +08:00 · 2020-07-13 14:39:27 +02:00 · 2020-07-13 14:39:27 +02:00 · 9e154fd36e
commit 9e154fd36e
parent 7156f65954 bda4bbcd6b
74 changed files with 1038 additions and 287 deletions
--- a/docs/gridsome.config.js
+++ b/docs/gridsome.config.js
@ -19,7 +19,7 @@ module.exports = {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'DocPage',
-        baseDir: './src/data/posts',
+        baseDir: './src/docPages',
        template: './src/templates/DocPage',
        plugins: [
          '@gridsome/remark-prismjs',
--- a/docs/gridsome.server.js
+++ b/docs/gridsome.server.js
@ -5,6 +5,7 @@ module.exports = function (api) {
  api.chainWebpack(config => {
    config.resolve.extensions
      .add('.ts')
+      .add('.jsx')

    config.module
      .rule('typescript')
@ -18,12 +19,12 @@ module.exports = function (api) {
        .test(/\.jsx?$/)
        .use()
          .loader('babel-loader')
-    
-    globby.sync('./packages/*', { onlyDirectories: true })
-      .map(name => name.replace('./packages/', ''))
+
+    globby.sync('../packages/*', { onlyDirectories: true })
+      .map(name => name.replace('../packages/', ''))
      .forEach(name => {
        config.resolve.alias
-          .set(`@tiptap/${name}`, path.resolve(`./packages/${name}`))
+          .set(`@tiptap/${name}`, path.resolve(`../packages/${name}`))
      })
  })
 }
--- a/docs/package.json
+++ b/docs/package.json
@ -12,6 +12,7 @@
    "@gridsome/transformer-json": "^0.2.1",
    "@gridsome/vue-remark": "^0.2.0",
    "@mvasilkov/outdent": "^1.0.4",
+    "collect.js": "^4.25.0",
    "globby": "^11.0.0",
    "gridsome": "0.7.14",
    "raw-loader": "^4.0.0",
--- a/docs/src/assets/icons/close.svg
+++ b/docs/src/assets/icons/close.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3 12.179C14.2767 12.1558 14.2583 12.1282 14.2456 12.0978C14.233 12.0674 14.2266 12.0349 14.2266 12.002C14.2266 11.9691 14.233 11.9366 14.2456 11.9062C14.2583 11.8758 14.2767 11.8482 14.3 11.825L19.563 6.563C19.8443 6.28134 20.0021 5.89948 20.0018 5.50144C20.0016 5.10339 19.8432 4.72176 19.5615 4.4405C19.2798 4.15924 18.898 4.00138 18.4999 4.00166C18.1019 4.00194 17.7203 4.16034 17.439 4.442L12.177 9.7C12.1538 9.72328 12.1262 9.74175 12.0958 9.75435C12.0654 9.76696 12.0329 9.77345 12 9.77345C11.9671 9.77345 11.9346 9.76696 11.9042 9.75435C11.8738 9.74175 11.8462 9.72328 11.823 9.7L6.561 4.442C6.42174 4.30267 6.25639 4.19213 6.07441 4.1167C5.89242 4.04127 5.69736 4.00242 5.50036 4.00237C5.1025 4.00228 4.7209 4.16024 4.4395 4.4415C4.15811 4.72276 3.99997 5.10429 3.99988 5.50214C3.99978 5.9 4.15774 6.2816 4.439 6.563L9.7 11.825C9.72329 11.8482 9.74176 11.8758 9.75436 11.9062C9.76696 11.9366 9.77345 11.9691 9.77345 12.002C9.77345 12.0349 9.76696 12.0674 9.75436 12.0978C9.74176 12.1282 9.72329 12.1558 9.7 12.179L4.43901 17.442C4.29974 17.5813 4.18928 17.7467 4.11393 17.9288C4.03859 18.1108 3.99983 18.3059 3.99988 18.5029C3.99997 18.9007 4.15811 19.2822 4.43951 19.5635C4.57884 19.7028 4.74424 19.8132 4.92626 19.8886C5.10828 19.9639 5.30336 20.0027 5.50036 20.0026C5.89822 20.0025 6.27974 19.8444 6.56101 19.563L11.823 14.3C11.8462 14.2767 11.8738 14.2582 11.9042 14.2456C11.9346 14.233 11.9671 14.2266 12 14.2266C12.0329 14.2266 12.0654 14.233 12.0958 14.2456C12.1262 14.2582 12.1538 14.2767 12.177 14.3L17.439 19.563C17.7203 19.8444 18.1018 20.0025 18.4997 20.0026C18.8975 20.0027 19.2791 19.8448 19.5605 19.5635C19.8419 19.2822 20 18.9007 20.0001 18.5029C20.0002 18.105 19.8423 17.7234 19.561 17.442L14.3 12.179Z" fill="black"/>
+</svg>
--- a/docs/src/assets/icons/menu.svg
+++ b/docs/src/assets/icons/menu.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z" fill="black"/>
+<path d="M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z" fill="black"/>
+<path d="M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z" fill="black"/>
+</svg>
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@ -24,6 +24,7 @@
 </template>

 <script>
+import collect from 'collect.js'
 import ReactRenderer from '~/components/ReactRenderer'

 export default {
@ -76,8 +77,7 @@ export default {
  },

  mounted() {
-    this.files = require.context(`~/demos/`, true, /.+\..+$/)
-      .keys()
+    this.files = collect(require.context(`~/demos/`, true, /.+\..+$/).keys())
      .filter(path => path.startsWith(`./${this.name}`))
      .map(path => path.replace('./', ''))
      .map(path => {
@ -91,6 +91,8 @@ export default {
          highlight: this.syntax[extension] || extension,
        }
      })
+      .sortBy(item => item.path.split('/').length)
+      .toArray()
  }
 }
 </script>
--- a/docs/src/components/Icon/style.scss
+++ b/docs/src/components/Icon/style.scss
@ -1,7 +1,7 @@
 .icon {
  display: inline-flex;
-  width: 1.3rem;
-  height: 1.3rem;
+  width: 1.2rem;
+  height: 1.2rem;

  &::v-deep > svg {
    width: 100%;
--- a/docs/src/components/PageNavigation/index.vue
+++ b/docs/src/components/PageNavigation/index.vue
@ -24,7 +24,7 @@
 </template>

 <script>
-import linkGroups from '@/data/links.yaml'
+import linkGroups from '@/links.yaml'

 export default {
  data() {
--- a/docs/src/data/posts/commands.md
+++ b/docs/src/data/posts/commands.md
@ -1 +0,0 @@
-# Commands
--- a/docs/src/data/posts/schema.md
+++ b/docs/src/data/posts/schema.md
@ -1,9 +0,0 @@
-# Schema
-
-Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This allows you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
-
-This schema is *very* strict. You can’t use any HTML-element or attribute that is not defined in your schema.
-
-For example if you paste something like `This is <strong>important</strong>` into tiptap and don’t have registered any extension that handles `strong` tags, you’ll only see `This is important`.
-
-
--- a/docs/src/demos/Basic/index.vue
+++ b/docs/src/demos/Basic/index.vue
@ -4,7 +4,7 @@

 <script>
 import { Editor } from '@tiptap/core'
-import { EditorContent } from '@tiptap/vue'
+import { EditorContent, Renderer } from '@tiptap/vue'
 import extensions from '@tiptap/starter-kit'

 export default {
@ -22,6 +22,7 @@ export default {
    this.editor = new Editor({
      content: '<p>foo</p>',
      extensions: extensions(),
+      renderer: Renderer,
    })
  },

--- a/docs/src/demos/HandleExtensions/index.vue
+++ b/docs/src/demos/HandleExtensions/index.vue
@ -16,6 +16,12 @@
      <button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
        italic
      </button>
+      <button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+        h1
+      </button>
+      <button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+        h2
+      </button>
    </div>
    <editor-content :editor="editor" />
  </div>
@ -32,6 +38,7 @@ 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'

 export default {
  components: {
@ -46,7 +53,7 @@ export default {

  mounted() {
    this.editor = new Editor({
-      content: '<p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
+      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(),
@ -56,6 +63,7 @@ export default {
        new Bold(),
        new Italic(),
        new Code(),
+        new Heading(),
      ],
    })
  },
--- a/docs/src/demos/React/components/Editor.jsx
+++ b/docs/src/demos/React/components/Editor.jsx
@ -0,0 +1,30 @@
+import React, { useState, useRef, useEffect, createContext, useContext } from 'react'
+import { Editor as Tiptap } from '@tiptap/core'
+
+export const EditorContext = createContext({})
+
+export const useEditor = () => useContext(EditorContext)
+
+export const Editor = ({ value, onChange, children, ...props }) => {
+  const [editor, setEditor] = useState(null)
+  const editorRef = useRef(null)
+
+  useEffect(() => {
+    const e = new Tiptap({
+      element: editorRef.current,
+      content: value,
+      ...props,
+    }).on('transaction', () => {
+      onChange(e.json())
+    })
+
+    setEditor(e)
+  }, [])
+
+  return (
+    <EditorContext.Provider value={editor}>
+      {editorRef.current && children}
+      <div ref={editorRef} />
+    </EditorContext.Provider>
+  )
+}
--- a/docs/src/demos/React/index.jsx
+++ b/docs/src/demos/React/index.jsx
@ -1,40 +1,69 @@
-import React, { Component } from 'react'
-import { Editor } from '@tiptap/core'
+import React, { useState } from 'react'
+import { useEditor, Editor } from './components/Editor'
 import extensions from '@tiptap/starter-kit'

-export default class extends Component {
-  constructor() {
-    super()
-    this.editorNode = React.createRef()
-  }
-  
-  componentDidMount() {
-    this.editor = new Editor({
-      element: this.editorNode.current,
-      content: '<p>rendered in <strong>react</strong>!</p>',
-      extensions: extensions(),
-    })
-    this.forceUpdate()
-  }
+// Menu bar example component
+// useEditor only works for child components of <Editor />
+const MenuBar = () => {
+  const editor = useEditor()

-  render() {
-    return (
-      <div>
-        {this.editor &&
-          <div>
-            <button onClick={() => this.editor.focus().removeMarks()}>
-              clear formatting
-            </button>
-            <button
-              onClick={() => this.editor.focus().bold()}
-              className={`${this.editor.isActive('bold') ? 'is-active' : ''}`}
-            >
-              bold
-            </button>
-          </div>
-        } 
-        <div ref={this.editorNode} />
-      </div>
-    )
-  }
+  return (
+    <>
+      <button onClick={() => editor.focus().removeMarks()}>
+        Clear formatting
+      </button>
+      <button
+        className={`${editor.isActive('bold') ? 'is-active' : ''}`}
+        onClick={() => editor.focus().bold()}
+      >
+        Bold
+      </button>
+    </>
+  )
+}
+
+export default () => {
+  const [value, setValue] = useState({
+    'type': 'document',
+    'content': [
+       {
+          'type': 'paragraph',
+          'content': [
+             {
+                'type': 'text',
+                'text': 'rendered in '
+             },
+             {
+                'type': 'text',
+                'marks': [
+                   {
+                      'type': 'bold'
+                   }
+                ],
+                'text': 'react'
+             },
+             {
+                'type': 'text',
+                'text': '!'
+             }
+          ]
+       }
+    ]
+ })
+
+  return (
+    <>
+      <p>
+        <button onClick={() => alert(JSON.stringify(value))}>Alert state</button>
+      </p>
+      <hr style={{ margin: '0.85rem 0'}} />
+      <Editor 
+        value={value}
+        onChange={setValue}
+        extensions={extensions()}
+      >
+        <MenuBar />
+      </Editor>
+    </>
+  )
 }
--- a/docs/src/data/posts/advanced-example.md
+++ b/docs/src/data/posts/advanced-example.md
--- a/docs/src/data/posts/basic-example.md
+++ b/docs/src/data/posts/basic-example.md
--- a/docs/src/docPages/commands.md
+++ b/docs/src/docPages/commands.md
@ -0,0 +1,57 @@
+# Commands
+
+## .clearContent()
+
+Clear the whole document.
+
+## .deleteSelection()
+
+Delete the selection, if there is one.
+
+## .focus()
+
+Focus the editor at the given position.
+
+## .insertHTML()
+
+Insert a string of HTML at the currently selected position.
+
+## .insertText()
+
+Insert a string of text at the currently selected position.
+
+## .removeMark()
+
+Remove a mark in the current selection.
+
+## .removeMarks()
+
+Remove all marks in the current selection.
+
+## .replaceWithNode()
+
+Replace a given range with a node.
+
+## .selectAll()
+
+Select the whole document.
+
+## .selectParentNode()
+
+Select the parent node.
+
+## .setContent()
+
+Replace the whole document with new content.
+
+## .toggleMark()
+
+Toggle a mark on and off.
+
+## .toggleNode()
+
+Toggle a node with another node.
+
+## .updateMark()
+
+Update a mark with new attributes.
--- a/docs/src/data/posts/editor.md
+++ b/docs/src/data/posts/editor.md
--- a/docs/src/data/posts/events.md
+++ b/docs/src/data/posts/events.md
--- a/docs/src/data/posts/extensions.md
+++ b/docs/src/data/posts/extensions.md
--- a/docs/src/data/posts/installation.md
+++ b/docs/src/data/posts/installation.md
--- a/docs/src/data/posts/introduction.md
+++ b/docs/src/data/posts/introduction.md
--- a/docs/src/data/posts/react.md
+++ b/docs/src/data/posts/react.md
--- a/docs/src/data/posts/renderless.md
+++ b/docs/src/data/posts/renderless.md
--- a/docs/src/docPages/schema.md
+++ b/docs/src/docPages/schema.md
@ -0,0 +1,70 @@
+# Schema
+
+Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This allows you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
+
+This schema is *very* strict. You can’t use any HTML-element or attribute that is not defined in your schema.
+
+For example if you paste something like `This is <strong>important</strong>` into tiptap and don’t have registered any extension that handles `strong` tags, you’ll only see `This is important`.
+
+## How a schema looks like
+
+The most simple schema for a typical *ProseMirror* editor is looking something like that.
+
+```js
+{
+  nodes: {
+    document: {
+      content: 'block+',
+    },
+    paragraph: {
+      content: 'inline*',
+      group: 'block',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0],
+    },
+    text: {
+      group: 'inline',
+    },
+  },
+}
+```
+
+We register three nodes here. `document`, `paragraph` and `text`. `document` is the root node which allows one or more block nodes as children (`content: 'block+'`). Since `paragraph` is in the group of block nodes (`group: 'block'`) our document can only contain paragraphs. Our paragraphs allow zero or more inline nodes as children (`content: 'inline*'`) so there can only be `text` in it. `parseDOM` defines how a node can be parsed from pasted HTML. `toDOM` defines how it will be rendered in the DOM.
+
+In tiptap we define every node in its own `Extension` class instead. This allows us to split logic per node. Under the hood the schema will be merged together.
+
+```js
+class Document extends Node {
+  name = 'document'
+  topNode = true
+
+  schema() {
+    return {
+      content: 'block+',
+    }
+  }
+}
+
+class Paragraph extends Node {
+  name = 'paragraph'
+
+  schema() {
+    return {
+      content: 'inline*',
+      group: 'block',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0],
+    }
+  }
+}
+
+class Text extends Node {
+  name = 'text'
+
+  schema() {
+    return {
+      group: 'inline',
+    }
+  }
+}
+```
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@ -24,7 +24,11 @@
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 8px;
-  background-color: $colorBlack;
+  background-color: rgba($colorBlack, 0);
+}
+
+:hover::-webkit-scrollbar-thumb {
+  background-color: rgba($colorBlack, 0.1);
 }

 ::-webkit-scrollbar-button {
@ -48,7 +52,7 @@ body {
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
  font-feature-settings: 'cv05' 1;
-  background-color: rgba($colorBlack, 0.02);
+  background-color: $colorBackground;
  height: 100%;
 }

--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@ -1,30 +1,50 @@
 <template>
  <div class="app">
    <header class="app__header">
-      <g-link class="app__logo" to="/">
-        {{ $static.metadata.siteName }}
-      </g-link>
-      <github-button
-        href="https://github.com/scrumpy/tiptap"
-        data-show-count="true"
-        aria-label="Star scrumpy/tiptap on GitHub"
-      />
+      <div class="app__header-inner">
+        <g-link class="app__logo" to="/">
+          {{ $static.metadata.siteName }}
+        </g-link>
+        <div>
+          <github-button
+            href="https://github.com/scrumpy/tiptap"
+            data-show-count="true"
+            aria-label="Star scrumpy/tiptap on GitHub"
+          />
+          <button
+            class="app__menu-icon"
+            @click="menuIsVisible = true"
+            v-if="!menuIsVisible"
+          >
+            <icon name="menu" />
+          </button>
+          <button
+            class="app__close-icon"
+            @click="menuIsVisible = false"
+            v-if="menuIsVisible"
+          >
+            <icon name="close" />
+          </button>
+        </div>
+      </div>
    </header>
    <div class="app__content">
-      <nav class="app__sidebar">
-        <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
-          <div class="app__link-group-title">
-            {{ linkGroup.title }}
+      <div class="app__sidebar-wrapper" :class="{ 'is-mobile-visible': menuIsVisible }">
+        <nav class="app__sidebar">
+          <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
+            <div class="app__link-group-title">
+              {{ linkGroup.title }}
+            </div>
+            <ul>
+              <li v-for="(item, j) in linkGroup.items" :key="j">
+                <g-link class="app__link" :to="item.link">
+                  {{ item.title }}
+                </g-link>
+              </li>
+            </ul>
          </div>
-          <ul>
-            <li v-for="(item, j) in linkGroup.items" :key="j">
-              <g-link class="app__link" :to="item.link">
-                {{ item.title }}
-              </g-link>
-            </li>
-          </ul>
-        </div>
-      </nav>
+        </nav>
+      </div>
      <main class="app__main">
        <slot/>
        <page-navigation />
@ -42,12 +62,14 @@ query {
 </static-query>

 <script>
-import linkGroups from '@/data/links.yaml'
+import linkGroups from '@/links.yaml'
+import Icon from '@/components/Icon'
 import PageNavigation from '@/components/PageNavigation'
 import GithubButton from 'vue-github-button'

 export default {
  components: {
+    Icon,
    PageNavigation,
    GithubButton,
  },
@ -55,6 +77,7 @@ export default {
  data() {
    return {
      linkGroups,
+      menuIsVisible: false,
    }
  },
 }
--- a/docs/src/layouts/App/prism.scss
+++ b/docs/src/layouts/App/prism.scss
@ -20,7 +20,7 @@ pre[class*="language-"] {
  color: inherit;
  text-shadow: none;
  font-family: 'JetBrainsMono', monospace;
-  font-size: 1em;
+  font-size: 0.95em;
  line-height: 1.8;
  tab-size: 2;
  padding: 0;
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@ -1,3 +1,6 @@
+$navHeight: 4.5rem;
+$menuBreakPoint: 750px;
+
 .app {
  display: flex;
  flex-direction: column;
@ -40,42 +43,110 @@
    }
  }

-  &__header,
+  &__header {
+    align-self: center;
+    position: fixed;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: $navHeight;
+    flex: 0 0 auto;
+    background-color: rgba($colorBackground, 0.8);
+    border-bottom: 1px solid rgba($colorBlack, 0.05);
+    backdrop-filter: blur(10px);
+  }
+  
+  &__header-inner {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 62rem;
+    margin: 0 auto;
+    padding: 0 1rem;
+
+    @media (min-width: $menuBreakPoint) {
+      padding: 0 2rem;
+    }
+  }
+
  &__content {
+    position: relative;
+    z-index: 1;
+    flex: 1 1 auto;
    display: flex;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
-    padding-left: 2rem;
-    padding-right: 2rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    @media (min-width: $menuBreakPoint) {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
  }

-  &__header {
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+  &__menu-icon,
+  &__close-icon {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    margin-left: 1rem;
+
+    @media (min-width: $menuBreakPoint) {
+      display: none;
+    }
  }

-  &__content {
-    flex: 1 1 auto;
+  &__sidebar-wrapper {
+    position: fixed;
+    z-index: 2;
+    top: $navHeight;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: $colorBackground;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    visibility: hidden;
+    opacity: 0;
+
+    &.is-mobile-visible {
+      visibility: visible;
+      opacity: 1;
+    }
+    
+    @media (min-width: $menuBreakPoint) {
+      visibility: visible;
+      opacity: 1;
+      position: sticky;
+      flex: 0 0 auto;
+      align-self: flex-start;
+      top: 0;
+      width: 18rem;
+      height: 100vh;
+      padding-left: 0;
+      padding-right: 0;
+      padding-right: 3rem;
+      padding-top: $navHeight;
+    }
  }

  &__sidebar {
-    flex: 0 0 auto;
-    width: 18rem;
-    padding-right: 3rem;
+    overflow: auto;
+    height: 100%;
+    padding-top: 2rem;
+    padding-left: 0.5rem;
+    margin-left: -0.5rem;
  }

  &__main {
    flex: 1 1 auto;
    min-width: 0;
-  }
-
-  &__inner {
-    max-width: 62rem;
-    margin: 0 auto;
-    padding: 0 2rem;
+    padding-top: $navHeight + 2rem;
  }
 }
--- a/docs/src/layouts/README.md
+++ b/docs/src/layouts/README.md
@ -1,5 +0,0 @@
-Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
-
-Learn more about Layouts: https://gridsome.org/docs/layouts/
-
-You can delete this file.
--- a/docs/src/data/links.yaml
+++ b/docs/src/data/links.yaml
--- a/docs/src/pages/README.md
+++ b/docs/src/pages/README.md
@ -1,5 +0,0 @@
-Pages are usually used for normal pages or for listing items from a GraphQL collection.
-Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
-Learn more about pages: https://gridsome.org/docs/pages/
-
-You can delete this file.
--- a/docs/src/templates/DocPage/style.scss
+++ b/docs/src/templates/DocPage/style.scss
@ -106,5 +106,41 @@
        }
      }
    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+
+      th,
+      td {
+        text-align: left;
+        font-size: 0.75rem;
+        padding: 0.5rem;
+      }
+
+      th {
+        font-weight: 600;
+        background-color: rgba($colorBlack, 0.05);
+
+        &:first-child {
+          border-top-left-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+
+        &:last-child {
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+      }
+
+      td {
+        border-bottom: 1px solid rgba($colorBlack, 0.05);
+      }
+
+      tr:last-child td {
+        border-bottom: 0;
+      }
+    }
+
  }
 }
--- a/docs/src/templates/README.md
+++ b/docs/src/templates/README.md
@ -1,7 +0,0 @@
-Templates for **GraphQL collections** should be added here.
-To create a template for a collection called `WordPressPost`
-create a file named `WordPressPost.vue` in this folder.
-
-Learn more: https://gridsome.org/docs/templates/
-
-You can delete this file.
--- a/docs/src/variables.scss
+++ b/docs/src/variables.scss
@ -1,5 +1,6 @@
 $colorWhite: #FFF;
 $colorBlack: #000;
+$colorBackground: mix($colorBlack, $colorWhite, 2%);

 /* Default Equations */
 $linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
--- a/docs/static/README.md
+++ b/docs/static/README.md
@ -1,3 +0,0 @@
-Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
-
-This file should be deleted.
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@ -2,6 +2,7 @@ import { Editor, CommandSpec } from './src/Editor'

 export default Editor
 export { Editor, CommandSpec }
+export { default as ComponentRenderer } from './src/ComponentRenderer'
 export { default as Extension } from './src/Extension'
 export { default as Node } from './src/Node'
 export { default as Mark } from './src/Mark'
--- a/packages/core/src/ComponentRenderer.ts
+++ b/packages/core/src/ComponentRenderer.ts
@ -0,0 +1,3 @@
+export default abstract class ComponentRenderer {
+
+}
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@ -21,7 +21,7 @@ import Node from './Node'
 import Mark from './Mark'
 import EventEmitter from './EventEmitter'

-export type Command = (next: Function, editor: Editor, ...args: any) => any
+export type Command = (next: Function, editor: Editor) => (...args: any) => any

 export interface CommandSpec {
  [key: string]: Command
@ -30,10 +30,11 @@ export interface CommandSpec {
 type EditorContent = string | JSON | null

 interface EditorOptions {
-  element: HTMLElement,
+  element: Element,
  content: EditorContent
  extensions: (Extension | Node | Mark)[]
  injectCSS: Boolean,
+  renderer: any,
 }

@magicMethods
@ -50,6 +51,7 @@ export class Editor extends EventEmitter {
    content: '',
    injectCSS: true,
    extensions: [],
+    renderer: null,
  }
  
  private lastCommand = Promise.resolve()
@ -65,12 +67,20 @@ export class Editor extends EventEmitter {
    this.createExtensionManager()
    this.createSchema()
    this.createView()
-    this.registerCommand('focus', require('./commands/focus').default)
-    this.registerCommand('insertText', require('./commands/insertText').default)
-    this.registerCommand('insertHTML', require('./commands/insertHTML').default)
-    this.registerCommand('setContent', require('./commands/setContent').default)
    this.registerCommand('clearContent', require('./commands/clearContent').default)
+    this.registerCommand('deleteSelection', require('./commands/deleteSelection').default)
+    this.registerCommand('focus', require('./commands/focus').default)
+    this.registerCommand('insertHTML', require('./commands/insertHTML').default)
+    this.registerCommand('insertText', require('./commands/insertText').default)
+    this.registerCommand('removeMark', require('./commands/removeMark').default)
    this.registerCommand('removeMarks', require('./commands/removeMarks').default)
+    this.registerCommand('replaceWithNode', require('./commands/replaceWithNode').default)
+    this.registerCommand('selectAll', require('./commands/selectAll').default)
+    this.registerCommand('selectParentNode', require('./commands/selectParentNode').default)
+    this.registerCommand('setContent', require('./commands/setContent').default)
+    this.registerCommand('toggleMark', require('./commands/toggleMark').default)
+    this.registerCommand('toggleNode', require('./commands/toggleNode').default)
+    this.registerCommand('updateMark', require('./commands/updateMark').default)
    
    if (this.options.injectCSS) {
      require('./style.css')
@ -103,7 +113,7 @@ export class Editor extends EventEmitter {
    }
    
    this.commands[name] = this.chainCommand((...args: any) => {
-      return new Promise(resolve => callback(resolve, this.proxy, ...args))
+      return new Promise(resolve => callback(resolve, this.proxy)(...args))
    })

    return this.proxy
@ -162,6 +172,8 @@ export class Editor extends EventEmitter {
        plugins: this.plugins,
      }),
      dispatchTransaction: this.dispatchTransaction.bind(this),
+      // @ts-ignore
+      nodeViews: this.extensionManager.nodeViews,
    })
  }

--- a/packages/core/src/ExtensionManager.ts
+++ b/packages/core/src/ExtensionManager.ts
@ -1,9 +1,12 @@
 import collect from 'collect.js'
 import { keymap } from 'prosemirror-keymap'
 import { inputRules } from 'prosemirror-inputrules'
+import { EditorView, Decoration } from 'prosemirror-view'
+import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { Editor, CommandSpec } from './Editor'
 import Extension from './Extension'
 import Node from './Node'
+import capitalize from './utils/capitalize'

 export default class ExtensionManager {

@ -85,4 +88,35 @@ export default class ExtensionManager {
      .toArray()
  }

+  get nodeViews() {
+    const { renderer: Renderer } = this.editor.options
+
+    if (!Renderer || !Renderer.type) {
+      return {}
+    }
+
+    const prop = `to${capitalize(Renderer.type)}`
+
+    return collect(this.extensions)
+      .where('extensionType', 'node')
+      .filter((extension: any) => extension.schema()[prop])
+      .map((extension: any) => {
+        return (
+          node: ProsemirrorNode,
+          view: EditorView,
+          getPos: (() => number) | boolean,
+          decorations: Decoration[],
+        ) => {
+          return new Renderer(extension.schema()[prop], {
+            extension,
+            editor: this.editor,
+            node,
+            getPos,
+            decorations,
+          })
+        }
+      })
+      .all()
+  }
+
 }
--- a/packages/core/src/commands/clearContent.ts
+++ b/packages/core/src/commands/clearContent.ts
@ -1,13 +1,15 @@
 import { Editor } from '../Editor'
 import { TextSelection } from 'prosemirror-state'

+type ClearContent = (emitUpdate?: Boolean) => any
+
 declare module '../Editor' {
  interface Editor {
-    clearContent(emitUpdate?: Boolean): Editor,
+    clearContent: ClearContent,
  }
 }

-export default function clearContent(next: Function, editor: Editor, emitUpdate = false): void {
+export default (next: Function, editor: Editor): ClearContent => (emitUpdate = false) => {
  editor.setContent('', emitUpdate)
  next()
 }
--- a/packages/core/src/commands/deleteSelection.ts
+++ b/packages/core/src/commands/deleteSelection.ts
@ -0,0 +1,15 @@
+import { Editor } from '../Editor'
+import { deleteSelection } from 'prosemirror-commands'
+
+type DeleteSelection = () => any
+
+declare module '../Editor' {
+  interface Editor {
+    deleteSelection: DeleteSelection,
+  }
+}
+
+export default (next: Function, { state, view }: Editor): DeleteSelection => () => {
+  deleteSelection(state, view.dispatch)
+  next()
+}
--- a/packages/core/src/commands/focus.ts
+++ b/packages/core/src/commands/focus.ts
@ -3,9 +3,11 @@ import { TextSelection } from 'prosemirror-state'
 import sleep from '../utils/sleep'
 import minMax from '../utils/minMax'

+type Focus = (position?: Position) => any
+
 declare module '../Editor' {
  interface Editor {
-    focus(position?: Position): Editor
+    focus: Focus,
  }
 }

@ -43,7 +45,7 @@ function resolveSelection(editor: Editor, position: Position = null): ResolvedSe
  }
 }

-export default async function focus(next: Function, editor: Editor, position: Position = null): Promise<void> {
+export default (next: Function, editor: Editor): Focus => async (position = null) => {
  const { view, state } = editor

  if ((view.hasFocus() && position === null)) {
--- a/packages/core/src/commands/insertHTML.ts
+++ b/packages/core/src/commands/insertHTML.ts
@ -2,13 +2,15 @@ import { DOMParser } from 'prosemirror-model'
 import { Editor } from '../Editor'
 import elementFromString from '../utils/elementFromString'

+type InsertHTML = (value: string) => any
+
 declare module '../Editor' {
  interface Editor {
-    insertHTML(value: string): Editor,
+    insertHTML: InsertHTML,
  }
 }

-export default function insertHTML(next: Function, editor: Editor, value: string): void {
+export default (next: Function, editor: Editor): InsertHTML => value => {
  const { view, state } = editor
  const { selection } = state
  const element = elementFromString(value)
--- a/packages/core/src/commands/insertText.ts
+++ b/packages/core/src/commands/insertText.ts
@ -1,12 +1,14 @@
 import { Editor } from '../Editor'

+type InsertText = (value: string) => any
+
 declare module '../Editor' {
  interface Editor {
-    insertText(value: string): Editor,
+    insertText: InsertText,
  }
 }

-export default function insertText(next: Function, editor: Editor, value: string): void {
+export default (next: Function, editor: Editor): InsertText => value => {
  const { view, state } = editor
  const transaction = state.tr.insertText(value)

--- a/packages/core/src/commands/removeMark.ts
+++ b/packages/core/src/commands/removeMark.ts
@ -0,0 +1,32 @@
+import { Editor } from '../Editor'
+import { MarkType } from 'prosemirror-model'
+import getMarkType from '../utils/getMarkType'
+import getMarkRange from '../utils/getMarkRange'
+
+type RemoveMark = (type: string | MarkType) => any
+
+declare module '../Editor' {
+  interface Editor {
+    toggleMark: RemoveMark,
+  }
+}
+
+export default (next: Function, editor: Editor): RemoveMark => typeOrName => {
+  const { view, state, schema } = editor
+  const { tr, selection } = state
+  const type = getMarkType(typeOrName, schema)
+  let { from, to, $from, empty } = selection
+
+  if (empty) {
+    const range = getMarkRange($from, type)
+
+    if (range) {
+      from = range.from
+      to = range.to
+    }
+  }
+
+  tr.removeMark(from, to, type)
+  view.dispatch(tr)
+  next()
+}
--- a/packages/core/src/commands/removeMarks.ts
+++ b/packages/core/src/commands/removeMarks.ts
@ -1,12 +1,14 @@
 import { Editor } from '../Editor'

+type RemoveMarks = () => any
+
 declare module '../Editor' {
  interface Editor {
-    removeMarks(): Editor,
+    removeMarks: RemoveMarks,
  }
 }

-export default function removeMarks(next: Function, editor: Editor): void {
+export default (next: Function, editor: Editor): RemoveMarks => () => {
  const { state, view, schema } = editor
  const { selection, tr } = state
  const { from, to, empty } = selection
--- a/packages/core/src/commands/replaceWithNode.ts
+++ b/packages/core/src/commands/replaceWithNode.ts
@ -0,0 +1,35 @@
+import { Editor } from '../Editor'
+import { NodeType } from 'prosemirror-model'
+import getNodeType from '../utils/getNodeType'
+
+interface Range {
+  from: number,
+  to: number,
+}
+
+type ReplaceWithNode = (
+  type: NodeType,
+  attrs: {},
+  range?: Range,
+) => any
+
+declare module '../Editor' {
+  interface Editor {
+    replaceText: ReplaceWithNode,
+  }
+}
+
+export default (next: Function, editor: Editor): ReplaceWithNode => (typeOrName, attrs, range) => {
+  const { view, state, schema } = editor
+  const { $from, $to } = state.selection
+  const type = getNodeType(typeOrName, schema)
+  const index = $from.index()
+  const from = range ? range.from : $from.pos
+  const to = range ? range.to : $to.pos
+
+  if ($from.parent.canReplaceWith(index, index, type)) {
+    view.dispatch(state.tr.replaceWith(from, to, type.create(attrs)))
+  }
+
+  next()
+}
--- a/packages/core/src/commands/selectAll.ts
+++ b/packages/core/src/commands/selectAll.ts
@ -0,0 +1,15 @@
+import { Editor } from '../Editor'
+import { selectAll } from 'prosemirror-commands'
+
+type SelectAll = () => any
+
+declare module '../Editor' {
+  interface Editor {
+    selectAll: SelectAll,
+  }
+}
+
+export default (next: Function, { state, view }: Editor): SelectAll => () => {
+  selectAll(state, view.dispatch)
+  next()
+}
--- a/packages/core/src/commands/selectParentNode.ts
+++ b/packages/core/src/commands/selectParentNode.ts
@ -0,0 +1,15 @@
+import { Editor } from '../Editor'
+import { selectParentNode } from 'prosemirror-commands'
+
+type SelectParentNode = () => any
+
+declare module '../Editor' {
+  interface Editor {
+    selectParentNode: SelectParentNode,
+  }
+}
+
+export default (next: Function, { state, view }: Editor): SelectParentNode => () => {
+  selectParentNode(state, view.dispatch)
+  next()
+}
--- a/packages/core/src/commands/setContent.ts
+++ b/packages/core/src/commands/setContent.ts
@ -1,19 +1,19 @@
 import { Editor } from '../Editor'
 import { TextSelection } from 'prosemirror-state'

+type SetContent = (
+  content: string,
+  emitUpdate?: Boolean,
+  parseOptions?: any,
+) => any
+
 declare module '../Editor' {
  interface Editor {
-    setContent(content: string, emitUpdate?: Boolean, parseOptions?: any): Editor,
+    setContent: SetContent,
  }
 }

-export default function setContent(
-  next: Function,
-  editor: Editor,
-  content = null,
-  emitUpdate = false,
-  parseOptions = {},
-): void {
+export default (next: Function, editor: Editor): SetContent => (content, emitUpdate = false, parseOptions = {}) => {
  if (content === null) {
    next()
    return
--- a/packages/core/src/commands/toggleMark.ts
+++ b/packages/core/src/commands/toggleMark.ts
@ -0,0 +1,20 @@
+import { Editor } from '../Editor'
+import { toggleMark } from 'prosemirror-commands'
+import { MarkType } from 'prosemirror-model'
+import getMarkType from '../utils/getMarkType'
+
+type ToggleMark = (type: string | MarkType) => any
+
+declare module '../Editor' {
+  interface Editor {
+    toggleMark: ToggleMark,
+  }
+}
+
+export default (next: Function, editor: Editor): ToggleMark => (typeOrName) => {
+  const { view, state, schema } = editor
+  const type = getMarkType(typeOrName, schema)
+
+  toggleMark(type)(state, view.dispatch)
+  next()
+}
--- a/packages/core/src/commands/toggleNode.ts
+++ b/packages/core/src/commands/toggleNode.ts
@ -0,0 +1,32 @@
+import { NodeType } from 'prosemirror-model'
+import { setBlockType } from 'prosemirror-commands'
+import { Editor } from '../Editor'
+import nodeIsActive from '../utils/nodeIsActive'
+import getNodeType from '../utils/getNodeType'
+
+type ToggleNode = (
+  type: string | NodeType,
+  toggleType: string | NodeType,
+  attrs?: {}
+) => any
+
+declare module '../Editor' {
+  interface Editor {
+    toggleNode: ToggleNode,
+  }
+}
+
+export default (next: Function, editor: Editor): ToggleNode => (typeOrName, toggleTypeOrName, attrs) => {
+  const { view, state, schema } = editor
+  const type = getNodeType(typeOrName, schema)
+  const toggleType = getNodeType(toggleTypeOrName, schema)
+  const isActive = nodeIsActive(state, type, attrs)
+
+  if (isActive) {
+    setBlockType(toggleType)(view.state, view.dispatch)
+  } else {
+    setBlockType(type, attrs)(view.state, view.dispatch)
+  }
+
+  next()
+}
--- a/packages/core/src/commands/updateMark.ts
+++ b/packages/core/src/commands/updateMark.ts
@ -0,0 +1,41 @@
+import { Editor } from '../Editor'
+import { MarkType } from 'prosemirror-model'
+import getMarkType from '../utils/getMarkType'
+import getMarkRange from '../utils/getMarkRange'
+
+type UpdateMark = (
+  type: string | MarkType,
+  attrs: {},
+) => any
+
+declare module '../Editor' {
+  interface Editor {
+    updateMark: UpdateMark,
+  }
+}
+
+export default (next: Function, editor: Editor): UpdateMark => (typeOrName, attrs) => {
+  const { view, state, schema } = editor
+  const { tr, selection, doc } = state
+  let { from, to, $from, empty } = selection
+  const type = getMarkType(typeOrName, schema)
+
+  if (empty) {
+    const range = getMarkRange($from, type)
+
+    if (range) {
+      from = range.from
+      to = range.to
+    }
+  }
+
+  const hasMark = doc.rangeHasMark(from, to, type)
+
+  if (hasMark) {
+    tr.removeMark(from, to, type)
+  }
+
+  tr.addMark(from, to, type.create(attrs))
+  view.dispatch(tr)
+  next()
+}
--- a/packages/core/src/utils/capitalize.ts
+++ b/packages/core/src/utils/capitalize.ts
@ -0,0 +1,3 @@
+export default function capitalize(value: string = ''): string {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
--- a/packages/core/src/utils/getMarkRange.ts
+++ b/packages/core/src/utils/getMarkRange.ts
@ -0,0 +1,40 @@
+import { MarkType, ResolvedPos } from 'prosemirror-model'
+
+interface Range {
+  from: number,
+  to: number,
+}
+
+export default function getMarkRange($pos: ResolvedPos, type: MarkType): Range | void {
+  if (!$pos || !type) {
+    return
+  }
+
+  const start = $pos.parent.childAfter($pos.parentOffset)
+
+  if (!start.node) {
+    return
+  }
+
+  const link = start.node.marks.find(mark => mark.type === type)
+  if (!link) {
+    return
+  }
+
+  let startIndex = $pos.index()
+  let startPos = $pos.start() + start.offset
+  let endIndex = startIndex + 1
+  let endPos = startPos + start.node.nodeSize
+
+  while (startIndex > 0 && link.isInSet($pos.parent.child(startIndex - 1).marks)) {
+    startIndex -= 1
+    startPos -= $pos.parent.child(startIndex).nodeSize
+  }
+
+  while (endIndex < $pos.parent.childCount && link.isInSet($pos.parent.child(endIndex).marks)) {
+    endPos += $pos.parent.child(endIndex).nodeSize
+    endIndex += 1
+  }
+
+  return { from: startPos, to: endPos }
+}
--- a/packages/core/src/utils/getMarkType.ts
+++ b/packages/core/src/utils/getMarkType.ts
@ -0,0 +1,9 @@
+import { MarkType, Schema } from 'prosemirror-model'
+
+export default function getMarkType(nameOrType: string | MarkType, schema: Schema): MarkType {
+  if (typeof nameOrType === 'string') {
+    return schema.marks[nameOrType]
+  }
+
+  return nameOrType
+}
--- a/packages/core/src/utils/getNodeType.ts
+++ b/packages/core/src/utils/getNodeType.ts
@ -0,0 +1,9 @@
+import { NodeType, Schema } from 'prosemirror-model'
+
+export default function getNodeType(nameOrType: string | NodeType, schema: Schema): NodeType {
+  if (typeof nameOrType === 'string') {
+    return schema.nodes[nameOrType]
+  }
+
+  return nameOrType
+}
--- a/packages/core/src/utils/nodeIsActive.ts
+++ b/packages/core/src/utils/nodeIsActive.ts
@ -11,5 +11,5 @@ export default function nodeIsActive(state: EditorState, type: NodeType, attrs =
    return !!node
  }

-  return node.node.hasMarkup(type, attrs)
+  return node.node.hasMarkup(type, { ...node.node.attrs, ...attrs })
 }
--- a/packages/extension-bold/index.ts
+++ b/packages/extension-bold/index.ts
@ -1,5 +1,4 @@
 import { Mark, CommandSpec, markInputRule, markPasteRule } from '@tiptap/core'
-import { toggleMark } from 'prosemirror-commands'
 import { MarkSpec } from 'prosemirror-model'
 import VerEx from 'verbal-expressions'

@ -34,8 +33,8 @@ export default class Bold extends Mark {

  commands(): CommandSpec {
    return {
-      bold: (next, { view }) => {
-        toggleMark(this.type)(view.state, view.dispatch)
+      bold: next => () => {
+        this.editor.toggleMark(this.name)
        next()
      },
    }
--- a/packages/extension-code/index.ts
+++ b/packages/extension-code/index.ts
@ -1,5 +1,4 @@
 import { Mark, markInputRule, markPasteRule, CommandSpec } from '@tiptap/core'
-import { toggleMark } from 'prosemirror-commands'
 import { MarkSpec } from 'prosemirror-model'
 import VerEx from 'verbal-expressions'

@ -25,8 +24,8 @@ export default class Code extends Mark {

  commands(): CommandSpec {
    return {
-      code: (next, { view }) => {
-        toggleMark(this.type)(view.state, view.dispatch)
+      code: next => () => {
+        this.editor.toggleMark(this.name)
        next()
      },
    }
--- a/packages/extension-heading/index.ts
+++ b/packages/extension-heading/index.ts
@ -0,0 +1,70 @@
+import { Node, CommandSpec } from '@tiptap/core'
+import { NodeSpec } from 'prosemirror-model'
+import VerEx from 'verbal-expressions'
+import { textblockTypeInputRule } from 'prosemirror-inputrules'
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+interface HeadingOptions {
+  levels?: Level[],
+}
+
+declare module '@tiptap/core/src/Editor' {
+  interface Editor {
+    heading(level: Level): Editor,
+  }
+}
+
+export default class Heading extends Node {
+
+  name = 'heading'
+
+  defaultOptions(): HeadingOptions {
+    return {
+      levels: [1, 2, 3, 4, 5, 6],
+    }
+  }
+
+  schema(): NodeSpec {
+    return {
+      attrs: {
+        level: {
+          default: 1,
+        },
+      },
+      content: 'inline*',
+      group: 'block',
+      defining: true,
+      draggable: false,
+      parseDOM: this.options.levels
+        .map((level: Level) => ({
+          tag: `h${level}`,
+          attrs: { level },
+        })),
+      toDOM: node => [`h${node.attrs.level}`, 0],
+    }
+  }
+
+  commands(): CommandSpec {
+    return {
+      heading: next => attrs => {
+        this.editor.toggleNode(this.name, 'paragraph', attrs)
+        next()
+      },
+    }
+  }
+
+  inputRules() {
+    return this.options.levels.map((level: Level) => {
+      const regex = VerEx()
+        .startOfLine()
+        .find('#')
+        .repeatPrevious(level)
+        .whitespace()
+        .endOfLine()
+
+      return textblockTypeInputRule(regex, this.type, { level })
+    })
+  }
+
+}
--- a/packages/extension-heading/package.json
+++ b/packages/extension-heading/package.json
@ -0,0 +1,17 @@
+{
+  "name": "@tiptap/extension-heading",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-heading.js",
+  "umd:main": "dist/tiptap-extension-heading.umd.js",
+  "module": "dist/tiptap-extension-heading.mjs", 
+  "unpkg": "dist/tiptap-extension-heading.js",
+  "jsdelivr": "dist/tiptap-extension-heading.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x"
+  }
+}
--- a/packages/extension-history/index.ts
+++ b/packages/extension-history/index.ts
@ -34,11 +34,11 @@ export default class History extends Extension {

  commands(): CommandSpec {
    return {
-      undo: (next, { view }) => {
+      undo: (next, { view }) => () => {
        undo(view.state, view.dispatch)
        next()
      },
-      redo: (next, { view }) => {
+      redo: (next, { view }) => () => {
        redo(view.state, view.dispatch)
        next()
      },
--- a/packages/extension-italic/index.ts
+++ b/packages/extension-italic/index.ts
@ -1,5 +1,4 @@
 import { Mark, markInputRule, markPasteRule, CommandSpec } from '@tiptap/core'
-import { toggleMark } from 'prosemirror-commands'
 import { MarkSpec } from 'prosemirror-model'
 import VerEx from 'verbal-expressions'

@ -26,8 +25,8 @@ export default class Italic extends Mark {

  commands(): CommandSpec {
    return {
-      italic: (next, { view }) => {
-        toggleMark(this.type)(view.state, view.dispatch)
+      italic: next => () => {
+        this.editor.toggleMark(this.name)
        next()
      },
    }
--- a/packages/extension-paragraph/index.ts
+++ b/packages/extension-paragraph/index.ts
@ -1,5 +1,6 @@
 import { Node } from '@tiptap/core'
 import { NodeSpec } from 'prosemirror-model'
+// import ParagraphComponent from './paragraph.vue'

 export default class Paragraph extends Node {

@ -9,9 +10,9 @@ export default class Paragraph extends Node {
    return {
      content: 'inline*',
      group: 'block',
-      draggable: false,
      parseDOM: [{ tag: 'p' }],
      toDOM: () => ['p', 0],
+      // toVue: ParagraphComponent,
    }
  }

--- a/packages/extension-paragraph/paragraph.vue
+++ b/packages/extension-paragraph/paragraph.vue
@ -0,0 +1,9 @@
+<template>
+  <p data-component="yeah" ref="content"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
--- a/packages/starter-kit/index.ts
+++ b/packages/starter-kit/index.ts
@ -6,6 +6,7 @@ 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'

 export default function extensions() {
  return [
@ -17,5 +18,6 @@ export default function extensions() {
    new Italic(),
    new Code(),
    new CodeBlock(),
+    new Heading(),
  ]
 }
--- a/packages/vue/index.ts
+++ b/packages/vue/index.ts
@ -1 +1,2 @@
-export { default as EditorContent } from './src/components/EditorContent'
+export { default as EditorContent } from './src/components/EditorContent'
+export { default as Renderer } from './src/Renderer'
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@ -12,6 +12,7 @@
    "dist"
  ],
  "peerDependencies": {
+    "@tiptap/core": "2.x",
    "vue": "2.x"
  }
 }
--- a/packages/vue/src/Renderer.ts
+++ b/packages/vue/src/Renderer.ts
@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { ComponentRenderer } from '@tiptap/core'
+
+export default class Renderer extends ComponentRenderer {
+
+  static type: string = 'vue'
+
+  vm!: Vue
+  
+  constructor(component: Vue, options: any) {
+    super()
+    this.mount(component)
+  }
+
+  mount(component: Vue) {
+    const Component = Vue.extend(component)
+
+    this.vm = new Component({
+      // parent: this.parent,
+      // propsData: props,
+    }).$mount()
+  }
+
+  get dom() {
+    return this.vm.$el
+  }
+
+  get contentDOM() {
+    return this.vm.$refs.content
+  }
+
+}
+
--- a/shims/vue.d.ts
+++ b/shims/vue.d.ts
@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -25,6 +25,9 @@
      "scripthost"
    ]
  },
+  "files": [
+    "./shims/vue.d.ts"
+  ],
  "include": [
    "docs/src/**/*.ts",
    "docs/src/**/*.tsx",
--- a/yarn.lock
+++ b/yarn.lock
@ -1858,9 +1858,9 @@
    glob-to-regexp "^0.3.0"

 "@mvasilkov/outdent@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@mvasilkov/outdent/-/outdent-1.0.4.tgz#156c7a598e08b6645272b01752fc1cff02c0f1b3"
-  integrity sha512-JK4e71HtX+VG9abeTmo1ARU12G9h65CjrxFFDHfr5vgJqB31Vv6czFa9ymcZ7MMmU1h98Gkrz1IOrZNhm49g4w==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@mvasilkov/outdent/-/outdent-1.0.5.tgz#081e9fec4d3acae330d75ac4546cf4289f956cd4"
+  integrity sha512-jd7927l+hvKR6KZ/fc5MKh0qT1YtLU40HCDzRuWcESYGkRAcR/fr5D5It7gKM5vLlgjlAiJilfLLmd84XAfI9Q==

 "@nodelib/fs.scandir@2.1.3":
  version "2.1.3"
@ -1984,9 +1984,9 @@
    universal-user-agent "^4.0.0"

 "@octokit/types@^2.0.0", "@octokit/types@^2.0.1", "@octokit/types@^2.11.1":
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.11.1.tgz#bd5b059596b42845be3f8e66065667aff8c8bf8b"
-  integrity sha512-QaLoLkmFdfoNbk3eOzPv7vKrUY0nRJIYmZDoz/pTer4ICpqu80aSQTVHnnUxEFuURCiidig76CcxUOYC/bY3RQ==
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.12.1.tgz#4a26b4a85ec121043d3b0745b5798f9d8fd968ca"
+  integrity sha512-LRLR1tjbcCfAmUElvTmMvLEzstpx6Xt/aQVTg2xvd+kHA2Ekp1eWl5t+gU7bcwjXHYEAzh4hH4WH+kS3vh+wRw==
  dependencies:
    "@types/node" ">= 8"

@ -2104,9 +2104,9 @@
  integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==

 "@types/node@*", "@types/node@>= 8":
-  version "13.13.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.0.tgz#30d2d09f623fe32cde9cb582c7a6eda2788ce4a8"
-  integrity sha512-WE4IOAC6r/yBZss1oQGM5zs2D7RuKR6Q+w+X2SouPofnWn+LbCqClRyhO3ZE7Ix8nmFgo/oVuuE01cJT2XB13A==
+  version "13.13.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.4.tgz#1581d6c16e3d4803eb079c87d4ac893ee7501c2c"
+  integrity sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==

 "@types/orderedmap@*":
  version "1.0.0"
@ -2578,7 +2578,7 @@ acorn-jsx@^5.0.1:
  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==

-acorn@^6.1.1, acorn@^6.2.1:
+acorn@^6.1.1, acorn@^6.4.1:
  version "6.4.1"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
@ -2964,9 +2964,9 @@ babel-loader@8.0.5:
    util.promisify "^1.0.0"

 babel-plugin-dynamic-import-node@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
-  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
  dependencies:
    object.assign "^4.1.0"

@ -3285,12 +3285,12 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
    electron-to-chromium "^1.2.7"

 browserslist@^4.0.0, browserslist@^4.11.1, browserslist@^4.8.5, browserslist@^4.9.1:
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.11.1.tgz#92f855ee88d6e050e7e7311d987992014f1a1f1b"
-  integrity sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
+  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
  dependencies:
-    caniuse-lite "^1.0.30001038"
-    electron-to-chromium "^1.3.390"
+    caniuse-lite "^1.0.30001043"
+    electron-to-chromium "^1.3.413"
    node-releases "^1.1.53"
    pkg-up "^2.0.0"

@ -3569,14 +3569,14 @@ caniuse-api@^3.0.0:
    lodash.uniq "^4.5.0"

 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30001043"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001043.tgz#2b9c7e8c63551d64616ca562e6877c989e5ad6a5"
-  integrity sha512-Dipx6NfbkUVEil8AUo/vt8oa9AF2JnR3mNpKV5YaB0a/v4nvDO8pzCuVdPJqr15FmSY6dBobciTDNLzbdVpVTA==
+  version "1.0.30001048"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001048.tgz#4f431c688cb6bc0435994dcbb8e565d004869d43"
+  integrity sha512-HqYsBIZlVARU5GDXPziXSFwFVpGx9KqCznr62iaey7bT2sqpx7/jI4B3PvbKguKi8kGeEannJ7WEPB5H71rjFQ==

-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001038, caniuse-lite@^1.0.30001039:
-  version "1.0.30001043"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz#1b561de27aefbe6ff99e41866b8d7d87840c513b"
-  integrity sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
+  version "1.0.30001048"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz#4bb4f1bc2eb304e5e1154da80b93dee3f1cf447e"
+  integrity sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==

 case-sensitive-paths-webpack-plugin@^2.2.0:
  version "2.3.0"
@ -3845,10 +3845,10 @@ collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==

-collect.js@^4.23.0:
-  version "4.23.0"
-  resolved "https://registry.yarnpkg.com/collect.js/-/collect.js-4.23.0.tgz#0e55d0721329c969afae182ab7b97bfa0775fa99"
-  integrity sha512-EjdXlyRdvISTEXBWzpNEtygkfJGyUVkOuNYblBvcgjdbWnAs7xb4f5rE22HKHHBFKLkgeRwhvNPBbyldTut1VQ==
+collect.js@^4.23.0, collect.js@^4.25.0:
+  version "4.25.0"
+  resolved "https://registry.yarnpkg.com/collect.js/-/collect.js-4.25.0.tgz#3cc9580935997263ab283488d760f9956c420e8b"
+  integrity sha512-Wk+cWM9iQouzCe2RulakcE6BKweADOHYcz3pVcO2e6jRPfTuZWiLmAjJ2+lI3K9ldFyp77GZVheKjaGnoTAofw==

 collection-visit@^1.0.0:
  version "1.0.0"
@ -4617,9 +4617,9 @@ cyclist@^1.0.1:
  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=

 cypress@^4.3.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.4.0.tgz#566ac224e11601634c31e5648e5c15199dde7954"
-  integrity sha512-ZpsV3pVemANGi4Cxu0UIqFv23uHdDJZYlKY+8P/eixujCpI1TQ5RSPBp2grfV3ZvlGYrOXPJY44j9iEh1xoQug==
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.4.1.tgz#f5aa1aa5f328f1299bff328103f7cbad89e80f29"
+  integrity sha512-LcskZ/PXRG9XTlEeeenKqz/KddT1x+7O7dqXsdKWPII01LxLNmNHIvHnlUqApchVbinJ5vir6J255CkELSeL0A==
  dependencies:
    "@cypress/listr-verbose-renderer" "0.4.1"
    "@cypress/request" "2.88.5"
@ -4718,7 +4718,7 @@ debug@4.1.1, debug@^4.1.0:
  dependencies:
    ms "^2.1.1"

-debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
  version "3.2.6"
  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@ -4936,7 +4936,7 @@ detect-indent@^6.0.0:
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==

-detect-libc@^1.0.2, detect-libc@^1.0.3:
+detect-libc@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@ -5156,10 +5156,10 @@ ee-first@1.1.1:
  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=

-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.390:
-  version "1.3.413"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.413.tgz#9c457a4165c7b42e59d66dff841063eb9bfe5614"
-  integrity sha512-Jm1Rrd3siqYHO3jftZwDljL2LYQafj3Kki5r+udqE58d0i91SkjItVJ5RwlJn9yko8i7MOcoidVKjQlgSdd1hg==
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.413:
+  version "1.3.418"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.418.tgz#840021191f466b803a873e154113620c9f53cec6"
+  integrity sha512-i2QrQtHes5fK/F9QGG5XacM5WKEuR322fxTYF9e8O9Gu0mc0WmjjwGpV8c7Htso6Zf2Di18lc3SIPxmMeRFBug==

 elegant-spinner@^1.0.1:
  version "1.0.1"
@ -5248,9 +5248,9 @@ env-paths@^2.2.0:
  integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==

 envinfo@^7.3.1:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.5.0.tgz#91410bb6db262fb4f1409bd506e9ff57e91023f4"
-  integrity sha512-jDgnJaF/Btomk+m3PZDTTCb5XIIIX3zYItnCRfF73zVgvinLoRomuhi75Y4su0PtQxWz4v66XnLLckyvyJTOIQ==
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.5.1.tgz#93c26897225a00457c75e734d354ea9106a72236"
+  integrity sha512-hQBkDf2iO4Nv0CNHpCuSBeaSrveU6nThVxFGTrq/eDlV716UQk09zChaJae4mZRsos1x4YLY2TaH3LHUae3ZmQ==

 err-code@^1.0.0:
  version "1.1.2"
@ -6482,9 +6482,9 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.
  integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=

 graphql-compose@^7.3.0:
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/graphql-compose/-/graphql-compose-7.14.2.tgz#9037dc16e4d5cf6ab8410e9f86a24048283087be"
-  integrity sha512-Et3fn2oMrSdx4VE6vk0u66CRXVujdtjUyN4pN6Nak2jit86r9CGHPjmzYUtPZwnj1QcG1rPQcnsShosbOM6Iqg==
+  version "7.14.4"
+  resolved "https://registry.yarnpkg.com/graphql-compose/-/graphql-compose-7.14.4.tgz#9b10f09b187262844040101045e2928ffa0a03ad"
+  integrity sha512-NMkfRiqKd5ooks74Kk04sj+r6nEF94FZNl8MIpKMMuIU/A9Dq/+dqSE+FWgPZB0wEJTlLHn3/8V1vrj4aWNb3g==
  dependencies:
    graphql-type-json "^0.3.1"
    object-path "^0.11.4"
@ -7062,7 +7062,7 @@ humanize-ms@^1.2.1:
  dependencies:
    ms "^2.0.0"

-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@ -7681,9 +7681,9 @@ is-primitive@^2.0.0:
  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=

 is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==

 is-regex@^1.0.5:
  version "1.0.5"
@ -8462,9 +8462,9 @@ make-dir@^2.0.0, make-dir@^2.1.0:
    semver "^5.6.0"

 make-dir@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.2.tgz#04a1acbf22221e1d6ef43559f43e05a90dbb4392"
-  integrity sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
  dependencies:
    semver "^6.0.0"

@ -8813,17 +8813,17 @@ miller-rabin@^4.0.0:
    bn.js "^4.0.0"
    brorand "^1.0.1"

-mime-db@1.43.0, mime-db@^1.28.0:
-  version "1.43.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
-  integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
+mime-db@1.44.0, mime-db@^1.28.0:
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==

 mime-types@^2.1.12, mime-types@^2.1.21, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.26"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
-  integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
  dependencies:
-    mime-db "1.43.0"
+    mime-db "1.44.0"

 mime@1.6.0:
  version "1.6.0"
@ -9068,9 +9068,9 @@ mz@^2.5.0:
    thenify-all "^1.0.0"

 nan@^2.12.1, nan@^2.13.2, nan@^2.14.0:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
-  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
+  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==

 nanomatch@^1.2.9:
  version "1.2.13"
@ -9094,15 +9094,6 @@ napi-build-utils@^1.0.1:
  resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
  integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==

-needle@^2.2.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
-  integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@ -9139,9 +9130,9 @@ no-case@^3.0.3:
    tslib "^1.10.0"

 node-abi@^2.7.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.15.0.tgz#51d55cc711bd9e4a24a572ace13b9231945ccb10"
-  integrity sha512-FeLpTS0F39U7hHZU1srAK4Vx+5AHNVOTP+hxBNQknR/54laTHSFIJkDWDqiquY1LeLUgTfPN7sLPhMubx0PLAg==
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.16.0.tgz#7df94e9c0a7a189f4197ab84bac8089ef5894992"
+  integrity sha512-+sa0XNlWDA6T+bDLmkCUYn6W5k5W6BPRL6mqzSCs6H/xUgtl4D5x2fORKDzopKiU6wsyn/+wXlRXwXeSp+mtoA==
  dependencies:
    semver "^5.4.1"

@ -9223,31 +9214,15 @@ node-libs-browser@^2.2.1:
    util "^0.11.0"
    vm-browserify "^1.0.1"

-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.53:
  version "1.1.53"
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==

 node-sass@^4.13.1:
-  version "4.13.1"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.1.tgz#9db5689696bb2eec2c32b98bfea4c7a2e992d0a3"
-  integrity sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.0.tgz#a8e9d7720f8e15b4a1072719dcf04006f5648eeb"
+  integrity sha512-AxqU+DFpk0lEz95sI6jO0hU0Rwyw7BXVEv6o9OItoXLyeygPeaSpiV4rwQb10JiTghHaa0gZeD21sz+OsQluaw==
  dependencies:
    async-foreach "^0.1.3"
    chalk "^1.1.1"
@ -9387,7 +9362,7 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
    semver "^5.6.0"
    validate-npm-package-name "^3.0.0"

-npm-packlist@^1.1.6, npm-packlist@^1.4.4:
+npm-packlist@^1.4.4:
  version "1.4.8"
  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
@ -9419,7 +9394,7 @@ npm-run-path@^4.0.0:
  dependencies:
    path-key "^3.0.0"

-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.1.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@ -11021,9 +10996,9 @@ prosemirror-utils@^0.9.6:
  integrity sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==

 prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.14.6:
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.14.6.tgz#fa1e7ed14a38f2cb234f622037a07dbd9d2830de"
-  integrity sha512-0qNSFWVBHPrdQaZtIO3aou/NRsxMGER3IuI3cePHYbk5pf9wSsbMIWWaeHtXqblL+rqtgkLfcw0D2na6+WBgpA==
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.14.7.tgz#5480f2ec7f091e616989894983b62c5e2d16edc1"
+  integrity sha512-ZCRbGAmJa0ORIY4xrDvOpxS/oAnph3egDauvQEI7SX4eex0zovUfC61I5X4AtPCaNN4JpLWEk60voCWi0cE2vA==
  dependencies:
    prosemirror-model "^1.1.0"
    prosemirror-state "^1.0.0"
@ -11727,9 +11702,9 @@ resolve@1.8.1:
    path-parse "^1.0.5"

 resolve@^1.10.0, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.16.1.tgz#49fac5d8bacf1fd53f200fa51247ae736175832c"
-  integrity sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
  dependencies:
    path-parse "^1.0.6"

@ -11781,7 +11756,7 @@ rgba-regex@^1.0.0:
  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=

-rimraf@2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
+rimraf@2, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@ -12055,7 +12030,7 @@ sass-loader@^8.0.2:
    schema-utils "^2.6.1"
    semver "^6.3.0"

-sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:
+sax@~1.2.1, sax@~1.2.4:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@ -12420,9 +12395,9 @@ sort-object-keys@^1.1.3:
  integrity sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==

 sort-package-json@^1.15.0:
-  version "1.42.0"
-  resolved "https://registry.yarnpkg.com/sort-package-json/-/sort-package-json-1.42.0.tgz#6ccd043eb68ddda8c2f0e2dfc662b96543e85f4d"
-  integrity sha512-VPP4qRIJGBjqZ6snRRxcaAeV50/D9/bziiqwRajQmQqC1pee/+DzQ1yhB50SFkOkZYSC3KFcpjrSr8Jhvl/dcg==
+  version "1.42.1"
+  resolved "https://registry.yarnpkg.com/sort-package-json/-/sort-package-json-1.42.1.tgz#4085582dfe83c60951673de2d5e4ce09dd47bd4e"
+  integrity sha512-+JgZVjEQhJuJ57RCUcF3rzESYCW/n3vCLWdhqBdPkerEgRTj5teGdJrCcj772zT1VzewqWk616/4xuRyIffyqQ==
  dependencies:
    detect-indent "^6.0.0"
    detect-newline "3.1.0"
@ -12448,9 +12423,9 @@ source-map-resolve@^0.5.0:
    urix "^0.1.0"

 source-map-support@~0.5.10, source-map-support@~0.5.12:
-  version "0.5.17"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.17.tgz#29fe1b3c98b9dbd5064ada89052ee8ff070cb46c"
-  integrity sha512-bwdKOBZ5L0gFRh4KOxNap/J/MpvX9Yxsq9lFDx65s3o7F/NiHy7JRaGIS8MwW6tZPAq9UXE207Il0cfcb5yu/Q==
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
  dependencies:
    buffer-from "^1.0.0"
    source-map "^0.6.0"
@ -12501,9 +12476,9 @@ spdx-correct@^3.0.0:
    spdx-license-ids "^3.0.0"

 spdx-exceptions@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
-  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==

 spdx-expression-parse@^3.0.0:
  version "3.0.0"
@ -13052,7 +13027,7 @@ tar@^2.0.0:
    fstream "^1.0.12"
    inherits "2"

-tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
  version "4.4.13"
  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
@ -13132,9 +13107,9 @@ terser@^3.8.2:
    source-map-support "~0.5.10"

 terser@^4.1.2, terser@^4.6.3:
-  version "4.6.11"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.11.tgz#12ff99fdd62a26de2a82f508515407eb6ccd8a9f"
-  integrity sha512-76Ynm7OXUG5xhOpblhytE7X58oeNSmC8xnNhjWVo8CksHit0U0kO4hfNbPrrYwowLWFgM2n9L176VNx2QaHmtA==
+  version "4.6.12"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.12.tgz#44b98aef8703fdb09a3491bf79b43faffc5b4fee"
+  integrity sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww==
  dependencies:
    commander "^2.20.0"
    source-map "~0.6.1"
@ -13453,9 +13428,9 @@ umask@^1.1.0:
  integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=

 unbzip2-stream@^1.0.9:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.1.tgz#151b104af853df3efdaa135d8b1eca850a44b426"
-  integrity sha512-sgDYfSDPMsA4Hr2/w7vOlrJBlwzmyakk1+hW8ObLvxSp0LA36LcL2XItGvOT3OSblohSdevMuT8FQjLsqyy4sA==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.2.tgz#84eb9e783b186d8fb397515fbb656f312f1a7dbf"
+  integrity sha512-pZMVAofMrrHX6Ik39hCk470kulCbmZ2SWfQLPmTWqfJV/oUm0gn1CblvHdUu4+54Je6Jq34x8kY6XjTy6dMkOg==
  dependencies:
    buffer "^5.2.1"
    through "^2.3.8"
@ -14013,7 +13988,7 @@ wait-on@4.0.0:
    request-promise-native "^1.0.8"
    rxjs "^6.5.4"

-watchpack@^1.6.0:
+watchpack@^1.6.1:
  version "1.6.1"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
  integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
@ -14087,15 +14062,15 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
    source-map "~0.6.1"

 webpack@^4.29.3:
-  version "4.42.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.1.tgz#ae707baf091f5ca3ef9c38b884287cfe8f1983ef"
-  integrity sha512-SGfYMigqEfdGchGhFFJ9KyRpQKnipvEvjc1TwrXEPCM6H5Wywu10ka8o3KGrMzSMxMQKt8aCHUFh5DaQ9UmyRg==
+  version "4.43.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
+  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
  dependencies:
    "@webassemblyjs/ast" "1.9.0"
    "@webassemblyjs/helper-module-context" "1.9.0"
    "@webassemblyjs/wasm-edit" "1.9.0"
    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.2.1"
+    acorn "^6.4.1"
    ajv "^6.10.2"
    ajv-keywords "^3.4.1"
    chrome-trace-event "^1.0.2"
@ -14112,7 +14087,7 @@ webpack@^4.29.3:
    schema-utils "^1.0.0"
    tapable "^1.1.3"
    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.0"
+    watchpack "^1.6.1"
    webpack-sources "^1.4.1"

 websocket-driver@0.6.5: