Some functions are optimized

src/js/action.js

@@ -1,7 +1,7 @@
 /**
- * Created by WittBulter on 2017/1/17.
+ * @description :: default action
  */
-import Base from './base'
+import base from './base'
 
 export default class Action {
 	constructor (){
@@ -12,14 +12,14 @@ export default class Action {
 	 * Action for toggling bold.
 	 */
 	static toggleBold (editor){
-		Base.toggleBlock(editor, "bold", editor.options.blockStyles.bold);
+		base.toggleBlock(editor, "bold", editor.options.blockStyles.bold);
 	}
 
 	/**
 	 * Action for toggling italic.
 	 */
 	static toggleItalic (editor){
-		Base.toggleBlock(editor, "italic", editor.options.blockStyles.italic);
+		base.toggleBlock(editor, "italic", editor.options.blockStyles.italic);
 	}
 
 	/**
@@ -27,7 +27,7 @@ export default class Action {
 	 */
 	static drawLink (editor){
 		const cm = editor.codemirror;
-		const stat = Base.getState(cm);
+		const stat = base.getState(cm);
 		const options = editor.options;
 		let url = "http://";
 		if (options.promptURLs){
@@ -36,7 +36,7 @@ export default class Action {
 				return false;
 			}
 		}
-		Base.replaceSelection(cm, stat.link, options.insertTexts.link, url);
+		base.replaceSelection(cm, stat.link, options.insertTexts.link, url);
 	}
 
 	/**
@@ -44,7 +44,7 @@ export default class Action {
 	 */
 	static toggleHeadingSmaller (editor){
 		const cm = editor.codemirror;
-		Base.toggleHeading(cm, "smaller");
+		base.toggleHeading(cm, "smaller");
 	}
 
 	/**
@@ -52,7 +52,7 @@ export default class Action {
 	 */
 	static toggleHeadingBigger (editor){
 		const cm = editor.codemirror;
-		Base.toggleHeading(cm, "bigger");
+		base.toggleHeading(cm, "bigger");
 	}
 
 	/**
@@ -60,7 +60,7 @@ export default class Action {
 	 */
 	static drawImage (editor){
 		const cm = editor.codemirror;
-		const stat = Base.getState(cm);
+		const stat = base.getState(cm);
 		const options = editor.options;
 		let url = "http://";
 		if (options.promptURLs){
@@ -69,7 +69,7 @@ export default class Action {
 				return false;
 			}
 		}
-		Base.replaceSelection(cm, stat.image, options.insertTexts.image, url);
+		base.replaceSelection(cm, stat.image, options.insertTexts.image, url);
 	}
 
 	/**
@@ -77,7 +77,7 @@ export default class Action {
 	 */
 	static toggleBlockquote (editor){
 		const cm = editor.codemirror;
-		Base.toggleLine(cm, "quote");
+		base.toggleLine(cm, "quote");
 	}
 
 	/**
@@ -85,7 +85,7 @@ export default class Action {
 	 */
 	static toggleOrderedList (editor){
 		const cm = editor.codemirror;
-		Base.toggleLine(cm, "ordered-list");
+		base.toggleLine(cm, "ordered-list");
 	}
 
 	/**
@@ -93,7 +93,7 @@ export default class Action {
 	 */
 	static toggleUnorderedList (editor){
 		const cm = editor.codemirror;
-		Base.toggleLine(cm, "unordered-list");
+		base.toggleLine(cm, "unordered-list");
 	}
 
 	/**
@@ -158,7 +158,7 @@ export default class Action {
 				repl_end = fenceCharsToInsert + "\n";
 				end_line_sel--;
 			}
-			Base.replaceSelection(cm, false, [repl_start, repl_end]);
+			base.replaceSelection(cm, false, [repl_start, repl_end]);
 			cm.setSelection({
 				line: start_line_sel,
 				ch: 0
@@ -244,7 +244,7 @@ export default class Action {
 					// full last line selected, putting cursor at beginning of next
 					end_line -= 1;
 				}
-				cm.operation(function (){
+				cm.operation(() =>{
 					// end line first, so that line numbers don't change
 					cm.replaceRange(end_text, {
 						line: end_line,
@@ -298,7 +298,7 @@ export default class Action {
 						}
 					}
 				}
-				cm.operation(function (){
+				cm.operation(() =>{
 					cm.replaceRange("", {
 						line: block_start,
 						ch: 0
@@ -378,7 +378,7 @@ export default class Action {
 			if (no_sel_and_starting_of_line || sel_multi){
 				insertFencingAtSelection(cm, cur_start, cur_end, fenceCharsToInsert);
 			} else{
-				Base.replaceSelection(cm, false, ["`", "`"]);
+				base.replaceSelection(cm, false, ["`", "`"]);
 			}
 		}
 	}
@@ -447,7 +447,7 @@ export default class Action {
 			// When the preview button is clicked for the first time,
 			// give some time for the transition from editor.css to fire and the view to slide from right to left,
 			// instead of just appearing.
-			setTimeout(function (){
+			setTimeout(() =>{
 				if (!cm.getOption("fullScreen"))
 					Action.toggleFullScreen(editor);
 				preview.className += " editor-preview-active-side";
@@ -469,7 +469,7 @@ export default class Action {
 			toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
 		}
 
-		const sideBySideRenderingFunction = function (){
+		const sideBySideRenderingFunction = () =>{
 			preview.innerHTML = editor.options.previewRender(editor.value(), preview);
 		};
 
@@ -514,7 +514,7 @@ export default class Action {
 			// When the preview button is clicked for the first time,
 			// give some time for the transition from editor.css to fire and the view to slide from right to left,
 			// instead of just appearing.
-			setTimeout(function (){
+			setTimeout(() =>{
 				preview.className += " editor-preview-active";
 			}, 1);
 			if (toolbar){
@@ -534,7 +534,7 @@ export default class Action {
 	 * Action for toggling strikethrough.
 	 */
 	static toggleStrikethrough (editor){
-		Base.toggleBlock(editor, "strikethrough", "~~");
+		base.toggleBlock(editor, "strikethrough", "~~");
 	}
 
 	/**
@@ -542,17 +542,17 @@ export default class Action {
 	 */
 	static toggleHeading1 (editor){
 		const cm = editor.codemirror;
-		Base.toggleHeading(cm, undefined, 1);
+		base.toggleHeading(cm, undefined, 1);
 	}
 
 	static toggleHeading2 (editor){
 		const cm = editor.codemirror;
-		Base.toggleHeading(cm, undefined, 2);
+		base.toggleHeading(cm, undefined, 2);
 	}
 
 	static toggleHeading3 (editor){
 		const cm = editor.codemirror;
-		Base.toggleHeading(cm, undefined, 3);
+		base.toggleHeading(cm, undefined, 3);
 	}
 
 	/**
@@ -560,7 +560,7 @@ export default class Action {
 	 */
 	static cleanBlock (editor){
 		const cm = editor.codemirror;
-		Base.cleanBlock(cm);
+		base.cleanBlock(cm);
 	}
 
 	/**
@@ -568,9 +568,9 @@ export default class Action {
 	 */
 	static drawTable (editor){
 		const cm = editor.codemirror;
-		const stat = Base.getState(cm);
+		const stat = base.getState(cm);
 		const options = editor.options;
-		Base.replaceSelection(cm, stat.table, options.insertTexts.table);
+		base.replaceSelection(cm, stat.table, options.insertTexts.table);
 	}
 
 	/**
@@ -578,9 +578,9 @@ export default class Action {
 	 */
 	static drawHorizontalRule (editor){
 		const cm = editor.codemirror;
-		const stat = Base.getState(cm);
+		const stat = base.getState(cm);
 		const options = editor.options;
-		Base.replaceSelection(cm, stat.image, options.insertTexts.horizontalRule);
+		base.replaceSelection(cm, stat.image, options.insertTexts.horizontalRule);
 	}
 
 	/**

src/js/base.js

@@ -1,5 +1,5 @@
 /**
- * Created by WittBulter on 2017/1/17.
+ * @description :: Basic operation
  */
 
 export default new class Base {
@@ -250,7 +250,6 @@ export default new class Base {
 		cm.focus();
 	}
 
-
 	cleanBlock (cm){
 		if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
 			return;

src/js/codemirror/tablist.js

@@ -1,44 +1,27 @@
 // CodeMirror, copyright (c) by Marijn Haverbeke and others
 // Distributed under an MIT license: http://codemirror.net/LICENSE
+import CodeMirror from 'CodeMirror'
 
-var CodeMirror = require("codemirror");
+CodeMirror.commands.tabAndIndentMarkdownList = cm =>{
+	const ranges = cm.listSelections();
+	const pos = ranges[0].head;
+	const eolState = cm.getStateAfter(pos.line);
+	const inList = eolState.list !== false;
 
-CodeMirror.commands.tabAndIndentMarkdownList = function (cm) {
+	if (inList) return cm.execCommand("indentMore");
-	var ranges = cm.listSelections();
-	var pos = ranges[0].head;
-	var eolState = cm.getStateAfter(pos.line);
-	var inList = eolState.list !== false;
 
-	if (inList) {
+	if (cm.options.indentWithTabs) return cm.execCommand("insertTab");
-		cm.execCommand("indentMore");
+	cm.replaceSelection(Array(cm.options.tabSize + 1).join(" "));
-		return;
-	}
-
-	if (cm.options.indentWithTabs) {
-		cm.execCommand("insertTab");
-	}
-	else {
-		var spaces = Array(cm.options.tabSize + 1).join(" ");
-		cm.replaceSelection(spaces);
-	}
 };
 
 CodeMirror.commands.shiftTabAndUnindentMarkdownList = function (cm) {
-	var ranges = cm.listSelections();
+	const ranges = cm.listSelections();
-	var pos = ranges[0].head;
+	const pos = ranges[0].head;
-	var eolState = cm.getStateAfter(pos.line);
+	const eolState = cm.getStateAfter(pos.line);
-	var inList = eolState.list !== false;
+	const inList = eolState.list !== false;
 
-	if (inList) {
+	if (inList) return cm.execCommand("indentLess");
-		cm.execCommand("indentLess");
-		return;
-	}
 
-	if (cm.options.indentWithTabs) {
+	if (cm.options.indentWithTabs) return cm.execCommand("insertTab");
-		cm.execCommand("insertTab");
+	cm.replaceSelection(Array(cm.options.tabSize + 1).join(" "));
-	}
-	else {
-		var spaces = Array(cm.options.tabSize + 1).join(" ");
-		cm.replaceSelection(spaces);
-	}
 };

src/js/metadata.js

@@ -1,5 +1,5 @@
 /**
- * Created by WittBulter on 2017/1/17.
+ * @description :: metadata, immutable
  */
 import Action from './action'
 

src/js/simplemde.js

@@ -69,11 +69,10 @@ const createTootlip = (title, action, shortcuts) => {
 /**
  * Interface of SimpleMDE.
  */
-
-
 class SimpleMDE extends Action {
 	constructor(options = {}) {
 		super()
+
 		// Used later to refer to it"s parent
 		options.parent = this;
 
@@ -113,7 +112,6 @@ class SimpleMDE extends Action {
 			return;
 		}
 
-
 		// Handle toolbar
 		if(options.toolbar === undefined) {
 			// Initialize
@@ -134,57 +132,44 @@ class SimpleMDE extends Action {
 			}
 		}
 
-
 		// Handle status bar
 		if(!options.hasOwnProperty("status")) {
 			options.status = ["autosave", "lines", "words", "cursor"];
 		}
 
-
 		// Add default preview rendering function
 		if(!options.previewRender) {
-			options.previewRender = function(plainText) {
+			// Note: "this" refers to the options object
-				// Note: "this" refers to the options object
+			options.previewRender = plainText => this.parent.markdown(plainText)
-				return this.parent.markdown(plainText);
-			};
 		}
 
-
 		// Set default options for parsing config
 		options.parsingConfig = Object.assign({
 			highlightFormatting: true // needed for toggleCodeBlock to detect types of code
 		}, options.parsingConfig || {});
 
-
 		// Merging the insertTexts, with the given options
 		options.insertTexts = Object.assign({}, insertTexts, options.insertTexts || {});
 
-
 		// Merging the promptTexts, with the given options
 		options.promptTexts = promptTexts;
 
-
 		// Merging the blockStyles, with the given options
 		options.blockStyles = Object.assign({}, blockStyles, options.blockStyles || {});
 
-
 		// Merging the shortcuts, with the given options
 		options.shortcuts = Object.assign({}, shortcuts, options.shortcuts || {});
 
-
 		// Change unique_id to uniqueId for backwards compatibility
 		if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
 			options.autosave.uniqueId = options.autosave.unique_id;
 
-
 		// Update this options
 		this.options = options;
 
-
 		// Auto render
 		this.render();
 
-
 		// The codemirror component is only available after rendering
 		// so, the setter for the initialValue can only run after
 		// the element has been rendered
@@ -193,7 +178,6 @@ class SimpleMDE extends Action {
 		}
 	}
 
-
 	/**
 	 * Default markdown render.
 	 */
@@ -207,9 +191,7 @@ class SimpleMDE extends Action {
 			markedOptions.breaks = !update
 
 			if(this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true && window.hljs) {
-				markedOptions.highlight = function(code) {
+				markedOptions.highlight = code => window.hljs.highlightAuto(code).value
-					return window.hljs.highlightAuto(code).value;
-				};
 			}
 
 			// Set options
@@ -224,14 +206,11 @@ class SimpleMDE extends Action {
 	 * Render editor to the given element.
 	 */
 	render(el = this.element || document.getElementsByTagName("textarea")[0]) {
-		if(this._rendered && this._rendered === el) {
+		// Already rendered.
-			// Already rendered.
+		if(this._rendered && this._rendered === el) return;
-			return;
-		}
 
 		this.element = el;
 		const options = this.options;
-
 		const self = this;
 		let keyMaps = {};
 
@@ -239,9 +218,7 @@ class SimpleMDE extends Action {
 			// null stands for "do not bind this command"
 			if(options.shortcuts[key] !== null && bindings[key] !== null) {
 				(function(key) {
-					keyMaps[utils.fixShortcut(options.shortcuts[key])] = function() {
+					keyMaps[utils.fixShortcut(options.shortcuts[key])] = () => bindings[key](self);
-						bindings[key](self);
-					};
 				})(key);
 			}
 		}
@@ -249,13 +226,9 @@ class SimpleMDE extends Action {
 		keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
 		keyMaps["Tab"] = "tabAndIndentMarkdownList";
 		keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
-		keyMaps["Esc"] = function(cm) {
+		keyMaps["Esc"] = cm => cm.getOption("fullScreen") && Action.toggleFullScreen(self);
-			if(cm.getOption("fullScreen")) Action.toggleFullScreen(self);
-		};
-
-		document.addEventListener("keydown", function(e) {
-			e = e || window.event;
 
+		document.addEventListener("keydown", (e = window.event) => {
 			if(e.keyCode == 27) {
 				if(self.codemirror.getOption("fullScreen")) Action.toggleFullScreen(self);
 			}
@@ -295,9 +268,7 @@ class SimpleMDE extends Action {
 
 		if(options.forceSync === true) {
 			const cm = this.codemirror;
-			cm.on("change", function() {
+			cm.on("change", () => cm.save());
-				cm.save();
-			});
 		}
 
 		this.gui = {};
@@ -313,10 +284,8 @@ class SimpleMDE extends Action {
 		}
 
 		this.gui.sideBySide = this.createSideBySide();
-
 		this._rendered = this.element;
 
-
 		// Fixes CodeMirror bug (#344)
 		const temp_cm = this.codemirror;
 		setTimeout(function() {
@@ -330,12 +299,11 @@ class SimpleMDE extends Action {
 			const simplemde = this;
 
 			if(this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
-				console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
+				return console.log("SimpleMDE: You must set a uniqueId to use the autosave feature");
-				return;
 			}
 
 			if(simplemde.element.form != null && simplemde.element.form != undefined) {
-				simplemde.element.form.addEventListener("submit", function() {
+				simplemde.element.form.addEventListener("submit", () => {
 					localStorage.removeItem("smde_" + simplemde.options.autosave.uniqueId);
 				});
 			}
@@ -381,10 +349,8 @@ class SimpleMDE extends Action {
 	clearAutosavedValue() {
 		if(utils.isLocalStorageAvailable()) {
 			if(this.options.autosave == undefined || this.options.autosave.uniqueId == undefined || this.options.autosave.uniqueId == "") {
-				console.log("SimpleMDE: You must set a uniqueId to clear the autosave value");
+				return console.log("SimpleMDE: You must set a uniqueId to clear the autosave value");
-				return;
 			}
-
 			localStorage.removeItem("smde_" + this.options.autosave.uniqueId);
 		} else {
 			console.log("SimpleMDE: localStorage not available, cannot autosave");
@@ -405,11 +371,8 @@ class SimpleMDE extends Action {
 		// Syncs scroll  editor -> preview
 		let cScroll = false;
 		let pScroll = false;
-		cm.on("scroll", function(v) {
+		cm.on("scroll", v => {
-			if(cScroll) {
+			if(cScroll) return cScroll = false;
-				cScroll = false;
-				return;
-			}
 			pScroll = true;
 			let height = v.getScrollInfo().height - v.getScrollInfo().clientHeight;
 			let ratio = parseFloat(v.getScrollInfo().top) / height;
@@ -417,11 +380,8 @@ class SimpleMDE extends Action {
 		});
 
 		// Syncs scroll  preview -> editor
-		preview.onscroll = function() {
+		preview.onscroll = () => {
-			if(pScroll) {
+			if(pScroll) return pScroll = false;
-				pScroll = false;
-				return;
-			}
 			cScroll = true;
 			let height = preview.scrollHeight - preview.clientHeight;
 			let ratio = parseFloat(preview.scrollTop) / height;
@@ -434,9 +394,7 @@ class SimpleMDE extends Action {
 	createToolbar(items) {
 		items = items || this.options.toolbar;
 
-		if(!items || items.length === 0) {
+		if(!items || items.length === 0) return;
-			return;
-		}
 		let i;
 		for(i = 0; i < items.length; i++) {
 			if(toolbarBuiltInButtons[items[i]] != undefined) {
@@ -492,7 +450,7 @@ class SimpleMDE extends Action {
 				// bind events, special for info
 				if(item.action) {
 					if(typeof item.action === "function") {
-						el.onclick = function(e) {
+						el.onclick = e => {
 							e.preventDefault();
 							item.action(self);
 						};
@@ -510,7 +468,7 @@ class SimpleMDE extends Action {
 		self.toolbarElements = toolbarData;
 
 		let cm = this.codemirror;
-		cm.on("cursorActivity", function() {
+		cm.on("cursorActivity", () => {
 			let stat = base.getState(cm);
 
 			for(let key in toolbarData) {
@@ -536,11 +494,8 @@ class SimpleMDE extends Action {
 		let options = this.options;
 		let cm = this.codemirror;
 
-
 		// Make sure the status variable is valid
-		if(!status || status.length === 0)
+		if(!status || status.length === 0) return;
-			return;
-
 
 		// Set up the built-in items
 		let items = [];
@@ -563,29 +518,19 @@ class SimpleMDE extends Action {
 				let name = status[i];
 
 				if(name === "words") {
-					defaultValue = function(el) {
+					defaultValue = el => el.innerHTML = utils.wordCount(cm.getValue());
-						el.innerHTML = utils.wordCount(cm.getValue());
+					onUpdate = el => el.innerHTML = utils.wordCount(cm.getValue());
-					};
-					onUpdate = function(el) {
-						el.innerHTML = utils.wordCount(cm.getValue());
-					};
 				} else if(name === "lines") {
-					defaultValue = function(el) {
+					defaultValue = el => el.innerHTML = cm.lineCount();
-						el.innerHTML = cm.lineCount();
+					onUpdate = el => el.innerHTML = cm.lineCount();
-					};
-					onUpdate = function(el) {
-						el.innerHTML = cm.lineCount();
-					};
 				} else if(name === "cursor") {
-					defaultValue = function(el) {
+					defaultValue = el => el.innerHTML = "0:0";
-						el.innerHTML = "0:0";
+					onUpdate = el => {
-					};
-					onUpdate = function(el) {
 						const pos = cm.getCursor();
 						el.innerHTML = pos.line + ":" + pos.ch;
 					};
 				} else if(name === "autosave") {
-					defaultValue = function(el) {
+					defaultValue = el => {
 						if(options.autosave != undefined && options.autosave.enabled === true) {
 							el.setAttribute("id", "autosaved");
 						}
@@ -626,14 +571,9 @@ class SimpleMDE extends Action {
 			// Ensure the onUpdate is a function
 			if(typeof item.onUpdate === "function") {
 				// Create a closure around the span of the current action, then execute the onUpdate handler
-				this.codemirror.on("update", (function(el, item) {
+				this.codemirror.on("update", (((el, item) => () => item.onUpdate(el))(el, item)));
-					return function() {
-						item.onUpdate(el);
-					};
-				}(el, item)));
 			}
 
-
 			// Append the item to the status bar
 			bar.appendChild(el);
 		}
@@ -649,15 +589,11 @@ class SimpleMDE extends Action {
 	 * Get or set the text content.
 	 */
 	value(val) {
-		if(val === undefined) {
+		if(val === undefined) return this.codemirror.getValue();
-			return this.codemirror.getValue();
+		this.codemirror.getDoc().setValue(val);
-		} else {
+		return this;
-			this.codemirror.getDoc().setValue(val);
-			return this;
-		}
 	};
 
-
 	/**
 	 * Bind instance methods for exports.
 	 */

src/js/utils.js

@@ -1,5 +1,5 @@
 /**
- * Created by WittBulter on 2017/1/17.
+ * @description :: versatile tools,
  */
 import {bindings} from './metadata'