web-dev-qa-db-fra.com

Pas de coloration syntaxique avec React Monaco Editor

Juste installé React Monaco Editor et semble fonctionner correctement sauf qu'il n'y a pas de coloration syntaxique. J'essaye d'utiliser "python" comme langue mais la police reste la même couleur grise par défaut:

enter image description here

Des idées sur la façon de corriger le problème?

Voici mon Code.js où j'exécute l'éditeur Monaco:

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;

J'ai également ajouté ce code en haut de 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

Pour moi, les deux réponses ci-dessus ne fonctionnent pas - je ne sais pas si cela est lié à Codesandbox ou si j'ai fait une erreur.

Mais utiliser @ monaco-editor/react fonctionne sans aucune modification de la configuration de l'ARC.

La seule différence dans l'utilisation est que l'exportation par défaut n'est pas un composant contrôlé - donc onchange ne fonctionne pas.

Pour avoir un composant contrôlé, utilisez simplement import {ControlledEditor as MonacoEditor} from "@monaco-editor/react". Le gestionnaire onchange doit être légèrement modifié, d'abord l'événement et ensuite le newText - juste une petite différence dans l'implémentation.

L'utilisation ressemble à ceci:

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}
    />
  );
};

Le options peut être utilisé pour modifier l'éditeur Monaco. Dans mon cas, je ne veux pas afficher la mini-carte. Toutes les options disponibles se trouvent dans le editor api docs

Vous pouvez trouver la démo de travail dans ce Codesandbox .

La seule chose que j'ai trouvée qui ne fonctionne pas est annuler/refaire comme décrit dans ce qui suit issue . Aucun événement de changement n'a été déclenché mais je vérifierai cela plus tard - pour l'instant j'en suis satisfait.

1
AWolf