Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.44k stars 318 forks source link

Add ability to show custom dialogs #402

Open WolfgangKluge opened 2 years ago

WolfgangKluge commented 2 years ago

Is your feature request related to a problem? Please describe. Instead of the simple prompt-Dialog, I want to show my own dialog at least for links and images.

Describe the solution you'd like The option promptTexts could be extended to allow a function, too. If you treat the functions return value as promise, the solution could be easily done with something like

function drawLink(editor) {
    var cm = editor.codemirror;
    var stat = getState(cm);
    var options = editor.options;
    var url = 'https://';
    var text = options.insertTexts.link;
    var promptResult;

    if (options.promptURLs) {
        var promptText = options.promptTextslink;
        if (typeof promptText === 'function') {
            promptResult = promptOption(type);
        } else {
            promptResult = prompt(promptOption, url);
        }
    } else {
        promptResult = url;
    }

    Promise.resolve(promptResult)
        .then(function (url) {
            drawLinkFinally(editor, url)
        })
        .catch(function () {});
}

function drawLinkFinal(editor, url) {
    var cm = editor.codemirror;
    var stat = getState(cm);
    var options = editor.options;

    if (!url) {
        return false;
    }

    url = escapePromptURL(url);
    _replaceSelection(cm, stat.link, options.insertTexts.link, url);
}

If you don't want to depend upon Promise, you can detect if there's a then-function on the result and use it that way, or (if the then function is missing) use the drawLinkOrImageFinal directly.

Additional context It would be great, if the _replaceSelection would not only replace #url# from a string, but all object values of a map. If you e.g. use { url: "https://xyz", linkText: "My URL" } instead of a string, and the insertTexts-pattern is [#linkText#](#url#), you can have much more complex dialogs. escapePromptURL must be aware in that case, too..

Zignature commented 2 years ago

#395 Pluggable dialog implementations