add basic heading extension

docs/src/demos/HandleExtensions/index.vue

@@ -32,6 +32,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 +47,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 +57,7 @@ export default {
         new Bold(),
         new Italic(),
         new Code(),
+        new Heading(),
       ],
     })
   },

packages/extension-heading/index.ts

@@ -0,0 +1,55 @@
+import { Node, CommandSpec } from '@tiptap/core'
+import { NodeSpec } from 'prosemirror-model'
+
+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, { view }) => {
+  //       toggleBlockType(this.type)(view.state, view.dispatch)
+  //       next()
+  //     },
+  //   }
+  // }
+
+}

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"
+  }
+}

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(),
   ]
 }