chore: add and run prettier

package-lock.json

@@ -29,6 +29,7 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "prettier": "^3.2.5",
         "typescript": "^5.1.6",
         "vite": "^5.1.0",
         "vite-tsconfig-paths": "^4.2.1"
@@ -2619,6 +2620,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/@remix-run/dev/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@remix-run/dev/node_modules/tsconfig-paths": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -11013,15 +11029,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
+      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.5",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"

remix/.eslintrc.cjs

@@ -8,8 +8,8 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 'latest',
+    ecmaVersion: "latest",
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
@@ -19,38 +19,38 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  ignorePatterns: ['build/**/*', 'node_modules/**/*', 'public/**/*'],
+  ignorePatterns: ["build/**/*", "node_modules/**/*", "public/**/*"],
 
   // Base config
-  extends: ['eslint:recommended'],
+  extends: ["eslint:recommended"],
 
   overrides: [
     // React
     {
-      files: ['**/*.{js,jsx,ts,tsx}'],
+      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ['react', 'jsx-a11y'],
+      plugins: ["react", "jsx-a11y"],
       rules: {
-        'react/jsx-uses-vars': 'error',
+        "react/jsx-uses-vars": "error",
-        'react/jsx-uses-react': 'error',
+        "react/jsx-uses-react": "error",
       },
       extends: [
-        'plugin:react/recommended',
+        "plugin:react/recommended",
-        'plugin:react/jsx-runtime',
+        "plugin:react/jsx-runtime",
-        'plugin:react-hooks/recommended',
+        "plugin:react-hooks/recommended",
-        'plugin:jsx-a11y/recommended',
+        "plugin:jsx-a11y/recommended",
       ],
       settings: {
         react: {
-          version: 'detect',
+          version: "detect",
         },
-        formComponents: ['Form'],
+        formComponents: ["Form"],
         linkComponents: [
-          { name: 'Link', linkAttribute: 'to' },
+          { name: "Link", linkAttribute: "to" },
-          { name: 'NavLink', linkAttribute: 'to' },
+          { name: "NavLink", linkAttribute: "to" },
         ],
-        'import/resolver': {
+        "import/resolver": {
           typescript: {
-            project: './remix/tsconfig.json',
+            project: "./remix/tsconfig.json",
           },
         },
       },
@@ -58,14 +58,14 @@ module.exports = {
 
     // Typescript
     {
-      files: ['**/*.{ts,tsx}'],
+      files: ["**/*.{ts,tsx}"],
-      plugins: ['@typescript-eslint', 'import'],
+      plugins: ["@typescript-eslint", "import"],
-      parser: '@typescript-eslint/parser',
+      parser: "@typescript-eslint/parser",
       settings: {
-        'import/internal-regex': '^~/',
+        "import/internal-regex": "^~/",
-        'import/resolver': {
+        "import/resolver": {
           node: {
-            extensions: ['.ts', '.tsx'],
+            extensions: [".ts", ".tsx"],
           },
           typescript: {
             alwaysTryTypes: true,
@@ -73,18 +73,18 @@ module.exports = {
         },
       },
       extends: [
-        'plugin:@typescript-eslint/recommended',
+        "plugin:@typescript-eslint/recommended",
-        'plugin:import/recommended',
+        "plugin:import/recommended",
-        'plugin:import/typescript',
+        "plugin:import/typescript",
       ],
     },
 
     // Node
     {
-      files: ['.eslintrc.cjs'],
+      files: [".eslintrc.cjs"],
       env: {
         node: true,
       },
     },
   ],
-};
+}

remix/.prettierignore

@@ -0,0 +1,11 @@
+# Directories
+build
+public
+
+# Files
+.eslintrc.cjs
+.prettierignore
+package.json
+package-lock.json
+prettier.config.cjs
+tsconfig.json

remix/app/components/ConfigForm.tsx

@@ -4,22 +4,22 @@ import {
   Help,
   Line,
   TextInput,
-} from "@contentstack/venus-components";
+} from "@contentstack/venus-components"
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState } from "react"
-import { ImageVaultDAMConfig } from "~/utils/imagevault";
+import { ImageVaultDAMConfig } from "~/utils/imagevault"
 
-import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types";
+import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types"
 
 export type ConfigFormProps = {
-  values: Partial<ImageVaultDAMConfig>;
+  values: Partial<ImageVaultDAMConfig>
-  setInstallationData: (data: IInstallationData) => void;
+  setInstallationData: (data: IInstallationData) => void
-};
+}
 
 export default function ConfigForm({
   values,
   setInstallationData,
 }: ConfigFormProps) {
-  const [finalValues, setFinalValues] = useState(values);
+  const [finalValues, setFinalValues] = useState(values)
 
   return (
     <div style={{ display: "grid", gap: "18px", margin: "18px" }}>
@@ -37,7 +37,7 @@ export default function ConfigForm({
             setFinalValues((prev) => ({
               ...prev,
               baseUrl: evt.target.value,
-            }));
+            }))
 
             setInstallationData({
               configuration: {
@@ -45,7 +45,7 @@ export default function ConfigForm({
                 baseUrl: evt.target.value,
               },
               serverConfiguration: {},
-            });
+            })
           }}
           required={true}
           willBlurOnEsc={true}
