// requires JQuery
sclass HTMLAceEditor implements Htmlable {
  S text;
  S name = "text";
  S id;
  Map divParams = litmap(style := "width: 80ch; height: 20em");
  S onKeyDown;
  
  *() {}
  *(S *text) {}
  
  // only needed once (call on any instance)
  public S headStuff() {
    ret hscriptsrc("https://botcompany.de/ace-builds/src-noconflict/ace.js")
      + hscriptsrc("https://botcompany.de/ace-builds/src-noconflict/ext-language_tools.js");
  }
  
  // for each editor
  public S html() {
    id = "ace_" + name;
  
    ret div(htmlEncode2(text), params_stylePlus("display: none", paramsPlus(mapToParams(divParams), +id)))
      + hhiddenWithIDAndName(name)
      + hscript(replaceDollarVars([[ (function() {
        ace.require("ace/ext/language_tools");
        var editor = ace.edit($id);
        editor.setTheme("ace/theme/ambience");
        editor.getSession().setTabSize(2);
        editor.getSession().setUseSoftTabs(true);
        editor.getSession().setUseWrapMode(true);
        document.getElementById($id).style.fontSize='15px';
        editor.setOptions({
          enableBasicAutocompletion: true
        });
      
        var div = $("#" + $id);
        var hiddenVal = document.getElementById($name);
        function updateHidden() {
          div.trigger('input'); // for auto-expand
          //hiddenVal.value = editor.getValue();
          var newVal = editor.getValue();
          if (hiddenVal.value != newVal)
            $(hiddenVal).val(newVal).trigger('change');
        }
        updateHidden();
      
        editor.session.on('change', updateHidden);
        $onKeyDown
  
        div.show();
        //editor.focus();
      })() ]], id := jsQuote(id), name := jsQuote(name),
        onKeyDown := empty(onKeyDown) ? "" : "editor.textInput.getElement().onkeydown = " + onKeyDown + ";");
  }
  
  S complete() { ret linesLL(headStuff(), html()); }
}