From 79bdea044111dd7cb132eef67a5d5cb45e7a6f2a Mon Sep 17 00:00:00 2001
From: Carter <safe@fea.st>
Date: Thu, 26 Oct 2023 14:34:15 -0700
Subject: [PATCH] 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             |  10 +-
 docs/components/markdown-editor.md       |  33 ++++++-
 docs/components/text-inputs.md           |   6 +-
 lib/assets/styles/defaults.scss          |   3 +-
 lib/components/base/DropArea.vue         | 117 ++++++++++++-----------
 lib/components/base/MarkdownEditor.vue   | 105 ++++++++++++++++----
 lib/components/modal/ShareModal.vue      |   2 +-
 lib/components/search/SearchDropdown.vue |   2 +-
 package.json                             |   2 +-
 9 files changed, 192 insertions(+), 88 deletions(-)

diff --git a/docs/components/drop-area.md b/docs/components/drop-area.md
index 1afa1e52a..c3e10ae40 100644
--- 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
index 878b432ad..8d3ad813c 100644
--- 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
index 7253fe344..6a5b6e184 100644
--- 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
index 4c74292e7..f9a2dd20c 100644
--- 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
index 4e459e7ea..9f1e61fea 100644
--- 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;
diff --git a/lib/components/base/MarkdownEditor.vue b/lib/components/base/MarkdownEditor.vue
index a6f2d8c67..6f18f8b44 100644
--- a/lib/components/base/MarkdownEditor.vue
+++ b/lib/components/base/MarkdownEditor.vue
@@ -7,7 +7,7 @@
       <div class="iconified-input">
         <AlignLeftIcon />
         <input id="insert-link-label" v-model="linkText" type="text" placeholder="Enter label..." />
-        <Button @click="() => (linkText = '')">
+        <Button class="r-btn" @click="() => (linkText = '')">
           <XIcon />
         </Button>
       </div>
@@ -23,7 +23,7 @@
           placeholder="Enter the link's URL..."
           @input="validateURL"
         />
-        <Button @click="() => (linkUrl = '')">
+        <Button class="r-btn" @click="() => (linkUrl = '')">
           <XIcon />
         </Button>
       </div>
@@ -74,14 +74,31 @@
           type="text"
           placeholder="Describe the image..."
         />
-        <Button @click="() => (linkText = '')">
+        <Button class="r-btn" @click="() => (linkText = '')">
           <XIcon />
         </Button>
       </div>
       <label class="label" for="insert-link-url">
         <span class="label__title">URL<span class="required">*</span></span>
       </label>
-      <div class="iconified-input">
+      <div v-if="props.onImageUpload" class="image-strategy-chips">
+        <Chips v-model="imageUploadOption" :items="['upload', 'link']" />
+      </div>
+      <div
+        v-if="props.onImageUpload && imageUploadOption === 'upload'"
+        class="iconified-input btn-input-alternative"
+      >
+        <FileInput
+          accept="image/png,image/jpeg,image/gif,image/webp"
+          prompt="Upload an image"
+          class="btn"
+          should-always-reset
+          @change="handleImageUpload"
+        >
+          <UploadIcon />
+        </FileInput>
+      </div>
+      <div v-if="!props.onImageUpload || imageUploadOption === 'link'" class="iconified-input">
         <ImageIcon />
         <input
           id="insert-link-url"
@@ -90,7 +107,7 @@
           placeholder="Enter the image URL..."
           @input="validateURL"
         />
-        <Button @click="() => (linkUrl = '')">
+        <Button class="r-btn" @click="() => (linkUrl = '')">
           <XIcon />
         </Button>
       </div>
@@ -141,7 +158,7 @@
           placeholder="Enter YouTube video URL"
           @input="validateURL"
         />
-        <Button @click="() => (linkUrl = '')">
+        <Button class="r-btn" @click="() => (linkUrl = '')">
           <XIcon />
         </Button>
       </div>
@@ -200,7 +217,7 @@
         </template>
       </div>
       <div class="preview">
-        <Toggle id="preview" v-model="previewMode" />
+        <Toggle id="preview" v-model="previewMode" :checked="previewMode" />
         <label class="label" for="preview"> Preview </label>
       </div>
     </div>
@@ -249,24 +266,27 @@ import {
   Button,
   Modal,
   Toggle,
+  FileInput,
+  UploadIcon,
+  Chips,
 } from '@/components'
 import { markdownCommands, modrinthMarkdownEditorKeymap } from '@/helpers/codemirror'
 import { renderHighlightedString } from '@/helpers/highlight'
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  headingButtons: {
-    type: Boolean,
-    default: true,
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    disabled: boolean
+    headingButtons: boolean
+    onImageUpload?: (file: File) => Promise<string>
+  }>(),
+  {
+    modelValue: '',
+    disabled: false,
+    headingButtons: true,
+    onImageUpload: undefined,
+  }
+)
 
 const editorRef = ref<HTMLDivElement>()
 let editor: EditorView | null = null
@@ -503,6 +523,22 @@ const linkMarkdown = computed(() => {
   return ''
 })
 
+const handleImageUpload = async (files: FileList) => {
+  if (props.onImageUpload) {
+    const file = files[0]
+    if (file) {
+      try {
+        const url = await props.onImageUpload(file)
+        linkUrl.value = url
+        validateURL()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+}
+
+const imageUploadOption = ref<string>('upload')
 const imageMarkdown = computed(() => (linkMarkdown.value.length ? `!${linkMarkdown.value}` : ''))
 
 const youtubeRegex =
@@ -528,6 +564,7 @@ function openLinkModal() {
 }
 
 function openImageModal() {
+  linkValidationErrorMessage.value = undefined
   linkText.value = ''
   linkUrl.value = ''
   imageModal.value?.show()
@@ -646,4 +683,30 @@ function openVideoModal() {
     margin-top: var(--gap-lg);
   }
 }
+
+.image-strategy-chips {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-xs);
+  padding-bottom: var(--gap-md);
+}
+
+.btn-input-alternative {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-xs);
+  padding-bottom: var(--gap-xs);
+
+  .btn {
+    width: 100%;
+    padding-left: 2.5rem;
+    min-height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+  }
+}
 </style>
diff --git a/lib/components/modal/ShareModal.vue b/lib/components/modal/ShareModal.vue
index f4563a362..160f3736a 100644
--- a/lib/components/modal/ShareModal.vue
+++ b/lib/components/modal/ShareModal.vue
@@ -129,7 +129,7 @@ defineExpose({
         <div v-if="link" class="iconified-input">
           <LinkIcon />
           <input type="text" :value="url" readonly />
-          <Button v-tooltip="'Copy Text'" @click="copyText">
+          <Button v-tooltip="'Copy Text'" class="r-btn" @click="copyText">
             <ClipboardCopyIcon />
           </Button>
         </div>
diff --git a/lib/components/search/SearchDropdown.vue b/lib/components/search/SearchDropdown.vue
index cac5357e4..5919abade 100644
--- a/lib/components/search/SearchDropdown.vue
+++ b/lib/components/search/SearchDropdown.vue
@@ -26,7 +26,7 @@
         @focusout="onBlur"
         @keydown.enter.prevent="$emit('enter')"
       />
-      <Button :disabled="disabled" @click="() => $emit('update:modelValue', '')">
+      <Button :disabled="disabled" class="r-btn" @click="() => $emit('update:modelValue', '')">
         <XIcon />
       </Button>
     </div>
diff --git a/package.json b/package.json
index bdbb3e48d..072589ee9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "files": [
     "dist"
   ],