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

[A-312]

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]

Can we somehow provide this as an optional thing, so we kan keep the does-it-all minified script?

[A-312]

I think we can

[triszt4n]

Would love to see this solution with codemirror's themes, because I'd like to use the darcula theme (everybody deserves a dark theme 🕶️ ).

[Zignature]

Would love to see this solution with codemirror's themes, because I'd like to use the darcula theme (everybody deserves a dark theme 🕶️ ).

By this time you may have figured it out already. Just thought I'd mention that you can use any CodeMirror theme. It will only affect the editor. The toolbar, the (side)preview and the status bar won't be affected:
new EasyMDE({theme: "darcula"});

You have to add the link to the css file in the head section of your page yourself:
<link type="text/css" rel="stylesheet" href="https://codemirror.net/theme/darcula.css">

This will work for all CodeMirror styles.

[Ionaru]

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

[Zignature]

That looks like a great concept

[Ionaru]

I'm going to close this is favour of #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.