Merge pull request #369 from TripInfoWeb/dev_refactoring

Feat: 여행일기 이미지 resizing 기능 추가

package.json

@@ -18,6 +18,7 @@
     "next": "14.2.10",
     "node-html-parser": "^6.1.13",
     "quill-image-drop-and-paste": "^2.0.1",
+    "quill-image-resize-module-ts": "^3.0.3",
     "rc-slider": "^11.1.5",
     "react": "^18",
     "react-date-range": "^2.0.1",

src/constants/common/sanitizeOption.ts

@@ -29,7 +29,7 @@ const sanitizeOption = {
     blockquote: ["class", "style"],
     pre: ["class", "style", "spellcheck"],
     a: ["class", "style", "href", "rel", "target", "style"],
-    img: ["class", "style", "src"],
+    img: ["class", "style", "src", "width"],
     iframe: ["class", "style", "frameborder", "allowfullscreen", "src"],
   },
   allowedSchemes: ["data", "http", "https"],

src/containers/diary/write/QuillEditorContainer.tsx

@@ -7,6 +7,7 @@ import ImageDropAndPaste, { ImageData } from "quill-image-drop-and-paste";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import ReactQuill, { Quill } from "react-quill";
+import { ImageResize } from "quill-image-resize-module-ts";
 
 const QuillEditorContainer = () => {
   const authStore = useAuthStore();
@@ -106,6 +107,7 @@ const QuillEditorContainer = () => {
   };
 
   const modules = useMemo(() => {
+    ReactQuill.Quill.register("modules/imageResize", ImageResize);
     ReactQuill.Quill.register("modules/imageDropAndPaste", ImageDropAndPaste);
 
     return {
@@ -119,6 +121,14 @@ const QuillEditorContainer = () => {
         ],
         handlers: { image: imageHandler },
       },
+      imageResize: {
+        modules: ["Resize", "DisplaySize", "Toolbar"],
+        handleStyles: {
+          backgroundColor: "#00B488",
+          border: "none",
+          // other camelCase styles for size display
+        },
+      },
       imageDropAndPaste: {
         // add an custom image handler
         handler: imageDropAndPasteHandler,