fix(yaml) include yaml editor code in build. Avoid to rely on externa…

…l domain cdn.jsdelivr.net to load editor code WD-9954

Signed-off-by: David Edler <david.edler@canonical.com>

package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "clean": "rm -rf node_modules yarn-error.log *.log build/ .jekyll-metadata .bundle playwright-report test-results haproxy-local.cfg coverage",
     "build-html": "cp build/ui/index.html build/index.html",
-    "build": "npx vite build && yarn build-html",
+    "build-monaco": "mkdir build/ui/monaco-editor && cp -R node_modules/monaco-editor/min build/ui/monaco-editor",
+    "build": "npx vite build && yarn build-html && yarn build-monaco",
     "format-js-eslint": "eslint 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --fix",
     "format-js-prettier": "prettier 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --write",
     "format-js": "yarn format-js-eslint && yarn format-js-prettier",

src/components/forms/YamlForm.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode, useEffect, useRef, useState } from "react";
-import Editor from "@monaco-editor/react";
+import Editor, { loader } from "@monaco-editor/react";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "@use-it/event-listener";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
@@ -28,6 +28,8 @@ const YamlForm: FC<Props> = ({
   const [editor, setEditor] = useState<IStandaloneCodeEditor | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  loader.config({ paths: { vs: "/ui/monaco-editor/min/vs" } });
+
   const updateFormHeight = () => {
     if (!editor || !containerRef.current) {
       return;

vite.config.ts

@@ -12,6 +12,11 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/ui/, ""),
         secure: false,
       },
+      "/ui/monaco-editor": {
+        target: "https://localhost:8407/node_modules",
+        rewrite: (path) => path.replace(/^\/ui/, ""),
+        secure: false,
+      },
     },
   },
   build: {