MOD-349 Contextual Uploads for MD Editor (modrinth#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
brawaru · Oct 26, 2023 · 79bdea0 · 79bdea0
1 parent c056c4e
commit 79bdea0
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 88 deletions.
diff --git a/docs/components/drop-area.md b/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

diff --git a/docs/components/markdown-editor.md b/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

diff --git a/docs/components/text-inputs.md b/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>

diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
@@ -47,6 +47,7 @@ input[type='url'],
 input[type='number'],
 input[type='password'],
 textarea,
+.input-text-inherit,
 .cm-content {
   border-radius: var(--radius-md);
   box-sizing: border-box;
@@ -146,7 +147,7 @@ input[type='number'] {
     opacity: 0.6;
   }
 
-  .btn {
+  .r-btn {
     @extend .transparent, .icon-only;
 
     position: absolute;

diff --git a/lib/components/base/DropArea.vue b/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;