chore: add and run prettier

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>
-  );
+  )
 }