From efdf45de4c5c1c39ba67ad08f1b138f54ee7c0ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 29 Sep 2018 22:49:38 +0200
Subject: [PATCH] add command for adding images

---
 examples/Components/Routes/Images/index.vue   | 23 +++++++++++++++++++
 examples/assets/images/icons/image.svg        |  1 +
 packages/tiptap-extensions/src/nodes/Image.js | 10 ++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 examples/assets/images/icons/image.svg

diff --git a/examples/Components/Routes/Images/index.vue b/examples/Components/Routes/Images/index.vue
index 58300586..648d735c 100644
--- a/examples/Components/Routes/Images/index.vue
+++ b/examples/Components/Routes/Images/index.vue
@@ -2,6 +2,19 @@
 	<div>
 		<editor class="editor" :extensions="extensions">
 
+			<div class="menubar" slot="menubar" slot-scope="{ nodes }">
+				<div v-if="nodes">
+
+					<button
+						class="menubar__button"
+						@click="showImagePrompt(nodes.image.command)"
+					>
+						<icon name="image" />
+					</button>
+
+				</div>
+			</div>
+
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
 					Images
@@ -17,6 +30,7 @@
 </template>
 
 <script>
+import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 import {
 	HardBreakNode,
@@ -29,6 +43,7 @@ import {
 
 export default {
 	components: {
+		Icon,
 		Editor,
 	},
 	data() {
@@ -43,5 +58,13 @@ export default {
 			],
 		}
 	},
+	methods: {
+		showImagePrompt(command) {
+			const src = prompt('Enter the url of your image here')
+			if (src !== null) {
+				command({ src })
+			}
+		},
+	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/assets/images/icons/image.svg b/examples/assets/images/icons/image.svg
new file mode 100644
index 00000000..8e1a8f4f
--- /dev/null
+++ b/examples/assets/images/icons/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>paginate-filter-picture-alternate</title><circle cx="9.75" cy="6.247" r="2.25"/><path d="M16.916,8.71A1.027,1.027,0,0,0,16,8.158a1.007,1.007,0,0,0-.892.586L13.55,12.178a.249.249,0,0,1-.422.053l-.82-1.024a1,1,0,0,0-.813-.376,1.007,1.007,0,0,0-.787.426L7.59,15.71A.5.5,0,0,0,8,16.5H20a.5.5,0,0,0,.425-.237.5.5,0,0,0,.022-.486Z"/><path d="M22,0H5.5a2,2,0,0,0-2,2V18.5a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V2A2,2,0,0,0,22,0Zm-.145,18.354a.5.5,0,0,1-.354.146H6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,6,2H21.5a.5.5,0,0,1,.5.5V18A.5.5,0,0,1,21.855,18.351Z"/><path d="M19.5,22H2.5a.5.5,0,0,1-.5-.5V4.5a1,1,0,0,0-2,0V22a2,2,0,0,0,2,2H19.5a1,1,0,0,0,0-2Z"/></svg>
\ No newline at end of file
diff --git a/packages/tiptap-extensions/src/nodes/Image.js b/packages/tiptap-extensions/src/nodes/Image.js
index e01fcb53..59bf4fed 100644
--- a/packages/tiptap-extensions/src/nodes/Image.js
+++ b/packages/tiptap-extensions/src/nodes/Image.js
@@ -34,6 +34,16 @@ export default class ImageNode extends Node {
 		}
 	}
 
+	command({ type, attrs }) {
+		return (state, dispatch) => {
+			const { selection } = state
+			const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
+			const node = type.create(attrs)
+			const transaction = state.tr.insert(position, node)
+			dispatch(transaction)
+		}
+	}
+
 	get plugins() {
 		return [
 			new Plugin({