feat: TipTap 이미지 적용

hwe/ts/components/TipTap.vue

@@ -76,7 +76,9 @@
 
     <b-button-group class="mx-1">
       <b-button
-        @click="editor.chain().focus().unsetColor().unsetBackgroundColor().run()"
+        @click="
+          editor.chain().focus().unsetColor().unsetBackgroundColor().run()
+        "
         v-b-tooltip.hover
         title="색상 취소"
         ><i class="bi bi-droplet"></i
@@ -95,15 +97,26 @@
         type="color"
         class="form-control form-control-color"
         :value="
-          colorConvert(editor.getAttributes('textStyle').backgroundColor, '#000000')
+          colorConvert(
+            editor.getAttributes('textStyle').backgroundColor,
+            '#000000'
+          )
+        "
+        @input="
+          editor.chain().focus().setBackgroundColor($event.target.value).run()
         "
-        @input="editor.chain().focus().setBackgroundColor($event.target.value).run()"
         v-b-tooltip.hover
         title="배경색"
       />
     </b-button-group>
 
     <b-button-group class="mx-1">
+      <b-button
+        v-b-tooltip.hover
+        @click="showImageModal = true"
+        title="이미지 추가"
+        ><i class="bi bi-image"></i
+      ></b-button>
       <!-- 이미지추가 -->
       <!-- 링크 -->
       <!-- 영상링크 -->
@@ -144,8 +157,7 @@
       <!-- 문단정렬(왼, 가, 오, 양)(내어, 들여) -->
     </b-button-group>
 
-    <b-button-group class="mx-1">
-    </b-button-group>
+    <b-button-group class="mx-1"> </b-button-group>
 
     <b-button-group class="mx-1">
       <!-- 줄간격 (1.0, 1.2, 1.4, 1.5, 1.6, 1.8, 2.0, 3.0) -->
@@ -155,19 +167,177 @@
       <!-- 원본 코드 -->
     </b-button-group>
   </b-button-toolbar>
+  <bubble-menu
+    :tippy-options="{ animation: false, maxWidth: 600 }"
+    :editor="editor"
+    v-if="editable && editor"
+    v-show="editor.isActive('custom-image')"
+  >
+    <b-button-toolbar>
+      <b-button-group class="mx-1">
+        <b-button
+          @click="editor.chain().focus().setImage({ size: 'small' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              size: 'small',
+            }),
+            f_frac: true,
+          }"
+          v-b-tooltip.hover
+          title="1/4 너비로 채우기"
+          >1/4</b-button
+        >
+        <b-button
+          @click="editor.chain().focus().setImage({ size: 'medium' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              size: 'medium',
+            }),
+            f_frac: true,
+          }"
+          v-b-tooltip.hover
+          title="1/2 너비로 채우기"
+          >1/2</b-button
+        >
+        <b-button
+          @click="editor.chain().focus().setImage({ size: 'large' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              size: 'large',
+            }),
+            f_frac: true,
+          }"
+          v-b-tooltip.hover
+          title="가득 채우기"
+          >1</b-button
+        >
+        <b-button
+          @click="editor.chain().focus().setImage({ size: 'original' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              size: 'original',
+            }),
+          }"
+          >원본</b-button
+        >
+      </b-button-group>
+      <b-button-group class="mx-1">
+        <b-button
+          @click="editor.chain().focus().setImage({ align: 'float-left' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              float: 'float-left',
+            }),
+          }"
+          v-b-tooltip.hover
+          title="왼쪽으로 붙이기"
+          ><i class="bi bi-chevron-bar-left"></i
+        ></b-button>
+        <b-button
+          @click="editor.chain().focus().setImage({ align: 'left' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              float: 'left',
+            }),
+          }"
+          v-b-tooltip.hover
+          title="왼쪽으로"
+          ><i class="bi bi-align-start"></i
+        ></b-button>
+        <b-button
+          @click="editor.chain().focus().setImage({ align: 'center' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              float: 'center',
+            }),
+          }"
+          v-b-tooltip.hover
+          title="가운데로"
+          ><i class="bi bi-align-center"></i
+        ></b-button>
+        <b-button
+          @click="editor.chain().focus().setImage({ align: 'right' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              float: 'right',
+            }),
+          }"
+          v-b-tooltip.hover
+          title="오른쪽으로 붙이기"
+          ><i class="bi bi-align-end"></i
+        ></b-button>
+        <b-button
+          @click="editor.chain().focus().setImage({ align: 'float-right' }).run()"
+          :class="{
+            'is-active': editor.isActive('custom-image', {
+              float: 'float-right',
+            }),
+          }"
+          v-b-tooltip.hover
+          title="오른쪽으로 붙이기"
+          ><i class="bi bi-chevron-bar-right"></i
+        ></b-button>
+      </b-button-group>
+    </b-button-toolbar>
+  </bubble-menu>
   <editor-content :editor="editor" />
