fix: Image Resizing and PR (#2996)

* added image min width and height programatically

* fixed editor initialization for peek view and inbox issues

* fixed ts issues with issue id in inbox

packages/editor/core/src/index.ts

@@ -15,8 +15,8 @@ export { EditorContainer } from "./ui/components/editor-container";
 export { EditorContentWrapper } from "./ui/components/editor-content";
 
 // hooks
-export { useEditor } from "./ui/hooks/useEditor";
-export { useReadOnlyEditor } from "./ui/hooks/useReadOnlyEditor";
+export { useEditor } from "./ui/hooks/use-editor";
+export { useReadOnlyEditor } from "./ui/hooks/use-read-only-editor";
 
 // helper items
 export * from "./ui/menus/menu-items";

packages/editor/core/src/ui/extensions/image/image-resize.tsx

@@ -1,4 +1,5 @@
 import { Editor } from "@tiptap/react";
+import { useState } from "react";
 import Moveable from "react-moveable";
 
 export const ImageResizer = ({ editor }: { editor: Editor }) => {
@@ -17,6 +18,8 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
     }
   };
 
+  const [aspectRatio, setAspectRatio] = useState(1);
+
   return (
     <>
       <Moveable
@@ -28,9 +31,29 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         keepRatio
         resizable
         throttleResize={0}
+        onResizeStart={() => {
+          const imageInfo = document.querySelector(
+            ".ProseMirror-selectednode",
+          ) as HTMLImageElement;
+          if (imageInfo) {
+            const originalWidth = Number(imageInfo.width);
+            const originalHeight = Number(imageInfo.height);
+            setAspectRatio(originalWidth / originalHeight);
+          }
+        }}
         onResize={({ target, width, height, delta }: any) => {
-          delta[0] && (target!.style.width = `${width}px`);
-          delta[1] && (target!.style.height = `${height}px`);
+          if (delta[0]) {
+            const newWidth = Math.max(width, 100);
+            const newHeight = newWidth / aspectRatio;
+            target!.style.width = `${newWidth}px`;
+            target!.style.height = `${newHeight}px`;
+          }
+          if (delta[1]) {
+            const newHeight = Math.max(height, 100);
+            const newWidth = newHeight * aspectRatio;
+            target!.style.height = `${newHeight}px`;
+            target!.style.width = `${newWidth}px`;
+          }
         }}
         onResizeEnd={() => {
           updateMediaSize();

packages/editor/core/src/ui/hooks/use-editor.tsx

@@ -4,7 +4,6 @@ import { CoreEditorProps } from "../props";
 import { CoreEditorExtensions } from "../extensions";
 import { EditorProps } from "@tiptap/pm/view";
 import { getTrimmedHTML } from "../../lib/utils";
-import { useInitializedContent } from "./useInitializedContent";
 import {
   DeleteImage,
   IMentionSuggestion,
@@ -15,6 +14,7 @@ import {
 interface CustomEditorProps {
   uploadFile: UploadImage;
   restoreFile: RestoreImage;
+  text_html?: string;
   deleteFile: DeleteImage;
   cancelUploadImage?: () => any;
   setIsSubmitting?: (
@@ -38,6 +38,7 @@ export const useEditor = ({
   cancelUploadImage,
   editorProps = {},
   value,
+  text_html,
   extensions = [],
   onStart,
   onChange,
@@ -78,11 +79,9 @@ export const useEditor = ({
         onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
       },
     },
-    [],
+    [text_html],
   );
 
-  useInitializedContent(editor, value);
-
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
 

packages/editor/core/src/ui/hooks/use-read-only-editor.tsx

@@ -5,8 +5,8 @@ import {
   MutableRefObject,
   useEffect,
 } from "react";
-import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
-import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
+import { CoreReadOnlyEditorExtensions } from "../read-only/extensions";
+import { CoreReadOnlyEditorProps } from "../read-only/props";
 import { EditorProps } from "@tiptap/pm/view";
 import { IMentionSuggestion } from "@plane/editor-types";
 

packages/editor/core/src/ui/hooks/useInitializedContent.tsx

@@ -1,19 +0,0 @@
-import { Editor } from "@tiptap/react";
-import { useEffect, useRef } from "react";
-
-export const useInitializedContent = (editor: Editor | null, value: string) => {
-  const hasInitializedContent = useRef(false);
-
-  useEffect(() => {
-    if (editor) {
-      const cleanedValue =
-        typeof value === "string" && value.trim() !== "" ? value : "<p></p>";
-      if (cleanedValue !== "<p></p>" && !hasInitializedContent.current) {
-        editor.commands.setContent(cleanedValue);
-        hasInitializedContent.current = true;
-      } else if (cleanedValue === "<p></p>" && hasInitializedContent.current) {
-        hasInitializedContent.current = false;
-      }
-    }
-  }, [value, editor]);
-};

packages/editor/core/src/ui/index.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Extension } from "@tiptap/react";
 import { getEditorClassNames } from "../lib/utils";
 import { EditorProps } from "@tiptap/pm/view";
-import { useEditor } from "./hooks/useEditor";
+import { useEditor } from "./hooks/use-editor";
 import { EditorContainer } from "../ui/components/editor-container";
 import { EditorContentWrapper } from "../ui/components/editor-content";
 import {