Merge pull request #244 from czynskee/cm_overlay_mode_param

Cm overlay mode param

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
+### Added
+- `overlayMode` options to supply an additional codemirror mode ([#243]).
+
 ### Fixed
 - Corrected default size units from `b,Kb,Mb` to ` B, KB, MB` ([#239]).
 

README.md

@@ -23,25 +23,27 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
 
 ## Quick access
 
-- [Install EasyMDE](#install-easymde)
+- [EasyMDE - Markdown Editor](#easymde---markdown-editor)
-- [How to use](#how-to-use)
+  - [Quick access](#quick-access)
-	- [Loading the editor](#loading-the-editor)
+  - [Install EasyMDE](#install-easymde)
-	- [Editor functions](#editor-functions)
+  - [How to use](#how-to-use)
-- [Configuration](#configuration)
+    - [Loading the editor](#loading-the-editor)
-	- [Options list](#options-list)
+    - [Editor functions](#editor-functions)
-	- [Options example](#options-example)
+  - [Configuration](#configuration)
-	- [Toolbar icons](#toolbar-icons)
+    - [Options list](#options-list)
-	- [Toolbar customization](#toolbar-customization)
+    - [Options example](#options-example)
-	- [Keyboard shortcuts](#keyboard-shortcuts)
+    - [Toolbar icons](#toolbar-icons)
-- [Advanced use](#advanced-use)
+    - [Toolbar customization](#toolbar-customization)
-	- [Event handling](#event-handling)
+    - [Keyboard shortcuts](#keyboard-shortcuts)
-	- [Removing EasyMDE from text area](#removing-easymde-from-text-area)
+  - [Advanced use](#advanced-use)
-	- [Useful methods](#useful-methods)
+    - [Event handling](#event-handling)
-- [How it works](#how-it-works)
+    - [Removing EasyMDE from text area](#removing-easymde-from-text-area)
-- [SimpleMDE fork](#simplemde-fork)
+    - [Useful methods](#useful-methods)
-- [Hacking EasyMDE](#hacking-easymde)
+  - [How it works](#how-it-works)
-- [Contributing](#contributing)
+  - [SimpleMDE fork](#simplemde-fork)
-- [License](#license)
+  - [Hacking EasyMDE](#hacking-easymde)
+  - [Contributing](#contributing)
+  - [License](#license)
 
 
 ## Install EasyMDE
@@ -147,6 +149,9 @@ easyMDE.value('New input for **EasyMDE**');
   - **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
   - **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
   - **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
+- **overlayMode**: Pass a custom codemirror [overlay mode](https://codemirror.net/doc/manual.html#modeapi) to parse and style the Markdown during editing.
+  - **mode**: A codemirror mode object.
+  - **combine**: If set to `false`, will *replace* CSS classes returned by the default Markdown mode. Otherwise the classes returned by the custom mode will be combined with the classes returned by the default mode. Defaults to `true`. 
 - **placeholder**: If set, displays a custom placeholder message.
 - **previewClass**: A string or array of strings that will be applied to the preview screen when activated. Defaults to `"editor-preview"`.
 - **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.

src/js/easymde.js

@@ -1745,6 +1745,10 @@ function EasyMDE(options) {
     if (options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != '')
         options.autosave.uniqueId = options.autosave.unique_id;
 
+    // If overlay mode is specified and combine is not provided, default it to true
+    if (options.overlayMode && options.overlayMode.combine === undefined) {
+      options.overlayMode.combine = true;
+    }
 
     // Update this options
     this.options = options;
@@ -1981,7 +1985,25 @@ EasyMDE.prototype.render = function (el) {
     document.addEventListener('keydown', this.documentOnKeyDown, false);
 
     var mode, backdrop;
-    if (options.spellChecker !== false) {
+
+    // CodeMirror overlay mode
+    if (options.overlayMode) {
+      CodeMirror.defineMode('overlay-mode', function(config) {
+        return CodeMirror.overlayMode(CodeMirror.getMode(config, options.spellChecker !== false ? 'spell-checker' : 'gfm'), options.overlayMode.mode, options.overlayMode.combine);
+      });
+      
+      mode = 'overlay-mode';
+      backdrop = options.parsingConfig;
+      backdrop.gitHubSpice = false;
+
+      if (options.spellChecker !== false) {
+        backdrop.name = 'gfm';
+
+        CodeMirrorSpellChecker({
+          codeMirrorInstance: CodeMirror,
+        });
+
+      } else if (options.spellChecker !== false) {
         mode = 'spell-checker';
         backdrop = options.parsingConfig;
         backdrop.name = 'gfm';
@@ -1990,6 +2012,7 @@ EasyMDE.prototype.render = function (el) {
         CodeMirrorSpellChecker({
             codeMirrorInstance: CodeMirror,
         });
+      }
     } else {
         mode = options.parsingConfig;
         mode.name = 'gfm';

types/easymde.d.ts

@@ -159,6 +159,11 @@ declare namespace EasyMDE {
         importError?: string;
     }
 
+    interface OverlayModeOptions {
+      mode: CodeMirror.Mode<any>
+      combine?: boolean
+    }    
+
     interface Options {
         autoDownloadFontAwesome?: boolean;
         autofocus?: boolean;
@@ -205,6 +210,8 @@ declare namespace EasyMDE {
 
         promptTexts?: PromptTexts;
         syncSideBySidePreviewScroll?: boolean;
+
+        overlayMode?: OverlayModeOptions
     }
 }