Refactor Monaco editor initialization and language configuration

src/editor/editorCustom.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from "react";
-import type * as MonacoEditor from "monaco-editor/esm/vs/editor/editor.api";
-import monacoLoader from "./monacoLoader";
+import * as MonacoEditor from "monaco-editor/esm/vs/editor/editor.api";
+import './useWorker';
+import { on } from "events";
+//import * as monaco from "monaco-editor";
 
 // https://www.gitmemory.com/issue/microsoft/monaco-editor/1423/530617327
 interface MonarchLanguageConfiguration extends MonacoEditor.languages.IMonarchLanguage {
@@ -33,22 +35,29 @@ const EditorCustom = ({
  height,
  options,
 }: EditorCustomType) => {
- const [isMonacoReady, setIsMonacoReady] = useState(false);
+ const [isMonacoReady, setIsMonacoReady] = useState(true);
  const [isEditorCodeMounted, setIsEditorCodeMounted] = useState(false);
  const editorCodeRef = useRef<MonacoEditor.editor.IStandaloneCodeEditor>();
  const editorRef = useRef<typeof MonacoEditor.editor>();
  const monacoRef = useRef<typeof MonacoEditor>();
  const containerRef = useRef<HTMLDivElement>(null);
 
+
+
  useEffect(() => {
- const f = async () => {
+ const f = () => {
  //const monacoEditor = await monaco.init();
- const monacoEditor = await monacoLoader();
+ console.log('Hello');
+
+
+
+
+ const monacoEditor = MonacoEditor;
  monacoRef.current = monacoEditor;
  editorRef.current = monacoEditor.editor;
 
- //const a = await loadMonaco();
- //console.log('a is loaded', a);
+
+
 
  monacoEditor.languages.register({ id: "spice" });
  monacoEditor.languages.setMonarchTokensProvider("spice", {
@@ -304,9 +313,12 @@ const EditorCustom = ({
  ];
  };
 
+ console.log("monaco->here lang");
+
  monacoEditor.languages.registerCompletionItemProvider("spice", {
  triggerCharacters: ["."],
  provideCompletionItems: function (model, position) {
+ console.log("monaco-> here 1");
  // find out if we are completing a property in the 'dependencies' object.
  let textUntilPosition = model.getValueInRange({
  startLineNumber: 1,
@@ -321,7 +333,7 @@ const EditorCustom = ({
  startColumn: word.startColumn,
  endColumn: word.endColumn,
  };
- //console.log("monaco->", position, word);
+ console.log("monaco-> here 2");
 
  let c1 = word.startColumn == 1;
  if (c1) {
@@ -343,36 +355,37 @@ const EditorCustom = ({
  setIsMonacoReady(true);
  };
  f();
+ console.log("mon", monacoRef.current?.languages);
  }, []);
 
  useEffect(() => {
+ console.log("isMonacoReady", isMonacoReady);
+ console.log('monacoRef', monacoRef.current);
+ console.log("containerRef", containerRef.current);
+
  if (monacoRef.current && containerRef.current) {
  editorCodeRef.current = monacoRef.current.editor.create(containerRef.current, {
  value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
- language: "plaintext",
+ language: "spice",
  roundedSelection: false,
  scrollBeyondLastLine: false,
  readOnly: false,
  theme: "vs-dark",
  automaticLayout: true,
+ quickSuggestions: true,
+ wordBasedSuggestions: 'allDocuments'
  // ...,
  });
 
+ console.log("editorCodeRef", editorCodeRef.current);
+
  setIsEditorCodeMounted(true);
  }
  }, [isMonacoReady, containerRef]);
 
  useEffect(() => {
  if (editorRef.current && editorCodeRef.current && isEditorCodeMounted) {
- const modelDefault = editorRef.current.createModel(
- "let a=0\n",
- language ? language : "plaintext"
- );
- const model = editorCodeRef.current.getModel();
- editorRef.current.setModelLanguage(
- model ? model : modelDefault,
- language ? language : "plaintext"
- );
+
  editorCodeRef.current.setValue(value ? value : "hello!");
  editorCodeRef.current.onDidChangeModelContent(monacoEvent);
  }

src/editor/useWorker.ts

@@ -0,0 +1,35 @@
+
+// @ts-ignore
+self.MonacoEnvironment = {
+ getWorker: function (workerId, label) {
+ const getWorkerModule = (moduleUrl: string, label: string) => {
+ const workerUrl = self.MonacoEnvironment?.getWorkerUrl?.(moduleUrl, label);
+ if (!workerUrl) {
+ throw new Error(`Unable to get worker URL for module: ${moduleUrl} and label: ${label}`);
+ }
+ return new Worker(workerUrl, {
+ name: label,
+ type: 'module'
+ });
+ };
+
+ switch (label) {
+ case 'json':
+ return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
+ case 'css':
+ case 'scss':
+ case 'less':
+ return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
+ case 'html':
+ case 'handlebars':
+ case 'razor':
+ return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
+ case 'typescript':
+ case 'javascript':
+ return getWorkerModule('/monaco-editor/esm/vs/language/typescript/ts.worker?worker', label);
+ default:
+ return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
+ }
+ }
+};
+

vite.config.mjs

@@ -2,5 +2,5 @@ import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
 
 export default defineConfig({
- plugins: [preact()]
+ //plugins: [react()]
 });