How get works scroll container with SimpleMDE and Qooxdoo?

I will really appreciate your help, you see: I'm trying to get a qooxdoo widget that build an SimpleMDE Editor. You can check my test code at playground:

qx.Class.define("MdEditor", {
  extend: qx.ui.core.Widget,

  construct: function() {
    this.base(arguments);
    this.addListenerOnce("appear", this.__appearRenderer, this);
  },

  members: {
    __appearRenderer: function() {

      qx.bom.Stylesheet.includeFile('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css');

      var dynLoader = new qx.util.DynamicScriptLoader (
        ["https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"]
      );

      dynLoader.addListenerOnce("ready", function(e) {
        this.debug("Simple MDE editor loaded");

        var contentEl = this.getContentElement();

        var editor = new SimpleMDE({
          element: contentEl.getDomElement(),
          spellChocker: false
        });

      }, this);

      dynLoader.start();
    },

    _createContentElement: function() {
      return new qx.html.Input("textarea");
    }
  }
});

var win = new qx.ui.window.Window("Simple MDE");
win.setWidth(400);
win.setHeight(280);
win.setShowMinimize(false);
win.setLayout(new qx.ui.layout.Grow());

var compo = new qx.ui.container.Scroll();
compo.add(new MdEditor());

win.add(compo);

this.getRoot().add(win, {left:20, top:20});


win.open();

Actually the instance is created and shown, but when you write text beyond the visible space the «expected» scrollbars are not show, and at console I got this error Error in property scrollY of class qx.ui.core.scroll.ScrollPane in method setScrollY with incoming value '131': Is invalid!.

I was try to shown the native scrollbars of SimpleMDE but not success. Now, I want show scrollbars managed by qooxdoo, but cannot figure out how to archive that.

Solution

The SimpleMDE editor, which is a wrapped up CodeMirror editor, does the same as other editor like CKEditor do: it places it's own div as a child of the parent div of a given textarea element.

To make this work and have the div as a child of a qooxdoo widgets content element, you have to create a div as a content element and the textarea as a child of that div:

_createContentElement: function() {
  // create a div content element which will be the parent for
  // the editor div
  var ce = new qx.html.Element("div");

  // and add a textarea as a child to the former div
  // as the editor only sets the textarea to display:none
  this.__textareaContentElement = new qx.html.Input("textarea");

  ce.add(this.__textareaContentElement);

  return ce;
}

The second thing is that you have to actively set the height of the editor manually, as it has no API for that, by retrieving the top div and the scroller div of the editor, which can be done with

this.__cm = qx.bom.Selector.query(".CodeMirror", content_element)[0];
this.__cmscroll = qx.bom.Selector.query(".CodeMirror-scroll", content_element)[0];

where content_element is the (well) content element of our wrapper widget. Now you can set the height of the CodeMirror and CodeMirror-scroll initially and within a resize listener of the wrapper so that it fits.

var hint = this.getBounds();
var height = (hint.height-83-22-22-12)+"px";
this.__cm.style.height = height;
this.__cm.style.minHeight = height;
this.__cmscroll.style.minHeight = height;

Please note, that the "magic" calculations of the height should be optimized by retrieving the real height of the toolbar and the status bar of the editor. I've extended those calculations in the playground example below to calculate the real heights of the elements and added a listener for the resize of the toolbar, which may change it's height depending on how many icons can be shown in one or multiple lines.

Please have a look into this playground example which works, but should be refined:

http:// tinyurl.com/zn7on7l (please remove the blank after http://)

Also note that SimpleMDE and codemirror seem to be limited in API by means of having methods to set the height of the editor parts/elements.