From 7dd328439814000e35b8bc14b14beaf6a04ac1d9 Mon Sep 17 00:00:00 2001 From: faisal Date: Wed, 24 Aug 2022 18:50:39 -0500 Subject: [PATCH 1/2] Added extractYaml option --- README.md | 9 ++++++++- src/js/easymde.js | 25 +++++++++++++++++++++---- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 5a5d4965..d6d04d75 100644 --- a/README.md +++ b/README.md @@ -261,13 +261,20 @@ const editor = new EasyMDE({ previewClass: "my-custom-styling", previewClass: ["my-custom-styling", "more-custom-styling"], + extractYaml: (yaml) => { + // Extracts yaml from Markdown, use a third party parser to convert to json + // ---- + // Key: value + // --- + console.log(yaml); + } previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser previewRender: (plainText, preview) => { // Async method setTimeout(() => { preview.innerHTML = customMarkdownParser(plainText); }, 250); - // If you return null, the innerHTML of the preview will not + // If you return null, the innerHTML of the preview will not // be overwritten. Useful if you control the preview node's content via // vdom diffing. // return null; diff --git a/src/js/easymde.js b/src/js/easymde.js index 52169631..6ac8ff6b 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -10,6 +10,7 @@ require('codemirror/addon/display/autorefresh.js'); require('codemirror/addon/selection/mark-selection.js'); require('codemirror/addon/search/searchcursor.js'); require('codemirror/mode/gfm/gfm.js'); +require('codemirror/mode/yaml-frontmatter/yaml-frontmatter.js'); require('codemirror/mode/xml/xml.js'); var CodeMirrorSpellChecker = require('codemirror-spell-checker'); var marked = require('marked').marked; @@ -2010,6 +2011,22 @@ EasyMDE.prototype.updateStatusBar = function (itemName, content) { */ EasyMDE.prototype.markdown = function (text) { if (marked) { + // When extractYaml is present we remove it from preview + if (typeof this.options.extractYaml === 'function' && text.indexOf('---') === 0) { + var yaml = text.substring(3); + var closeIdx = yaml.indexOf('---'); + if (closeIdx === -1) { + // yaml-frontmatter can be closed with ... + closeIdx = yaml.indexOf('...'); + } + if (closeIdx != -1) { + text = text.substring(closeIdx + 6); + yaml = yaml.substring(0, closeIdx); + } else { + text = ''; + } + this.options.extractYaml(yaml); + } // Initialize var markedOptions; if (this.options && this.options.renderingConfig && this.options.renderingConfig.markedOptions) { @@ -2115,11 +2132,11 @@ EasyMDE.prototype.render = function (el) { document.addEventListener('keydown', this.documentOnKeyDown, false); var mode, backdrop; - + var defaultMode = typeof options.extractYaml === 'function' ? 'yaml-frontmatter' : 'gfm'; // 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); + return CodeMirror.overlayMode(CodeMirror.getMode(config, options.spellChecker !== false ? 'spell-checker' : defaultMode), options.overlayMode.mode, options.overlayMode.combine); }); mode = 'overlay-mode'; @@ -2127,13 +2144,13 @@ EasyMDE.prototype.render = function (el) { backdrop.gitHubSpice = false; } else { mode = options.parsingConfig; - mode.name = 'gfm'; + mode.name = defaultMode; mode.gitHubSpice = false; } if (options.spellChecker !== false) { mode = 'spell-checker'; backdrop = options.parsingConfig; - backdrop.name = 'gfm'; + backdrop.name = defaultMode; backdrop.gitHubSpice = false; if (typeof options.spellChecker === 'function') { From d3e357b8260a53c9db80370f48d7e916fda8b18d Mon Sep 17 00:00:00 2001 From: faisal Date: Thu, 1 Sep 2022 11:03:12 -0500 Subject: [PATCH 2/2] added extractYaml to option ts and yaml-fm default --- src/js/easymde.js | 10 ++++++---- types/easymde.d.ts | 1 + 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/js/easymde.js b/src/js/easymde.js index 6ac8ff6b..2b68fb96 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -2011,8 +2011,8 @@ EasyMDE.prototype.updateStatusBar = function (itemName, content) { */ EasyMDE.prototype.markdown = function (text) { if (marked) { - // When extractYaml is present we remove it from preview - if (typeof this.options.extractYaml === 'function' && text.indexOf('---') === 0) { + // remove yaml-frontmatter from preview + if (text.indexOf('---') === 0) { var yaml = text.substring(3); var closeIdx = yaml.indexOf('---'); if (closeIdx === -1) { @@ -2025,7 +2025,9 @@ EasyMDE.prototype.markdown = function (text) { } else { text = ''; } - this.options.extractYaml(yaml); + if (this.options.extractYaml) { + this.options.extractYaml(yaml); + } } // Initialize var markedOptions; @@ -2132,7 +2134,7 @@ EasyMDE.prototype.render = function (el) { document.addEventListener('keydown', this.documentOnKeyDown, false); var mode, backdrop; - var defaultMode = typeof options.extractYaml === 'function' ? 'yaml-frontmatter' : 'gfm'; + var defaultMode = 'yaml-frontmatter'; // CodeMirror overlay mode if (options.overlayMode) { CodeMirror.defineMode('overlay-mode', function (config) { diff --git a/types/easymde.d.ts b/types/easymde.d.ts index decd4ca9..cb16b539 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -182,6 +182,7 @@ declare namespace EasyMDE { autoRefresh?: boolean | { delay: number; }; blockStyles?: BlockStyleOptions; element?: HTMLElement; + extractYaml?: (yaml: string) => void; forceSync?: boolean; hideIcons?: ReadonlyArray; indentWithTabs?: boolean;