Feat/SW-3031 imagevault updates

* chore(SW-3031): Updated dependencies
* feat(SW-3031): Added Imagevault Id to title and updated delete functionality

Approved-by: Michael Zetterberg

.prettierignore

@@ -1,7 +1,7 @@
 **/build
 **/public
 **/package.json
-**/.eslintrc.cjs
+**/eslint.config.mjs
 **/tsconfig.json
 
 .husky

package.json

@@ -17,32 +17,34 @@
     "dev:rte": "cd rte && npm run dev",
     "prepare": "husky"
   },
-  "overrides": {
-    "@types/react": "18.2.20"
-  },
   "dependencies": {
-    "@contentstack/app-sdk": "^2.1.1",
+    "@contentstack/app-sdk": "^2.3.1",
-    "@contentstack/venus-components": "2.2.5",
+    "@contentstack/venus-components": "^3.0.0",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1"
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react-dom": "^18.3.1",
+    "@eslint/compat": "^1.3.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@eslint/eslintrc": "^3.3.1",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@eslint/js": "^9.29.0",
-    "concurrently": "^8.2.2",
+    "@types/react-dom": "^19.1.6",
-    "eslint": "^8.57.1",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "@typescript-eslint/parser": "^8.34.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.29.0",
+    "eslint-import-resolver-typescript": "^4.4.3",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
-    "husky": "^9.1.6",
+    "globals": "^16.2.0",
-    "lint-staged": "^15.2.10",
+    "husky": "^9.1.7",
-    "prettier": "^3.3.3",
+    "lint-staged": "^16.1.2",
-    "typescript": "^5.6.3",
+    "prettier": "^3.5.3",
-    "vite": "^5.4.10",
+    "typescript": "^5.8.3",
-    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite": "^6.3.5",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-plugin-devtools-json": "^0.2.0",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

remix/.eslintrc.cjs

@@ -1,90 +0,0 @@
-/**
- * This is intended to be a basic starting point for linting in your app.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-  ignorePatterns: ["build/**/*", "node_modules/**/*", "public/**/*"],
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      rules: {
-        "react/jsx-uses-vars": "error",
-        "react/jsx-uses-react": "error",
-      },
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {
-            project: "./remix/tsconfig.json",
-          },
-        },
-      },
-    },
-
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
-
-    // Node
-    {
-      files: [".eslintrc.cjs"],
-      env: {
-        node: true,
-      },
-    },
-  ],
-}

remix/app/components/ConfigForm.tsx

