Notify Episerver about change after selecting content in a content selector dialog

Vote:
 

Hi.

I'm working on image support within a markdown editor based on SimpleMDE. The editor works great but I can't figure out how I should inform Episerver about change after the editor has selected an image in a content selector dialog.

If I just append an image-markdown-tag without going through the content selector dialog Episerver picks up the change, an tells the editor that there are changes to be published.

Note that the _imageSelected-function is called directly within the _openImageSelector-function (The code is simplified to point out the issue):

define([
    "dojo/_base/declare",
    "dojo/_base/config",
    "dojo/_base/lang",
    "dojo/_base/Deferred",
    "dojo/ready",
    "dojo/aspect",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/request/script",
    "dojo/when",
    "dijit/form/Textarea",
    "epi/epi", 
    "epi/dependency",
    "epi-cms/widget/ContentSelectorDialog",
    "epi/shell/widget/dialog/Dialog",
    "xxx/editors/markdowneditor/simplemde/simplemde.min",
    "xstyle/css!./simplemde/simplemde.min.css",
    "xstyle/css!./template.css"
],

    function (
        declare,
        config,
        lang,
        Deferred,
        ready,
        aspect,
        dom,
        domClass,
        script,
        when,
        Textarea,
        epi,
        dependency,
        ContentSelectorDialog,
        Dialog,
        SimpleMDE
    ) {
        return declare([Textarea],
            {
                editor: null, 

                resize: function () {

                    this.inherited(arguments);

                    this._refreshEditor();
                },

                buildRendering: function () {

                    // Create container to simplify styling            
                    this.templateString = '
' + this.templateString + '
'; this.inherited(arguments); }, startup: function () { this._refreshEditor(); this.inherited(arguments); }, _openImageSelector: function () { this._imageSelected(); }, _imageSelected: function () { var codeMirror = this.editor.codemirror, output = '![Test](http://test.se)'; codeMirror.replaceSelection(output); var value = this.editor.value(); this._set("value", value); this.onChange(value); }, _refreshEditor: function () { if (!this.editor) { this.editor = new SimpleMDE({ element: this.textbox, placeholder: this.tooltip, spellChecker: false, initialValue: this.value, forceSync: true, status: ["lines", "words"], toolbar: [ "bold", "italic", "heading", "unordered-list", "ordered-list", "link", { name: "Image", action: lang.hitch(this, this._openImageSelector), className: "fa fa-image", title: "Insert image" }, "preview"] }); } if (typeof this.value !== 'object' && !epi.areEqual(this.editor.value(), this.value)) { this.editor.value(this.value); } this.editor.codemirror.refresh(); } }); });

But if I hook up the _imageSelected-function to the "execute"-event of the dialog, Episerver doesn't pick up the change:

define([
    "dojo/_base/declare",
    "dojo/_base/config",
    "dojo/_base/lang",
    "dojo/_base/Deferred",
    "dojo/ready",
    "dojo/aspect",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/request/script",
    "dojo/when",
    "dijit/form/Textarea",
    "epi/epi", 
    "epi/dependency",
    "epi-cms/widget/ContentSelectorDialog",
    "epi/shell/widget/dialog/Dialog",
    "xxx/editors/markdowneditor/simplemde/simplemde.min",
    "xstyle/css!./simplemde/simplemde.min.css",
    "xstyle/css!./template.css"
],

    function (
        declare,
        config,
        lang,
        Deferred,
        ready,
        aspect,
        dom,
        domClass,
        script,
        when,
        Textarea,
        epi,
        dependency,
        ContentSelectorDialog,
        Dialog,
        SimpleMDE
    ) {
        return declare([Textarea],
            {
                editor: null, 

                resize: function () {

                    this.inherited(arguments);

                    this._refreshEditor();
                },

                buildRendering: function () {

                    // Create container to simplify styling            
                    this.templateString = '
' + this.templateString + '
'; this.inherited(arguments); }, startup: function () { this._refreshEditor(); this.inherited(arguments); }, _openImageSelector: function () { var contentRepositoryDescriptors = dependency.resolve("epi.cms.contentRepositoryDescriptors"), roots = contentRepositoryDescriptors["media"].roots, imageSelectorDialog = new ContentSelectorDialog({ canSelectOwnerContent: false, showButtons: false, roots: roots, allowedTypes: ["episerver.core.icontentimage"], showAllLanguages: true }), dialog = new Dialog({ title: "Select a image", dialogClass: "epi-dialog-portrait", content: imageSelectorDialog }); dialog.show(); dialog.on("execute", lang.hitch(this, this._imageSelected)); }, _imageSelected: function () { var codeMirror = this.editor.codemirror, output = '![Test](http://test.se)'; codeMirror.replaceSelection(output); var value = this.editor.value(); this._set("value", value); this.onChange(value); }, _refreshEditor: function () { if (!this.editor) { this.editor = new SimpleMDE({ element: this.textbox, placeholder: this.tooltip, spellChecker: false, initialValue: this.value, forceSync: true, status: ["lines", "words"], toolbar: [ "bold", "italic", "heading", "unordered-list", "ordered-list", "link", { name: "Image", action: lang.hitch(this, this._openImageSelector), className: "fa fa-image", title: "Insert image" }, "preview"] }); } if (typeof this.value !== 'object' && !epi.areEqual(this.editor.value(), this.value)) { this.editor.value(this.value); } this.editor.codemirror.refresh(); } }); });

Clearly I'm missing something?

Thanks,

Anton

#185285
Edited, Nov 14, 2017 12:49
Vote:
 

Seems like wrapping the code in setTimeout makes the content change happen, this but it feels a bit hackish and it would problably not work every time due to timing issues... and I don't get why it works when it's wrapped in a setTimout?

_imageSelected: function () {

    setTimeout(lang.hitch(this, function() {
                        
        var codeMirror = this.editor.codemirror,
            output = '![Test](http://test.se)';

        codeMirror.replaceSelection(output);

        var value = this.editor.value();

        this._set("value", value);

        this.onChange(value);

    }), 500);

},
#185287
Edited, Nov 14, 2017 14:52