From 3363461519b61e50b4d6d9057ef8c6e19aca3f54 Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sun, 22 Sep 2024 22:47:21 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=97=AC=ED=96=89=EC=9D=BC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20resizing=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                                   | 10 ++++++++++
 package.json                                        |  1 +
 src/constants/common/sanitizeOption.ts              |  2 +-
 src/containers/diary/write/QuillEditorContainer.tsx | 10 ++++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d258f13a..3cc4b16b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,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",
@@ -4690,6 +4691,15 @@
       "resolved": "https://registry.npmjs.org/quill-image-drop-and-paste/-/quill-image-drop-and-paste-2.0.1.tgz",
       "integrity": "sha512-Qs0v6kf0v4dsB0s9Tf8rAFQb6LVPjfZL1i1fgN7jaT81XqpoHMQIC+QZN3LEM5nQ8LT2NNe4nuNjdMN1r8BI+g=="
     },
+    "node_modules/quill-image-resize-module-ts": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/quill-image-resize-module-ts/-/quill-image-resize-module-ts-3.0.3.tgz",
+      "integrity": "sha512-NMWw67zCfGxE0AyPTVLWMTAs71eKerd+jJJqu9ZuPBGZl7vc+Jtb+tmfx33pC3h0deVYqgOMXYzbFBIRmu/WuQ==",
+      "dependencies": {
+        "lodash": "^4.17.4",
+        "quill": "^1.3.4"
+      }
+    },
     "node_modules/rc-slider": {
       "version": "11.1.5",
       "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.5.tgz",
diff --git a/package.json b/package.json
index 775be27a..3de376c9 100644
--- a/package.json
+++ b/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",
diff --git a/src/constants/common/sanitizeOption.ts b/src/constants/common/sanitizeOption.ts
index 368692a8..cfea97a1 100644
--- a/src/constants/common/sanitizeOption.ts
+++ b/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"],
diff --git a/src/containers/diary/write/QuillEditorContainer.tsx b/src/containers/diary/write/QuillEditorContainer.tsx
index 45a1e04a..eaf37ec6 100644
--- a/src/containers/diary/write/QuillEditorContainer.tsx
+++ b/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,