feat: upload image button

Author: pd4d10

packages/bytemd/src/Toolbar.svelte

@@ -1,6 +1,7 @@
 <script>
-  import { handleDec, handleBlockquote, handleLink } from './editor.js'
+  import { handleDec, handleBlockquote, handleLink, handleImage } from './editor.js'
   export let cm;
+  let fileInput;
 </script>
 
 <style>
@@ -25,6 +26,9 @@
     width: 20px;
     height: 20px;
   }
+  input {
+    display: none;
+  }
 </style>
 
 <div>
@@ -33,4 +37,6 @@
   <span on:click={() => handleDec(cm, '~~')}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/></svg></span>
   <span on:click={() => handleBlockquote(cm)}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg></span>
   <span on:click={() => handleLink(cm)}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg></span>
+  <span on:click={() => fileInput.click()}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></span>
+  <input bind:this={fileInput} type="file" accept="image/png, image/jpeg" on:change={(e) => handleImage(cm, e)} />
 </div>

packages/bytemd/src/editor.ts

@@ -39,3 +39,16 @@ export function handleLink(cm: Editor) {
   }
   cm.focus();
 }
+
+export function handleImage(cm: Editor, e: InputEvent) {
+  const $ = e.target as HTMLInputElement;
+  if (!$.files) return;
+  const file = $.files[0];
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.addEventListener('load', e => {
+    const dataUrl = e.target!.result;
+    cm.replaceSelection(`![](${dataUrl})`);
+    cm.focus();
+  });
+}