@@ -27,23 +27,20 @@ export default function ConfigForm({
         <FieldLabel version="v2" htmlFor="baseUrl">
           Base url for contentstack
         </FieldLabel>
-        <Help text="Including the region. Used as publishing source on ImageVault" />
+        <Help
+          type="basic"
+          text="Including the region. Used as publishing source on ImageVault"
+        />
         <TextInput
           id="baseUrl"
           name="baseUrl"
           type="url"
           value={finalValues.baseUrl}
           onChange={(evt: ChangeEvent<HTMLInputElement>) => {
-            setFinalValues((prev) => ({
+            setFinalValues((prev) => ({ ...prev, baseUrl: evt.target.value }))
-              ...prev,
-              baseUrl: evt.target.value,
-            }))
 
             setInstallationData({
-              configuration: {
+              configuration: { ...finalValues, baseUrl: evt.target.value },
-                ...finalValues,
-                baseUrl: evt.target.value,
-              },
               serverConfiguration: {},
             })
           }}
@@ -61,7 +58,10 @@ export default function ConfigForm({
         <FieldLabel version="v2" htmlFor="formatId">
           Format Id for images
         </FieldLabel>
-        <Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
+        <Help
+          type="basic"
+          text="Images are fetched with a certain format. This should be an id from ImageVault"
+        />
         <TextInput
           id="formatId"
           name="formatId"
@@ -73,16 +73,10 @@ export default function ConfigForm({
           version="v2"
           width="large"
           onChange={(evt: ChangeEvent<HTMLInputElement>) => {
-            setFinalValues((prev) => ({
+            setFinalValues((prev) => ({ ...prev, formatId: evt.target.value }))
-              ...prev,
-              formatId: evt.target.value,
-            }))
 
             setInstallationData({
-              configuration: {
+              configuration: { ...finalValues, formatId: evt.target.value },
-                ...finalValues,
-                formatId: evt.target.value,
-              },
               serverConfiguration: {},
             })
           }}

remix/app/components/ImageEditModal.tsx

@@ -129,6 +129,11 @@ export default function ImageEditModal({
               disabled
             />
           </FieldComponent>
+
+          <FieldComponent>
+            <FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
+            <TextInput value={fieldData.Id} name="imageVaultId" disabled />
+          </FieldComponent>
         </div>
       </ModalBody>
       <ModalFooter>

remix/app/components/ImageVaultDAM.tsx

@@ -8,7 +8,6 @@ import {
   cbModal,
 } from "@contentstack/venus-components"
 import { isInsertResponse, openImageVault } from "~/utils/imagevault"
-import FullSizeImage from "./FullSizeImage"
 import ImageEditModal from "./ImageEditModal"
 
 import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
@@ -19,6 +18,7 @@ import type {
   EntryDataPublishDetails,
   ImageVaultDAMConfig,
 } from "~/utils/imagevault"
+import FullSizeImage from "./FullSizeImage"
 
 export type ImageVaultDAMProps = {
   sdk: UiLocation
@@ -26,9 +26,7 @@ export type ImageVaultDAMProps = {
   initialData: InsertResponse | null
 }
 
-type DAMButtonProps = {
+type DAMButtonProps = { onClick: () => void }
-  onClick: () => void
-}
 
 function DAMButton({ onClick }: DAMButtonProps) {
   return (
@@ -60,7 +58,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
     media.MediaConversions[0]
 
   const assetUrl = Url
-  const title = media.Name
+  const title = `Id: ${media.Id} - ${media.Name}`
   const width = FormatWidth || Width
   const height = FormatHeight || Height
   const alt =
@@ -130,7 +128,7 @@ export default function ImageVaultDAM({
     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(), 0)
     }
   }, [frame])
 
@@ -139,14 +137,10 @@ export default function ImageVaultDAM({
       if (field) {
         flushSync(() => {
           const data = result
-            ? {
+            ? { ...result, FocalPoint: result.FocalPoint || { x: 50, y: 50 } }
-                ...result,
-                FocalPoint: result.FocalPoint || { x: 50, y: 50 },
-              }
             : null
           setMedia(data)
-          // Data inside the field is supposed to be an empty object if nothing is selected
+          field.setData(data)
-          field.setData(data || {})
           document.body.style.overflow = "hidden"
         })
       }
@@ -175,11 +169,7 @@ export default function ImageVaultDAM({
         modalProps: {
           size: "max",
           style: {
-            content: {
+            content: { maxHeight: "90dvh", maxWidth: "90dvw", width: "auto" },
-              maxHeight: "90dvh",
-              maxWidth: "90dvw",
-              width: "auto",
-            },
             overlay: {},
           },
         },
@@ -204,23 +194,17 @@ export default function ImageVaultDAM({
   }
 
   return (
-    <div>
     <div>
       <FieldLabel htmlFor="imagevaultpicker" version="v2">
         ImageVault Asset
       </FieldLabel>
-      </div>
 
       {media ? (
         <Media media={media} onDelete={handleMedia} onEdit={handleEdit} />
       ) : (
         <DAMButton
           onClick={() => {
-            openImageVault({
+            openImageVault({ config, entryData, onSuccess: handleMedia })
-              config,
-              entryData,
-              onSuccess: handleMedia,
-            })
           }}
         />
       )}

remix/app/hooks/useApp.ts

@@ -1,10 +1,10 @@
 import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
 export class SDKLoadingError extends Error {}
 
 export default function useApp() {
-  const modalElementId = "field"
+  const ref = useRef<HTMLDivElement>(null)
   const [, setError] = useState()
   const [sdk, setSdk] = useState<UiLocation>()
   const [config, setConfig] = useState<Record<string, string>>()
@@ -20,8 +20,7 @@ export default function useApp() {
         const config = await initSdk.getConfig()
         setConfig(config)
 
-        const iframeWrapperRef = document.getElementById(modalElementId)
+        window.iframeRef = ref.current
-        window.iframeRef = iframeWrapperRef
         window.postRobot = initSdk.postRobot
       } catch (e) {
         let err: Error
@@ -43,6 +42,6 @@ export default function useApp() {
   return {
     sdk,
     config,
-    modalElementId,
+    ref,
   }
 }

remix/app/routes/field.tsx

@@ -1,3 +1,5 @@
+import "@contentstack/venus-components/build/main.css"
+
 import { Suspense, lazy, useEffect, useState } from "react"
 import { useScript } from "usehooks-ts"
 import useApp from "~/hooks/useApp"
@@ -5,19 +7,26 @@ import useApp from "~/hooks/useApp"
 import Disclaimer from "~/components/Disclaimer"
 import InvalidConfig from "~/components/InvalidConfig"
 
-import { isImageVaultDAMConfig } from "~/utils/imagevault"
+import { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
+import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
 import type { InsertResponse } from "~/types/imagevault"
+import { isImageVaultDAMConfig } from "~/utils/imagevault"
 
 const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
 
-export default function Field() {
+interface FieldContentProps {
-  const { sdk, config: appConfig, modalElementId } = useApp()
+  sdk?: UiLocation
+  appConfig?: GenericObjectType
+}
+
+function FieldContent({ sdk, appConfig }: FieldContentProps) {
   const ivStatus = useScript(
     "/scripts/imagevault-insert-media/insertmediawindow.min.js"
   )
 
   const [showDisclaimer, setShowDisclaimer] = useState(false)
-  const [fieldData, setFieldData] = useState<InsertResponse>()
+  const [fieldData, setFieldData] = useState<InsertResponse | null>()
+  const [dataIsLoaded, setDataIsLoaded] = useState(false)
 
   const entry = sdk?.location.CustomField?.entry
   const field = sdk?.location.CustomField?.field
@@ -31,14 +40,19 @@ export default function Field() {
       if (field && entry) {
         const data = field.getData()
         const title = entry.getField("title").getData().toString()
-        if (data && title) {
+        if (!title) {
-          setFieldData(data as InsertResponse)
+          throw new Error("Missing title for entry")
-        } else {
-          throw new Error("Missing data or title for entry")
         }
+
+        if (data) {
+          setFieldData(data as InsertResponse)
+        }
+
+        setDataIsLoaded(true)
       }
     } catch (e) {
       setShowDisclaimer(true)
+      console.log("Unable to get field data from SDK: ", e)
     }
   }, [entry, field])
 
@@ -46,13 +60,13 @@ export default function Field() {
     return <Disclaimer />
   }
 
-  const loaded = !!(fieldData && ivStatus === "ready" && sdk && appConfig)
+  const loaded = !!(dataIsLoaded && ivStatus === "ready" && sdk && appConfig)
 
   const initialData =
     fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
 
   if (!loaded) {
-    return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
+    return <p style={{ fontFamily: "Inter" }}> Loading dependencies...</p>
   }
 
   if (!isImageVaultDAMConfig(appConfig)) {
@@ -60,16 +74,21 @@ export default function Field() {
   }
 
   const fieldConfig = sdk.location.CustomField?.fieldConfig
-  const config = {
+  const config = { ...appConfig, ...fieldConfig }
-    ...appConfig,
-    ...fieldConfig,
-  }
 
   return (
-    <div id={modalElementId}>
     <Suspense fallback={<p>Loading field...</p>}>
       <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
     </Suspense>
+  )
+}
+
+export default function Field() {
+  const { sdk, config, ref } = useApp()
+
+  return (
+    <div ref={ref}>
+      <FieldContent sdk={sdk} appConfig={config} />
     </div>
   )
 }

remix/env.d.ts

@@ -1,2 +1 @@
-/// <reference types="@remix-run/node" />
 /// <reference types="vite/client" />

remix/eslint.config.mjs

@@ -0,0 +1,133 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat"
+import { FlatCompat } from "@eslint/eslintrc"
+import js from "@eslint/js"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import _import from "eslint-plugin-import"
+import jsxA11Y from "eslint-plugin-jsx-a11y"
+import react from "eslint-plugin-react"
+import { defineConfig, globalIgnores } from "eslint/config"
+import globals from "globals"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default defineConfig([
+  globalIgnores(["build/**/*", "node_modules/**/*", "public/**/*"]),
+  {
+    extends: compat.extends("eslint:recommended"),
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+      },
+
+      ecmaVersion: "latest",
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+
+    extends: fixupConfigRules(
+      compat.extends(
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended"
+      )
+    ),
+
+    plugins: {
+      react: fixupPluginRules(react),
+      "jsx-a11y": fixupPluginRules(jsxA11Y),
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+
+      formComponents: ["Form"],
+
+      linkComponents: [
+        {
+          name: "Link",
+          linkAttribute: "to",
+        },
+        {
+          name: "NavLink",
+          linkAttribute: "to",
+        },
+      ],
+
+      "import/resolver": {
+        typescript: {
+          project: "./remix/tsconfig.json",
+        },
+      },
+    },
+
+    rules: {
+      "react/jsx-uses-vars": "error",
+      "react/jsx-uses-react": "error",
+    },
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+
+    extends: fixupConfigRules(
+      compat.extends(
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript"
+      )
+    ),
+
+    plugins: {
+      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      "import/internal-regex": "^~/",
+
+      "import/resolver": {
+        node: {
+          extensions: [".ts", ".tsx"],
+        },
+
+        typescript: {
+          alwaysTryTypes: true,
+        },
+      },
+    },
+  },
+  {
+    files: ["**/.eslintrc.cjs"],
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+])

remix/package.json

@@ -12,14 +12,14 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "^2.13.1",
+    "@remix-run/node": "^2.16.8",
-    "@remix-run/react": "^2.13.1",
+    "@remix-run/react": "^2.16.8",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.13.1"
+    "@remix-run/dev": "^2.16.8"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
   }
 }

remix/tsconfig.json

@@ -10,6 +10,8 @@
     "**/*.tsx"
   ],
   "compilerOptions": {
+    "types": ["@remix-run/node", "vite/client"],
+    "skipLibCheck": true,
     "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {

remix/vite.config.ts

@@ -1,15 +1,15 @@
 import { vitePlugin as remix } from "@remix-run/dev"
 import { defineConfig } from "vite"
+import devtoolsJson from "vite-plugin-devtools-json"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
 import tsconfigPaths from "vite-tsconfig-paths"
 
 export default defineConfig({
   plugins: [
-    remix({
+    remix({ ssr: false }),
-      ssr: false,
-    }),
     tsconfigPaths(),
+    libInjectCss(),
+    devtoolsJson(),
   ],
-  build: {
+  build: { emptyOutDir: true },
-    emptyOutDir: true,
-  },
 })

rte/.eslintrc.cjs

@@ -1,90 +0,0 @@
-/**
- * This is intended to be a basic starting point for linting in your app.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-  ignorePatterns: ["node_modules/**/*"],
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      rules: {
-        "react/jsx-uses-vars": "error",
-        "react/jsx-uses-react": "error",
-      },
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {
-            project: "./rte/tsconfig.json",
-          },
-        },
-      },
-    },
-
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
-
-    // Node
-    {
-      files: [".eslintrc.cjs"],
-      env: {
-        node: true,
-      },
-    },
-  ],
-}

rte/components/ImageEditModal.tsx

@@ -178,6 +178,7 @@ export default function ImageEditModal({
         />
         <div>
           <Field>
+            {/* @ts-expect-error: Type incompatibility with Venus components */}
             <Select
               selectLabel="Alignment"
               value={alignment}

rte/eslint.config.mjs

@@ -0,0 +1,133 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat"
+import { FlatCompat } from "@eslint/eslintrc"
+import js from "@eslint/js"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import _import from "eslint-plugin-import"
+import jsxA11Y from "eslint-plugin-jsx-a11y"
+import react from "eslint-plugin-react"
+import { defineConfig, globalIgnores } from "eslint/config"
+import globals from "globals"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default defineConfig([
+  globalIgnores(["node_modules/**/*"]),
+  {
+    extends: compat.extends("eslint:recommended"),
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+      },
+
+      ecmaVersion: "latest",
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+
+    extends: fixupConfigRules(
+      compat.extends(
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended"
+      )
+    ),
+
+    plugins: {
+      react: fixupPluginRules(react),
+      "jsx-a11y": fixupPluginRules(jsxA11Y),
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+
+      formComponents: ["Form"],
+
+      linkComponents: [
+        {
+          name: "Link",
+          linkAttribute: "to",
+        },
+        {
+          name: "NavLink",
+          linkAttribute: "to",
+        },
+      ],
+
+      "import/resolver": {
+        typescript: {
+          project: "./rte/tsconfig.json",
+        },
+      },
+    },
+
+    rules: {
+      "react/jsx-uses-vars": "error",
+      "react/jsx-uses-react": "error",
+    },
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+
+    extends: fixupConfigRules(
+      compat.extends(
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript"
+      )
+    ),
+
+    plugins: {
+      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      "import/internal-regex": "^~/",
+
+      "import/resolver": {
+        node: {
+          extensions: [".ts", ".tsx"],
+        },
+
+        typescript: {
+          alwaysTryTypes: true,
+        },
+      },
+    },
+  },
+  {
+    files: ["**/.eslintrc.cjs"],
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+])

rte/main.tsx

@@ -103,7 +103,7 @@ function extractContentstackEmbeddedData(
       plugin,
     }
   } catch (e) {
-    console.log(`Unable to parse JWT like: ${jwtLike}`)
+    console.log(`Unable to parse JWT like: ${jwtLike}`, e)
   }
   return null
 }
@@ -180,7 +180,7 @@ async function init() {
       if (rte) {
         const savedSelection = rte?.selection?.get() ?? undefined
 
-        const appConfig = await rte.getConfig()
+        const appConfig = rte.getConfig()
 
         // This is the configuration for this instance of the plugin.
         // You edit this in the content types settings RTE plugin section.

rte/package.json

@@ -6,14 +6,14 @@
   "scripts": {
     "build": "vite build",
     "dev": "IS_DEV=true vite build --watch",
-    "lint": "eslint --ignore-path ../.gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "prebuild": "concurrently npm:lint npm:typecheck",
     "typecheck": "tsc"
   },
   "devDependencies": {
-    "@types/systemjs": "^6.15.1"
+    "@types/systemjs": "^6.15.3"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
   }
 }

rte/vite.config.ts

@@ -1,13 +1,12 @@
 import { resolve } from "path"
 import { defineConfig } from "vite"
+import devtoolsJson from "vite-plugin-devtools-json"
 import { libInjectCss } from "vite-plugin-lib-inject-css"
 import tsconfigPaths from "vite-tsconfig-paths"
 
 export default defineConfig({
-  plugins: [tsconfigPaths(), libInjectCss()],
+  plugins: [tsconfigPaths(), libInjectCss(), devtoolsJson()],
-  define: {
+  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",
@@ -20,9 +19,7 @@ export default defineConfig({
     },
     rollupOptions: {
       external: ["react", "react-dom", "@contentstack/venus-components"],
-      output: {
+      output: { dir: "../remix/public/build/rte" },
-        dir: "../remix/public/build/rte",
-      },
     },
   },
 })