Merge remote-tracking branch 'upstream/master'

Author: Cherry

.travis.yml

@@ -1,10 +1,10 @@
 language: node_js
 node_js:
+  - '14' # EOL: April 2023
   - '12' # EOL: April 2022
   - '11' # EOL: June 2019
   - '10' # EOL: April 2021
   - '8' # EOL: December 2019
-  - '6' # EOL: April 2019
 
 jobs:
   include:

CHANGELOG.md

@@ -4,7 +4,42 @@ All notable changes to easymde will be documented in this file.
 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]-->
+## [Unreleased]
+### Added
+- Support for Node.js 14.
+- Preview without fullscreen (Thanks to [@nick-denry], [#196]).
+
+### Fixed
+- Fix cursor displayed position on activity ([#183]).
+- Checkboxes always have bullets in front of them ([#136]).
+- Save the text only when modifying the content of the easymde instance (Thanks to [@firm1], [#181]).
+
+## [2.10.1] - 2020-04-06
+### Fixed
+- Typescript error when entering certain strings for toolbar buttons ([#178]).
+
+## [2.10.0] - 2020-04-02
+### Added
+- `inputStyle` and `nativeSpellcheck` options to manage the native language of the browser (Thanks to [@firm1], [#143]).
+- Group buttons in drop-down lists by adding a sub-option `children` for the items in the toolbar (Thanks to [@firm1], [#141]).
+- `sanitizerFunction` option to allow custom HTML sanitizing in the markdown preview (Thanks to [@adamb70], [#147]).
+- Time formatting and custom text options for the autosave message (Thanks to [@dima-bzz], [#170]).
+### Changed
+- Delay before assuming that submit of the form as failed is `autosave.submit_delay` instead of `autosave.delay` (Thanks to [@Situphen], [#139]).
+- Add `watch` task for gulp (Thanks to [@A-312], [#150]).
+### Fixed
+- Issue with Marked when using IE11 and webpack (Thanks to [@felipefdl], [#169]).
+- Updated codemirror to version 5.52.2 (Thanks to [@A-312], [#173]).
+- Editor displaying on top of other elements on a webpage (Thanks to [@StefKors], [#175]).
+
+## [2.9.0] - 2020-01-13
+### Added
+- Missing minHeight option in type definition (Thanks to [@t49tran], [#123]).
+- Other missing type definitions ([#126]).
+
+### Changed
+- The editor will remove its saved contents when the editor is emptied, allowing to reload a default value (Thanks to [@Situphen], [#132]).
+
 ## [2.8.0] - 2019-08-20
 ### Added
 - Upload images functionality (Thanks to [@roipoussiere] and [@JeroenvO], [#71], [#101]).
@@ -119,6 +154,10 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 - Cursor not always showing in "text" mode over the edit field
 
 <!-- Linked issues -->
+[#183]: https://github.com/Ionaru/easy-markdown-editor/issues/183
+[#178]: https://github.com/Ionaru/easy-markdown-editor/issues/178
+[#136]: https://github.com/Ionaru/easy-markdown-editor/issues/136
+[#126]: https://github.com/Ionaru/easy-markdown-editor/issues/126
 [#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
@@ -131,6 +170,18 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [#9]: https://github.com/Ionaru/easy-markdown-editor/issues/9
 
 <!-- Linked PRs -->
+[#196]: https://github.com/Ionaru/easy-markdown-editor/pull/196
+[#175]: https://github.com/Ionaru/easy-markdown-editor/pull/175
+[#173]: https://github.com/Ionaru/easy-markdown-editor/pull/173
+[#170]: https://github.com/Ionaru/easy-markdown-editor/pull/170
+[#169]: https://github.com/Ionaru/easy-markdown-editor/pull/169
+[#150]: https://github.com/Ionaru/easy-markdown-editor/pull/150
+[#147]: https://github.com/Ionaru/easy-markdown-editor/pull/147
+[#143]: https://github.com/Ionaru/easy-markdown-editor/pull/143
+[#141]: https://github.com/Ionaru/easy-markdown-editor/pull/141
+[#139]: https://github.com/Ionaru/easy-markdown-editor/pull/139
+[#132]: https://github.com/Ionaru/easy-markdown-editor/pull/132
+[#123]: https://github.com/Ionaru/easy-markdown-editor/pull/123
 [#109]: https://github.com/Ionaru/easy-markdown-editor/pull/109
 [#106]: https://github.com/Ionaru/easy-markdown-editor/pull/106
 [#101]: https://github.com/Ionaru/easy-markdown-editor/pull/101
@@ -144,6 +195,14 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [#19]: https://github.com/Ionaru/easy-markdown-editor/pull/19
 
 <!-- Linked users -->
+[@nick-denry]: https://github.com/nick-denry
+[@StefKors]: https://github.com/StefKors
+[@felipefdl]: https://github.com/felipefdl
+[@A-312]: https://github.com/A-312
+[@dima-bzz]: https://github.com/dima-bzz
+[@firm1]: https://github.com/firm1
+[@Situphen]: https://github.com/Situphen
+[@t49tran]: https://github.com/t49tran
 [@richtera]: https://github.com/richtera
 [@jfly]: https://github.com/jfly
 [@sperezp]: https://github.com/sperezp
@@ -162,7 +221,10 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [@sne11ius]: https://github.com/sne11ius
 
 <!-- Linked versions -->
-[Unreleased]: https://github.com/Ionaru/easy-markdown-editor/compare/2.8.0...HEAD
+[Unreleased]: https://github.com/Ionaru/easy-markdown-editor/compare/2.10.1...HEAD
+[2.10.1]: https://github.com/Ionaru/easy-markdown-editor/compare/2.10.0...2.10.1
+[2.10.0]: https://github.com/Ionaru/easy-markdown-editor/compare/2.9.0...2.10.0
+[2.9.0]: https://github.com/Ionaru/easy-markdown-editor/compare/2.8.0...2.9.0
 [2.8.0]: https://github.com/Ionaru/easy-markdown-editor/compare/2.7.0...2.8.0
 [2.7.0]: https://github.com/Ionaru/easy-markdown-editor/compare/2.6.1...2.7.0
 [2.6.1]: https://github.com/Ionaru/easy-markdown-editor/compare/2.6.0...2.6.1

README.md

@@ -25,18 +25,18 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
 
 - [Install EasyMDE](#install-easymde)
 - [How to use](#how-to-use)
-  - [Loading the editor](#loading-the-editor)
-  - [Editor functions](#editor-functions)
+	- [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)
+	- [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)
+	- [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)
@@ -120,7 +120,10 @@ easyMDE.value('New input for **EasyMDE**');
 - **autosave**: *Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.*
   - **enabled**: If set to `true`, saves the text automatically. Defaults to `false`.
   - **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
+  - **submit_delay**: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to `autosave.delay` or `10000` (10s).
   - **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
+  - **timeFormat**: Set DateTimeFormat. More information see [DateTimeFormat instances](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). Default `locale: en-US, format: hour:minute`.
+  - **text**: Set text for autosave.
 - **blockStyles**: Customize how certain buttons that style blocks of text behave.
   - **bold**: Can be set to `**` or `__`. Defaults to `**`.
   - **code**: Can be set to  ```` ``` ```` or `~~~`.  Defaults to ```` ``` ````.
@@ -137,6 +140,7 @@ easyMDE.value('New input for **EasyMDE**');
   - table
 - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
 - **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Defaults to `"300px"`.
+- **maxHeight**: Sets fixed height for the composition area. `minHeight` option will be ignored. Should be a string containing a valid CSS value like `"500px"`. Defaults to `undefined`.
 - **onToggleFullScreen**: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, `true` when the editor is currently going into full screen mode, or `false`.
 - **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
   - **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
@@ -177,9 +181,13 @@ easyMDE.value('New input for **EasyMDE**');
   - **hljs**: An injectible instance of [highlight.js](https://github.com/isagalaev/highlight.js). If you don't want to rely on the global namespace (`window.hljs`), you can provide an instance here. Defaults to `undefined`.
   - **markedOptions**: Set the internal Markdown renderer's [options](https://marked.js.org/#/USING_ADVANCED.md#options). Other `renderingConfig` options will take precedence.
   - **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
+  - **sanitizerFunction**: Custom function for sanitizing the HTML output of markdown renderer.
 - **shortcuts**: Keyboard shortcuts associated with this instance. Defaults to the [array of shortcuts](#keyboard-shortcuts).
 - **showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
 - **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
+- **inputStyle**: `textarea` or `contenteditable`. Defaults to `textarea` for desktop and `contenteditable` for mobile. `contenteditable` option is necessary to enable nativeSpellcheck.
+- **nativeSpellcheck**: If set to `false`, disable native spell checker. Defaults to `true`.
+- **sideBySideFullscreen**: If set to `false`, allows side-by-side editing without going into fullscreen. Defaults to `true`.
 - **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items.
   - Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
 - **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`.
@@ -201,6 +209,18 @@ var editor = new EasyMDE({
 		enabled: true,
 		uniqueId: "MyUniqueID",
 		delay: 1000,
+		submit_delay: 5000,
+		timeFormat: {
+			locale: 'en-US',
+			format: {
+				year: 'numeric',
+				month: 'long',
+				day: '2-digit',
+				hour: '2-digit',
+				minute: '2-digit',
+			},
+		},
+		text: "Autosaved: "
 	},
 	blockStyles: {
 		bold: "__",
@@ -225,10 +245,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
 	},
@@ -247,6 +267,10 @@ var editor = new EasyMDE({
 	renderingConfig: {
 		singleLineBreaks: false,
 		codeSyntaxHighlighting: true,
+		sanitizerFunction: function(renderedHTML) {
+			// Using DOMPurify and only allowing <b> tags
+			return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
+		},
 	},
 	shortcuts: {
 		drawTable: "Cmd-Alt-T"
@@ -266,6 +290,7 @@ var editor = new EasyMDE({
 		},
 	}], // Another optional usage, with a custom status bar item that counts keystrokes
 	styleSelectedText: false,
+	sideBySideFullscreen: false,
 	syncSideBySidePreviewScroll: false,
 	tabSize: 4,
 	toolbar: false,
@@ -342,6 +367,46 @@ var easyMDE = new EasyMDE({
 });
 ```
 
+Put some buttons on dropdown menu
+
+```Javascript
+var easyMDE = new EasyMDE({
+	toolbar: [{
+                name: "heading",
+                action: EasyMDE.toggleHeadingSmaller,
+                className: "fa fa-header",
+                title: "Headers",
+            },
+            "|",
+            {
+                name: "others",
+                className: "fa fa-blind",
+                title: "others buttons",
+                children: [
+                    {
+                        name: "image",
+                        action: EasyMDE.drawImage,
+                        className: "fa fa-picture-o",
+                        title: "Image",
+                    },
+                    {
+                        name: "quote",
+                        action: EasyMDE.toggleBlockquote,
+                        className: "fa fa-percent",
+                        title: "Quote",
+                    },
+                    {
+                        name: "link",
+                        action: EasyMDE.drawLink,
+                        className: "fa fa-link",
+                        title: "Link",
+                    }
+                ]
+            },
+		// [, ...]
+	]
+});
+```
 
 ### Keyboard shortcuts
 

example/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Example / Preview</title>
+    <link rel="stylesheet" href="../dist/easymde.min.css">
+    <script src="../dist/easymde.min.js"></script>
+</head>
+
+<body>
+    <textarea></textarea>
+    <script>
+        var easyMDE = new EasyMDE();
+    </script>
+</body>
+
+</html>

gulpfile.js

@@ -20,6 +20,13 @@ var banner = ['/**',
     ' */',
     ''].join('\n');
 
+
+var css_files = [
+    './node_modules/codemirror/lib/codemirror.css',
+    './src/css/*.css',
+    './node_modules/codemirror-spell-checker/src/css/spell-checker.css',
+];
+
 function lint() {
     return gulp.src('./src/js/**/*.js')
         .pipe(eslint())
@@ -37,12 +44,6 @@ function scripts() {
 }
 
 function styles() {
-    var css_files = [
-        './node_modules/codemirror/lib/codemirror.css',
-        './src/css/*.css',
-        './node_modules/codemirror-spell-checker/src/css/spell-checker.css',
-    ];
-
     return gulp.src(css_files)
         .pipe(concat('easymde.css'))
         .pipe(cleanCSS())
@@ -52,6 +53,14 @@ function styles() {
         .pipe(gulp.dest('./dist/'));
 }
 
+// Watch for file changes
+function watch() {
+    gulp.watch('./src/js/**/*.js', scripts);
+    gulp.watch(css_files, styles);
+}
+
 var build = gulp.parallel(gulp.series(lint, scripts), styles);
 
 gulp.task('default', build);
+gulp.task('watch', gulp.series(build, watch));
+gulp.task('lint', lint);