+  <b-modal
+    v-model="showImageModal"
+    title="이미지 추가"
+    okTitle="추가"
+    cancelTitle="취소"
+    @ok="tryAddImage"
+    @show="resetModal"
+    @hidden="resetModal"
+  >
+    <div class="bg-light text-dark">
+      <b-form-group
+        label-cols-sm="4"
+        label-cols-lg="3"
+        content-cols-sm
+        content-cols-lg="7"
+        description="업로드할 파일을 선택해주세요. (jpg, png, gif, webp)"
+        label="이미지 업로드"
+        label-align="right"
+        :label-for="`${uuid}_image_upload`"
+      >
+        <input
+          class="form-control"
+          type="file"
+          :id="`${uuid}_image_upload`"
+          @change="chooseImage"
+          accept=".jpg,.jpeg,.png,.gif,.webp"
+        />
+      </b-form-group>
+      <b-form-group
+        label-cols-sm="4"
+        label-cols-lg="3"
+        content-cols-sm
+        content-cols-lg="7"
+        description="링크할 이미지 주소를 입력해주세요."
+        label="이미지 링크"
+        label-align="right"
+        :label-for="`${uuid}_image_link`"
+      >
+        <b-form-input v-model="imageLink"></b-form-input>
+      </b-form-group>
+    </div>
+  </b-modal>
 </template>
 
 <script lang="ts">
 //import "@scss/common/bootstrap5.scss";
 import { defineComponent } from "vue";
-import { Editor, EditorContent } from "@tiptap/vue-3";
+import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
 import { FontSize } from "@/tiptap-ext/FontSize";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 import TextStyle from "@tiptap/extension-text-style";
 import TextAlign from "@tiptap/extension-text-align";
 import Color from "@tiptap/extension-color";
+//import Image from "@tiptap/extension-image";
+import CustomImage from "@/tiptap-ext/CustomImage";
+import Link from "@tiptap/extension-link";
 import { BackgroundColor } from "@/tiptap-ext/BackgroundColor";
 import {
   BButtonGroup,
@@ -176,11 +346,20 @@ import {
   BDropdown,
   BDropdownItem,
   BDropdownDivider,
+  BModal,
 } from "bootstrap-vue-3";
+import { v4 as uuidv4 } from "uuid";
+import { unwrap } from "@/util/unwrap";
+import { getBase64FromFileObject } from "@/util/getBase64FromFileObject";
+import { sammoAPI } from "@/util/sammoAPI";
+import { isObject, isString } from "lodash";
+import { AxiosError } from "axios";
 
 const compoment = defineComponent({
   components: {
     EditorContent,
+    BubbleMenu,
+    BModal,
     BButtonGroup,
     BButtonToolbar,
     BButton,
@@ -189,6 +368,10 @@ const compoment = defineComponent({
     BDropdownDivider,
   },
   methods: {
+    chooseImage(e: Event) {
+      const target = unwrap(e.target) as HTMLInputElement;
+      this.imageUploadFiles = target.files;
+    },
     colorConvert(val: string | undefined, defaultVal: string) {
       if (!val) {
         return defaultVal;
@@ -207,6 +390,54 @@ const compoment = defineComponent({
       }
       return val;
     },
+    async tryAddImage(bvModalEvt: Event) {
+      if (this.imageUploadFiles === null || this.imageUploadFiles.length == 0) {
+        this.addImageLink(bvModalEvt);
+        return;
+      }
+
+      const targetImage = unwrap(this.imageUploadFiles.item(0));
+      let imageResult: {
+        result: true;
+        path: string;
+      };
+      try {
+        const base64Binary = await getBase64FromFileObject(targetImage);
+        imageResult = await sammoAPI("Misc/UploadImage", {
+          imageData: base64Binary,
+        });
+      } catch (e) {
+        if (isString(e)) {
+          alert(e);
+          bvModalEvt.preventDefault();
+        }
+
+        if (isObject(e) && "response" in e) {
+          const axiosErr = e as AxiosError;
+          if (axiosErr.response?.status === 413) {
+            alert("허용 용량을 초과했습니다.");
+            bvModalEvt.preventDefault();
+          }
+        }
+        console.error(e);
+        return false;
+      }
+
+      const imagePath = imageResult.path;
+      this.editor.chain().focus().setImage({ src: imagePath }).run();
+    },
+    addImageLink(bvModalEvt: Event) {
+      if (!this.imageLink) {
+        alert("업로드할 이미지를 선택하거나, 이미지 주소를 입력해주세요.");
+        bvModalEvt.preventDefault();
+        return false;
+      }
+      this.editor.chain().focus().setImage({ src: this.imageLink }).run();
+    },
+    resetModal() {
+      this.imageLink = "";
+      this.imageUploadFiles = null;
+    },
   },
 
   props: {
@@ -221,6 +452,7 @@ const compoment = defineComponent({
   },
   data() {
     return {
+      uuid: uuidv4(),
       editor: null as unknown as InstanceType<typeof Editor>,
       fontList: ["Pretendard", "맑은 고딕", "궁서", "돋움"],
       fontSize: [
@@ -235,6 +467,9 @@ const compoment = defineComponent({
         "48px",
         "72px",
       ],
+      imageUploadFiles: null as FileList | null,
+      imageLink: "",
+      showImageModal: false,
     };
   },
 
@@ -272,6 +507,8 @@ const compoment = defineComponent({
         BackgroundColor.configure({
           types: ["textStyle"],
         }),
+        CustomImage,
+        Link,
       ],
       editable: this.editable,
       content: this.modelValue,