Add image button to toolbar

webapp/components/Editor/MenuBar.vue

@@ -60,6 +60,10 @@
         icon="minus"
       />
 
+      <menu-bar-button :isActive="isActive.image()" icon="image" :onClick="openFileDialog" />
+
+      <input id="fileInput" type="file" @change="fileChange" ref="file" hidden multiple />
+
       <menu-legend class="legend-button" />
     </div>
   </editor-menu-bar>
@@ -80,6 +84,23 @@ export default {
     editor: Object,
     toggleLinkInput: Function,
   },
+  methods: {
+    openFileDialog() {
+      this.$refs.file.click()
+    },
+    fileChange(event) {
+      const files = event.target.files
+      if (files.length === 0) return
+      for (const file of files) {
+        this.editor.commands.image({
+          src: URL.createObjectURL(file),
+          alt: file.name,
+        })
+      }
+      // Reset the input value
+      event.target.value = ''
+    },
+  },
 }
 </script>
 

webapp/components/Editor/defaultExtensions.js

@@ -15,6 +15,7 @@ import {
   HorizontalRule,
   Placeholder,
   Underline,
+  Image,
 } from 'tiptap-extensions'
 
 export default function defaultExtensions(component) {
@@ -53,5 +54,6 @@ export default function defaultExtensions(component) {
         return embed
       },
     }),
+    new Image(),
   ]
 }