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

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()],
-  define: {
-    IS_DEV: process.env.IS_DEV === "true" ? true : false,
-  },
+  plugins: [tsconfigPaths(), libInjectCss(), devtoolsJson()],
+  define: { 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: {
-        dir: "../remix/public/build/rte",
-      },
+      output: { dir: "../remix/public/build/rte" },
     },
   },
 })