From 5ffeba5a3cb8134b2b8ec10e84d2d61675cd03a8 Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Fri, 12 Jul 2019 14:00:23 +0200 Subject: [PATCH 1/3] Added option to override the preview screen styling --- README.md | 5 +++++ src/css/easymde.css | 21 +++++++++------------ src/js/easymde.js | 35 +++++++++++++++++++++++++++++++++-- 3 files changed, 47 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index c3446f7..2b2ab92 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,7 @@ easyMDE.value('New input for **EasyMDE**'); - **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`. - **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. - **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`. - **promptTexts**: Customize the text used to prompt for URLs. @@ -201,6 +202,10 @@ var editor = new EasyMDE({ underscoresBreakWords: true, }, placeholder: "Type here...", + + previewClass: "my-custom-styling", + previewClass: ["my-custom-styling", "more-custom-styling"], + previewRender: function(plainText) { return customMarkdownParser(plainText); // Returns HTML from a custom parser }, diff --git a/src/css/easymde.css b/src/css/easymde.css index 3843bdc..a027a14 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -213,14 +213,12 @@ content: 'characters: ' } -.editor-preview { - padding: 10px; +.editor-preview-full { position: absolute; width: 100%; height: 100%; top: 0; left: 0; - background: #fafafa; z-index: 7; overflow: auto; display: none; @@ -228,13 +226,11 @@ } .editor-preview-side { - padding: 10px; position: fixed; bottom: 0; width: 50%; top: 50px; right: 0; - background: #fafafa; z-index: 9; overflow: auto; display: none; @@ -251,21 +247,22 @@ display: block } -.editor-preview > p, -.editor-preview-side > p { +.editor-preview { + padding: 10px; + background: #fafafa; +} + +.editor-preview > p { margin-top: 0 } -.editor-preview pre, -.editor-preview-side pre { +.editor-preview pre { background: #eee; margin-bottom: 10px; } .editor-preview table td, -.editor-preview table th, -.editor-preview-side table td, -.editor-preview-side table th { +.editor-preview table th { border: 1px solid #ddd; padding: 5px; } diff --git a/src/js/easymde.js b/src/js/easymde.js index 1ed5083..0d8aa5c 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -818,9 +818,23 @@ function togglePreview(editor) { var toolbar_div = wrapper.previousSibling; var toolbar = editor.options.toolbar ? editor.toolbarElements.preview : false; var preview = wrapper.lastChild; - if (!preview || !/editor-preview/.test(preview.className)) { + if (!preview || !/editor-preview-full/.test(preview.className)) { + preview = document.createElement('div'); - preview.className = 'editor-preview'; + preview.className = 'editor-preview-full'; + + if (editor.options.previewClass) { + + if (Array.isArray(editor.options.previewClass)) { + for (var i = 0; i < editor.options.previewClass.length; i++) { + preview.className += (' ' + editor.options.previewClass[i]); + } + + } else if (typeof editor.options.previewClass === 'string') { + preview.className += (' ' + editor.options.previewClass); + } + } + wrapper.appendChild(preview); } if (/editor-preview-active/.test(preview.className)) { @@ -1440,6 +1454,10 @@ function EasyMDE(options) { } } + // Editor preview styling class. + if (!Object.prototype.hasOwnProperty.call(options, 'previewClass')) { + options.previewClass = 'editor-preview'; + } // Handle status bar if (!Object.prototype.hasOwnProperty.call(options, 'status')) { @@ -1772,6 +1790,19 @@ EasyMDE.prototype.createSideBySide = function () { if (!preview || !/editor-preview-side/.test(preview.className)) { preview = document.createElement('div'); preview.className = 'editor-preview-side'; + + if (this.options.previewClass) { + + if (Array.isArray(this.options.previewClass)) { + for (var i = 0; i < this.options.previewClass.length; i++) { + preview.className += (' ' + this.options.previewClass[i]); + } + + } else if (typeof this.options.previewClass === 'string') { + preview.className += (' ' + this.options.previewClass); + } + } + wrapper.parentNode.insertBefore(preview, wrapper.nextSibling); } From 71170a7eef2576dd45ca27f22ad3158c3cd0c815 Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Fri, 12 Jul 2019 14:10:56 +0200 Subject: [PATCH 2/3] Updated changelog for previewClass feature, closes #99 --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 62d4069..03e9a46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ 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 +- `previewClass` option for overwriting the preview screen class ([#99]). + ### Fixed - Updated dependencies to resolve potential security issue. - Resolved small code style issues shown by new eslint rules. @@ -105,6 +108,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown - Cursor not always showing in "text" mode over the edit field +[#99]: https://github.com/Ionaru/easy-markdown-editor/issues/99 [#45]: https://github.com/Ionaru/easy-markdown-editor/issues/45 [#44]: https://github.com/Ionaru/easy-markdown-editor/issues/44 [#41]: https://github.com/Ionaru/easy-markdown-editor/issues/41 @@ -124,6 +128,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown [#19]: https://github.com/Ionaru/easy-markdown-editor/pull/19 +[@sn3p]: https://github.com/sn3p [@roryok]: https://github.com/roryok [@ysykzheng]: https://github.com/ysykzheng [@roipoussiere]: https://github.com/roipoussiere From 7cfeb37257b73352bb8e1dcc6caf770dbd50a6cd Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Fri, 12 Jul 2019 14:36:59 +0200 Subject: [PATCH 3/3] Added typings for new option --- types/easymde-test.ts | 31 +++++++++++++++++++++++++++++++ types/easymde.d.ts | 1 + 2 files changed, 32 insertions(+) diff --git a/types/easymde-test.ts b/types/easymde-test.ts index 2d5f5b7..f240ee9 100644 --- a/types/easymde-test.ts +++ b/types/easymde-test.ts @@ -7,6 +7,7 @@ const editor = new EasyMDE({ drawTable: 'Cmd-Alt-T', toggleFullScreen: null }, + previewClass: 'my-custom-class', spellChecker: false, onToggleFullScreen: (full: boolean) => { console.log('FullscreenToggled', full); @@ -28,3 +29,33 @@ editor.codemirror.setOption('readOnly', true); EasyMDE.toggleItalic = (editor: EasyMDE) => { console.log('SomeButtonOverride'); }; + +const editor2 = new EasyMDE({ + autoDownloadFontAwesome: undefined, + previewClass: ['my-custom-class', 'some-other-class'], + toolbar: [{ + name: 'bold', + action: EasyMDE.toggleBold, + className: 'fa fa-bolt', + title: 'Bold', + }, '|', { // Separator + name: 'alert', + action: (editor) => { + alert('This is from a custom button action!'); + // Custom functions have access to the `editor` instance. + }, + className: 'fa fa-star', + title: 'A Custom Button', + noDisable: undefined, + noMobile: false, + }, '|', { + name: 'link', + action: 'https://github.com/Ionaru/easy-markdown-editor', + className: 'fa fab fa-github', + title: 'A Custom Link', + noDisable: true, + noMobile: true, + }] +}); + +editor2.clearAutosavedValue(); diff --git a/types/easymde.d.ts b/types/easymde.d.ts index 07e9d4c..d5ce507 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -100,6 +100,7 @@ declare namespace EasyMDE { lineWrapping?: boolean; parsingConfig?: ParsingOptions; placeholder?: string; + previewClass?: string | ReadonlyArray; previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string; promptURLs?: boolean; renderingConfig?: RenderingOptions;