@@ -76,7 +76,7 @@ export default function ConfigForm({
             setFinalValues((prev) => ({
               ...prev,
               formatId: evt.target.value,
-            }));
+            }))
 
             setInstallationData({
               configuration: {
@@ -84,7 +84,7 @@ export default function ConfigForm({
                 formatId: evt.target.value,
               },
               serverConfiguration: {},
-            });
+            })
           }}
         />
       </Field>
@@ -109,7 +109,7 @@ export default function ConfigForm({
             setFinalValues((prev) => ({
               ...prev,
               imageVaultUrl: evt.target.value,
-            }));
+            }))
 
             setInstallationData({
               configuration: {
@@ -117,10 +117,10 @@ export default function ConfigForm({
                 imageVaultUrl: evt.target.value,
               },
               serverConfiguration: {},
-            });
+            })
           }}
         />
       </Field>
     </div>
-  );
+  )
 }

remix/app/components/Disclaimer.tsx

@@ -8,5 +8,5 @@ export default function Disclaimer() {
         save the entry at least once with a title before choosing an image.
       </p>
     </div>
-  );
+  )
 }

remix/app/components/FullSizeImage.tsx

@@ -1,4 +1,4 @@
-import { ModalBody, ModalHeader } from "@contentstack/venus-components";
+import { ModalBody, ModalHeader } from "@contentstack/venus-components"
 
 export default function FullSizeImage({
   title,
@@ -7,11 +7,11 @@ export default function FullSizeImage({
   alt,
   aspectRatio,
 }: {
-  title: string;
+  title: string
-  onClose: () => void;
+  onClose: () => void
-  imageUrl: string;
+  imageUrl: string
-  alt: string;
+  alt: string
-  aspectRatio: number;
+  aspectRatio: number
 }) {
   return (
     <>
@@ -37,5 +37,5 @@ export default function FullSizeImage({
         />
       </ModalBody>
     </>
-  );
+  )
 }

remix/app/components/ImageEditModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent } from "react"
 import {
   ModalFooter,
   ModalBody,
@@ -8,59 +8,59 @@ import {
   Field as FieldComponent,
   FieldLabel,
   TextInput,
-} from "@contentstack/venus-components";
+} from "@contentstack/venus-components"
 
-import type { InsertResponse } from "~/types/imagevault";
+import type { InsertResponse } from "~/types/imagevault"
 
 type ImageEditModalProps = {
-  fieldData: InsertResponse;
+  fieldData: InsertResponse
-  setData: (data: InsertResponse) => void;
+  setData: (data: InsertResponse) => void
-  closeModal: () => void;
+  closeModal: () => void
-};
+}
 
 export default function ImageEditModal({
   fieldData,
   closeModal,
   setData,
 }: ImageEditModalProps) {
-  const [altText, setAltText] = useState("");
+  const [altText, setAltText] = useState("")
-  const [caption, setCaption] = useState("");
+  const [caption, setCaption] = useState("")
 
-  const assetUrl = fieldData.MediaConversions[0].Url;
+  const assetUrl = fieldData.MediaConversions[0].Url
 
   useEffect(() => {
     if (fieldData.Metadata && fieldData.Metadata.length) {
       const altText = fieldData.Metadata.find((meta) =>
         meta.Name.includes("AltText_")
-      )?.Value;
+      )?.Value
 
       const caption = fieldData.Metadata.find((meta) =>
         meta.Name.includes("Title_")
-      )?.Value;
+      )?.Value
 
-      setAltText(altText ?? "");
+      setAltText(altText ?? "")
-      setCaption(caption ?? "");
+      setCaption(caption ?? "")
     }
-  }, [fieldData.Metadata]);
+  }, [fieldData.Metadata])
 
   function handleSave() {
-    const metaData = fieldData.Metadata ?? [];
+    const metaData = fieldData.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
-    });
+    })
 
     setData({
       ...fieldData,
       Metadata: newMetadata,
-    });
+    })
-    closeModal();
+    closeModal()
   }
 
   return (
@@ -120,5 +120,5 @@ export default function ImageEditModal({
         </ButtonGroup>
       </ModalFooter>
     </>
-  );
+  )
 }

remix/app/components/ImageVaultDAM.tsx

@@ -1,34 +1,34 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react"
-import { flushSync } from "react-dom";
+import { flushSync } from "react-dom"
 
 import {
   AssetCardVertical,
   Button,
   FieldLabel,
   cbModal,
-} from "@contentstack/venus-components";
+} from "@contentstack/venus-components"
-import ImageEditModal from "./ImageEditModal";
+import ImageEditModal from "./ImageEditModal"
-import FullSizeImage from "./FullSizeImage";
+import FullSizeImage from "./FullSizeImage"
-import { isInsertResponse, openImageVault } from "~/utils/imagevault";
+import { isInsertResponse, openImageVault } from "~/utils/imagevault"
 
