add basic image support

examples/Components/App/style.scss

@@ -72,6 +72,12 @@
         margin: 0;
       }
     }
+
+    img {
+      max-width: 100%;
+      border-radius: 3px;
+    }
+
   }
 }
 

examples/Components/Routes/Images/index.vue

@@ -0,0 +1,67 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions">
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h2>
+					Images
+				</h2>
+				<p>
+					Nice
+				</p>
+				<img src="https://tiptap.scrumpy.io/assets/images/open-graph.png" />
+			</div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import {
+	BlockquoteNode,
+	BulletListNode,
+	CodeBlockNode,
+	HardBreakNode,
+	HeadingNode,
+	ImageNode,
+	ListItemNode,
+	OrderedListNode,
+	TodoItemNode,
+	TodoListNode,
+	BoldMark,
+	CodeMark,
+	ItalicMark,
+	LinkMark,
+	HistoryExtension,
+} from 'tiptap-extensions'
+
+export default {
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			extensions: [
+				new BlockquoteNode(),
+				new BulletListNode(),
+				new CodeBlockNode(),
+				new HardBreakNode(),
+				new HeadingNode({ maxLevel: 3 }),
+				new ImageNode(),
+				new ListItemNode(),
+				new OrderedListNode(),
+				new TodoItemNode(),
+				new TodoListNode(),
+				new BoldMark(),
+				new CodeMark(),
+				new ItalicMark(),
+				new LinkMark(),
+				new HistoryExtension(),
+			],
+		}
+	},
+}
+</script>

examples/Components/Routes/TodoList/index.vue

@@ -48,13 +48,13 @@
 					There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
 				</p>
 				<ul data-type="todo_list">
-					<li data-type="todo_item" data-done="true">
+					<li data-type="todo_item" data-done="true" :custom-prop="customProp">
 						Buy beer
 					</li>
-					<li data-type="todo_item" data-done="true">
+					<li data-type="todo_item" data-done="true" :custom-prop="customProp">
 						Buy meat
 					</li>
-					<li data-type="todo_item" data-done="true">
+					<li data-type="todo_item" data-done="true" :custom-prop="customProp">
 						Buy milk
 					</li>
 					<li data-type="todo_item" data-done="false">
@@ -94,6 +94,7 @@ export default {
 	},
 	data() {
 		return {
+			customProp: 2,
 			extensions: [
 				new BlockquoteNode(),
 				new BulletListNode(),

examples/Components/Subnavigation/index.vue

@@ -9,6 +9,9 @@
 		<router-link class="subnavigation__link" to="/links">
 			Links
 		</router-link>
+		<router-link class="subnavigation__link" to="/images">
+			Images
+		</router-link>
 		<router-link class="subnavigation__link" to="/hiding-menu-bar">
 			Hiding Menu Bar
 		</router-link>

examples/main.js

@@ -6,6 +6,7 @@ import App from 'Components/App'
 import RouteBasic from 'Components/Routes/Basic'
 import RouteMenuBubble from 'Components/Routes/MenuBubble'
 import RouteLinks from 'Components/Routes/Links'
+import RouteImages from 'Components/Routes/Images'
 import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
 import RouteTodoList from 'Components/Routes/TodoList'
 import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
@@ -42,6 +43,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Links',
     },
   },
+  {
+    path: '/images',
+    component: RouteImages,
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Images',
+    },
+  },
   {
     path: '/hiding-menu-bar',
     component: RouteHidingMenuBar,