Implement Editor MOD-349 (#1427)

* Implement Editor * content oveflow fix for description * Description card fix * make everything fix in report modal * seperate report page with image upload * Bump Omorphia * Update pages/report.vue Co-authored-by: Emma Alexia <emma@modrinth.com> * suggested changes and cleanup * fix button spacing * clean up and replace report implementations * corepack fix * Remove ModalReport * image uploads for conversations * image uploading context for versions and threads * adjust information about thread messages * Update pages/report.vue Co-authored-by: Emma Alexia <emma@modrinth.com> * Adjust image upload imports * fix api changes for useImageUpload * correct report redirection uri * report button feedback * omorphia ver bump --------- Co-authored-by: Emma Alexia <emma@modrinth.com>
2023-11-29 10:56:17 -08:00
parent e4cb8b71dd
commit accc53c5dd
14 changed files with 458 additions and 272 deletions
@@ -130,12 +130,6 @@
        <div class="markdown-body" v-html="renderString(licenseText)" />
      </div>
    </Modal>
-    <ModalReport
-      v-if="auth.user"
-      ref="modal_project_report"
-      :item-id="project.id"
-      item-type="project"
-    />
    <div
      :class="{
        'normal-page': true,
@@ -258,7 +252,7 @@
            <hr class="card-divider" />
            <div class="input-group">
              <template v-if="auth.user">
-                <button class="iconified-button" @click="$refs.modal_project_report.show()">
+                <button class="iconified-button" @click="() => reportProject(project.id)">
                  <ReportIcon aria-hidden="true" />
                  Report
                </button>
@@ -689,7 +683,6 @@ import Badge from '~/components/ui/Badge.vue'
 import Categories from '~/components/ui/search/Categories.vue'
 import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
 import Modal from '~/components/ui/Modal.vue'
-import ModalReport from '~/components/ui/ModalReport.vue'
 import NavRow from '~/components/ui/NavRow.vue'
 import CopyCode from '~/components/ui/CopyCode.vue'
 import Avatar from '~/components/ui/Avatar.vue'
@@ -706,6 +699,7 @@ import LicenseIcon from '~/assets/images/utils/copyright.svg'
 import GalleryIcon from '~/assets/images/utils/image.svg'
 import VersionIcon from '~/assets/images/utils/version.svg'
 import { renderString } from '~/helpers/parse.js'
+import { reportProject } from '~/utils/report-helpers.ts'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'

 const data = useNuxtApp()
@@ -63,9 +63,9 @@
    <section id="messages" class="universal-card">
      <h2>Messages</h2>
      <p>
-        This is a private conversation thread with the Modrinth moderators. They will message you
-        for issues concerning your project on Modrinth, and you are welcome to message them about
-        things concerning your project.
+        This is a private conversation thread with the Modrinth moderators. They may message you
+        with issues concerning this project. Additionally, you are welcome to start a discussion
+        here regarding this project and its status.
      </p>
      <ConversationThread
        v-if="thread"
@@ -1,17 +1,10 @@
 <template>
  <div>
-    <section class="universal-card">
-      <label for="project-description">
-        <span class="label__title size-card-header">Description</span>
+    <Card>
+      <div class="markdown-disclaimer">
+        <h2>Description</h2>
        <span class="label__description">
-          You can type an extended description of your mod here. This editor supports
-          <a
-            class="text-link"
-            href="https://docs.modrinth.com/docs/tutorials/markdown/"
-            target="_blank"
-            >Markdown formatting</a
-          >. HTML can also be used inside your description, not including styles, scripts, and
-          iframes (though YouTube iframes are allowed).
+          You can type an extended description of your mod here.
          <span class="label__subdescription">
            The description must clearly and honestly describe the purpose and function of the
            project. See section 2.1 of the
@@ -19,21 +12,13 @@
            for the full requirements.
          </span>
        </span>
-      </label>
-      <Chips v-model="bodyViewMode" :items="['source', 'preview']" />
-      <div v-if="bodyViewMode === 'source'" class="resizable-textarea-wrapper">
-        <textarea
-          id="project-description"
-          v-model="description"
-          :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
-        />
      </div>
-      <div
-        v-else-if="bodyViewMode === 'preview'"
-        class="markdown-body"
-        v-html="description ? renderHighlightedString(description) : 'No body specified.'"
+      <MarkdownEditor
+        v-model="description"
+        :on-image-upload="onUploadHandler"
+        :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
      />
-      <div class="input-group">
+      <div class="input-group markdown-disclaimer">
        <button
          type="button"
          class="iconified-button brand-button"
@@ -44,19 +29,23 @@
          Save changes
        </button>
      </div>
-    </section>
+    </Card>
  </div>
 </template>

 <script>
+import { MarkdownEditor, Card } from 'omorphia'
 import Chips from '~/components/ui/Chips.vue'
 import SaveIcon from '~/assets/images/utils/save.svg'
 import { renderHighlightedString } from '~/helpers/highlight.js'
+import { useImageUpload } from '~/composables/image-upload.ts'

 export default defineNuxtComponent({
  components: {
+    Card,
    Chips,
    SaveIcon,
+    MarkdownEditor,
  },
  props: {
    project: {
@@ -121,15 +110,23 @@ export default defineNuxtComponent({
        this.patchProject(this.patchData)
      }
    },
+    async onUploadHandler(file) {
+      const response = await useImageUpload(file, {
+        context: 'project',
+        projectID: this.project.id,
+      })
+      return response.url
+    },
  },
 })
 </script>
-<style lang="scss" scoped>
-.resizable-textarea-wrapper textarea {
-  min-height: 40rem;
+
+<style scoped>
+.markdown-disclaimer {
+  margin-block: 1rem;
 }

-.markdown-body {
-  margin-bottom: var(--spacing-card-md);
+.universal-card {
+  margin-top: 1rem;
 }
 </style>
@@ -9,12 +9,6 @@
      proceed-label="Delete"
      @proceed="deleteVersion()"
    />
-    <ModalReport
-      v-if="auth.user"
-      ref="modal_version_report"
-      :item-id="version.id"
-      item-type="version"
-    />
    <Modal v-if="auth.user && currentMember" ref="modal_package_mod" header="Package data pack">
      <div class="modal-package-mod universal-labels">
        <div class="markdown-body">
@@ -157,7 +151,7 @@
          <ReportIcon aria-hidden="true" />
          Report
        </nuxt-link>
-        <button v-else class="iconified-button" @click="$refs.modal_version_report.show()">
+        <button v-else class="iconified-button" @click="() => reportVersion(version.id)">
          <ReportIcon aria-hidden="true" />
          Report
        </button>
@@ -195,29 +189,9 @@
    <div class="version-page__changelog universal-card">
      <h3>Changelog</h3>
      <template v-if="isEditing">
-        <span
-          >This editor supports
-          <a
-            class="text-link"
-            href="https://docs.modrinth.com/docs/tutorials/markdown/"
-            target="_blank"
-            >Markdown formatting</a
-          >. HTML can also be used inside your changelog, not including styles, scripts, and
-          iframes.
-        </span>
-        <Chips v-model="changelogViewMode" class="separator" :items="['source', 'preview']" />
-        <div v-if="changelogViewMode === 'source'" class="resizable-textarea-wrapper">
-          <textarea id="body" v-model="version.changelog" maxlength="65536" />
+        <div class="changelog-editor-spacing">
+          <MarkdownEditor v-model="version.changelog" :on-image-upload="onImageUpload" />
        </div>
-        <div
-          v-if="changelogViewMode === 'preview'"
-          class="markdown-body"
-          v-html="
-            version.changelog
-              ? renderHighlightedString(version.changelog)
-              : 'No changelog specified.'
-          "
-        />
      </template>
      <div
        v-else
@@ -656,11 +630,14 @@
  </div>
 </template>
 <script>
+import { MarkdownEditor } from 'omorphia'
 import { Multiselect } from 'vue-multiselect'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 import { inferVersionInfo } from '~/helpers/infer.js'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { renderHighlightedString } from '~/helpers/highlight.js'
+import { reportVersion } from '~/utils/report-helpers.ts'
+import { useImageUpload } from '~/composables/image-upload.ts'

 import Avatar from '~/components/ui/Avatar.vue'
 import Badge from '~/components/ui/Badge.vue'
@@ -668,7 +645,6 @@ import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CopyCode from '~/components/ui/CopyCode.vue'
 import Categories from '~/components/ui/search/Categories.vue'
 import ModalConfirm from '~/components/ui/ModalConfirm.vue'
-import ModalReport from '~/components/ui/ModalReport.vue'
 import Chips from '~/components/ui/Chips.vue'
 import Checkbox from '~/components/ui/Checkbox.vue'
 import FileInput from '~/components/ui/FileInput.vue'
@@ -693,6 +669,7 @@ import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'

 export default defineNuxtComponent({
  components: {
+    MarkdownEditor,
    Modal,
    FileInput,
    Checkbox,
@@ -717,7 +694,6 @@ export default defineNuxtComponent({
    Breadcrumbs,
    CopyCode,
    ModalConfirm,
-    ModalReport,
    Multiselect,
    BoxIcon,
    RightArrowIcon,
@@ -919,6 +895,7 @@ export default defineNuxtComponent({
      primaryFile: ref(primaryFile),
      alternateFile: ref(alternateFile),
      replaceFile: ref(replaceFile),
+      uploadedImageIds: ref([]),
    }
  },
  data() {
@@ -927,7 +904,6 @@ export default defineNuxtComponent({
      newDependencyType: 'required',
      newDependencyId: '',

-      changelogViewMode: 'source',
      showSnapshots: false,

      newFiles: [],
@@ -967,6 +943,14 @@ export default defineNuxtComponent({
    },
  },
  methods: {
+    async onImageUpload(file) {
+      const response = await useImageUpload(file, { context: 'version' })
+
+      this.uploadedImageIds.push(response.id)
+      this.uploadedImageIds = this.uploadedImageIds.slice(-10)
+
+      return response.url
+    },
    getPreviousLink() {
      if (this.$router.options.history.state.back) {
        if (
@@ -1171,6 +1155,7 @@ export default defineNuxtComponent({
      }
      stopLoading()
    },
+    reportVersion,
    async createVersion() {
      this.shouldPreventActions = true
      startLoading()
@@ -1349,6 +1334,10 @@ export default defineNuxtComponent({
 </script>

 <style lang="scss" scoped>
+.changelog-editor-spacing {
+  padding-block: var(--gap-md);
+}
+
 .version-page {
  display: grid;