-import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal";
+import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
-import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
+import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
-import type { InsertResponse } from "~/types/imagevault";
+import type { InsertResponse } from "~/types/imagevault"
 import type {
   EntryDataPublishDetails,
   ImageVaultDAMConfig,
-} from "~/utils/imagevault";
+} from "~/utils/imagevault"
-import type { Lang } from "~/types/lang";
+import type { Lang } from "~/types/lang"
 
 export type ImageVaultDAMProps = {
-  sdk: UiLocation;
+  sdk: UiLocation
-  config: ImageVaultDAMConfig;
+  config: ImageVaultDAMConfig
-  initialData: InsertResponse | null;
+  initialData: InsertResponse | null
-};
+}
 
 type DAMButtonProps = {
-  onClick: () => void;
+  onClick: () => void
-};
+}
 
 function DAMButton({ onClick }: DAMButtonProps) {
   return (
@@ -45,27 +45,27 @@ function DAMButton({ onClick }: DAMButtonProps) {
         Choose a file
       </Button>
     </div>
-  );
+  )
 }
 
 type MediaProps = {
-  media: InsertResponse;
+  media: InsertResponse
-  onDelete: () => void;
+  onDelete: () => void
-  onEdit: () => void;
+  onEdit: () => void
-};
+}
 
 function Media({ media, onDelete, onEdit }: MediaProps) {
   // MediaConversions is an array but will only contain one object
   const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
-    media.MediaConversions[0];
+    media.MediaConversions[0]
 
-  const assetUrl = Url;
+  const assetUrl = Url
-  const title = media.Name;
+  const title = media.Name
-  const width = FormatWidth || Width;
+  const width = FormatWidth || Width
-  const height = FormatHeight || Height;
+  const height = FormatHeight || Height
   const alt =
     media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
-    Name;
+    Name
 
   return (
     <div key={Url} style={{ fontFamily: "Inter" }}>
@@ -91,7 +91,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
                   title={Name}
                   aspectRatio={AspectRatio}
                 />
-              );
+              )
             },
             modalProps: {
               size: "max",
@@ -106,12 +106,12 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
                 overlay: {},
               },
             },
-          };
+          }
-          cbModal(cbModalProps);
+          cbModal(cbModalProps)
         }}
       />
     </div>
-  );
+  )
 }
 
 export default function ImageVaultDAM({
@@ -119,42 +119,42 @@ export default function ImageVaultDAM({
   config,
   initialData,
 }: ImageVaultDAMProps) {
-  const [media, setMedia] = useState<InsertResponse | null>(initialData);
+  const [media, setMedia] = useState<InsertResponse | null>(initialData)
 
-  const field = sdk.location.CustomField?.field;
+  const field = sdk.location.CustomField?.field
-  const frame = sdk.location.CustomField?.frame;
+  const frame = sdk.location.CustomField?.frame
-  const entry = sdk.location.CustomField?.entry;
+  const entry = sdk.location.CustomField?.entry
-  const stack = sdk.location.CustomField?.stack;
+  const stack = sdk.location.CustomField?.stack
 
   const updateFrameHeight = useCallback(() => {
     if (frame?.updateHeight) {
       // We need to recalculate the height of the iframe when an image is added.
       // Cannot use flushSync inside useEffect.
-      setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0);
+      setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
     }
-  }, [frame]);
+  }, [frame])
 
   const handleMedia = useCallback(
     (result?: InsertResponse) => {
       if (field && result) {
         flushSync(() => {
-          setMedia(result);
+          setMedia(result)
-          field.setData(result);
+          field.setData(result)
-          document.body.style.overflow = "hidden";
+          document.body.style.overflow = "hidden"
-        });
+        })
       }
 
-      updateFrameHeight();
+      updateFrameHeight()
     },
     [field, updateFrameHeight]
-  );
+  )
 
   useEffect(() => {
-    updateFrameHeight();
+    updateFrameHeight()
-  }, [updateFrameHeight]);
+  }, [updateFrameHeight])
 
   const handleEdit = useCallback(() => {
-    const fieldData = field?.getData() as InsertResponse;
+    const fieldData = field?.getData() as InsertResponse
     if (isInsertResponse(fieldData)) {
       cbModal({
         // @ts-expect-error: Component is badly typed
@@ -168,12 +168,12 @@ export default function ImageVaultDAM({
         modalProps: {
           size: "max",
         },
-      });
+      })
     }
-  }, [field, handleMedia]);
+  }, [field, handleMedia])
 
   if (!field || !frame || !entry || !stack) {
-    return <p>Initializing custom field...</p>;
+    return <p>Initializing custom field...</p>
   }
 
   const entryData: EntryDataPublishDetails = {
@@ -186,7 +186,7 @@ export default function ImageVaultDAM({
       entry.getField("title").getData().toString() ||
       `Untitled (${entry.content_type.uid})`,
     uid: entry._data.uid,
-  };
+  }
 
   return (
     <div>
@@ -200,8 +200,8 @@ export default function ImageVaultDAM({
         <Media
           media={media}
           onDelete={() => {
-            setMedia(null);
+            setMedia(null)
-            handleMedia();
+            handleMedia()
           }}
           onEdit={handleEdit}
         />
@@ -212,10 +212,10 @@ export default function ImageVaultDAM({
               config,
               entryData,
               onSuccess: handleMedia,
-            });
+            })
           }}
         />
       )}
     </div>
