// 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()); }

}