From 9cb07c0b1dbe3620cecedb1a1e8a75a88f92da4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?= <kontakt@philipp-kuehn.com>
Date: Fri, 24 Aug 2018 16:52:42 +0200
Subject: [PATCH] add node example to readme

---
 README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/README.md b/README.md
index 024f43c01..a82c8a4aa 100644
--- a/README.md
+++ b/README.md
@@ -141,6 +141,67 @@ The most powerful feature of tiptap is that you can create you own extensions. T
 | `inputRules({ type, schema })` | `Array` | `[]` | Define a list of input rules. |
 | `get plugins()` | `Array` | `[]` | Define a list of [Prosemirror plugins](https://prosemirror.net/docs/guide/). |
 
+#### Create a Node
+
+Let's take a look at a real example. This is basically how the default `blockquote` node from [`tiptap-extensions`](https://www.npmjs.com/package/tiptap-extensions) looks like.
+
+```js
+import { Node } from 'tiptap'
+import { wrappingInputRule, setBlockType, wrapIn } from 'tiptap-commands'
+
+export default class BlockquoteNode extends Node {
+  
+  // choose a unique name
+  get name() {
+    return 'blockquote'
+  }
+  
+  // the prosemirror schema object
+  get schema() {
+    return {
+      content: 'block+',
+      group: 'block',
+      defining: true,
+      draggable: false,
+      // this rule is for parsing pasted HTML
+      // so every blockquote tag will be converted to this blockquote node
+      parseDOM: [
+        { tag: 'blockquote' },
+      ],
+      // this is how this node will be rendered
+      // in this case a blockquote tag with a class called 'awesome-blockquote' will be rendered
+      // the '0' stands for its content inside
+      toDOM: () => ['blockquote', { class: 'awesome-blockquote' }, 0],
+    }
+  }
+  
+  // this command will be called from menus to add a blockquote
+  // 'type' is the prosemirror schema object for this blockquote
+  // 'schema' is a collection of all registered nodes and marks
+  command({ type, schema }) {
+    return wrapIn(type)
+  }
+  
+  // here you can register some shortcuts
+  // in this case you can create a blockquote with 'ctrl' + '>'
+  keys({ type }) {
+    return {
+      'Ctrl->': wrapIn(type),
+    }
+  }
+  
+  // a blockquote will be created when you are on a new line and type '>' followed by a space
+  inputRules({ type }) {
+    return [
+      wrappingInputRule(/^\s*>\s$/, type),
+    ]
+  }
+
+}
+```
+
+#### Create a Node as a Vue Component
+
 For a live example you can take a look at the [embed example](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds).
 
 ## Contributing