add basic image support

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(),