-  );
+  )
 }

remix/app/components/InvalidConfig.tsx

@@ -7,5 +7,5 @@ export default function InvalidConfig() {
         to run correctly.
       </p>
     </div>
-  );
+  )
 }

remix/app/entry.client.tsx

@@ -1,6 +1,6 @@
-import { RemixBrowser } from "@remix-run/react";
+import { RemixBrowser } from "@remix-run/react"
-import { startTransition, StrictMode } from "react";
+import { startTransition, StrictMode } from "react"
-import { hydrateRoot } from "react-dom/client";
+import { hydrateRoot } from "react-dom/client"
 
 startTransition(() => {
   hydrateRoot(
@@ -8,5 +8,5 @@ startTransition(() => {
     <StrictMode>
       <RemixBrowser />
     </StrictMode>
-  );
+  )
-});
+})

remix/app/entry.server.tsx

@@ -1,6 +1,6 @@
-import type { EntryContext } from "@remix-run/node";
+import type { EntryContext } from "@remix-run/node"
-import { RemixServer } from "@remix-run/react";
+import { RemixServer } from "@remix-run/react"
-import { renderToString } from "react-dom/server";
+import { renderToString } from "react-dom/server"
 
 export default function handleRequest(
   request: Request,
@@ -10,10 +10,10 @@ export default function handleRequest(
 ) {
   let html = renderToString(
     <RemixServer context={remixContext} url={request.url} />
-  );
+  )
-  html = "<!DOCTYPE html>\n" + html;
+  html = "<!DOCTYPE html>\n" + html
   return new Response(html, {
     headers: { "Content-Type": "text/html" },
     status: responseStatusCode,
-  });
+  })
 }

remix/app/hooks/useApp.ts

@@ -1,46 +1,46 @@
-import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
+import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react"
 
 export class SDKLoadingError extends Error {}
 
 export default function useApp() {
-  const [, setError] = useState();
+  const [, setError] = useState()
-  const [sdk, setSdk] = useState<UiLocation>();
+  const [sdk, setSdk] = useState<UiLocation>()
-  const [config, setConfig] = useState<Record<string, string>>();
+  const [config, setConfig] = useState<Record<string, string>>()
 
   useEffect(() => {
     async function init() {
       try {
         const ContentstackAppSDK = (await import("@contentstack/app-sdk"))
-          .default;
+          .default
-        const initSdk = await ContentstackAppSDK.init();
+        const initSdk = await ContentstackAppSDK.init()
-        setSdk(initSdk);
+        setSdk(initSdk)
 
-        const config = await initSdk.getConfig();
+        const config = await initSdk.getConfig()
-        setConfig(config);
+        setConfig(config)
 
-        const iframeWrapperRef = document.getElementById("field");
+        const iframeWrapperRef = document.getElementById("field")
-        window.iframeRef = iframeWrapperRef;
+        window.iframeRef = iframeWrapperRef
-        window.postRobot = initSdk.postRobot;
+        window.postRobot = initSdk.postRobot
       } catch (e) {
-        let err: Error;
+        let err: Error
         if (e instanceof Error) {
-          err = new SDKLoadingError(e.message);
+          err = new SDKLoadingError(e.message)
         }
 
         // Error boundaries do not support async functions. Workaround:
         // https://github.com/vercel/next.js/discussions/50564#discussioncomment-6063866
         setError(() => {
-          throw err;
+          throw err
-        });
+        })
       }
     }
 
-    init();
+    init()
-  }, [setSdk, setConfig]);
+  }, [setSdk, setConfig])
 
   return {
     sdk,
     config,
-  };
+  }
 }

remix/app/root.tsx

@@ -5,8 +5,8 @@ import {
   Scripts,
   ScrollRestoration,
   useRouteError,
-} from '@remix-run/react';
+} from "@remix-run/react"
-import { SDKLoadingError } from './hooks/useApp';
+import { SDKLoadingError } from "./hooks/useApp"
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -31,20 +31,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Scripts />
       </body>
     </html>
-  );
+  )
 }
 
 export default function App() {
-  return <Outlet />;
+  return <Outlet />
 }
 
 export function HydrateFallback() {
-  return <p>Loading...</p>;
+  return <p>Loading...</p>
 }
 
 export function ErrorBoundary() {
-  const error = useRouteError();
+  const error = useRouteError()
-  console.error(error);
+  console.error(error)
 
   return (
     <html lang="en">
@@ -68,5 +68,5 @@ export function ErrorBoundary() {
         <Scripts />
       </body>
     </html>
-  );
+  )
 }

