Merge branch 'master' of https://github.com/heyscrumpy/tiptap

README.md

@@ -2,7 +2,7 @@
 A renderless and extendable rich-text editor for [Vue.js](https://github.com/vuejs/vue)
 
 | **Package** | **Version** | **Downloads** | **Description** |
-| - | - | - | - |
+| --- | --- | --- | --- |
 | [`tiptap`](https://github.com/heyscrumpy/tiptap/tree/master/packages/tiptap) | [![](https://img.shields.io/npm/v/tiptap.svg?maxAge=2592000&label=version&colorB=000000)](https://www.npmjs.com/package/tiptap) | [![](https://img.shields.io/npm/dm/tiptap.svg?colorB=000000)](https://npmcharts.com/compare/tiptap?minimal=true) | The core package including the vue component. |
 | [`tiptap-extensions`](https://github.com/heyscrumpy/tiptap/tree/master/packages/tiptap-extensions) | [![](https://img.shields.io/npm/v/tiptap-extensions.svg?maxAge=2592000&label=version&colorB=000000)](https://www.npmjs.com/package/tiptap-extensions) | [![](https://img.shields.io/npm/dm/tiptap-extensions.svg?colorB=000000)](https://npmcharts.com/compare/tiptap-extensions?minimal=true) | A collection of some basic extensions for tiptap. |
 | [`tiptap-commands`](https://github.com/heyscrumpy/tiptap/tree/master/packages/tiptap-commands) | [![](https://img.shields.io/npm/v/tiptap-commands.svg?maxAge=2592000&label=version&colorB=000000)](https://www.npmjs.com/package/tiptap-commands) | [![](https://img.shields.io/npm/dm/tiptap-commands.svg?colorB=000000)](https://npmcharts.com/compare/tiptap-commands?minimal=true) | A collection of commands. These are mostly used for extensions. |
@@ -42,7 +42,7 @@ export default {
 ## Editor Properties
 
 | **Property** | **Type** | **Default** | **Description** |
-| - | :-: | :-: | - | 
+| --- | :---: | :---: | --- | 
 | `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
 | `doc` | `Object` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
 | `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
@@ -114,7 +114,7 @@ export default {
 The most powerful feature of tiptap is that you can create you own extensions. There are 3 basic types of extensions.
 
 | **Type** | **Description** |
-| - | - | 
+| --- | --- | 
 | `Extension` | The most basic type. It's useful to register some [Prosemirror plugins](https://prosemirror.net/docs/guide/) or some input rules. |
 | `Node` | Add a custom node. Nodes are basically block elements like a headline or a paragraph. |
 | `Mark` | Add a custom mark. Marks are used to add extra styling or other information to inline content like a strong tag or links. |
@@ -122,7 +122,7 @@ The most powerful feature of tiptap is that you can create you own extensions. T
 ### Extension Class
 
 | **Method** | **Type** | **Default** | **Description** |
-| - | :-: | :-: | - | 
+| --- | :---: | :---: | --- | 
 | `get name()` | `String` | `null` | Define a name for your extension. |
 | `get defaultOptions()` | `Object` | `{}` | Define some default options. The options are available as `this.$options`. |
 | `get plugins()` | `Array` | `[]` | Define a list of [Prosemirror plugins](https://prosemirror.net/docs/guide/). |
@@ -131,7 +131,7 @@ The most powerful feature of tiptap is that you can create you own extensions. T
 ### Node|Mark Class
 
 | **Method** | **Type** | **Default** | **Description** |
-| - | :-: | :-: | - | 
+| --- | :---: | :---: | --- | 
 | `get name()` | `String` | `null` | Define a name for your node or mark. |
 | `get defaultOptions()` | `Object` | `{}` | Define some default options. The options are available as `this.$options`. |
 | `get schema()` | `Object` | `null` | Define a [schema](https://prosemirror.net/docs/guide/#schema). |
@@ -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