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

web/components/inbox/main-content.tsx

@@ -246,6 +246,7 @@ export const InboxMainContent: React.FC = observer(() => {
                 issue={{
                   name: issueDetails.name,
                   description_html: issueDetails.description_html,
+                  id: issueDetails.id,
                 }}
                 handleFormSubmit={submitChanges}
                 isAllowed={isAllowed || user?.id === issueDetails.created_by}

web/components/issues/description-form.tsx

@@ -21,6 +21,7 @@ export interface IssueDetailsProps {
   issue: {
     name: string;
     description_html: string;
+    id: string;
     project_id?: string;
   };
   workspaceSlug: string;
@@ -55,12 +56,14 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
   });
 
   const [localTitleValue, setLocalTitleValue] = useState("");
-  const issueTitleCurrentValue = watch("name");
+  const [localIssueDescription, setLocalIssueDescription] = useState("");
+
   useEffect(() => {
-    if (localTitleValue === "" && issueTitleCurrentValue !== "") {
-      setLocalTitleValue(issueTitleCurrentValue);
+    if (issue.id) {
+      setLocalIssueDescription(issue.description_html);
+      setLocalTitleValue(issue.name);
     }
-  }, [issueTitleCurrentValue, localTitleValue]);
+  }, [issue.id]);
 
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<IIssue>) => {
@@ -150,7 +153,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
               deleteFile={fileService.deleteImage}
               restoreFile={fileService.restoreImage}
-              value={value}
+              value={localIssueDescription}
+              text_html={localIssueDescription}
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               dragDropEnabled

web/components/issues/issue-peek-overview/issue-detail.tsx

@@ -78,13 +78,15 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
     [issue, issueUpdate]
   );
 
-  const [localTitleValue, setLocalTitleValue] = useState(issue.name);
-  const issueTitleCurrentValue = watch("name");
+  const [localTitleValue, setLocalTitleValue] = useState("");
+  const [localIssueDescription, setLocalIssueDescription] = useState("");
+
   useEffect(() => {
-    if (localTitleValue === "" && issueTitleCurrentValue !== "") {
-      setLocalTitleValue(issueTitleCurrentValue);
+    if (issue.id) {
+      setLocalIssueDescription(issue.description_html);
+      setLocalTitleValue(issue.name);
     }
-  }, [issueTitleCurrentValue, localTitleValue]);
+  }, [issue.id]);
 
   useEffect(() => {
     setLocalTitleValue(issue.name);
@@ -170,7 +172,8 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
               uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
               deleteFile={fileService.deleteImage}
               restoreFile={fileService.restoreImage}
-              value={value}
+              value={localIssueDescription}
+              text_html={localIssueDescription}
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               dragDropEnabled

web/styles/editor.css

@@ -23,8 +23,6 @@
 /* Custom image styles */
 
 .ProseMirror img {
-  min-width: 100px;
-  min-height: 100px;
   transition: filter 0.1s ease-in-out;
 
   &:hover {
@@ -254,15 +252,15 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   padding: 0;
 }
 
-.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(img):not(pre) {
-  outline: none !important;
-  border-radius: 0.2rem;
-  background-color: rgb(var(--color-background-90));
-  border: 1px solid #5abbf7;
-  padding: 4px 2px 4px 2px;
-  transition: background-color 0.2s;
-  box-shadow: none;
-}
+/* .ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-image):not(pre) { */
+/*   outline: none !important; */
+/*   border-radius: 0.2rem; */
+/*   background-color: rgb(var(--color-background-90)); */
+/*   border: 1px solid #5abbf7; */
+/*   padding: 4px 2px 4px 2px; */
+/*   transition: background-color 0.2s; */
+/*   box-shadow: none; */
+/* } */
 
 .drag-handle {
   position: fixed;
@@ -328,3 +326,8 @@ div[data-type="horizontalRule"] {
     border-bottom: 1px solid rgb(var(--color-text-100));
   }
 }
+
+/* image resizer */
+.moveable-control-box {
+  z-index: 10 !important;
+}