SimpleMDE editor as custom widget, SurveyJS Library Example

<!DOCTYPE html>
<html>
    <head>
        <title>WYSIWYG editor for plaform jQuery, SurveyJS Library Example</title>
        <script src="https://unpkg.com/jquery"></script>
        <script src="https://surveyjs.azureedge.net/1.0.0/survey.jquery.js"></script>
        <link href="https://surveyjs.azureedge.net/1.0.0/survey.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="./index.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
        <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    </head>
    <body>
        <div id="surveyElement"></div>
        <div id="surveyResult"></div>
        <script type="text/javascript" src="./customwidget-simplemde.js"></script>
        <script type="text/javascript" src="./index.js"></script>

    </body>
</html>

Survey
    .StylesManager
    .applyTheme("default");

var json = {
    "elements": [
        {
            "type": "editor",
            "name": "SimpleMDE"
        }
    ]
};

window.survey = new Survey.Model(json);

survey
    .onComplete
    .add(function (result) {
        document
            .querySelector('#surveyResult')
            .innerHTML = "result: " + JSON.stringify(result.data);
    });

$("#surveyElement").Survey({model: survey});

.btn-green {
    background-color: #1ab394;
    color: #fff;
    border-radius: 3px;
}
.btn-green:focus,
.btn-green:hover {
    background-color: #18a689;
    color: #fff;
}
.panel-footer {
    padding: 0 15px;
    border: none;
    text-align: right;
    background-color: #fff;
}

function init(Survey) {
  var widget = {
    name: "editor",
    title: "Editor",
    iconName: "icon-editor",
    widgetIsLoaded: function() {
      return typeof SimpleMDE != "undefined";
    },
    isFit: function(question) {
      return question.getType() === "editor";
    },
    htmlTemplate:
      "<textarea></textarea>",
    activatedByChanged: function(activatedBy) {
      Survey.JsonObject.metaData.addClass("editor", [], null, "empty");
      /*
      Survey.JsonObject.metaData.addProperty("editor", {
        name: "height",
        default: 300
      });
      */
    },
    afterRender: function(question, el) {
      var simplemde = new SimpleMDE({ element: el.firstChild,  initialValue: question.value});
      var isValueChanging = false;
      var updateValueHandler = function() {
        if (isValueChanging) return;
        simplemde.value(question.value);
      };
      simplemde.codemirror.on('change', function() {
        isValueChanging = true;
        question.value = simplemde.value();
        isValueChanging = false;
      });
      question.valueChangedCallback = updateValueHandler;
    },
    willUnmount: function(question, el) {}
  };

  Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
}

if (typeof Survey !== "undefined") {
  init(Survey);
}