From 070770208b7eb16e9596e8588ed5951e040cf08d Mon Sep 17 00:00:00 2001
From: Gaagul Gigi <gaagulgigi@gmail.com>
Date: Wed, 18 Oct 2023 19:10:02 +0530
Subject: [PATCH] Restricted the ability for user to resize images with respect
 to editorContent width

---
 .../CustomExtensions/Image/ExtensionConfig.js    | 11 ++---------
 .../CustomExtensions/Image/ImageComponent.jsx    | 11 +++++++++++
 .../hooks/useCustomExtensions.js                 | 16 ++--------------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js b/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js
index c0bec465..4462f4d2 100644
--- a/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js
+++ b/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js
@@ -30,10 +30,7 @@ export default Node.create({
   name: "image",
 
   addOptions() {
-    return {
-      HTMLAttributes: {},
-      openImageInNewTab: true,
-    };
+    return { HTMLAttributes: {}, openImageInNewTab: true };
   },
 
   group: "block",
@@ -82,11 +79,7 @@ export default Node.create({
   },
 
   parseHTML() {
-    return [
-      {
-        tag: "figure",
-      },
-    ];
+    return [{ tag: "figure" }];
   },
 
   renderHTML({ node, HTMLAttributes }) {
diff --git a/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx b/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx
index 9ff98284..89a25b15 100644
--- a/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx
+++ b/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx
@@ -28,9 +28,19 @@ const ImageComponent = ({
     ? figureRef.current.querySelector("figcaption>div")?.textContent
     : alt;
 
+  const editorElement = figureRef.current?.closest(".neeto-editor");
+  const maxImageWidth = editorElement?.offsetWidth - 50;
+
   const handleResizeStop = (_event, _direction, ref) => {
     height = ref.offsetHeight;
     width = ref.offsetWidth;
+
+    if (width > maxImageWidth) {
+      width = maxImageWidth;
+      const aspectRatio = ref.offsetHeight / ref.offsetWidth;
+      height = width * aspectRatio;
+    }
+    setCaptionWidth(width);
     view.dispatch(
       view.state.tr.setNodeMarkup(
         getPos(),
@@ -57,6 +67,7 @@ const ImageComponent = ({
           <Resizable
             lockAspectRatio
             className="neeto-editor__image"
+            minWidth="100px"
             size={{ height, width }}
             onResizeStop={handleResizeStop}
             onResize={(_event, _direction, ref) =>
diff --git a/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js b/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js
index cd7c731e..1e4c1654 100644
--- a/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js
+++ b/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js
@@ -102,21 +102,9 @@ const useCustomExtensions = ({
   if (!isEmpty(mentions)) {
     const items = createMentionSuggestions(mentions);
 
-    customExtensions.push(
-      Mention.configure({
-        suggestion: {
-          items,
-        },
-      })
-    );
+    customExtensions.push(Mention.configure({ suggestion: { items } }));
 
-    customExtensions.push(
-      SpecialMentions.configure({
-        suggestion: {
-          items,
-        },
-      })
-    );
+    customExtensions.push(SpecialMentions.configure({ suggestion: { items } }));
   }
 
   if (!isEmpty(variables)) {