React-ace: Как использовать собственный режим

Привет,

а какая у вас реализация? Я могу показать, что мне подходит. Точно не помню, но думаю, мне сначала пришлось установить еще и библиотеку brace . Так

npm install -D brace react-ace

А это мой компонент с редактором Ace:

import React from 'react'
import brace from 'brace'
import AceEditor from 'react-ace'

import 'brace/mode/javascript'
import 'brace/theme/tomorrow'

const MyEditor = () => {
  return (
    <AceEditor
      name="my-editor"
      mode="javascript"
      theme="tomorrow"
      value=""
      width="100%"
      height="500px" />
  )
}

export default MyEditor

А вот скриншот:

Я действительно мог бы использовать режимы по умолчанию из скобки. Что мне интересно, так это как использовать свой собственный режим? Я сам написал собственный режим и хочу включить его, но пока не смог сделать это с помощью react-ace.

@sichvoge У вас вообще в этом дела?

Не совсем. В конце концов, я разработал свой собственный компонент реакции, используя Ace, а не скобку.

Достаточно справедливо - может быть, вы могли бы поделиться им, когда они вам понравятся? Спасибо @sichvoge

Конечно я буду.

@sichvoge , не могли бы вы поделиться своим компонентом?
У меня такая же проблема, и это будет очень полезно :)

Я пытаюсь сделать то же самое. Мне кажется, что импорт режима во внешнем интерфейсе не работает.
Похоже, что AceEditor ищет его как файл на стороне сервера. В итоге я просто обслужил файл режима отдельно от сценария, связанного с веб-пакетом. (Вероятно, это не совсем правильный способ, но, похоже, он работает ....)

Скажем, мой пользовательский режим называется eikelang.

Мой код React выглядит так

import React from 'react';
import AceEditor from 'react-ace';
import 'brace/theme/github';

export default ({value}) => {
<AceEditor
    mode="eikelang"
    theme="github"
    width="auto"
    height="200px"
    value={value}
  />
};

У меня есть файл js с именем 'mode-eikelang.js', который обслуживается из корневого каталога моего сервера, который представляет собой просто скопированный файл режима скобок mysql с некоторыми измененными именами:

ace.define('ace/mode/doc_comment_highlight_rules',
  ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
  function(acequire, exports, module) {
    'use strict';

    let oop = acequire('../lib/oop');
    let TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;

    var DocCommentHighlightRules = function() {
      this.$rules = {
        'start': [{
          token: 'comment.doc.tag',
          regex: '@[\\w\\d_]+' // TODO: fix email addresses
        },
          DocCommentHighlightRules.getTagRule(),
        {
          defaultToken: 'comment.doc',
          caseInsensitive: true
        }]
      };
    };

    oop.inherits(DocCommentHighlightRules, TextHighlightRules);

    DocCommentHighlightRules.getTagRule = function(start) {
      return {
        token: 'comment.doc.tag.storage.type',
        regex: '\\b(?:TODO|FIXME|XXX|HACK)\\b'
      };
    };

    DocCommentHighlightRules.getStartRule = function(start) {
      return {
        token: 'comment.doc', // doc comment
        regex: '\\/\\*(?=\\*)',
        next: start
      };
    };

    DocCommentHighlightRules.getEndRule = function(start) {
      return {
        token: 'comment.doc', // closing comment
        regex: '\\*\\/',
        next: start
      };
    };


    exports.DocCommentHighlightRules = DocCommentHighlightRules;
  });

