Merge pull request #100 from Ionaru/custom-preview-class

Added option to override the preview screen styling, closes #99

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
 
 <!-- Linked issues -->
+[#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
 
 <!-- Linked users -->
+[@sn3p]: https://github.com/sn3p
 [@roryok]: https://github.com/roryok
 [@ysykzheng]: https://github.com/ysykzheng
 [@roipoussiere]: https://github.com/roipoussiere

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
 	},

src/css/easymde.css

@@ -213,14 +213,12 @@
     content: 'characters: '
 }
 
-.editor-preview {
+.editor-preview-full {
-    padding: 10px;
     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 {
-.editor-preview-side > p {
+    padding: 10px;
+    background: #fafafa;
+}
+
+.editor-preview > p {
     margin-top: 0
 }
 
-.editor-preview pre,
+.editor-preview pre {
-.editor-preview-side pre {
     background: #eee;
     margin-bottom: 10px;
 }
 
 .editor-preview table td,
-.editor-preview table th,
+.editor-preview table th {
-.editor-preview-side table td,
-.editor-preview-side table th {
     border: 1px solid #ddd;
     padding: 5px;
 }

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);
     }
 

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();

types/easymde.d.ts

@@ -100,6 +100,7 @@ declare namespace EasyMDE {
         lineWrapping?: boolean;
         parsingConfig?: ParsingOptions;
         placeholder?: string;
+        previewClass?: string | ReadonlyArray<string>;
         previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string;
         promptURLs?: boolean;
         renderingConfig?: RenderingOptions;