remix/app/routes/_index.tsx

@@ -1,15 +1,15 @@
-import type { MetaFunction } from '@remix-run/node';
+import type { MetaFunction } from "@remix-run/node"
 
 export const meta: MetaFunction = () => {
   return [
-    { title: 'DAM: ImageVault integration' },
+    { title: "DAM: ImageVault integration" },
     {
-      name: 'description',
+      name: "description",
-      content: 'Integration of ImageVault as a DAM for Contentstack',
+      content: "Integration of ImageVault as a DAM for Contentstack",
     },
-  ];
+  ]
-};
+}
 
 export default function Index() {
-  return null;
+  return null
 }

remix/app/routes/config.tsx

@@ -1,14 +1,14 @@
-import { Suspense, lazy } from "react";
+import { Suspense, lazy } from "react"
-import useApp from "~/hooks/useApp";
+import useApp from "~/hooks/useApp"
 
-const ConfigForm = lazy(() => import("~/components/ConfigForm"));
+const ConfigForm = lazy(() => import("~/components/ConfigForm"))
 
 export default function ConfigPage() {
-  const { sdk, config } = useApp();
+  const { sdk, config } = useApp()
 
-  const appConfigWidget = sdk?.location.AppConfigWidget;
+  const appConfigWidget = sdk?.location.AppConfigWidget
 
-  const setInstallationData = appConfigWidget?.installation.setInstallationData;
+  const setInstallationData = appConfigWidget?.installation.setInstallationData
 
   if (!config) {
     return (
@@ -17,7 +17,7 @@ export default function ConfigPage() {
           Could not fetch the current configuration, please try again later!
         </p>
       </div>
-    );
+    )
   }
 
   if (!setInstallationData) {
@@ -27,12 +27,12 @@ export default function ConfigPage() {
           THe configuration cannot be updated right now, please try again later!
         </p>
       </div>
-    );
+    )
   }
 
   return (
     <Suspense fallback={<p>Loading config form...</p>}>
       <ConfigForm values={config} setInstallationData={setInstallationData} />
     </Suspense>
-  );
+  )
 }

remix/app/routes/field.tsx

@@ -1,26 +1,26 @@
-import { Suspense, lazy, useEffect, useState } from "react";
+import { Suspense, lazy, useEffect, useState } from "react"
-import { useScript } from "usehooks-ts";
+import { useScript } from "usehooks-ts"
-import useApp from "~/hooks/useApp";
+import useApp from "~/hooks/useApp"
 
-import Disclaimer from "~/components/Disclaimer";
+import Disclaimer from "~/components/Disclaimer"
-import InvalidConfig from "~/components/InvalidConfig";
+import InvalidConfig from "~/components/InvalidConfig"
 
-import { isImageVaultDAMConfig } from "~/utils/imagevault";
+import { isImageVaultDAMConfig } from "~/utils/imagevault"
-import type { InsertResponse } from "~/types/imagevault";
+import type { InsertResponse } from "~/types/imagevault"
 
-const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"));
+const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
 
 export default function Field() {
-  const { sdk, config } = useApp();
+  const { sdk, config } = useApp()
   const ivStatus = useScript(
     "/scripts/imagevault-insert-media/insertmediawindow.min.js"
-  );
+  )
 
-  const [showDisclaimer, setShowDisclaimer] = useState(false);
+  const [showDisclaimer, setShowDisclaimer] = useState(false)
-  const [fieldData, setFieldData] = useState<InsertResponse>();
+  const [fieldData, setFieldData] = useState<InsertResponse>()
 
-  const entry = sdk?.location.CustomField?.entry;
+  const entry = sdk?.location.CustomField?.entry
-  const field = sdk?.location.CustomField?.field;
+  const field = sdk?.location.CustomField?.field
 
   useEffect(() => {
     // If we can get field data from the SDK that means the entry has been
@@ -29,30 +29,30 @@ export default function Field() {
     // cannot be referred to by ImageVault. Entry title is also required by us.
     try {
       if (field && entry) {
-        const data = field.getData();
+        const data = field.getData()
-        const title = entry.getField("title").getData().toString();
+        const title = entry.getField("title").getData().toString()
         if (data && title) {
-          setFieldData(data as InsertResponse);
+          setFieldData(data as InsertResponse)
         } else {
-          throw new Error("Missing data or title for entry");
+          throw new Error("Missing data or title for entry")
         }
       }
     } catch (e) {
-      setShowDisclaimer(true);
+      setShowDisclaimer(true)
     }
-  }, [entry, field]);
+  }, [entry, field])
 
   if (showDisclaimer) {
-    return <Disclaimer />;
+    return <Disclaimer />
   }
 
-  const loaded = !!(fieldData && ivStatus === "ready" && sdk && config);
+  const loaded = !!(fieldData && ivStatus === "ready" && sdk && config)
 
   const initialData =
-    fieldData && Object.keys(fieldData).length > 0 ? fieldData : null;
+    fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
 
   if (!loaded) {
-    return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>;
+    return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
   }
 
   return (
@@ -65,5 +65,5 @@ export default function Field() {
         <InvalidConfig />
       )}
     </div>
