add heading command

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>

packages/core/src/Editor.ts

@@ -71,6 +71,7 @@ export class Editor extends EventEmitter {
     this.registerCommand('setContent', require('./commands/setContent').default)
     this.registerCommand('clearContent', require('./commands/clearContent').default)
     this.registerCommand('removeMarks', require('./commands/removeMarks').default)
+    this.registerCommand('toggleBlockType', require('./commands/toggleBlockType').default)
     
     if (this.options.injectCSS) {
       require('./style.css')

packages/core/src/commands/toggleBlockType.ts

@@ -0,0 +1,30 @@
+import { NodeType } from 'prosemirror-model'
+import { setBlockType } from 'prosemirror-commands'
+import { Editor } from '../Editor'
+import nodeIsActive from '../utils/nodeIsActive'
+
+declare module '../Editor' {
+  interface Editor {
+    toggleBlockType(type: NodeType, toggleType: NodeType, attrs?: {}): Editor,
+  }
+}
+
+export default function toggleBlockType(
+  next: Function,
+  editor: Editor,
+  type: NodeType,
+  toggleType: NodeType,
+  attrs?: {},
+): void {
+  const { view, state } = editor
+  const isActive = nodeIsActive(state, type, attrs)
+
+  if (isActive) {
+    setBlockType(toggleType)(view.state, view.dispatch)
+    next()
+    return
+  }
+
+  setBlockType(type, attrs)(view.state, view.dispatch)
+  next()
+}

packages/extension-heading/index.ts

@@ -43,13 +43,13 @@ export default class Heading extends Node {
     }
   }
 
-  // commands(): CommandSpec {
-  //   return {
-  //     heading: (next, { view }) => {
-  //       toggleBlockType(this.type)(view.state, view.dispatch)
-  //       next()
-  //     },
-  //   }
-  // }
+  commands(): CommandSpec {
+    return {
+      heading: (next, editor, attrs) => {
+        editor.toggleBlockType(this.type, editor.schema.nodes.paragraph, attrs)
+        next()
+      },
+    }
+  }
 
 }