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

README.md

@@ -12,13 +12,13 @@ A rich-text editor for Vue.js
 npm install tiptap
 ```
 
-## Setup
+## Basic Setup
 ```vue
 <template>
   <editor>
     <!-- Add HTML to the scoped slot called "content" -->
     <div slot="content" slot-scope="props">
-      <p>Hello world</p>
+      <p>Hi, I'm just a boring paragraph</p>
     </div>
   </editor>
 </template>
@@ -46,6 +46,68 @@ export default {
 
 ## Extensions
 
+By default the editor will only support some boring paragraphs. Other nodes and marks are available as **extensions**. There is a package called `tiptap-extensions` with the most basic nodes, marks and plugins.
+
+#### Available Extensions 
+
+```vue
+<template>
+  <editor :extensions="extensions">
+    <div slot="content" slot-scope="props">
+      <h1>Yay Headlines!</h1>
+      <p>All these <strong>cool tags</strong> are working now.</p>
+    </div>
+  </editor>
+</template>
+
+<script>
+// Import the editor
+import { Editor } from 'tiptap'
+import {
+  Blockquote,
+  BulletList,
+  CodeBlock,
+  HardBreak,
+  Heading,
+  ListItem,
+  OrderedList,
+  TodoItem,
+  TodoList,
+  Bold,
+  Code,
+  Italic,
+  Link,
+} from 'tiptap-extensions'
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      extensions: [
+        new Blockquote(),
+        new BulletList(),
+        new CodeBlock(),
+        new HardBreak(),
+        new Heading(),
+        new ListItem(),
+        new OrderedList(),
+        new TodoItem(),
+        new TodoList(),
+        new Bold(),
+        new Code(),
+        new Italic(),
+        new Link(),
+      ],
+    }
+  },
+}
+</script>
+```
+
+#### Create Custom Extensions 
+
 Soon …
 Until then you can take a look at the [embed example](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds).