changeset 16:8bd52902156a

remove "this" from command functions
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 07 Aug 2022 21:41:55 -0600
parents ea930990b601
children a199722647d0
files src/changes.txt src/sceditor.js
diffstat 2 files changed, 73 insertions(+), 97 deletions(-) [+]
line wrap: on
line diff
diff -r ea930990b601 -r 8bd52902156a src/changes.txt
--- a/src/changes.txt	Sun Aug 07 17:00:41 2022 -0600
+++ b/src/changes.txt	Sun Aug 07 21:41:55 2022 -0600
@@ -1,6 +1,8 @@
 changes, most recent at top
 
 
+Removed "this" from command functions and instead pass "editor" as first arg.  Javascript's object-oriented features are a disgusting hack and should never be used.  I will remove uses of this as I encounter them.
+
 Add optional "icon" to command spec.
 
 Formats set default format so the "format" option isn't needed.
diff -r ea930990b601 -r 8bd52902156a src/sceditor.js
--- a/src/sceditor.js	Sun Aug 07 17:00:41 2022 -0600
+++ b/src/sceditor.js	Sun Aug 07 21:41:55 2022 -0600
@@ -1981,7 +1981,7 @@
 
 		// START_COMMAND: Left
 		left: {
-			state: function (node) {
+			state: function (editor, node) {
 				if (node && node.nodeType === 3) {
 					node = node.parentNode;
 				}
@@ -2007,7 +2007,7 @@
 		// END_COMMAND
 		// START_COMMAND: Right
 		right: {
-			state: function (node) {
+			state: function (editor, node) {
 				if (node && node.nodeType === 3) {
 					node = node.parentNode;
 				}
@@ -2051,9 +2051,7 @@
 
 				editor.createDropDown(caller, 'font-picker', content);
 			},
-			exec: function (caller) {
-				var editor = this;
-
+			exec: function (editor,caller) {
 				defaultCmds.font._dropDown(editor, caller, function (fontName) {
 					editor.execCommand('fontname', fontName);
 				});
@@ -2080,9 +2078,7 @@
 
 				editor.createDropDown(caller, 'fontsize-picker', content);
 			},
-			exec: function (caller) {
-				var editor = this;
-
+			exec: function (editor,caller) {
 				defaultCmds.size._dropDown(editor, caller, function (fontSize) {
 					editor.execCommand('fontsize', fontSize);
 				});
@@ -2124,9 +2120,7 @@
 
 				editor.createDropDown(caller, 'color-picker', content);
 			},
-			exec: function (caller) {
-				var editor = this;
-
+			exec: function (editor,caller) {
 				defaultCmds.color._dropDown(editor, caller, function (color) {
 					editor.execCommand('forecolor', color);
 				});
@@ -2167,10 +2161,9 @@
 		// END_COMMAND
 		// START_COMMAND: Paste Text
 		pastetext: {
-			exec: function (caller) {
+			exec: function (editor,caller) {
 				var	val,
-					content = createElement('div'),
-					editor  = this;
+					content = createElement('div');
 
 				appendChild(content, _tmpl('pastetext', {
 					label: editor._(
@@ -2197,25 +2190,25 @@
 		// END_COMMAND
 		// START_COMMAND: Bullet List
 		bulletlist: {
-			exec: function () {
-				fixFirefoxListBug(this);
-				this.execCommand('insertunorderedlist');
+			exec: function (editor) {
+				fixFirefoxListBug(editor);
+				editor.execCommand('insertunorderedlist');
 			},
 			tooltip: 'Bullet list'
 		},
 		// END_COMMAND
 		// START_COMMAND: Ordered List
 		orderedlist: {
-			exec: function () {
-				fixFirefoxListBug(this);
-				this.execCommand('insertorderedlist');
+			exec: function (editor) {
+				fixFirefoxListBug(editor);
+				editor.execCommand('insertorderedlist');
 			},
 			tooltip: 'Numbered list'
 		},
 		// END_COMMAND
 		// START_COMMAND: Indent
 		indent: {
-			state: function (parent, firstBlock) {
+			state: function (editor, parent, firstBlock) {
 				// Only works with lists, for now
 				var	range, startParent, endParent;
 
@@ -2249,9 +2242,8 @@
 
 				return -1;
 			},
-			exec: function () {
-				var editor = this,
-					block = editor.getRangeHelper().getFirstBlockParent();
+			exec: function (editor) {
+				var block = editor.getRangeHelper().getFirstBlockParent();
 
 				editor.focus();
 
@@ -2268,13 +2260,13 @@
 		// END_COMMAND
 		// START_COMMAND: Outdent
 		outdent: {
-			state: function (parents, firstBlock) {
+			state: function (editor, parents, firstBlock) {
 				return closest(firstBlock, 'ul,ol,menu') ? 0 : -1;
 			},
-			exec: function () {
-				var	block = this.getRangeHelper().getFirstBlockParent();
+			exec: function (editor) {
+				var	block = editor.getRangeHelper().getFirstBlockParent();
 				if (closest(block, 'ul,ol,menu')) {
-					this.execCommand('outdent');
+					editor.execCommand('outdent');
 				}
 			},
 			tooltip: 'Remove one indent'
@@ -2283,9 +2275,8 @@
 
 		// START_COMMAND: Table
 		table: {
-			exec: function (caller) {
-				var	editor  = this,
-					content = createElement('div');
+			exec: function (editor,caller) {
+				var	content = createElement('div');
 
 				appendChild(content, _tmpl('table', {
 					rows: editor._('Rows:'),
@@ -2330,8 +2321,8 @@
 
 		// START_COMMAND: Code
 		code: {
-			exec: function () {
-				this.wysiwygEditorInsertHtml(
+			exec: function (editor) {
+				editor.wysiwygEditorInsertHtml(
 					'<code>',
 					'<br /></code>'
 				);
@@ -2372,9 +2363,7 @@
 
 				editor.createDropDown(caller, 'insertimage', content);
 			},
-			exec: function (caller) {
-				var	editor  = this;
-
+			exec: function (editor,caller) {
 				defaultCmds.image._dropDown(
 					editor,
 					caller,
@@ -2426,9 +2415,7 @@
 
 				editor.createDropDown(caller, 'insertemail', content);
 			},
-			exec: function (caller) {
-				var	editor  = this;
-
+			exec: function (editor,caller) {
 				defaultCmds.email._dropDown(
 					editor,
 					caller,
@@ -2482,9 +2469,7 @@
 
 				editor.createDropDown(caller, 'insertlink', content);
 			},
-			exec: function (caller) {
-				var editor = this;
-
+			exec: function (editor,caller) {
 				defaultCmds.link._dropDown(editor, caller, function (url, text) {
 					if (text || !editor.getRangeHelper().selectedHtml()) {
 						editor.wysiwygEditorInsertHtml(
@@ -2503,11 +2488,11 @@
 
 		// START_COMMAND: Unlink
 		unlink: {
-			state: function () {
-				return closest(this.currentNode(), 'a') ? 0 : -1;
+			state: function (editor) {
+				return closest(editor.currentNode(), 'a') ? 0 : -1;
 			},
-			exec: function () {
-				var anchor = closest(this.currentNode(), 'a');
+			exec: function (editor) {
+				var anchor = closest(editor.currentNode(), 'a');
 
 				if (anchor) {
 					while (anchor.firstChild) {
@@ -2524,7 +2509,7 @@
 
 		// START_COMMAND: Quote
 		quote: {
-			exec: function (caller, html, author) {
+			exec: function (editor, caller, html, author) {
 				var	before = '<blockquote>',
 					end    = '</blockquote>';
 
@@ -2537,11 +2522,11 @@
 					before = before + author + html + end;
 					end    = null;
 				// if not add a newline to the end of the inserted quote
-				} else if (this.getRangeHelper().selectedHtml() === '') {
+				} else if (editor.getRangeHelper().selectedHtml() === '') {
 					end = '<br />' + end;
 				}
 
-				this.wysiwygEditorInsertHtml(before, end);
+				editor.wysiwygEditorInsertHtml(before, end);
 			},
 			tooltip: 'Insert a Quote'
 		},
@@ -2549,9 +2534,7 @@
 
 		// START_COMMAND: Emoticons
 		emoticon: {
-			exec: function (caller) {
-				var editor = this;
-
+			exec: function (editor, caller) {
 				var createContent = function (includeMore) {
 					var	moreLink,
 						opts            = editor.opts,
@@ -2619,8 +2602,8 @@
 
 				editor.createDropDown(caller, 'emoticons', createContent(false));
 			},
-			txtExec: function (caller) {
-				defaultCmds.emoticon.exec.call(this, caller);
+			txtExec: function (editor, caller) {
+				defaultCmds.emoticon.exec(editor, caller);
 			},
 			tooltip: 'Insert an emoticon'
 		},
@@ -2660,9 +2643,7 @@
 
 				editor.createDropDown(caller, 'insertlink', content);
 			},
-			exec: function (btn) {
-				var editor = this;
-
+			exec: function (editor, btn) {
 				defaultCmds.youtube._dropDown(editor, btn, function (id, time) {
 					editor.wysiwygEditorInsertHtml(_tmpl('youtube', {
 						id: id,
@@ -2699,11 +2680,11 @@
 					.replace(/month/i, month)
 					.replace(/day/i, day);
 			},
-			exec: function () {
-				this.insertText(defaultCmds.date._date(this));
+			exec: function (editor) {
+				editor.insertText(defaultCmds.date._date(editor));
 			},
-			txtExec: function () {
-				this.insertText(defaultCmds.date._date(this));
+			txtExec: function (editor) {
+				defaultCmds.date.exec(editor);
 			},
 			tooltip: 'Insert current date'
 		},
@@ -2731,11 +2712,11 @@
 
 				return hours + ':' + mins + ':' + secs;
 			},
-			exec: function () {
-				this.insertText(defaultCmds.time._time());
+			exec: function (editor) {
+				editor.insertText(defaultCmds.time._time());
 			},
-			txtExec: function () {
-				this.insertText(defaultCmds.time._time());
+			txtExec: function (editor) {
+				defaultCmds.time.exec(editor);
 			},
 			tooltip: 'Insert current time'
 		},
@@ -2744,12 +2725,11 @@
 
 		// START_COMMAND: Ltr
 		ltr: {
-			state: function (parents, firstBlock) {
+			state: function (editor, parents, firstBlock) {
 				return firstBlock && firstBlock.style.direction === 'ltr';
 			},
-			exec: function () {
-				var	editor = this,
-					rangeHelper = editor.getRangeHelper(),
+			exec: function (editor) {
+				var	rangeHelper = editor.getRangeHelper(),
 					node = rangeHelper.getFirstBlockParent();
 
 				editor.focus();
@@ -2773,12 +2753,11 @@
 
 		// START_COMMAND: Rtl
 		rtl: {
-			state: function (parents, firstBlock) {
+			state: function (editor, parents, firstBlock) {
 				return firstBlock && firstBlock.style.direction === 'rtl';
 			},
-			exec: function () {
-				var	editor = this,
-					rangeHelper = editor.getRangeHelper(),
+			exec: function (editor) {
+				var	rangeHelper = editor.getRangeHelper(),
 					node = rangeHelper.getFirstBlockParent();
 
 				editor.focus();
@@ -2810,16 +2789,15 @@
 
 		// START_COMMAND: Maximize
 		maximize: {
-			state: function () {
-				return this.maximize();
+			state: function (editor) {
+				return editor.maximize();
 			},
-			exec: function () {
-				this.maximize(!this.maximize());
-				this.focus();
+			exec: function (editor) {
+				editor.maximize(!editor.maximize());
+				editor.focus();
 			},
 			txtExec: function () {
-				this.maximize(!this.maximize());
-				this.focus();
+				defaultCmds.maximize.exec(editor);
 			},
 			tooltip: 'Maximize',
 			shortcut: 'Ctrl+Shift+M'
@@ -2828,16 +2806,15 @@
 
 		// START_COMMAND: Source
 		source: {
-			state: function () {
-				return this.sourceMode();
+			state: function (editor) {
+				return editor.sourceMode();
 			},
-			exec: function () {
-				this.toggleSourceMode();
-				this.focus();
+			exec: function (editor) {
+				editor.toggleSourceMode();
+				editor.focus();
 			},
-			txtExec: function () {
-				this.toggleSourceMode();
-				this.focus();
+			txtExec: function (editor) {
+				defaultCmds.source.exec(editor);
 			},
 			tooltip: 'View source',
 			shortcut: 'Ctrl+Shift+S'
@@ -6160,8 +6137,8 @@
 					let iconName = command.icon || commandName
 					let shortcut = command.shortcut;
 					let button   = _tmpl('toolbarButton', {
+						name: commandName,
 						iconName: iconName,
-						name: commandName,
 						dispName: base._(command.name ||
 								command.tooltip || commandName)
 					}, true).firstChild;
@@ -7686,12 +7663,12 @@
 					if (Array.isArray(cmd.txtExec)) {
 						base.sourceEditorInsertText.apply(base, cmd.txtExec);
 					} else {
-						cmd.txtExec.call(base, caller, sourceEditorSelectedText());
+						cmd.txtExec(base, caller, sourceEditorSelectedText());
 					}
 				}
 			} else if (cmd.exec) {
 				if (isFunction(cmd.exec)) {
-					cmd.exec.call(base, caller);
+					cmd.exec(base, caller);
 				} else {
 					base.execCommand(
 						cmd.exec,
@@ -7891,7 +7868,7 @@
 						} catch (ex) {}
 					}
 				} else if (!isDisabled) {
-					state = stateFn.call(base, parent, firstBlock);
+					state = stateFn(base, parent, firstBlock);
 				}
 
 				toggleClass(btn, 'disabled', isDisabled || state < 0);
@@ -8973,7 +8950,7 @@
 		 *
 		 * @param {string} name
 		 * @param {Object} cmd
-		 * @return {this|false} Returns false if name or cmd is false
+		 * @return {true|false} Returns false if name or cmd is false
 		 * @since v1.3.5
 		 */
 		set: function (name, cmd) {
@@ -8989,22 +8966,19 @@
 			};
 
 			defaultCmds[name] = cmd;
-			return this;
+			return true;
 		},
 
 		/**
 		 * Removes a command
 		 *
 		 * @param {string} name
-		 * @return {this}
 		 * @since v1.3.5
 		 */
 		remove: function (name) {
 			if (defaultCmds[name]) {
 				delete defaultCmds[name];
 			}
-
-			return this;
 		}
 	};