-  );
+  )
 }

remix/prettier.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: false,
+  trailingComma: "es5",
+  singleQuote: false,
+  printWidth: 80,
+  tabWidth: 2,
+  endOfLine: "lf",
+}

remix/vite.config.ts

@@ -1,6 +1,6 @@
-import { vitePlugin as remix } from '@remix-run/dev';
+import { vitePlugin as remix } from "@remix-run/dev"
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite"
-import tsconfigPaths from 'vite-tsconfig-paths';
+import tsconfigPaths from "vite-tsconfig-paths"
 
 export default defineConfig({
   plugins: [
@@ -12,4 +12,4 @@ export default defineConfig({
   build: {
     emptyOutDir: true,
   },
-});
+})

rte/.prettierignore

@@ -0,0 +1,7 @@
+# Files
+.eslintrc.cjs
+.prettierignore
+package.json
+package-lock.json
+prettier.config.cjs
+tsconfig.json

rte/components/EmbedBtn.tsx

@@ -1,11 +1,11 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from "react"
-import { Tooltip } from '@contentstack/venus-components';
+import { Tooltip } from "@contentstack/venus-components"
 
 type EmbedBtnProps = PropsWithChildren & {
-  content: string;
+  content: string
-  onClick: (e: unknown) => void;
+  onClick: (e: unknown) => void
-  title: string;
+  title: string
-};
+}
 
 export default function EmbedBtn({
   content,
@@ -19,13 +19,13 @@ export default function EmbedBtn({
         id={title}
         type="button"
         onClick={(e) => {
-          e?.preventDefault();
+          e?.preventDefault()
-          e?.stopPropagation();
+          e?.stopPropagation()
-          onClick(e);
+          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';
+} from "@contentstack/venus-components"
-import { Path } from 'slate';
+import { Path } from "slate"
 
 import type {
   IRteParam,
   IRteElementType,
-} from '@contentstack/app-sdk/dist/src/RTE/types';
+} from "@contentstack/app-sdk/dist/src/RTE/types"
-import type { InsertResponse } from "~/types/imagevault";
+import type { InsertResponse } from "~/types/imagevault"
 
 enum DropdownValues {
   center = "center",
@@ -26,10 +26,10 @@ enum DropdownValues {
 }
 
 type DropDownItem = {
-  label: string;
+  label: string
-  value: DropdownValues;
+  value: DropdownValues
-  type: string;
+  type: string
-};
+}
 
 const dropdownList: DropDownItem[] = [
   {
@@ -52,16 +52,16 @@ const dropdownList: DropDownItem[] = [
     value: DropdownValues.right,
     type: "select",
   },
-];
+]
 
 type ImageEditModalProps = {
   element: IRteElementType & {
-    attrs: InsertResponse;
+    attrs: InsertResponse
-  };
+  }
-  rte: IRteParam;
+  rte: IRteParam
-  closeModal: () => void;
+  closeModal: () => void
-  path: Path;
+  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 [altText, setAltText] = useState("")
-  const [caption, setCaption] = 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 ?? "");
+      setAltText(altText ?? "")
-      setCaption(caption ?? "");
+      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 = {};
+        newStyle = {}
-        break;
+        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 React, { useRef, useCallback, PropsWithChildren } from "react"
-import { Tooltip, Icon, cbModal } from '@contentstack/venus-components';
+import { Tooltip, Icon, cbModal } from "@contentstack/venus-components"
 
-import { Resizable } from 're-resizable';
+import { Resizable } from "re-resizable"
-import EmbedBtn from './EmbedBtn';
+import EmbedBtn from "./EmbedBtn"
-import ImageEditModal from './ImageEditModal';
+import ImageEditModal from "./ImageEditModal"
 
 import type {
   IRteParam,
   IRteElementType,
-} from '@contentstack/app-sdk/dist/src/RTE/types';
+} from "@contentstack/app-sdk/dist/src/RTE/types"
-import type { InsertResponse } from '~/types/imagevault';
+import type { InsertResponse } from "~/types/imagevault"
 
 type ImageElementProps = PropsWithChildren & {
-  element: IRteElementType & { attrs: InsertResponse };
+  element: IRteElementType & { attrs: InsertResponse }
-  rte: IRteParam;
+  rte: IRteParam
-};
+}
 export function ImageElement({ children, element, rte }: ImageElementProps) {
-  const assetUrl = element.attrs.MediaConversions[0].Url;
+  const assetUrl = element.attrs.MediaConversions[0].Url
-  const isSelected = rte?.selection?.isSelected();
+  const isSelected = rte?.selection?.isSelected()
-  const isFocused = rte?.selection?.isFocused();
+  const isFocused = rte?.selection?.isFocused()
-  const isHighlight = isFocused && isSelected;
+  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 { attrs: elementAttrs } = element
-    const { offsetWidth: width, offsetHeight: height } = imgRef?.current ?? {};
+    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>
-  );
+  )
 }

