Monaco editor react electron stuck on loading

user_14662549 0
Viewed 630

So im trying to get monaco to work with react and electron, and it loads the loader file, but its stuck on loading. the init function doesnt run console.log the promise with the monaco instance. What am i doing wrong?


import React, { useEffect, useRef, useState } from "react";
import Editor, { monaco } from "@monaco-editor/react";

const path = window.require("path");

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/" ? "/" + str : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

function App() {
  useEffect(() => {
    monaco.config({
      paths: {
        vs: uriFromPath(path.join(__dirname, "node_modules/monaco-editor/min")),
      },
    });

    monaco.init().then((monacoInstance) => console.log(monacoInstance));
  }, []);

  return (
    <div>
        <Editor width="500" height="500" language="javascript" value={""} />
      </div>
    </div>
  );
}

export default App;
electron reactjs node.js javascript
1 Answers

Got it working. Here is the code:

import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";
import React, { useEffect, useRef, useState } from "react";
import TreeView from "devextreme-react/tree-view";
import Sortable from "devextreme-react/sortable";
import Editor, { monaco } from "@monaco-editor/react";

const path = require("path");

const electron = window.require("electron");
const { dialog } = electron.remote;
const appPath = electron.remote.app.getAppPath();

const dirTree = window.require("directory-tree");

const fs = window.require("fs");

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/" ? "/" + str : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

monaco.config({
  paths: {
    vs: uriFromPath(path.join(appPath, "node_modules/monaco-editor/min/vs")),
  },
});

monaco.init().then((monacoInstance) => {});

function App() {
  const treeRef = useRef(null);

  const [currentFile, setCurrentFile] = useState(null);

  const [items, setItems] = useState([]);

  useEffect(() => {}, []);

  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: "line",
    automaticLayout: false,
  };

  const onDragChange = (e) => {};

  const onDragEnd = (e) => {};

  const selectFile = (e) => {
    const data = fs.readFileSync(e.itemData.path, "utf8");
    console.log(data);
    setCurrentFile(data);
  };

  const openFolder = () => {
    const directory = dialog.showOpenDialogSync(null, {
      properties: ["openDirectory"],
    });

    if (!directory) return;

    const files = dirTree(directory[0]);

    console.log(files);
    setItems([files]);

    console.log(directory);
  };

  return (
    <div style={{ height: "100%" }}>
      <Editor language="javascript" value={"123"} />
    </div>
  );
}

export default App;
user_146625490
Related