web-dev-qa-db-ja.com

React Monaco Editorを使用した構文の強調表示なし

インストールされたばかり React Monaco Editor で、構文の強調表示がない場合を除き、正しく機能しているようです。言語として「python」を使用しようとしていますが、フォントは同じ灰色のデフォルト色のままです。

enter image description here

問題を修正する方法に関するアイデアはありますか？

モナコエディターを実行しているCode.jsは次のとおりです。

import React from "react";
import MonacoEditor from "react-monaco-editor";

class Code extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: 'print("Hello, World!")'
    };
  }
  editorDidMount(editor, monaco) {
    console.log("editorDidMount", editor);
    editor.focus();
  }
  onChange(newValue, e) {
    console.log("onChange", newValue, e);
  }
  render() {
    const code = this.state.code;
    const options = {
      selectOnLineNumbers: true,
      fontSize: 18,
      colorDecorators: true
    };
    return (
      <MonacoEditor
        width="800"
        height="600"
        language="python"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={this.onChange}
        editorDidMount={this.editorDidMount}
      />
    );
  }
}

export default Code;

また、このコードをwebpack.config.jsの先頭に追加しました。

const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['python']
    })
  ]
};

const APP_DIR = path.resolve(__dirname, './src');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');

module.exports = {
  test: /\.css$/,
  include: APP_DIR,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      namedExport: true,
    },
  }],
}, {
  test: /\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}
reactjsmonaco-editor
4
StackUnderFlow

私にとって、上記の回答はどちらも機能していません。それがCodesandboxに関連しているかどうか、または間違いを犯したかどうかは不明です。

ただし、 @ monaco-editor/react を使用すると、CRAセットアップに変更を加えなくても機能します。

使用法の唯一の違いは、デフォルトのエクスポートが制御されたコンポーネントではないため、onchangeが機能しないことです。

制御されたコンポーネントを使用するには、import {ControlledEditor as MonacoEditor} from "@monaco-editor/react"。 onchangeハンドラーを少し変更する必要があります。最初にイベント、次にnewTextを実装します。

使用法は次のようになります。

import React, { useState } from "react";
import { ControlledEditor as MonacoEditor } from "@monaco-editor/react";
export const Editor = () => {
  const [code, setCode] = useState(`const greeting = () => {
    alert("Hello world");
}`);

  const options = {
    minimap: {
      enabled: false
    }
  };

  const changeHandler = (evt, newText) => {
    setCode(newText);
  };

  const editorDidMount = (editor, monaco) => {
    console.log("editorDidMount", editor);
  };

  return (
    <MonacoEditor
      width="100%"
      height="100%"
      language="javascript"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={changeHandler}
      editorDidMount={editorDidMount}
    />
  );
};

optionsを使用して、モナコエディターを変更できます。私の場合、ミニマップを表示したくありません。利用可能なオプションはすべて editor api docs にあります

この Codesandbox で動作するデモを見つけることができます。

次の issue で説明されているように、機能していないことがわかった唯一の取り消し/やり直しです。変更イベントはトリガーされませんが、後で確認します-今のところは満足しています。

1
AWolf