add command for adding images

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>

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>

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({