ace.define('ace/mode/eikelang_highlight_rules', ['require', 'exports', 'module', 'ace/lib/oop', 'ace/lib/lang', 'ace/mode/doc_comment_highlight_rules', 'ace/mode/text_highlight_rules'], function(acequire, exports, module) {
  let oop = acequire('../lib/oop');
  let lang = acequire('../lib/lang');
  let DocCommentHighlightRules = acequire('./doc_comment_highlight_rules').DocCommentHighlightRules;
  let TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;

  let EikelangHighlightRules = function() {
    let builtins = 'drop|hash|keep|linear_transformation|map|rename|string_manipulation|string_submatcher';

    let keywordMapper = this.createKeywordMapper({
      'support.function': builtins
    }, 'identifier', true);


    function string(rule) {
      let start = rule.start;
      let escapeSeq = rule.escape;
      return {
        token: 'string.start',
        regex: start,
        next: [
                {token: 'constant.language.escape', regex: escapeSeq},
                {token: 'string.end', next: 'start', regex: start},
                {defaultToken: 'string'}
        ]
      };
    }

    this.$rules = {
      'start': [{
        token: 'comment', regex: '(?:-- |#).*$'
      },
        string({start: '"', escape: /\\[0'"bnrtZ\\%_]?/}),
        string({start: '\'', escape: /\\[0'"bnrtZ\\%_]?/}),
        DocCommentHighlightRules.getStartRule('doc-start'),
      {
        token: 'comment', // multi line comment
        regex: /\/\*/,
        next: 'comment'
      }, {
        token: 'constant.numeric', // hex
        regex: /0[xX][0-9a-fA-F]+|[xX]'[0-9a-fA-F]+'|0[bB][01]+|[bB]'[01]+'/
      }, {
        token: 'constant.numeric', // float
        regex: '[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b'
      }, {
        token: keywordMapper,
        regex: '[a-zA-Z_$][a-zA-Z0-9_$]*\\b'
      }, {
        token: 'constant.class',
        regex: '@@?[a-zA-Z_$][a-zA-Z0-9_$]*\\b'
      }, {
        token: 'constant.buildin',
        regex: '`[^`]*`'
      }, {
        token: 'keyword.operator',
        regex: '\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|='
      }, {
        token: 'paren.lparen',
        regex: '[\\(]'
      }, {
        token: 'paren.rparen',
        regex: '[\\)]'
      }, {
        token: 'text',
        regex: '\\s+'
      }],
      'comment': [
            {token: 'comment', regex: '\\*\\/', next: 'start'},
            {defaultToken: 'comment'}
      ]
    };

    this.embedRules(DocCommentHighlightRules, 'doc-', [DocCommentHighlightRules.getEndRule('start')]);
    this.normalizeRules();
  };

  oop.inherits(EikelangHighlightRules, TextHighlightRules);

  exports.EikelangHighlightRules = EikelangHighlightRules;
});

ace.define('ace/mode/eikelang', ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/eikelang_highlight_rules'],
  function(acequire, exports, module) {
    let oop = acequire('../lib/oop');
    let TextMode = acequire('../mode/text').Mode;
    let EikelangHighlightRules = acequire('./eikelang_highlight_rules').EikelangHighlightRules;

    let Mode = function() {
      this.HighlightRules = EikelangHighlightRules;
      this.$behaviour = this.$defaultBehaviour;
    };
    oop.inherits(Mode, TextMode);

    (function() {
      this.lineCommentStart = ['--', '#']; // todo space
      this.blockComment = {start: '/*', end: '*/'};

      this.$id = 'ace/mode/eikelang';
    }).call(Mode.prototype);

    exports.Mode = Mode;
  });

Привет @ pollen8 ,
Если вы посмотрите на код react-ace, вы увидите, что компонент пытается установить режим, используя свое имя.

Это означает, что вы должны убедиться, что ваш режим уже находится в кеше «Ace», используя ace.define и oop.inherits(Mode, TextMode) и другой собственный код Ace, который я считаю довольно старым, когда на вашей стороне ES6.
Так почему бы не написать свой собственный режим так же, как мы пишем любой другой класс?
Это сделало бы ваш класс пользовательского режима действительно лучше
(меньше строк кода + лучший синтаксис => меньше обслуживания)

Так что я:

1. Создал свой класс пользовательского режима (чистый код ES6)
2. Инициализировал компонент с существующим именем режима (например, "sql")
3. Использовал функцию componentDidMount и вызвал session.setMode с экземпляром моего пользовательского режима.

Мой пользовательский режим:

export default class CustomSqlMode extends ace.acequire('ace/mode/text').Mode {

    constructor(){
        super();
        // Your code goes here
    }
}

И мой код реакции-ace выглядит так:

render() {
        return <div>
            <AceEditor
                ref="aceEditor"
                mode="sql"     // Default value since this props must be set.
                theme="chrome" // Default value since this props must be set.
            />
        </div>;
    }

    componentDidMount() {
        const customMode = new CustomSqlMode();
        this.refs.aceEditor.editor.getSession().setMode(customMode);
    }

Единственный недостаток, который он видит, - это зависимость от того, что ace.acequire('ace/mode/text').Mode является действительной строкой, когда я определяю класс режима.
Но в любом случае это действительно так, поскольку react-ace помещает модуль ace в window.ace (https://github.com/ajaxorg/ace/blob/4c7e5eb3f5d5ca9434847be51834a4e41661b852/lib/ace/worker/worker.js#L19)

@AlonBe @ пыльца8
У кого-нибудь есть рабочий jsfiddle или пример для этого?

Пытался следовать указаниям, указанным @AlonBe, с пользовательским режимом, предоставленным @ pollen8, и я, к сожалению, не могу правильно зарегистрировать подсветку синтаксиса ... :(

Любая помощь будет оценена по достоинству.

Пользовательский режим

Где отображается мой редактор:

componentDidMount () { const customMode = new CustomSqlMode(); this.refs.ace.editor.getSession().setMode(test); console.log(customMode); }

@solemnify , this.refs.ace.editor.getSession().setMode(customMode); пробовали делать?
Попробуйте следовать за созданным мной классом CustomSqlMode.
Чтобы проверить, работает ли он, вы можете вставить в конструктор следующую строку:
this.lineCommentStart = '--';

Если вы хотите использовать подсветку синтаксиса, вам необходимо переопределить this.HighlightRules класса пользовательского режима.

Взгляните на один из текущих режимов, например sql_mode

@AlonBe
Не могли бы вы привести пример кода для добавления в компонент CustomSqlMode?
Я не знаю, как преобразовать правила выделения в es6 ...
Заранее спасибо за помощь.

У меня сработал следующий код:

App.js

import React, { Component } from 'react';
import brace from 'brace';
import AceEditor from 'react-ace';
import CustomSqlMode from './CustomSqlMode.js'

import 'brace/theme/github';

class App extends Component {
  componentDidMount() {
    const customMode = new CustomSqlMode();
    this.refs.aceEditor.editor.getSession().setMode(customMode);
  }

  render() {
    return (
      <div className="App">
        <AceEditor
          ref="aceEditor"
          mode="text"
          theme="github"
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
  }
}

export default App;

CustomSqlMode.js

import 'brace/mode/java';

export class CustomHighlightRules extends window.ace.acequire("ace/mode/text_highlight_rules").TextHighlightRules {
    constructor() {
        super();
        this.$rules = {
            "start": [{
                token: "comment",
                regex: "#.*$"
            }, {
                token: "string",
                regex: '".*?"'
            }]
        };
    }
}

export default class CustomSqlMode extends window.ace.acequire('ace/mode/java').Mode {
    constructor() {
        super();
        this.HighlightRules = CustomHighlightRules;
    }
}

В предыдущем коде выделены только комментарии и строки. Я не уверен, что то, что я сделал, было хорошей практикой или нет, но, по крайней мере, это работает.

@ newint33h спасибо! У меня работает.

@ newint33h Я пытался использовать эту структуру, но она жалуется, что TypeError: не

@shuotongli У меня была такая же проблема, и похоже, что эта проблема this.refs теперь устарел. Есть несколько способов создать ссылку в зависимости от используемой вами версии React. Чтобы узнать о поддерживаемом в настоящее время способе, ознакомьтесь с этим:
https://reactjs.org/docs/refs-and-the-dom.html#creating -refs

У меня сработал следующий код:

App.js

import React, { Component } from 'react';
import brace from 'brace';
import AceEditor from 'react-ace';
import CustomSqlMode from './CustomSqlMode.js'

import 'brace/theme/github';

class App extends Component {
  componentDidMount() {
    const customMode = new CustomSqlMode();
    this.refs.aceEditor.editor.getSession().setMode(customMode);
  }

  render() {
    return (
      <div className="App">
        <AceEditor
          ref="aceEditor"
          mode="text"
          theme="github"
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
  }
}

export default App;

CustomSqlMode.js

import 'brace/mode/java';

export class CustomHighlightRules extends window.ace.acequire("ace/mode/text_highlight_rules").TextHighlightRules {
  constructor() {
      super();
      this.$rules = {
          "start": [{
              token: "comment",
              regex: "#.*$"
          }, {
              token: "string",
              regex: '".*?"'
          }]
      };
  }
}

export default class CustomSqlMode extends window.ace.acequire('ace/mode/java').Mode {
  constructor() {
      super();
      this.HighlightRules = CustomHighlightRules;
  }
}

В предыдущем коде выделены только комментарии и строки. Я не уверен, что то, что я сделал, было хорошей практикой или нет, но, по крайней мере, это работает.

почему режим = 'текст', что означает текст?

@TaurusWood , поскольку первый render встречается перед componentDidMount - вы должны передать действительный "режим" компоненту react-ace.
позже, на componentDidMount вы можете увидеть, что код отменяет этот режим ( setMode )

и, кстати, если я не ошибаюсь, mode = 'text' - это основной режим Ace, который все остальные отменяют.

Может ли кто-нибудь объяснить, почему он больше не работает, все мои коды интерпретируются как текст, а не как файл java после установки пользовательского режима? Спасибо

У меня сработал следующий код:

App.js

import React, { Component } from 'react';
import brace from 'brace';
import AceEditor from 'react-ace';
import CustomSqlMode from './CustomSqlMode.js'

import 'brace/theme/github';

class App extends Component {
  componentDidMount() {
    const customMode = new CustomSqlMode();
    this.refs.aceEditor.editor.getSession().setMode(customMode);
  }

  render() {
    return (
      <div className="App">
        <AceEditor
          ref="aceEditor"
          mode="text"
          theme="github"
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
  }
}

export default App;

CustomSqlMode.js

import 'brace/mode/java';

export class CustomHighlightRules extends window.ace.acequire("ace/mode/text_highlight_rules").TextHighlightRules {
  constructor() {
      super();
      this.$rules = {
          "start": [{
              token: "comment",
              regex: "#.*$"
          }, {
              token: "string",
              regex: '".*?"'
          }]
      };
  }
}

export default class CustomSqlMode extends window.ace.acequire('ace/mode/java').Mode {
  constructor() {
      super();
      this.HighlightRules = CustomHighlightRules;
  }
}

В предыдущем коде выделены только комментарии и строки. Я не уверен, что то, что я сделал, было хорошей практикой или нет, но, по крайней мере, это работает.