Split easymde in multipackages or several files : `easymde` and `easymde-core` ?

If we split easymde in several files, we will allow developpers to cutomize Codemirror with addon of their choice, like Search/Replace or modify require('codemirror/mode/markdown/markdown.js');.

We can split easymde:

• in several packages with lerna ;
• or keep one package and split the main file to several file.

I propose to split easymde in two, the core and the default config (which load the core).

several files

require('easymde/core.js`) // if we want only get core of easymde (without default button and we will be able to use our own `codemirror/mode/markdown/markdown.js`)
require('easymde`) // if we want load default settings

multipackages

You can organize a project/repository codebases into multi-package with Lerna which is a package manager.

• easymde-core: will be the components/addons with all specific functions of easymde ;
• easymde: A turnkey solution which require easymde-core, codemirror, codemirror addons, etc…

easymde should become:

easymde module (click to open)

var CodeMirror = require('codemirror');
require('codemirror/addon/edit/continuelist.js');
require('./codemirror/tablist');
require('codemirror/addon/display/fullscreen.js');
require('codemirror/mode/markdown/markdown.js');
require('codemirror/addon/mode/overlay.js');
require('codemirror/addon/display/placeholder.js');
require('codemirror/addon/selection/mark-selection.js');
require('codemirror/addon/search/searchcursor.js');
require('codemirror/mode/gfm/gfm.js');
require('codemirror/mode/xml/xml.js');
var CodeMirrorSpellChecker = require('codemirror-spell-checker');
var marked = require('marked');

const EasyMDE = require('easymde-core')(CodeMirror);

CodeMirrorSpellChecker({
    codeMirrorInstance: CodeMirror,
});

EasyMDE.prototype.markdown = function (text) {
    if (marked) {
        // Initialize
        var markedOptions;
        if (this.options && this.options.renderingConfig && this.options.renderingConfig.markedOptions) {
            markedOptions = this.options.renderingConfig.markedOptions;
        } else {
            markedOptions = {};
        }

        // Update options
        if (this.options && this.options.renderingConfig && this.options.renderingConfig.singleLineBreaks === false) {
            markedOptions.breaks = false;
        } else {
            markedOptions.breaks = true;
        }

        if (this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true) {

            /* Get HLJS from config or window */
            var hljs = this.options.renderingConfig.hljs || window.hljs;

            /* Check if HLJS loaded */
            if (hljs) {
                markedOptions.highlight = function (code) {
                    return hljs.highlightAuto(code).value;
                };
            }
        }

        // Set options
        marked.setOptions(markedOptions);

        // Convert the markdown to HTML
        var htmlText = marked(text);

        // Sanitize HTML
        if (this.options.renderingConfig && typeof this.options.renderingConfig.sanitizerFunction === 'function') {
            htmlText = this.options.renderingConfig.sanitizerFunction.call(this, htmlText);
        }

        // Edit the HTML anchors to add 'target="_blank"' by default.
        htmlText = addAnchorTargetBlank(htmlText);

        return htmlText;
    }
};

# end of the file

[Ionaru]

I’m going to close this is favour of https://github.com/Ionaru/easy-markdown-editor/issues/262, ESModules support splitting the editor into multiple files and lazy-loading them when needed.

While working on a big rewrite of the editor with all the fancy modern browser features and with an eye on modularity I’ve come up with this:

<script type="module">
    // The index will contain the main EasyMDE export and pointers to other public exports.
    // Using `const { ... } = await import('...');` internally to only load components when needed.
    import { EasyMDE, importToolbar, importDefaultToolbar } from 'https://some-easymde-cdn.com/index.js';
    const easyMDE = new EasyMDE({ element: document.getElementById('my-text-area'), toolbar: false, statusbar: true });

    // Create a detached toolbar.
    const { Toolbar } = await importToolbar(); // Imports toolbar logic (web request).
    const { defaultToolbar } = await importDefaultToolbar(); // Imports toolbar layout and button functions (web request).
    const toolbar = new Toolbar(easyMDE, defaultToolbar);

    document.getElementById('custom-toolbar-container').appendChild(toolbar.element);
</script>

In my opinion this is the way forward instead of making separate Lerna packages.

[Ionaru]

We may be able to look at how https://github.com/microsoft/roosterjs implemented something similar.