title: Embedding syntax in Ace editor
body: <p>Code <a href="https://codesandbox.io/embed/epic-tu-q5jj0" rel="nofollow noreferrer">https://codesandbox.io/embed/epic-tu-q5jj0</a></p>
  
  <p>My goal is to stop Ace editor (JSON mode) complaining about multi-line JavaScript code if the code is assigned to the "script" key and surrounded by triple-double quotes.</p>
  
  <p>The editor value:</p>
  
  <pre><code>{
    "id": 0,
    "script": """
     function add(x, y) {
        return x + y;
     }
     add(1, 2);
     """,
     "descr": "add two numbers"
  }
  </code></pre>
  
  <p>The error:</p>
  
  <p><a href="https://i.stack.imgur.com/5Y5L2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Y5L2.png" alt="enter image description here"></a></p>
  
  <p>Basically, the error shouldn't be visible.</p>
  
  <p>As far as I understand, I need a custom mode. There is <a href="https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode" rel="nofollow noreferrer">a guide about how to create the custom mode</a> but I can't make it work.</p>
  
  <p>I tried extending JSON mode and adding my rules for the triple-quotes:</p>
  
  <pre><code>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);
    }
  }
  
  </code></pre>
  
  <p>Also, I tried embedding JavaScript highlight rules but got <code>TypeError _this.embedRules is not a function</code>:</p>
  
  <pre><code>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);
    }
  }
  
  </code></pre>