Встраивание синтаксиса в редакторе Ace - PullRequest
Новая
       15

Встраивание синтаксиса в редакторе Ace

1 голос
/ 04 октября 2019

Код https://codesandbox.io/embed/epic-tu-q5jj0

Моя цель - не допустить, чтобы редактор Ace (режим JSON) жаловался на многострочный код JavaScript, если код назначен клавише «script» и окружен тройными двойными кавычками.

Значение редактора: 

{
  "id": 0,
  "script": """
   function add(x, y) {
      return x + y;
   }
   add(1, 2);
   """,
   "descr": "add two numbers"
}

Ошибка:

enter image description here

По сути, ошибка не должнабыть видимым.

Насколько я понимаю, мне нужен собственный режим. Существует руководство по созданию пользовательского режима , но я не могу заставить его работать.

Я попытался расширить режим JSON и добавить свои правила для тройных кавычек: 

import "brace/mode/json";

const JsonMode = window.ace.acequire("ace/mode/json").Mode;

export default class JsonCodeMode extends JsonMode {
  constructor() {
    super();

    this.$rules = {
      start: [
        {
          token: "string", // multi line """ string start
          regex: '("source"|"script")(\\s*?):(\\s*?)"{3}',
          next: "qqstring3"
        },
        {
          token: "text",
          regex: "\\s+"
        }
      ],
      qqstring3: [
        {
          token: "string", // multi line """ string end
          regex: '"{3}',
          next: "start"
        },
        {
          defaultToken: "string"
        }
      ]
    };

    console.log("JsonTextCodeMode rules", this.$rules);
  }
}

Также я попытался встроить правила подсветки JavaScript, но получил TypeError _this.embedRules is not a function: 

import "brace/mode/json";

const JsonMode = window.ace.acequire("ace/mode/json").Mode;
const JavaScriptHighlightRules = window.ace.acequire(
  "ace/mode/javascript_highlight_rules"
).JavaScriptHighlightRules;

export default class JsonJSCodeMode extends JsonMode {
  constructor() {
    super();

    this.HighlightRules = JavaScriptHighlightRules;

    this.$rules = {
      start: [
        {
          token: "string", // multi line """ string start
          regex: '("source"|"script")(\\s*?):(\\s*?)"{3}',
          next: "qqstring3-start"
        },
        {
          token: "text",
          regex: "\\s+"
        }
      ]
    };

    /*
    ×
      TypeError
      _this.embedRules is not a function
    */
    this.embedRules(JavaScriptHighlightRules, "qqstring3-", [
      {
        token: "string",
        regex: '"{3}',
        next: "start"
      }
    ]);

    console.log("JsonJSCodeMode rules", this.$rules);
  }
}
...