chore: add and run prettier

rte/components/EmbedBtn.tsx

@@ -1,11 +1,11 @@
-import React, { PropsWithChildren } from 'react';
-import { Tooltip } from '@contentstack/venus-components';
+import React, { PropsWithChildren } from "react"
+import { Tooltip } from "@contentstack/venus-components"
 
 type EmbedBtnProps = PropsWithChildren & {
-  content: string;
-  onClick: (e: unknown) => void;
-  title: string;
-};
+  content: string
+  onClick: (e: unknown) => void
+  title: string
+}
 
 export default function EmbedBtn({
   content,
@@ -19,13 +19,13 @@ export default function EmbedBtn({
         id={title}
         type="button"
         onClick={(e) => {
-          e?.preventDefault();
-          e?.stopPropagation();
-          onClick(e);
+          e?.preventDefault()
+          e?.stopPropagation()
+          onClick(e)
         }}
       >
         {children}
       </button>
     </Tooltip>
-  );
+  )
 }

rte/components/ImageEditModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ChangeEvent } from 'react';
+import React, { useState, useEffect, ChangeEvent } from "react"
 import {
   ModalFooter,
   ModalBody,
@@ -9,14 +9,14 @@ import {
   FieldLabel,
   TextInput,
   Select,
-} from '@contentstack/venus-components';
-import { Path } from 'slate';
+} from "@contentstack/venus-components"
+import { Path } from "slate"
 
 import type {
   IRteParam,
   IRteElementType,
-} from '@contentstack/app-sdk/dist/src/RTE/types';
-import type { InsertResponse } from "~/types/imagevault";
+} from "@contentstack/app-sdk/dist/src/RTE/types"
+import type { InsertResponse } from "~/types/imagevault"
 
 enum DropdownValues {
   center = "center",
@@ -26,10 +26,10 @@ enum DropdownValues {
 }
 
 type DropDownItem = {
-  label: string;
-  value: DropdownValues;
-  type: string;
-};
+  label: string
+  value: DropdownValues
+  type: string
+}
 
 const dropdownList: DropDownItem[] = [
   {
@@ -52,16 +52,16 @@ const dropdownList: DropDownItem[] = [
     value: DropdownValues.right,
     type: "select",
   },
-];
+]
 
 type ImageEditModalProps = {
   element: IRteElementType & {
-    attrs: InsertResponse;
-  };
-  rte: IRteParam;
-  closeModal: () => void;
-  path: Path;
-};
+    attrs: InsertResponse
+  }
+  rte: IRteParam
+  closeModal: () => void
+  path: Path
+}
 
 export default function ImageEditModal({
   element,
@@ -73,29 +73,29 @@ export default function ImageEditModal({
     label: "None",
     value: DropdownValues.none,
     type: "select",
-  });
-  const [altText, setAltText] = useState("");
-  const [caption, setCaption] = useState("");
+  })
+  const [altText, setAltText] = useState("")
+  const [caption, setCaption] = useState("")
 
-  const assetUrl = element.attrs.MediaConversions[0].Url;
+  const assetUrl = element.attrs.MediaConversions[0].Url
 
   useEffect(() => {
     if (element.attrs.Metadata && element.attrs.Metadata.length) {
       const altText = element.attrs.Metadata.find((meta) =>
         meta.Name.includes("AltText_")
-      )?.Value;
+      )?.Value
 
       const caption = element.attrs.Metadata.find((meta) =>
         meta.Name.includes("Title_")
-      )?.Value;
+      )?.Value
 
-      setAltText(altText ?? "");
-      setCaption(caption ?? "");
+      setAltText(altText ?? "")
+      setCaption(caption ?? "")
     }
-  }, [element.attrs.Metadata]);
+  }, [element.attrs.Metadata])
 
   function handleSave() {
-    let newStyle;
+    let newStyle
 
     switch (alignment.value) {
       case DropdownValues.center:
@@ -106,25 +106,25 @@ export default function ImageEditModal({
           maxWidth: element.attrs.width
             ? `${element.attrs.width}px`
             : undefined,
-        };
-        break;
+        }
+        break
       case DropdownValues.none:
       default:
-        newStyle = {};
-        break;
+        newStyle = {}
+        break
     }
 
-    const metaData = element.attrs.Metadata ?? [];
+    const metaData = element.attrs.Metadata ?? []
 
     const newMetadata = metaData.map((meta) => {
       if (meta.Name.includes("AltText_")) {
-        return { ...meta, Value: altText };
+        return { ...meta, Value: altText }
       }
       if (meta.Name.includes("Title_")) {
-        return { ...meta, Value: caption };
+        return { ...meta, Value: caption }
       }
-      return meta;
-    });
+      return meta
+    })
 
     rte._adv.Transforms?.setNodes<IRteElementType>(
       rte._adv.editor,
@@ -137,9 +137,9 @@ export default function ImageEditModal({
         },
       },
       { at: path }
-    );
+    )
 
