From a057755e429aa5ea800fff5b612c6fc57ba7f5d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 21 Apr 2020 22:16:26 +0200
Subject: [PATCH] add basic heading extension

---
 docs/src/demos/HandleExtensions/index.vue |  4 +-
 packages/extension-heading/index.ts       | 55 +++++++++++++++++++++++
 packages/extension-heading/package.json   | 17 +++++++
 packages/starter-kit/index.ts             |  2 +
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 packages/extension-heading/index.ts
 create mode 100644 packages/extension-heading/package.json

diff --git a/docs/src/demos/HandleExtensions/index.vue b/docs/src/demos/HandleExtensions/index.vue
index 6698f7a1..f233722d 100644
--- a/docs/src/demos/HandleExtensions/index.vue
+++ b/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(),
       ],
     })
   },
diff --git a/packages/extension-heading/index.ts b/packages/extension-heading/index.ts
new file mode 100644
index 00000000..ca5a663f
--- /dev/null
+++ b/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()
+  //     },
+  //   }
+  // }
+
+}
\ No newline at end of file
diff --git a/packages/extension-heading/package.json b/packages/extension-heading/package.json
new file mode 100644
index 00000000..3c6f6f19
--- /dev/null
+++ 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"
+  }
+}
diff --git a/packages/starter-kit/index.ts b/packages/starter-kit/index.ts
index fdbff7b3..0f695426 100644
--- 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(),
   ]
 }
\ No newline at end of file