Mercurial Hosting > sceditor

changeset 33:c23475f3f466

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
improve emoticons
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 14 Aug 2022 20:36:17 -0600
parents 98f11d0cbbd8
children 20d1f23225fe
files src/formats/bbcode.js src/formats/xhtml.js src/sceditor.js
diffstat 3 files changed, 40 insertions(+), 77 deletions(-) [+]
line wrap: on
line diff
diff -r 98f11d0cbbd8 -r c23475f3f466 src/formats/bbcode.js
--- a/src/formats/bbcode.js	Sat Aug 13 22:37:46 2022 -0600
+++ b/src/formats/bbcode.js	Sun Aug 14 20:36:17 2022 -0600
@@ -210,6 +210,13 @@
 		quote: {
 			txtExec: ['[quote]', '[/quote]']
 		},
+		emoticon: {
+			txtExec: function (editor, caller) {
+				editor.commands.emoticon.base(editor, caller, function(target) {
+					return '[emoticon]' + target.getAttribute(EMOTICON_DATA_ATTR) + '[/emoticon]';
+				} );
+			},
+		},
 		youtube: {
 			txtExec: function (editor, caller) {
 				getEditorCommand('youtube')._dropDown(
@@ -506,7 +513,9 @@
 			format: function (element, content) {
 				return attr(element, EMOTICON_DATA_ATTR) + content;
 			},
-			html: '{0}'
+			html: function (token, attrs, content, editor) {
+				return editor.allEmoticons[content] || token.val + content + token.closing.val;
+			}
 		},
 		// END_COMMAND
 
@@ -542,7 +551,7 @@
 
 				// check if this is an emoticon image
 				if (attr(element, EMOTICON_DATA_ATTR)) {
-					return content;
+					return '[emoticon]' + content + '[/emoticon]';
 				}
 
 				width = attr(element, 'width') || style('width');
@@ -1025,10 +1034,10 @@
 	 * @name BBCodeParser
 	 * @since v1.4.0
 	 */
-	function newBBCodeParser(options) {
+	function newBBCodeParser(editor) {
 		var base = {};
 
-		base.opts = extend({}, BBCodeParser.defaults, options);
+		base.opts = extend({}, BBCodeParser.defaults, editor.opts.parserOptions);
 
 		/**
 		 * Takes a BBCode string and splits it into open,
@@ -1829,7 +1838,8 @@
 							html = bbcode.html(
 								token,
 								token.attrs,
-								content
+								content,
+								editor
 							);
 						}
 					} else {
@@ -2503,6 +2513,7 @@
 		 * @private
 		 */
 		base.init = function (editor) {
+			base.editor = editor;
 			base.opts = editor.opts;
 			base.elementToBbcode = elementToBbcode;
 
@@ -2510,7 +2521,7 @@
 			buildBbcodeCache();
 
 			editor.commands = extendDeep(
-				{}, defaultCommandsOverrides, editor.commands
+				{}, editor.commands, defaultCommandsOverrides
 			);
 
 			// Add BBCode helper methods
@@ -2527,7 +2538,7 @@
 		 */
 		function toHtml(asFragment) {
 			return function(source, legacyAsFragment) {
-				var	parser = newBBCodeParser(base.opts.parserOptions);
+				var	parser = newBBCodeParser(base.editor);
 				var html = parser.toHTML(
 					base.opts.bbcodeTrim ? source.trim() : source
 				);
@@ -2554,7 +2565,7 @@
 				var	bbcode, elements;
 				var containerParent = context.createElement('div');
 				var container = context.createElement('div');
-				var parser = newBBCodeParser(base.opts.parserOptions);
+				var parser = newBBCodeParser(base.editor);
 
 				container.innerHTML = html;
 				css(containerParent, 'visibility', 'hidden');
diff -r 98f11d0cbbd8 -r c23475f3f466 src/formats/xhtml.js
--- a/src/formats/xhtml.js	Sat Aug 13 22:37:46 2022 -0600
+++ b/src/formats/xhtml.js	Sun Aug 14 20:36:17 2022 -0600
@@ -21,6 +21,7 @@
 	var removeAttr = dom.removeAttr;
 	var convertElement = dom.convertElement;
 	var extend = utils.extend;
+	var extendDeep = utils.extendDeep;
 	var each = utils.each;
 	var isEmptyObject = utils.isEmptyObject;
 
@@ -524,8 +525,7 @@
 				);
 			}
 
-			editor.commands = extend(true,
-				{}, defaultCommandsOverrides, editor.commands);
+			editor.commands = extendDeep({}, defaultCommandsOverrides, editor.commands);
 		};
 
 		/**
diff -r 98f11d0cbbd8 -r c23475f3f466 src/sceditor.js
--- a/src/sceditor.js	Sat Aug 13 22:37:46 2022 -0600
+++ b/src/sceditor.js	Sun Aug 14 20:36:17 2022 -0600
@@ -2541,17 +2541,12 @@
 
 		// START_COMMAND: Emoticons
 		emoticon: {
-			exec: function (editor, caller) {
+			base: function (editor, caller, targetToHtml) {
 				var createContent = function (includeMore) {
 					var	moreLink,
 						opts            = editor.opts,
 						emoticonsRoot   = opts.emoticonsRoot || '',
 						emoticonsCompat = opts.emoticonsCompat,
-						rangeHelper     = editor.getRangeHelper(),
-						startSpace      = emoticonsCompat &&
-							rangeHelper.getOuterText(true, 1) !== ' ' ? ' ' : '',
-						endSpace        = emoticonsCompat &&
-							rangeHelper.getOuterText(false, 1) !== ' ' ? ' ' : '',
 						content         = createElement('div'),
 						line            = createElement('div'),
 						perLine         = 0,
@@ -2566,8 +2561,8 @@
 					perLine = Math.sqrt(Object.keys(emoticons).length);
 
 					onEvent1(content, 'click', 'img', function (target, e) {
-						editor.insert(startSpace + attr(target, 'alt') + endSpace,
-							null, false).closeDropDown(true);
+						editor.insert(targetToHtml(target), null, false);
+						editor.closeDropDown(true);
 
 						e.preventDefault();
 					});
@@ -2575,6 +2570,7 @@
 					each(emoticons, function (code, emoticon) {
 						appendChild(line, createElement('img', {
 							src: emoticonsRoot + (emoticon.url || emoticon),
+							'data-sceditor-emoticon': code,
 							alt: code,
 							title: emoticon.tooltip || code
 						}));
@@ -2609,8 +2605,13 @@
 
 				editor.createDropDown(caller, 'emoticons', createContent(false));
 			},
+			exec: function (editor, caller) {
+				editor.commands.emoticon.base(editor, caller
+					, function(target) { return target.outerHTML; }
+				);
+			},
 			txtExec: function (editor, caller) {
-				defaultCmds.emoticon.exec(editor, caller);
+				editor.commands.emoticon.exec(editor, caller);
 			},
 			tooltip: 'Insert an emoticon'
 		},
@@ -4044,7 +4045,7 @@
 	 * @param {boolean} emoticonsCompat
 	 * @return {void}
 	 */
-	function replace(root, emoticons, emoticonsCompat) {
+	function doReplaceEmoticons(root, emoticons, emoticonsCompat) {
 		var	doc           = root.ownerDocument;
 		var space         = '(^|\\s|\xA0|\u2002|\u2003|\u2009|$)';
 		var emoticonCodes = [];
@@ -4254,14 +4255,6 @@
 		var locale;
 
 		/**
-		 * Stores a cache of preloaded images
-		 *
-		 * @private
-		 * @type {Array.<HTMLImageElement>}
-		 */
-		var preLoadCache = [];
-
-		/**
 		 * The editors rangeHelper instance
 		 *
 		 * @type {RangeHelper}
@@ -4998,13 +4991,6 @@
 					url: root + (url.url || url),
 					tooltip: url.tooltip || key
 				});
-
-				// Preload the emoticon
-				if (options.emoticonsEnabled) {
-					preLoadCache.push(createElement('img', {
-						src: root + (url.url || url)
-					}));
-				}
 			});
 		};
 
@@ -5098,8 +5084,6 @@
 			sourceEditor.readonly = !readOnly;
 
 			updateToolBar(readOnly);
-
-			return base;
 		};
 
 		/**
@@ -5138,8 +5122,6 @@
 			if (icons.rtl) {
 				icons.rtl(rtl);
 			}
-
-			return base;
 		};
 
 		/**
@@ -5193,8 +5175,6 @@
 			}
 
 			base.dimensions(width$1, null, saveWidth);
-
-			return base;
 		};
 
 		/**
@@ -5262,8 +5242,6 @@
 
 				height(editorContainer, height$1);
 			}
-
-			return base;
 		};
 
 		/**
@@ -5307,8 +5285,6 @@
 			}
 
 			base.dimensions(null, height$1, saveHeight);
-
-			return base;
 		};
 
 		/**
@@ -5354,8 +5330,6 @@
 			}
 
 			autoExpand();
-
-			return base;
 		};
 
 		autoExpand = function () {
@@ -5820,8 +5794,6 @@
 			} else {
 				base.wysiwygEditorInsertText(text, endText);
 			}
-
-			return base;
 		};
 
 		/**
@@ -5904,8 +5876,7 @@
 			if (position) {
 				sourceEditor.selectionStart = position.start;
 				sourceEditor.selectionEnd = position.end;
-
-				return base;
+				return;
 			}
 
 			return {
@@ -5960,8 +5931,6 @@
 			} else {
 				base.setSourceEditorValue(val);
 			}
-
-			return base;
 		};
 
 		/**
@@ -6016,7 +5985,7 @@
 		) {
 			if (base.inSourceMode()) {
 				base.sourceEditorInsertText(start, end);
-				return base;
+				return;
 			}
 
 			// Add the selection between start and end
@@ -6043,8 +6012,6 @@
 			}
 
 			base.wysiwygEditorInsertHtml(start);
-
-			return base;
 		};
 
 		/**
@@ -6151,7 +6118,7 @@
 			}
 
 			wysiwygBody.innerHTML = value;
-			replaceEmoticons();
+			//replaceEmoticons();
 
 			appendNewLine();
 			triggerValueChanged();
@@ -6192,7 +6159,7 @@
 		 */
 		replaceEmoticons = function () {
 			if (options.emoticonsEnabled) {
-				replace(wysiwygBody, allEmoticons, options.emoticonsCompat);
+				doReplaceEmoticons(wysiwygBody, allEmoticons, options.emoticonsCompat);
 			}
 		};
 
@@ -6235,8 +6202,6 @@
 			if ((inSourceMode && !enable) || (!inSourceMode && enable)) {
 				base.toggleSourceMode();
 			}
-
-			return base;
 		};
 
 		/**
@@ -6738,8 +6703,6 @@
 					}
 				}
 			}
-
-			return base;
 		};
 
 		/**
@@ -6775,8 +6738,6 @@
 					}
 				}
 			}
-
-			return base;
 		};
 
 		/**
@@ -6810,8 +6771,6 @@
 			} else {
 				sourceEditor.blur();
 			}
-
-			return base;
 		};
 
 		/**
@@ -6875,8 +6834,6 @@
 			}
 
 			updateActiveButtons();
-
-			return base;
 		};
 
 		/**
@@ -7098,8 +7055,6 @@
 
 				triggerValueChanged();
 			}
-
-			return base;
 		};
 
 		/**
@@ -7140,8 +7095,6 @@
 			} else {
 				inlineCss.innerHTML = css;
 			}
-
-			return base;
 		};
 
 		/**
@@ -7305,7 +7258,7 @@
 				shortcutHandlers[shortcut] = cmd;
 			}
 
-			return base;
+			return true;
 		};
 
 		/**
@@ -7315,8 +7268,6 @@
 		 */
 		base.removeShortcut = function (shortcut) {
 			delete shortcutHandlers[shortcut.toLowerCase()];
-
-			return base;
 		};
 
 		/**
@@ -7392,7 +7343,7 @@
 			block = block || currentStyledBlockNode();
 
 			if (!block || is(block, 'body')) {
-				return base;
+				return;
 			}
 
 			rangeHelper.saveRange();
@@ -7406,7 +7357,6 @@
 			}
 
 			rangeHelper.restoreRange();
-			return base;
 		};
 
 		/**
@@ -7541,6 +7491,8 @@
 		// run the initializer
 		init();
 
+		base.allEmoticons = allEmoticons;
+
 		return base;
 	}