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

Added option to override the preview screen styling, closes #99
pull/104/head
Jeroen Akkerman 5 years ago committed by GitHub
commit a919391e34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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

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

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

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

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

@ -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;

Loading…
Cancel
Save