javascript - Monaco Editor react Electron 卡在负载上

Question

因此，我试图让摩纳哥与 react 和 Electron 一起工作，它加载了加载程序文件，但卡在了加载程序上。 init函数不会运行console.log与monaco实例的promise。我究竟做错了什么？

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;

Answer 1

得到它的工作。这是代码:

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;