rte/env.d.ts

@@ -1 +1 @@
-declare const IS_DEV: boolean;
+declare const IS_DEV: boolean

rte/main.tsx

@@ -1,70 +1,70 @@
-import React from 'react';
+import React from "react"
-import ContentstackSDK from '@contentstack/app-sdk';
+import ContentstackSDK from "@contentstack/app-sdk"
 
-import { ImageElement } from '~/components/ImageElement';
+import { ImageElement } from "~/components/ImageElement"
 
-import { Icon } from '@contentstack/venus-components';
+import { Icon } from "@contentstack/venus-components"
-import { openImageVault } from '~/utils/imagevault';
+import { openImageVault } from "~/utils/imagevault"
 
-import type { Lang } from '~/types/lang';
+import type { Lang } from "~/types/lang"
 import type {
   ContentstackEmbeddedData,
   ContentstackPluginDefinition,
   ExtractedContentstackEmbeddedData,
-} from '~/types/contentstack';
+} from "~/types/contentstack"
 
 function findThisPlugin(ext: ContentstackPluginDefinition) {
-  return ext.type === 'rte_plugin' && ext.title === 'ImageVault';
+  return ext.type === "rte_plugin" && ext.title === "ImageVault"
 }
 
 async function loadScript(url: string) {
   return new Promise((resolve, reject) => {
     if (!document) {
-      throw new Error('Run in browser only');
+      throw new Error("Run in browser only")
     }
 
-    const head = document.head || document.getElementsByTagName('head')[0];
+    const head = document.head || document.getElementsByTagName("head")[0]
 
-    const script = document.createElement('script');
+    const script = document.createElement("script")
-    script.type = 'text/javascript';
+    script.type = "text/javascript"
-    script.async = true;
+    script.async = true
-    script.src = url;
+    script.src = url
 
     script.onload = function () {
-      this.onerror = this.onload = null;
+      this.onerror = this.onload = null
-      resolve(window.ImageVault);
+      resolve(window.ImageVault)
-    };
+    }
 
     script.onerror = function () {
-      this.onerror = this.onload = null;
+      this.onerror = this.onload = null
-      reject(`Failed to load ${this.src}`);
+      reject(`Failed to load ${this.src}`)
-    };
+    }
 
-    head.appendChild(script);
+    head.appendChild(script)
-  });
+  })
 }
 
 function extractContentstackEmbeddedData(
   jwtLike: string
 ): ExtractedContentstackEmbeddedData | null {
   try {
-    const base64str = jwtLike.replace(/-/g, "+").replace(/_/g, "/");
+    const base64str = jwtLike.replace(/-/g, "+").replace(/_/g, "/")
     const jsonStr = decodeURIComponent(
       window
         .atob(base64str)
         .split("")
         .map(function (c) {
-          return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+          return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)
         })
         .join("")
-    );
+    )
 
-    const json = JSON.parse(jsonStr);
+    const json = JSON.parse(jsonStr)
-    json.exports = JSON.parse(json.exports);
+    json.exports = JSON.parse(json.exports)
-    json.props.value = JSON.parse(json.props.value);
+    json.props.value = JSON.parse(json.props.value)
 
     if (IS_DEV) {
-      console.log(`Contentstack Embedded Data`, json);
+      console.log(`Contentstack Embedded Data`, json)
     }
 
     const {
@@ -77,12 +77,12 @@ function extractContentstackEmbeddedData(
         stack: { api_key },
         branch,
       },
-    }: ContentstackEmbeddedData = json.props.value;
+    }: ContentstackEmbeddedData = json.props.value
 
-    const titleField = schema.find((f) => f.uid === "title");
+    const titleField = schema.find((f) => f.uid === "title")
     // We force this value with ! because we know it exists.
     // Otherwise this code would not run.
-    const plugin = extensions.find(findThisPlugin)!;
+    const plugin = extensions.find(findThisPlugin)!
 
     return {
       stack: {
@@ -101,43 +101,43 @@ function extractContentstackEmbeddedData(
         uid: entryMetadata.entryUid,
       },
       plugin,
-    };
+    }
   } catch (e) {
-    console.log(`Unable to parse JWT like: ${jwtLike}`);
+    console.log(`Unable to parse JWT like: ${jwtLike}`)
   }
-  return null;
+  return null
 }
 
