Как использовать пользовательские режимы CodeMirror с помощью react-codemirror2

Как вы используете пользовательские режимы CodeMirror при использовании react-codemirror2? И CodeMirror.defineSimpleMode, и CodeMirror.defineMode не определены после импорта следующим образом:

import {UnControlled as CodeMirror} from "react-codemirror2";
import 'codemirror/lib/codemirror.css';

Контекст: в моем проекте реагирования я хотел бы использовать CodeMirror и определить свой собственный язык ввода, который соответствует некоторым регулярным выражениям, а затем выделяет их, чтобы указать, что пользователь ввел их правильно. Мне также нужны номера строк, отсутствие переноса, моноширинные шрифты, поэтому редактор кода кажется близким к тому, чего я хочу достичь.


reactjs codemirror react-codemirror codemirror-modes
person User    schedule 31.07.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

У вас есть два варианта использования пользовательских режимов с помощью react-codemirror2.

  1. Используйте реквизит defineMode и передайте режим и его функцию:
import { UnControlled as CodeMirror } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';

<CodeMirror
  options={{
    lineNumbers: true,
    defineMode: {
      name: 'yourMode',
      fn: yourModeFunction
    },
    ...

  }}
  ...
/>;
  1. Отдельно импортируйте CodeMirror и определите свой режим перед визуализацией элемента управления:
import { UnControlled as CodeMirrorControl } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
import CodeMirror from 'codemirror';

CodeMirror.defineMode('yourMode', yourModeFunction);

<CodeMirrorControl
  options={{
    lineNumbers: true,
    ...
    mode: 'yourMode',
  }}
  ...
/>;
person Laurens Deprost    schedule 24.08.2020