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,

packages/tiptap-extensions/src/index.js

@@ -3,6 +3,7 @@ export { default as BulletListNode } from './nodes/BulletList'
 export { default as CodeBlockNode } from './nodes/CodeBlock'
 export { default as HardBreakNode } from './nodes/HardBreak'
 export { default as HeadingNode } from './nodes/Heading'
+export { default as ImageNode } from './nodes/Image'
 export { default as ListItemNode } from './nodes/ListItem'
 export { default as OrderedListNode } from './nodes/OrderedList'
 export { default as TodoItemNode } from './nodes/TodoItem'

packages/tiptap-extensions/src/nodes/Image.js

@@ -0,0 +1,37 @@
+import { Node } from 'tiptap'
+
+export default class ImageNode extends Node {
+
+	get name() {
+		return 'image'
+	}
+
+	get schema() {
+		return {
+			inline: true,
+			attrs: {
+				src: {},
+				alt: {
+					default: null,
+				},
+				title: {
+					default: null,
+				},
+			},
+			group: 'inline',
+			draggable: true,
+			parseDOM: [
+				{
+					tag: 'img[src]',
+					getAttrs: dom => ({
+						src: dom.getAttribute('src'),
+						title: dom.getAttribute('title'),
+						alt: dom.getAttribute('alt'),
+					}),
+				},
+			],
+			toDOM: node => ['img', node.attrs],
+		}
+	}
+
+}

packages/tiptap-extensions/src/nodes/TodoItem.js

@@ -21,6 +21,9 @@ export default class TodoItemNode extends Node {
 				<li data-type="todo_item" :data-done="node.attrs.done.toString()">
 					<span class="todo-checkbox" contenteditable="false" @click="onChange"></span>
 					<div class="todo-content" ref="content" :contenteditable="editable.toString()"></div>
+					<div>
+						{{ node.attrs.customProp }}
+					</DIV>
 				</li>
 			`,
 		}
@@ -32,15 +35,19 @@ export default class TodoItemNode extends Node {
 				done: {
 					default: false,
 				},
+				customProp: {
+					default: null,
+				},
 			},
 			draggable: false,
 			content: 'paragraph',
 			toDOM(node) {
-				const { done } = node.attrs
+				const { done, customProp } = node.attrs
 
 				return ['li', {
 						'data-type': 'todo_item',
 						'data-done': done.toString(),
+						'custom-prop': customProp.toString(),
 					},
 					['span', { class: 'todo-checkbox', contenteditable: 'false' }],
 					['div', { class: 'todo-content' }, 0],
@@ -51,6 +58,7 @@ export default class TodoItemNode extends Node {
 				tag: '[data-type="todo_item"]',
 				getAttrs: dom => ({
 					done: dom.getAttribute('data-done') === 'true',
+					customProp: dom.getAttribute('custom-prop'),
 				}),
 			}],
 		}