Closed A-312 closed 2 years ago
Can we somehow provide this as an optional thing, so we kan keep the does-it-all minified script?
I think we can
Would love to see this solution with codemirror's themes, because I'd like to use the darcula theme (everybody deserves a dark theme 🕶️ ).
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.
We may be able to look at how https://github.com/microsoft/roosterjs implemented something similar.
That looks like a great concept
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.
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:
I propose to split easymde in two, the core and the default config (which load the core).
several files
multipackages
You can organize a project/repository codebases into multi-package with Lerna which is a package manager.
easymde-core
: will be thecomponents
/addons
with all specific functions of easymde ;easymde
: Aturnkey solution
which requireeasymde-core
,codemirror
, codemirror addons, etc...easymde should become:
easymde module (click to open)
```js 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 ```