From 7492bb71c802e5091c8d06d265f1faaf70ba3742 Mon Sep 17 00:00:00 2001 From: Dmitry Mazurov Date: Wed, 8 Apr 2020 13:50:08 +0300 Subject: [PATCH 1/4] Added simple translate status bar and title toolbar. Added custom url for guide. Added onCursorActivity for update cursor position. Signed-off-by: Dmitry Mazurov --- README.md | 12 ++++++++-- src/css/easymde.css | 4 ++-- src/js/easymde.js | 55 ++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 64 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index ba8a7569..3cad1e3e 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,6 @@ easyMDE.value('New input for **EasyMDE**'); - **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 ```` ``` ````. @@ -188,11 +187,13 @@ easyMDE.value('New input for **EasyMDE**'); - **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. +- **statusTexts**: Customize the text used to status bar. - **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`. - **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`. - **tabSize**: If set, customize the tab size. Defaults to `2`. - **theme**: Override the theme. Defaults to `easymde`. - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons). +- **toolbarTitles**: Customize the title used to toolbar. - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`. @@ -218,7 +219,6 @@ var editor = new EasyMDE({ minute: '2-digit', }, }, - text: "Autosaved: " }, blockStyles: { bold: "__", @@ -287,10 +287,18 @@ var editor = new EasyMDE({ el.innerHTML = ++this.keystrokes + " Keystrokes"; }, }], // Another optional usage, with a custom status bar item that counts keystrokes + statusTexts: { + lines: "lines: ", + words: "words: ", + autosave: "Autosaved: ", + }, styleSelectedText: false, syncSideBySidePreviewScroll: false, tabSize: 4, toolbar: false, + toobarTitles: { + "bold": {"title": "Bold"}, + }, toolbarTips: false, }); ``` diff --git a/src/css/easymde.css b/src/css/easymde.css index 1a0881a0..9b05249d 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -202,11 +202,11 @@ } .editor-statusbar .lines:before { - content: 'lines: ' + content: attr(data-status-bar-before); } .editor-statusbar .words:before { - content: 'words: ' + content: attr(data-status-bar-before); } .editor-statusbar .characters:before { diff --git a/src/js/easymde.js b/src/js/easymde.js index d64a52fc..550895f5 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1489,6 +1489,12 @@ var promptTexts = { image: 'URL of the image:', }; +var statusTexts = { + lines: 'lines: ', + words: 'words: ', + autosave: 'Autosaved: ', +}; + var timeFormat = { locale: 'en-US', format: { @@ -1564,6 +1570,10 @@ function EasyMDE(options) { document.getElementsByTagName('head')[0].appendChild(link); } + if (options.markdownUrl != undefined) { + toolbarBuiltInButtons.guide.action = options.markdownUrl; + } + // Find the textarea to use if (options.element) { @@ -1633,6 +1643,10 @@ function EasyMDE(options) { options.promptTexts = extend({}, promptTexts, options.promptTexts || {}); + // Merging the statusTexts, with the given options + options.statusTexts = extend({}, statusTexts, options.statusTexts || {}); + + // Merging the blockStyles, with the given options options.blockStyles = extend({}, blockStyles, options.blockStyles || {}); @@ -2025,7 +2039,7 @@ EasyMDE.prototype.autosave = function () { if (el != null && el != undefined && el != '') { var d = new Date(); var dd = new Intl.DateTimeFormat([this.options.autosave.timeFormat.locale, 'en-US'], this.options.autosave.timeFormat.format).format(d); - var save = this.options.autosave.text == undefined ? 'Autosaved: ' : this.options.autosave.text; + var save = this.options.statusTexts.autosave; el.innerHTML = save + dd; } @@ -2265,7 +2279,11 @@ EasyMDE.prototype.createToolbar = function (items) { var i; for (i = 0; i < items.length; i++) { if (toolbarBuiltInButtons[items[i]] != undefined) { - items[i] = toolbarBuiltInButtons[items[i]]; + if (this.options.toolbarTitles != undefined && this.options.toolbarTitles[items[i]] != undefined) { + items[i] = extend({}, toolbarBuiltInButtons[items[i]], this.options.toolbarTitles[items[i]]); + } else { + items[i] = toolbarBuiltInButtons[items[i]]; + } } } @@ -2372,25 +2390,31 @@ EasyMDE.prototype.createStatusbar = function (status) { // Set up the built-in items var items = []; - var i, onUpdate, defaultValue; + var i, onUpdate, onCursorActivity, defaultValue, dataSet; for (i = 0; i < status.length; i++) { // Reset some values onUpdate = undefined; + onCursorActivity = undefined; defaultValue = undefined; + dataSet = undefined; // Handle if custom or not if (typeof status[i] === 'object') { items.push({ className: status[i].className, + dataSet: status[i].dataSet, defaultValue: status[i].defaultValue, onUpdate: status[i].onUpdate, + onCursorActivity: status[i].onCursorActivity, }); } else { var name = status[i]; if (name === 'words') { + dataSet = options.statusTexts[name]; + defaultValue = function (el) { el.innerHTML = wordCount(cm.getValue()); }; @@ -2398,6 +2422,8 @@ EasyMDE.prototype.createStatusbar = function (status) { el.innerHTML = wordCount(cm.getValue()); }; } else if (name === 'lines') { + dataSet = options.statusTexts[name]; + defaultValue = function (el) { el.innerHTML = cm.lineCount(); }; @@ -2412,6 +2438,11 @@ EasyMDE.prototype.createStatusbar = function (status) { var pos = cm.getCursor(); el.innerHTML = pos.line + ':' + pos.ch; }; + onCursorActivity = function (el) { + var pos = cm.getCursor(); + + el.innerHTML = pos.line + ':' + pos.ch; + }; } else if (name === 'autosave') { defaultValue = function (el) { if (options.autosave != undefined && options.autosave.enabled === true) { @@ -2426,8 +2457,10 @@ EasyMDE.prototype.createStatusbar = function (status) { items.push({ className: name, + dataSet: dataSet, defaultValue: defaultValue, onUpdate: onUpdate, + onCursorActivity: onCursorActivity, }); } } @@ -2449,6 +2482,11 @@ EasyMDE.prototype.createStatusbar = function (status) { el.className = item.className; + if (item.dataSet != undefined) { + el.dataset.statusBarBefore = item.dataSet; + } + + // Ensure the defaultValue is a function if (typeof item.defaultValue === 'function') { item.defaultValue(el); @@ -2466,6 +2504,17 @@ EasyMDE.prototype.createStatusbar = function (status) { } + // Ensure the onCursorActivity is a function + if (typeof item.onCursorActivity === 'function') { + // Create a closure around the span of the current action, then execute the onCursorActivity handler + this.codemirror.on('cursorActivity', (function (el, item) { + return function () { + item.onCursorActivity(el); + }; + }(el, item))); + } + + // Append the item to the status bar bar.appendChild(el); } From 32f3feb4a0e830f6208f9e2240e254bde201b3c3 Mon Sep 17 00:00:00 2001 From: Dmitry Mazurov Date: Wed, 8 Apr 2020 13:57:37 +0300 Subject: [PATCH 2/4] Update Readme Signed-off-by: Dmitry Mazurov --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 3cad1e3e..9b4c331d 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,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"`. +- **markdownUrl**: Customize url for guide. - **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`. @@ -237,6 +238,7 @@ var editor = new EasyMDE({ }, lineWrapping: false, minHeight: "500px", + markdownUrl: "https://www.markdownguide.org/basic-syntax/", parsingConfig: { allowAtxHeaderWithoutSpace: true, strikethrough: false, From 1837d697f5d87567374f37c7f1e23c233a58fc49 Mon Sep 17 00:00:00 2001 From: Dmitry Mazurov Date: Thu, 9 Apr 2020 18:07:16 +0300 Subject: [PATCH 3/4] Update toolbar titles Signed-off-by: Dmitry Mazurov --- src/js/easymde.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/js/easymde.js b/src/js/easymde.js index 550895f5..f9655665 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1656,6 +1656,9 @@ function EasyMDE(options) { options.autosave.timeFormat = extend({}, timeFormat, options.autosave.timeFormat || {}); } + // Merging the toolbar title, with the given options + toolbarBuiltInButtons = extend({}, toolbarBuiltInButtons, options.toolbarTitles || {}); + // Merging the shortcuts, with the given options options.shortcuts = extend({}, shortcuts, options.shortcuts || {}); @@ -2279,11 +2282,7 @@ EasyMDE.prototype.createToolbar = function (items) { var i; for (i = 0; i < items.length; i++) { if (toolbarBuiltInButtons[items[i]] != undefined) { - if (this.options.toolbarTitles != undefined && this.options.toolbarTitles[items[i]] != undefined) { - items[i] = extend({}, toolbarBuiltInButtons[items[i]], this.options.toolbarTitles[items[i]]); - } else { - items[i] = toolbarBuiltInButtons[items[i]]; - } + items[i] = toolbarBuiltInButtons[items[i]]; } } From d972f1c04a8cb8ff3bf1b7f79e0fc35ec24beff2 Mon Sep 17 00:00:00 2001 From: Dmitry Mazurov Date: Thu, 21 May 2020 12:44:44 +0300 Subject: [PATCH 4/4] Fixed bug with autosave translation. --- src/js/easymde.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/js/easymde.js b/src/js/easymde.js index f9655665..0464b983 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1654,6 +1654,11 @@ function EasyMDE(options) { if (options.autosave != undefined) { // Merging the Autosave timeFormat, with the given options options.autosave.timeFormat = extend({}, timeFormat, options.autosave.timeFormat || {}); + + // Merging the Autosave text, with the given options and saving to statusTexts + if (options.autosave.text != undefined) { + options.statusTexts.autosave = options.autosave.text; + } } // Merging the toolbar title, with the given options @@ -2389,12 +2394,12 @@ EasyMDE.prototype.createStatusbar = function (status) { // Set up the built-in items var items = []; - var i, onUpdate, onCursorActivity, defaultValue, dataSet; + var i, onUpdate, onActivity, defaultValue, dataSet; for (i = 0; i < status.length; i++) { // Reset some values onUpdate = undefined; - onCursorActivity = undefined; + onActivity = undefined; defaultValue = undefined; dataSet = undefined; @@ -2406,7 +2411,7 @@ EasyMDE.prototype.createStatusbar = function (status) { dataSet: status[i].dataSet, defaultValue: status[i].defaultValue, onUpdate: status[i].onUpdate, - onCursorActivity: status[i].onCursorActivity, + onActivity: status[i].onActivity, }); } else { var name = status[i]; @@ -2437,7 +2442,7 @@ EasyMDE.prototype.createStatusbar = function (status) { var pos = cm.getCursor(); el.innerHTML = pos.line + ':' + pos.ch; }; - onCursorActivity = function (el) { + onActivity = function (el) { var pos = cm.getCursor(); el.innerHTML = pos.line + ':' + pos.ch; @@ -2459,7 +2464,7 @@ EasyMDE.prototype.createStatusbar = function (status) { dataSet: dataSet, defaultValue: defaultValue, onUpdate: onUpdate, - onCursorActivity: onCursorActivity, + onActivity: onActivity, }); } } @@ -2503,12 +2508,12 @@ EasyMDE.prototype.createStatusbar = function (status) { } - // Ensure the onCursorActivity is a function - if (typeof item.onCursorActivity === 'function') { - // Create a closure around the span of the current action, then execute the onCursorActivity handler + // Ensure the onActivity is a function + if (typeof item.onActivity === 'function') { + // Create a closure around the span of the current action, then execute the onActivity handler this.codemirror.on('cursorActivity', (function (el, item) { return function () { - item.onCursorActivity(el); + item.onActivity(el); }; }(el, item))); }