MOD-349 Contextual Uploads for MD Editor (#119)

* Migrate DropArea to composition

* remove hardcoded button styling

* let markdown editor call for image upload

* allow for local testing in the docs

* validate url on set

* add chips to modal with correct defaults

* update docs to show example url doesn't load

* Bump version 0.6.4

docs/components/drop-area.md

@@ -1,8 +1,14 @@
 # Drop Area
+<script setup>
+import { ref } from "vue";
+
+const files = ref([])
+</script>
 
 <DemoContainer>
-<InfoIcon /> Click to choose a file or drag one onto this page
-<DropArea accept="*" />
+<DropArea accept="*" @change="files">
+    <InfoIcon /> Click to choose a file or drag one onto this page
+</DropArea>
 </DemoContainer>
 
 ```vue

docs/components/markdown-editor.md

@@ -1,8 +1,14 @@
 # Markdown Editor
 <script setup>
 import { ref } from "vue";
-const description = ref(null)
-const description2 = ref(null)
+
+const description = ref(null);
+const description2 = ref(null);
+const description3 = ref(null);
+
+const onImageUpload = (file) => {
+  return URL.createObjectURL(file).replace("blob:", "");
+};
 </script>
 
 The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as `CTRL+B` for bold, `CTRL+I` for italic, and more. 
@@ -21,9 +27,30 @@ const description = ref(null)
 <MarkdownEditor v-model="description" />
 ```
 
+## With image upload
+<DemoContainer>
+  <MarkdownEditor v-model="description2" :on-image-upload="onImageUpload" />
+</DemoContainer>
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+const description = ref(null)
+
+// Return a URL to the image for the editor to consume
+const onImageUpload = (file: File): string => {
+  // Upload the file to your server and return a URL
+  // This example url will not work bc of proxy
+  return URL.createObjectURL(file).replace("blob:", "");
+};
+</script>
+
+<MarkdownEditor v-model="description" :on-image-upload="onImageUpload" />
+```
+
 ## Without heading buttons
 <DemoContainer>
-  <MarkdownEditor v-model="description2" :heading-buttons="false" />
+  <MarkdownEditor v-model="description3" :heading-buttons="false" />
 </DemoContainer>
 
 ```vue

docs/components/text-inputs.md

@@ -26,7 +26,7 @@ const inputText = ref(null)
       type="text"
       placeholder="Text input"
   />
-  <Button @click="() => inputText = ''">
+  <Button class="r-btn" @click="() => inputText = ''">
     <XIcon/>
   </Button>
 </div>
@@ -65,7 +65,7 @@ const inputText = ref(null)
         type="text"
         placeholder="Text input"
     />
-    <Button @click="() => inputText = ''">
+    <Button class="r-btn" @click="() => inputText = ''">
       <XIcon/>
     </Button>
   </div>
@@ -92,7 +92,7 @@ const value = ref(null)
       type="text"
       placeholder="Text input"
     />
-    <Button @click="() => inputText = ''">
+    <Button class="r-btn" @click="() => inputText = ''">
       <XIcon/>
     </Button>
   </div>