diff --git a/CHANGELOG.md b/CHANGELOG.md index fda26dd..388368a 100644 --- a/CHANGELOG.md +++ b/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]). diff --git a/README.md b/README.md index 2aa1b7e..c713992 100644 --- a/README.md +++ b/README.md @@ -23,25 +23,27 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr ## Quick access -- [Install EasyMDE](#install-easymde) -- [How to use](#how-to-use) - - [Loading the editor](#loading-the-editor) - - [Editor functions](#editor-functions) -- [Configuration](#configuration) - - [Options list](#options-list) - - [Options example](#options-example) - - [Toolbar icons](#toolbar-icons) - - [Toolbar customization](#toolbar-customization) - - [Keyboard shortcuts](#keyboard-shortcuts) -- [Advanced use](#advanced-use) - - [Event handling](#event-handling) - - [Removing EasyMDE from text area](#removing-easymde-from-text-area) - - [Useful methods](#useful-methods) -- [How it works](#how-it-works) -- [SimpleMDE fork](#simplemde-fork) -- [Hacking EasyMDE](#hacking-easymde) -- [Contributing](#contributing) -- [License](#license) +- [EasyMDE - Markdown Editor](#easymde---markdown-editor) + - [Quick access](#quick-access) + - [Install EasyMDE](#install-easymde) + - [How to use](#how-to-use) + - [Loading the editor](#loading-the-editor) + - [Editor functions](#editor-functions) + - [Configuration](#configuration) + - [Options list](#options-list) + - [Options example](#options-example) + - [Toolbar icons](#toolbar-icons) + - [Toolbar customization](#toolbar-customization) + - [Keyboard shortcuts](#keyboard-shortcuts) + - [Advanced use](#advanced-use) + - [Event handling](#event-handling) + - [Removing EasyMDE from text area](#removing-easymde-from-text-area) + - [Useful methods](#useful-methods) + - [How it works](#how-it-works) + - [SimpleMDE fork](#simplemde-fork) + - [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. diff --git a/src/js/easymde.js b/src/js/easymde.js index 6a62914..a99e29d 100644 --- a/src/js/easymde.js +++ b/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'; diff --git a/types/easymde.d.ts b/types/easymde.d.ts index e6dfaf2..570c609 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -159,6 +159,11 @@ declare namespace EasyMDE { importError?: string; } + interface OverlayModeOptions { + mode: CodeMirror.Mode + combine?: boolean + } + interface Options { autoDownloadFontAwesome?: boolean; autofocus?: boolean; @@ -205,6 +210,8 @@ declare namespace EasyMDE { promptTexts?: PromptTexts; syncSideBySidePreviewScroll?: boolean; + + overlayMode?: OverlayModeOptions } }