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

lib/components/base/DropArea.vue

@@ -1,65 +1,72 @@
 <template>
-  <div
-    ref="drop_area"
-    class="drop-area"
-    @drop.stop.prevent="
-      (event) => {
-        $refs.drop_area.style.visibility = 'hidden'
-        if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
-          $emit('change', event.dataTransfer.files)
-        }
-      }
-    "
-    @dragenter.prevent="allowDrag"
-    @dragover.prevent="allowDrag"
-    @dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
-  />
+  <Teleport to="body">
+    <div
+      ref="dropAreaRef"
+      class="drop-area"
+      @drop.stop.prevent="handleDrop"
+      @dragenter.prevent="allowDrag"
+      @dragover.prevent="allowDrag"
+      @dragleave.prevent="hideDropArea"
+    />
+  </Teleport>
+  <slot />
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, onMounted } from 'vue'
 
-export default defineComponent({
-  props: {
-    accept: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['change'],
-  data() {
-    return {
-      fileAllowed: false,
+const props = withDefaults(
+  defineProps<{
+    accept: string
+  }>(),
+  {
+    accept: '*',
+  }
+)
+
+const emit = defineEmits(['change'])
+
+const dropAreaRef = ref<HTMLDivElement>()
+const fileAllowed = ref(false)
+
+const hideDropArea = () => {
+  if (dropAreaRef.value) {
+    dropAreaRef.value.style.visibility = 'hidden'
+  }
+}
+
+const handleDrop = (event: DragEvent) => {
+  hideDropArea()
+  if (event.dataTransfer && event.dataTransfer.files && fileAllowed.value) {
+    emit('change', event.dataTransfer.files)
+  }
+}
+
+const allowDrag = (event: DragEvent) => {
+  const file = event.dataTransfer?.items[0]
+  if (
+    file &&
+    props.accept
+      .split(',')
+      .reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
+  ) {
+    fileAllowed.value = true
+    event.dataTransfer.dropEffect = 'copy'
+    event.preventDefault()
+    if (dropAreaRef.value) {
+      dropAreaRef.value.style.visibility = 'visible'
     }
-  },
-  mounted() {
-    document.addEventListener('dragenter', this.allowDrag)
-  },
-  methods: {
-    allowDrag(event) {
-      const file = event.dataTransfer?.items[0]
-      if (
-        file &&
-        this.accept
-          .split(',')
-          .reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
-      ) {
-        this.fileAllowed = true
-        event.dataTransfer.dropEffect = 'copy'
-        event.preventDefault()
-        if (this.$refs.drop_area) {
-          this.$refs.drop_area.style.visibility = 'visible'
-        }
-      } else {
-        this.fileAllowed = false
-        if (this.$refs.drop_area) {
-          this.$refs.drop_area.style.visibility = 'hidden'
-        }
-      }
-    },
-  },
+  } else {
+    fileAllowed.value = false
+    hideDropArea()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('dragenter', allowDrag)
 })
 </script>
+
 <style lang="scss" scoped>
 .drop-area {
   position: fixed;