Merge branch 'master' into dev-feature-example

.travis.yml

@@ -4,7 +4,6 @@ node_js:
   - '11' # EOL: June 2019
   - '10' # EOL: April 2021
   - '8' # EOL: December 2019
-  - '6' # EOL: April 2019
 
 jobs:
   include:

CHANGELOG.md

@@ -4,7 +4,21 @@ 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
+- `inputStyle` and `nativeSpellcheck` options to manage the native language of the browser (Thanks to [@firm1], [#143]).
+### Changed
+- Delay before assuming that submit of the form as failed is `autosave.submit_delay` instead of `autosave.delay` (Thanks to [@Situphen], [#139]).
+
+
+## [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 +133,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 - Cursor not always showing in "text" mode over the edit field
 
 <!-- Linked issues -->
+[#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 +146,10 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [#9]: https://github.com/Ionaru/easy-markdown-editor/issues/9
 
 <!-- Linked PRs -->
+[#143]: https://github.com/Ionaru/easy-markdown-editor/pull/132
+[#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 +163,9 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [#19]: https://github.com/Ionaru/easy-markdown-editor/pull/19
 
 <!-- Linked users -->
+[@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 +184,8 @@ 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.9.0...HEAD
+[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

@@ -120,6 +120,7 @@ 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.
 - **blockStyles**: Customize how certain buttons that style blocks of text behave.
   - **bold**: Can be set to `**` or `__`. Defaults to `**`.
@@ -180,6 +181,8 @@ easyMDE.value('New input for **EasyMDE**');
 - **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`.
 - **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 +204,7 @@ var editor = new EasyMDE({
 		enabled: true,
 		uniqueId: "MyUniqueID",
 		delay: 1000,
+		submit_delay: 5000,
 	},
 	blockStyles: {
 		bold: "__",

gulpfile.js

@@ -55,3 +55,4 @@ function styles() {
 var build = gulp.parallel(gulp.series(lint, scripts), styles);
 
 gulp.task('default', build);
+gulp.task('lint', lint);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "easymde",
-    "version": "2.8.0",
+    "version": "2.9.0",
     "description": "A simple, beautiful, and embeddable JavaScript Markdown editor that easy to use. Features include autosaving and spell checking.",
     "files": [
         "dist/**/*",
@@ -19,29 +19,31 @@
     "license": "MIT",
     "author": "Jeroen Akkerman",
     "dependencies": {
-        "codemirror": "^5.48.4",
+        "codemirror": "^5.50.2",
         "codemirror-spell-checker": "1.1.2",
-        "marked": "^0.7.0"
+        "marked": "^0.8.0"
     },
     "devDependencies": {
-        "@types/codemirror": "0.0.76",
+        "@types/codemirror": "0.0.82",
+        "@types/marked": "^0.7.2",
         "browserify": "^16.5.0",
         "gulp": "^4.0.2",
         "gulp-clean-css": "^4.2.0",
         "gulp-concat": "^2.6.1",
         "gulp-eslint": "^6.0.0",
         "gulp-header": "^2.0.9",
-        "gulp-rename": "^1.4.0",
+        "gulp-rename": "^2.0.0",
         "gulp-terser": "^1.2.0",
         "gulp-uglify": "^3.0.2",
-        "typescript": "^3.5.3",
+        "typescript": "^3.7.4",
         "vinyl-buffer": "^1.0.0",
         "vinyl-source-stream": "^2.0.0"
     },
     "repository": "github:Ionaru/easy-markdown-editor",
     "scripts": {
         "prepare": "gulp",
-        "test": "npm run test:types",
+        "test": "npm run lint && npm run test:types",
+        "lint": "gulp lint",
         "test:types": "tsc --project types/tsconfig.json"
     }
 }

src/js/easymde.js

@@ -1858,6 +1858,8 @@ EasyMDE.prototype.render = function (el) {
         placeholder: options.placeholder || el.getAttribute('placeholder') || '',
         styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : !isMobile(),
         configureMouse: configureMouse,
+        inputStyle: (options.inputStyle != undefined) ? options.inputStyle : isMobile() ? 'contenteditable' : 'textarea',
+        spellcheck: (options.nativeSpellcheck != undefined) ? options.nativeSpellcheck : true,
     });
 
     this.codemirror.getScrollerElement().style.minHeight = options.minHeight;
@@ -1929,7 +1931,7 @@ EasyMDE.prototype.autosave = function () {
                     // Restart autosaving in case the submit will be cancelled down the line
                     setTimeout(function () {
                         easyMDE.autosave();
-                    }, easyMDE.options.autosave.delay || 10000);
+                    }, easyMDE.options.autosave.submit_delay || easyMDE.options.autosave.delay || 10000);
                 });
             }
 
@@ -1945,7 +1947,12 @@ EasyMDE.prototype.autosave = function () {
             this.options.autosave.loaded = true;
         }
 
-        localStorage.setItem('smde_' + this.options.autosave.uniqueId, easyMDE.value());
+        var value = easyMDE.value();
+        if (value !== '') {
+            localStorage.setItem('smde_' + this.options.autosave.uniqueId, value);
+        } else {
+            localStorage.removeItem('smde_' + this.options.autosave.uniqueId);
+        }
 
         var el = document.getElementById('autosaved');
         if (el != null && el != undefined && el != '') {

types/easymde-test.ts

@@ -5,6 +5,7 @@ const editor = new EasyMDE({
     autoDownloadFontAwesome: false,
     element: document.getElementById('mdEditor')!,
     hideIcons: ['side-by-side', 'fullscreen'],
+    inputStyle: 'textarea',
     shortcuts: {
         drawTable: 'Cmd-Alt-T',
         toggleFullScreen: null
@@ -15,6 +16,7 @@ const editor = new EasyMDE({
         console.log('FullscreenToggled', full);
     },
     theme: 'someOtherTheme',
+    minHeight: '200px'
 });
 
 // Editor functions
@@ -35,29 +37,38 @@ EasyMDE.toggleItalic = (editor: EasyMDE) => {
 const editor2 = new EasyMDE({
     autoDownloadFontAwesome: undefined,
     previewClass: ['my-custom-class', 'some-other-class'],
-    toolbar: [{
+    nativeSpellcheck: true,
-        name: 'bold',
+    inputStyle: 'contenteditable',
-        action: EasyMDE.toggleBold,
+    toolbar: [
-        className: 'fa fa-bolt',
+        {
-        title: 'Bold',
+            name: 'bold',
-    }, '|', { // Separator
+            action: EasyMDE.toggleBold,
-        name: 'alert',
+            className: 'fa fa-bolt',
-        action: (editor: EasyMDE) => {
+            title: 'Bold'
-            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,
+            // Separator
-        noMobile: false,
+            name: 'alert',
-    }, '|', {
+            action: (editor: EasyMDE) => {
-        name: 'link',
+                alert('This is from a custom button action!');
-        action: 'https://github.com/Ionaru/easy-markdown-editor',
+                // Custom functions have access to the `editor` instance.
-        className: 'fa fab fa-github',
+            },
-        title: 'A Custom Link',
+            className: 'fa fa-star',
-        noDisable: true,
+            title: 'A Custom Button',
-        noMobile: true,
+            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();
@@ -80,11 +91,11 @@ const editorImages = new EasyMDE({
         noFileGiven: 'Please select a file',
         typeNotAllowed: 'This file type is not allowed!',
         fileTooLarge: 'Image too big',
-        importError: 'Something went oops!',
+        importError: 'Something went oops!'
     },
-    errorCallback: (errorMessage) => {
+    errorCallback: errorMessage => {
         console.error(errorMessage);
-    },
+    }
 });
 
 const editorImagesCustom = new EasyMDE({
@@ -109,9 +120,31 @@ const editorImagesCustom = new EasyMDE({
         noFileGiven: 'Please select a file',
         typeNotAllowed: 'This file type is not allowed!',
         fileTooLarge: 'Image too big',
-        importError: 'Something went oops!',
+        importError: 'Something went oops!'
     },
-    errorCallback: (errorMessage) => {
+    errorCallback: errorMessage => {
         console.error(errorMessage);
     },
+    renderingConfig: {
+        codeSyntaxHighlighting: true,
+        markedOptions: {
+            silent: true,
+            highlight(code: string, lang: string, callback?: (error: (any | undefined), code: string) => void): string {
+                return 'something'
+            },
+        },
+    },
+    promptTexts: {
+        image: 'Insert URL'
+    },
+    syncSideBySidePreviewScroll: true
   });
+
+const editorAutosave = new EasyMDE({
+    autosave: {
+        enabled: true,
+        delay: 2000,
+        submit_delay: 10000,
+        uniqueId: 'abc',
+    }
+});

types/easymde.d.ts

@@ -20,11 +20,13 @@
 // SOFTWARE.
 
 /// <reference types="codemirror"/>
+/// <reference types="marked"/>
 
 declare namespace EasyMDE {
     interface AutoSaveOptions {
         enabled?: boolean;
         delay?: number;
+        submit_delay?: number;
         uniqueId: string;
     }
 
@@ -47,9 +49,16 @@ declare namespace EasyMDE {
         underscoresBreakWords?: boolean;
     }
 
+    interface PromptTexts {
+        image?: string;
+        link?: string;
+    }
+
     interface RenderingOptions {
+        codeSyntaxHighlighting?: boolean;
+        hljs?: any;
+        markedOptions?: marked.MarkedOptions;
         singleLineBreaks?: boolean;
-        codeSyntaxHighlighting: boolean;
     }
 
     interface Shortcuts {
@@ -114,6 +123,7 @@ declare namespace EasyMDE {
         initialValue?: string;
         insertTexts?: InsertTextOptions;
         lineWrapping?: boolean;
+        minHeight?: string;
         parsingConfig?: ParsingOptions;
         placeholder?: string;
         previewClass?: string | ReadonlyArray<string>;
@@ -123,10 +133,12 @@ declare namespace EasyMDE {
         shortcuts?: Shortcuts;
         showIcons?: ReadonlyArray<string>;
         spellChecker?: boolean;
+        inputStyle?: 'textarea' | 'contenteditable';
+        nativeSpellcheck?: boolean;
         status?: boolean | ReadonlyArray<string | StatusBarItem>;
         styleSelectedText?: boolean;
         tabSize?: number;
-        toolbar?: boolean | ReadonlyArray<string | ToolbarIcon>;
+        toolbar?: boolean | ReadonlyArray<'|' | ToolbarIcon>;
         toolbarTips?: boolean;
         onToggleFullScreen?: (goingIntoFullScreen: boolean) => void;
         theme?: string;
@@ -140,6 +152,9 @@ declare namespace EasyMDE {
         imageTexts?: ImageTextsOptions;
         errorMessages?: ImageErrorTextsOptions;
         errorCallback?: (errorMessage: string) => void;
+
+        promptTexts?: PromptTexts;
+        syncSideBySidePreviewScroll?: boolean;
     }
 }