add basic image support

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'),
 				}),
 			}],
 		}