-let ivloaded = false;
+let ivloaded = false
 function loadIV(plugin: ContentstackPluginDefinition) {
   if (plugin.src) {
-    const url = new URL(plugin.src);
+    const url = new URL(plugin.src)
-    url.pathname = "/scripts/imagevault-insert-media/insertmediawindow.min.js";
+    url.pathname = "/scripts/imagevault-insert-media/insertmediawindow.min.js"
     if (IS_DEV) {
-      console.log(`Loading script: ${url.toString()}`);
+      console.log(`Loading script: ${url.toString()}`)
     }
-    loadScript(url.toString());
+    loadScript(url.toString())
-    ivloaded = true;
+    ivloaded = true
   }
 }
 
 async function init() {
   try {
-    const sdk = await ContentstackSDK.init();
+    const sdk = await ContentstackSDK.init()
 
-    const extensionObj = sdk?.location;
+    const extensionObj = sdk?.location
-    const RTE = extensionObj?.RTEPlugin;
+    const RTE = extensionObj?.RTEPlugin
 
-    let embeddedData: ExtractedContentstackEmbeddedData | null = null;
+    let embeddedData: ExtractedContentstackEmbeddedData | null = null
-    const jwtLike = window.name.split("__").find((str) => str.startsWith("ey"));
+    const jwtLike = window.name.split("__").find((str) => str.startsWith("ey"))
     if (jwtLike) {
-      embeddedData = extractContentstackEmbeddedData(jwtLike);
+      embeddedData = extractContentstackEmbeddedData(jwtLike)
       if (embeddedData?.plugin) {
-        loadIV(embeddedData.plugin);
+        loadIV(embeddedData.plugin)
       }
     }
 
-    if (!RTE) return;
+    if (!RTE) return
 
     const ImageVault = RTE("ImageVault", (rte) => {
       if (rte) {
@@ -145,11 +145,11 @@ async function init() {
           // Loading failed via embedded data above, try again with data inside RTE
           // @ts-expect-error: incorrect typings, requestProps is available at runtime
           const extensions = rte._adv.editor.requestProps
-            .extensions as ContentstackPluginDefinition[];
+            .extensions as ContentstackPluginDefinition[]
-          const plugin = extensions.find(findThisPlugin);
+          const plugin = extensions.find(findThisPlugin)
 
           if (plugin) {
-            loadIV(plugin);
+            loadIV(plugin)
           }
         }
       }
@@ -163,35 +163,35 @@ async function init() {
               <ImageElement element={props.element} rte={rte}>
                 {props.children}
               </ImageElement>
-            );
+            )
           } else {
-            console.error("No instance of RTE found");
+            console.error("No instance of RTE found")
             return (
               <p>An unexpected error occured, see console for more info.</p>
-            );
+            )
           }
         },
         display: ["toolbar"],
         elementType: ["void"],
-      };
+      }
-    });
+    })
 
     ImageVault.on("exec", async (rte) => {
       if (rte) {
-        const savedSelection = rte?.selection?.get() ?? undefined;
+        const savedSelection = rte?.selection?.get() ?? undefined
 
         // @ts-expect-error: Added at runtime
-        const appConfig = await rte.getConfig();
+        const appConfig = await rte.getConfig()
 
         // This is the configuration for this instance of the plugin.
         // You edit this in the content types settings RTE plugin section.
         // @ts-expect-error: Added at runtime
-        const pluginConfig = await rte.getFieldConfig();
+        const pluginConfig = await rte.getFieldConfig()
 
         const config = {
           ...appConfig,
           ...pluginConfig,
-        };
+        }
 
         openImageVault({
           config,
@@ -218,17 +218,17 @@ async function init() {
                 children: [{ text: "" }],
               },
               { at: savedSelection }
-            );
+            )
           },
-        });
+        })
       }
-    });
+    })
     return {
       ImageVault,
-    };
+    }
   } catch (e) {
-    console.error({ e });
+    console.error({ e })
   }
 }
 
-export default init();
+export default init()

rte/prettier.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: false,
+  trailingComma: "es5",
+  singleQuote: false,
+  printWidth: 80,
+  tabWidth: 2,
+  endOfLine: "lf",
+}

rte/vite.config.ts

@@ -1,28 +1,28 @@
-import { resolve } from 'path';
+import { resolve } from "path"
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite"
-import tsconfigPaths from 'vite-tsconfig-paths';
+import tsconfigPaths from "vite-tsconfig-paths"
 
 export default defineConfig({
   plugins: [tsconfigPaths()],
   define: {
-    IS_DEV: process.env.IS_DEV === 'true' ? true : false,
+    IS_DEV: process.env.IS_DEV === "true" ? true : false,
   },
   publicDir: false,
   build: {
-    sourcemap: process.env.IS_DEV ? 'inline' : 'hidden',
+    sourcemap: process.env.IS_DEV ? "inline" : "hidden",
     emptyOutDir: true,
     lib: {
-      entry: resolve(__dirname, 'main.tsx'),
+      entry: resolve(__dirname, "main.tsx"),
-      name: 'csiv',
+      name: "csiv",
-      fileName: () => (process.env.IS_DEV ? 'csiv.js' : 'csiv-[hash].js'),
+      fileName: () => (process.env.IS_DEV ? "csiv.js" : "csiv-[hash].js"),
       // @ts-expect-error: 'system' not valid by typings, but works with Rollup
-      formats: ['system'],
+      formats: ["system"],
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@contentstack/venus-components'],
+      external: ["react", "react-dom", "@contentstack/venus-components"],
       output: {
-        dir: '../remix/public/build/rte',
+        dir: "../remix/public/build/rte",
       },
     },
   },
-});
+})