-    closeModal();
+    closeModal()
   }
 
   return (
@@ -168,7 +168,7 @@ export default function ImageEditModal({
               selectLabel="Alignment"
               value={alignment}
               onChange={(e: DropDownItem) => {
-                setAlignment(e);
+                setAlignment(e)
               }}
               options={dropdownList}
             />
@@ -209,5 +209,5 @@ export default function ImageEditModal({
         </ButtonGroup>
       </ModalFooter>
     </>
-  );
+  )
 }

rte/components/ImageElement.tsx

@@ -1,27 +1,27 @@
-import React, { useRef, useCallback, PropsWithChildren } from 'react';
-import { Tooltip, Icon, cbModal } from '@contentstack/venus-components';
+import React, { useRef, useCallback, PropsWithChildren } from "react"
+import { Tooltip, Icon, cbModal } from "@contentstack/venus-components"
 
-import { Resizable } from 're-resizable';
-import EmbedBtn from './EmbedBtn';
-import ImageEditModal from './ImageEditModal';
+import { Resizable } from "re-resizable"
+import EmbedBtn from "./EmbedBtn"
+import ImageEditModal from "./ImageEditModal"
 
 import type {
   IRteParam,
   IRteElementType,
-} from '@contentstack/app-sdk/dist/src/RTE/types';
-import type { InsertResponse } from '~/types/imagevault';
+} from "@contentstack/app-sdk/dist/src/RTE/types"
+import type { InsertResponse } from "~/types/imagevault"
 
 type ImageElementProps = PropsWithChildren & {
-  element: IRteElementType & { attrs: InsertResponse };
-  rte: IRteParam;
-};
+  element: IRteElementType & { attrs: InsertResponse }
+  rte: IRteParam
+}
 export function ImageElement({ children, element, rte }: ImageElementProps) {
-  const assetUrl = element.attrs.MediaConversions[0].Url;
-  const isSelected = rte?.selection?.isSelected();
-  const isFocused = rte?.selection?.isFocused();
-  const isHighlight = isFocused && isSelected;
+  const assetUrl = element.attrs.MediaConversions[0].Url
+  const isSelected = rte?.selection?.isSelected()
+  const isFocused = rte?.selection?.isFocused()
+  const isHighlight = isFocused && isSelected
 
-  const imgRef = useRef<HTMLDivElement | null>(null);
+  const imgRef = useRef<HTMLDivElement | null>(null)
 
   const handleEdit = useCallback(() => {
     cbModal({
@@ -36,8 +36,8 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
       modalProps: {
         size: "max",
       },
-    });
-  }, [element, rte]);
+    })
+  }, [element, rte])
 
   const ToolTipButtons = () => {
     return (
@@ -54,12 +54,12 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
           <Icon icon="Trash" />
         </EmbedBtn>
       </div>
-    );
-  };
+    )
+  }
 
   const onResizeStop = () => {
-    const { attrs: elementAttrs } = element;
-    const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {};
+    const { attrs: elementAttrs } = element
+    const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {}
 
     const newAttrs: { [key: string]: unknown } = {
       ...elementAttrs,
@@ -70,24 +70,24 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
       ...(width && height
         ? { width: `${width.toString()}px`, height: `${height.toString()}px` }
         : {}),
-    };
+    }
 
     rte?._adv?.Transforms?.setNodes<IRteElementType>(
       rte._adv.editor,
       { attrs: newAttrs },
       { at: rte.getPath(element) }
-    );
-  };
+    )
+  }
 
-  let alignmentStyles = {};
+  let alignmentStyles = {}
   const marginAlignment: Record<string, { [key: string]: string }> = {
     center: { margin: "auto" },
     left: { marginRight: "auto" },
     right: { marginLeft: "auto" },
-  };
+  }
 
   if (typeof element.attrs.position === "string") {
-    alignmentStyles = marginAlignment[element.attrs.position];
+    alignmentStyles = marginAlignment[element.attrs.position]
   }
 
   return (
@@ -137,7 +137,7 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
               <img
                 src={assetUrl}
                 onError={(event) => {
-                  event.currentTarget.src = "https://placehold.co/600x400";
+                  event.currentTarget.src = "https://placehold.co/600x400"
                 }}
                 style={{
                   width: "100%",
@@ -169,5 +169,5 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
         </span>
       </Tooltip>
     </div>
-  );
+  )
 }