suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/core/base/history.js

@@ -24,8 +24,8 @@ export default function History(editor) {
 
 		// user event
 		editor.triggerEvent('onChange', { frameContext: fc, data: fc.get('wysiwyg').innerHTML });
-		if (editor.context.get('toolbar.main').style.display === 'block') editor.toolbar._showBalloon();
-		else if (editor.isSubBalloon && editor.context.get('toolbar.sub.main').style.display === 'block') editor.subToolbar._showBalloon();
+		if (editor.context.get('toolbar_main').style.display === 'block') editor.toolbar._showBalloon();
+		else if (editor.isSubBalloon && editor.context.get('toolbar_sub_main').style.display === 'block') editor.subToolbar._showBalloon();
 	}
 
 	function setContentFromStack(increase) {
@@ -73,7 +73,7 @@ export default function History(editor) {
 		editor._resourcesStateChange(fc);
 
 		// document type
-		if (fc.has('documentType-use-header')) {
+		if (fc.has('documentType_use_header')) {
 			fc.get('documentType').reHeader();
 		}
 
@@ -180,7 +180,7 @@ export default function History(editor) {
 		push(delay, rootKey) {
 			if (waiting) return;
 
-			rootKey = rootKey || editor.status.rootKey;
+			rootKey = rootKey || rootKey === null ? rootKey : editor.status.rootKey;
 			const range = editor.status._range;
 
 			_w.setTimeout(editor._resourcesStateChange.bind(editor, frameRoots.get(rootKey)), 0);

package/src/core/class/char.js

@@ -28,11 +28,11 @@ Char.prototype = {
 	 * @returns {boolean}
 	 */
 	check(html) {
-		const maxCharCount = this.editor.frameOptions.get('charCounter_max');
+		const maxCharCount = this.frameOptions.get('charCounter_max');
 		if (maxCharCount) {
-			const length = this.getLength(typeof html === 'string' ? html : this.editor.frameOptions.get('charCounter_type') === 'byte-html' && html.nodeType === 1 ? /** @type {HTMLElement} */ (html).outerHTML : html.textContent);
+			const length = this.getLength(typeof html === 'string' ? html : this.frameOptions.get('charCounter_type') === 'byte-html' && html.nodeType === 1 ? /** @type {HTMLElement} */ (html).outerHTML : html.textContent);
 			if (length > 0 && length + this.getLength() > maxCharCount) {
-				CounterBlink(this.editor.frameContext.get('charWrapper'));
+				CounterBlink(this.frameContext.get('charWrapper'));
 				return false;
 			}
 		}
@@ -43,14 +43,14 @@ Char.prototype = {
 	 * @this {CharThis}
 	 * @description Get the [content]'s number of characters or binary data size. (frameOptions.get('charCounter_type'))
 	 * - If [content] is undefined, get the current editor's number of characters or binary data size.
-	 * @param {string=} content Content to count. (defalut: this.editor.frameContext.get('wysiwyg'))
+	 * @param {string=} content Content to count. (defalut: this.frameContext.get('wysiwyg'))
 	 * @returns {number}
 	 */
 	getLength(content) {
 		if (typeof content !== 'string') {
-			content = this.editor.frameOptions.get('charCounter_type') === 'byte-html' ? this.editor.frameContext.get('wysiwyg').innerHTML : this.editor.frameContext.get('wysiwyg').textContent;
+			content = this.frameOptions.get('charCounter_type') === 'byte-html' ? this.frameContext.get('wysiwyg').innerHTML : this.frameContext.get('wysiwyg').textContent;
 		}
-		return /byte/.test(this.editor.frameOptions.get('charCounter_type')) ? this.getByteLength(content) : content.length;
+		return /byte/.test(this.frameOptions.get('charCounter_type')) ? this.getByteLength(content) : content.length;
 	},
 
 	/**
@@ -91,7 +91,7 @@ Char.prototype = {
 	 * @param {?__se__FrameContext=} fc Frame context
 	 */
 	display(fc) {
-		const charCounter = (fc || this.editor.frameContext).get('charCounter');
+		const charCounter = (fc || this.frameContext).get('charCounter');
 		if (charCounter) {
 			_w.setTimeout(() => {
 				charCounter.textContent = this.getLength();
@@ -113,7 +113,7 @@ Char.prototype = {
 
 		this.display();
 
-		const maxCharCount = this.editor.frameOptions.get('charCounter_max');
+		const maxCharCount = this.frameOptions.get('charCounter_max');
 		if (maxCharCount > 0) {
 			let over = false;
 			const count = this.getLength();
@@ -135,7 +135,7 @@ Char.prototype = {
 			}
 
 			if (over) {
-				CounterBlink(this.editor.frameContext.get('charWrapper'));
+				CounterBlink(this.frameContext.get('charWrapper'));
 				if (nextCharCount > 0) return false;
 			}
 		}
@@ -149,7 +149,7 @@ Char.prototype = {
 /**
  * @private
  * @description The character counter blinks.
- * @param {Element} charWrapper this.editor.frameContext.get('charWrapper')
+ * @param {Element} charWrapper this.frameContext.get('charWrapper')
  */
 function CounterBlink(charWrapper) {
 	if (charWrapper && !hasClass(charWrapper, 'se-blink')) {

package/src/core/class/component.js

@@ -74,8 +74,6 @@ function Component(editor) {
 	this._bindClose_keydown = null;
 	/** @type {__se__GlobalEventInfo|void} */
 	this._bindClose_mousedown = null;
-	/** @type {__se__GlobalEventInfo|void} */
-	this._bindClose_touchstart = null;
 	/** @type {boolean} */
 	this.__selectionSelected = false;
 
@@ -101,15 +99,19 @@ Component.prototype = {
 	 * @param {Node} element Element to be inserted
 	 * @param {Object} [options] Options
 	 * @param {boolean} [options.skipCharCount=false] If true, it will be inserted even if "frameOptions.get('charCounter_max')" is exceeded.
-	 * @param {boolean} [options.skipSelection=false] If true, do not automatically select the inserted component.
 	 * @param {boolean} [options.skipHistory=false] If true, do not push to history.
+	 * @param {boolean} [options.scrollTo=true] true : Scroll to the inserted element, false : Do not scroll.
+	 * @param {?__se__ComponentInsertBehaviorType} [options.insertBehavior] If true, do not automatically select the inserted component. [default: options.get('componentInsertBehavior')]
+	 * - If null, noting action is performed after insertion.
 	 * @returns {HTMLElement} The inserted element or new line (for HR)
 	 */
-	insert(element, { skipCharCount, skipSelection, skipHistory } = {}) {
-		if (this.editor.frameContext.get('isReadOnly') || (!skipCharCount && !this.char.check(element))) {
+	insert(element, { skipCharCount = false, skipHistory = false, scrollTo = true, insertBehavior } = {}) {
+		if (this.frameContext.get('isReadOnly') || (!skipCharCount && !this.char.check(element))) {
 			return null;
 		}
 
+		if (insertBehavior === undefined) insertBehavior = this.options.get('componentInsertBehavior');
+
 		const r = this.html.remove();
 		const isInline = this.isInline(element);
 		this.selection.getRangeAndAddLine(this.selection.getRange(), r.container);
@@ -117,43 +119,95 @@ Component.prototype = {
 		let oNode = null;
 		let formatEl = this.format.getLine(selectionNode, null);
 
-		if (dom.check.isListCell(formatEl)) {
-			this.html.insertNode(element, { afterNode: isInline ? null : selectionNode === formatEl ? null : r.container.nextSibling, skipCharCount: true });
-			if (!isInline && !element.nextSibling) element.parentNode.appendChild(dom.utils.createElement('BR'));
-		} else {
-			if (!isInline && this.selection.getRange().collapsed && (r.container.nodeType === 3 || dom.check.isBreak(r.container))) {
-				const depthFormat = dom.query.getParentElement(r.container, this.format.isBlock.bind(this.format));
-				oNode = this.nodeTransform.split(r.container, r.offset, !depthFormat ? 0 : dom.query.getNodeDepth(depthFormat) + 1);
-				if (oNode) formatEl = /** @type {HTMLElement} */ (oNode.previousSibling);
+		try {
+			if (dom.check.isListCell(formatEl)) {
+				this.html.insertNode(element, { afterNode: isInline ? null : !dom.check.isZeroWidth(selectionNode) ? null : (selectionNode || r.container || {}).nextSibling, skipCharCount: true });
+				if (!isInline && !element.nextSibling) element.parentNode.appendChild(dom.utils.createElement('BR'));
+			} else {
+				if (!isInline && this.selection.getRange().collapsed && (r.container?.nodeType === 3 || dom.check.isBreak(r.container))) {
+					const depthFormat = dom.query.getParentElement(r.container, this.format.isBlock.bind(this.format));
+					oNode = this.nodeTransform.split(r.container, r.offset, !depthFormat ? 0 : dom.query.getNodeDepth(depthFormat) + 1);
+					if (oNode) formatEl = /** @type {HTMLElement} */ (oNode.previousSibling);
+				}
+				this.html.insertNode(element, { afterNode: isInline ? null : this.format.isBlock(formatEl) ? null : formatEl, skipCharCount: true });
+				if (!isInline && formatEl && dom.check.isZeroWidth(formatEl)) dom.utils.removeItem(formatEl);
 			}
-			this.html.insertNode(element, { afterNode: isInline ? null : this.format.isBlock(formatEl) ? null : formatEl, skipCharCount: true });
-			if (!isInline && formatEl && dom.check.isZeroWidth(formatEl)) dom.utils.removeItem(formatEl);
-		}
 
-		if (isInline) {
-			const empty = dom.utils.createTextNode(unicode.zeroWidthSpace);
-			element.parentNode.insertBefore(empty, element.nextSibling);
+			if (isInline) {
+				const empty = dom.utils.createTextNode(unicode.zeroWidthSpace);
+				element.parentNode.insertBefore(empty, element.nextSibling);
+			}
+		} catch (e) {
+			console.error('Component insert error:', e);
 		}
 
 		if (!skipHistory) this.history.push(false);
 
-		if (!skipSelection) {
-			this.selection.setRange(element, 0, element, 0);
-			const fileComponentInfo = this.get(element);
-			if (fileComponentInfo) {
-				this.select(fileComponentInfo.target, fileComponentInfo.pluginName);
-			} else if (oNode) {
-				oNode = dom.query.getEdgeChildNodes(oNode, null).sc || oNode;
-				this.selection.setRange(oNode, 0, oNode, 0);
-			}
+		// document type
+		if (this.frameContext.has('documentType_use_header')) {
+			this.frameContext.get('documentType').reHeader();
 		}
 
-		// document type
-		if (this.editor.frameContext.has('documentType-use-header')) {
-			this.editor.frameContext.get('documentType').reHeader();
+		const targetElement = /** @type {HTMLElement} */ (oNode || element);
+
+		if (scrollTo) this.selection.scrollTo(targetElement, { behavior: 'auto' });
+		if (insertBehavior !== null) this.applyInsertBehavior(element, oNode, insertBehavior);
+
+		return targetElement;
+	},
+
+	/**
+	 * @this {ComponentThis}
+	 * @description Handles post-insertion behavior for a newly created component based on the specified mode.
+	 * @param {Node} container The inserted component element.
+	 * @param {Node|null} [oNode] Optional node to use for selection if the component cannot be selected.
+	 * @param {__se__ComponentInsertBehaviorType} [insertBehavior] Behavior mode after component insertion.
+	 */
+	applyInsertBehavior(container, oNode, insertBehavior) {
+		const cInfo = this.get(container);
+
+		if (this.isInline(container)) {
+			const nr = this.selection.getNearRange(container);
+			if (nr) {
+				this.selection.setRange(nr.container, nr.offset, nr.container, nr.offset);
+			} else {
+				this.select(cInfo.target, cInfo.pluginName);
+			}
+			return;
 		}
 
-		return /** @type {HTMLElement} */ (oNode || element);
+		switch (insertBehavior) {
+			case 'auto': {
+				if (!this.__moveToNextLineOrAdd(container)) {
+					this.select(cInfo.target, cInfo.pluginName);
+				}
+
+				break;
+			}
+			case 'select': {
+				this.selection.setRange(container, 0, container, 0);
+
+				if (cInfo) {
+					this.select(cInfo.target, cInfo.pluginName);
+				} else if (oNode) {
+					oNode = dom.query.getEdgeChildNodes(oNode, null).sc || oNode;
+					this.selection.setRange(oNode, 0, oNode, 0);
+				}
+				break;
+			}
+			case 'line': {
+				if (!this.__moveToNextLineOrAdd(container)) {
+					const line = this.format.addLine(container, null);
+					if (line) this.selection.setRange(line, 0, line, 0);
+				}
+
+				break;
+			}
+			case 'none': {
+				// Do not select the component and remove the editor focus
+				break;
+			}
+		}
 	},
 
 	/**
@@ -173,7 +227,7 @@ Component.prototype = {
 		let launcher = null;
 
 		if (this.is(element)) {
-			if (dom.utils.hasClass(element, 'se-component') && !dom.utils.hasClass(element, 'se-inline-component')) element = /** @type {HTMLElement} */ (element).firstElementChild || element;
+			if (dom.check.isComponentContainer(element) && !dom.utils.hasClass(element, 'se-inline-component')) element = /** @type {HTMLElement} */ (element).firstElementChild || element;
 			if (/^FIGURE$/i.test(element.nodeName)) element = /** @type {HTMLElement} */ (element).firstElementChild;
 			if (!element) return null;
 
@@ -204,7 +258,7 @@ Component.prototype = {
 		const figureInfo = Figure.GetContainer(target);
 		const container = figureInfo.container || figureInfo.cover || target;
 		return (this.info = {
-			target,
+			target: figureInfo.target,
 			pluginName,
 			options,
 			container: container,
@@ -275,7 +329,7 @@ Component.prototype = {
 		}, 0)();
 
 		if (notOver && !this.status.hasFocus && !this.editor._preventFocus) {
-			this.eventManager.__postFocusEvent(this.editor.frameContext, null);
+			this.eventManager.__postFocusEvent(this.frameContext, null);
 			this.editor._preventFocus = true;
 		}
 
@@ -297,7 +351,7 @@ Component.prototype = {
 
 			this.editor.status.onSelected = true;
 		} else if (isBreakComponent || !dom.utils.hasClass(info.container, 'se-input-component')) {
-			const dragHandle = this.editor.frameContext.get('wrapper').querySelector('.se-drag-handle');
+			const dragHandle = this.frameContext.get('wrapper').querySelector('.se-drag-handle');
 			dom.utils.addClass(dragHandle, 'se-drag-handle-full');
 			this.ui._visibleControllers(false, false);
 
@@ -332,7 +386,7 @@ Component.prototype = {
 		this.ui.setControllerOnDisabledButtons(false);
 
 		if (this.editor._preventFocus && !this.status.hasFocus && !this.__prevent) {
-			this.eventManager.__postBlurEvent(this.editor.frameContext, null);
+			this.eventManager.__postBlurEvent(this.frameContext, null);
 			this.editor._preventFocus = false;
 		}
 	},
@@ -348,7 +402,7 @@ Component.prototype = {
 	is(element) {
 		if (!element) return false;
 
-		if (/^FIGURE$/i.test(element.nodeName) || dom.utils.hasClass(element, 'se-component')) return true;
+		if (/^FIGURE$/i.test(element.nodeName) || dom.check.isComponentContainer(element)) return true;
 		if (this.editor._componentManager.find((f) => f(element))) return true;
 
 		return false;
@@ -392,7 +446,7 @@ Component.prototype = {
 	 * - This function is different from the one called when the user presses the "Ctrl + C" key combination.
 	 * @param {Node} container The DOM node to check.
 	 */
-	copy(container) {
+	async copy(container) {
 		const cloneContainer = /** @type {HTMLElement} */ (dom.utils.clone(container, true));
 
 		// remove selected class
@@ -402,7 +456,7 @@ Component.prototype = {
 		dom.utils.removeClass(cloneContainer.querySelector('.se-selected-cell-focus'), 'se-selected-cell-focus');
 
 		// copy to clipboard
-		this.html.copy(cloneContainer);
+		if ((await this.html.copy(cloneContainer)) === false) return;
 
 		// copy effect
 		dom.utils.flashClass(container, 'se-copy');
@@ -442,7 +496,9 @@ Component.prototype = {
 		}
 
 		const { frameContext } = this.editor;
-		frameContext.get('lineBreaker_t').style.display = frameContext.get('lineBreaker_b').style.display = 'none';
+		if (frameContext.get('lineBreaker_t')) {
+			frameContext.get('lineBreaker_t').style.display = frameContext.get('lineBreaker_b').style.display = 'none';
+		}
 
 		if (this.currentPlugin && typeof this.currentPlugin.deselect === 'function') {
 			this.currentPlugin.deselect(this.currentTarget);
@@ -457,6 +513,31 @@ Component.prototype = {
 		this.ui.__offControllers();
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description
+	 * Attempts to move the cursor to a valid line after the given container.
+	 * - If a valid next sibling line exists, moves the selection there.
+	 * - If no next sibling exists, creates a new line after the container and moves the selection there.
+	 * - If the next sibling exists but is not a valid line element and cannot create a new line, returns false.
+	 * @param {Node} container The component container element.
+	 * @returns {boolean} Returns true if the selection moved to a line (existing or newly created), otherwise false.
+	 */
+	__moveToNextLineOrAdd(container) {
+		const nextSibling = /** @type {Element} */ (container).nextElementSibling;
+		if (!nextSibling) {
+			const line = this.format.addLine(container, null);
+			if (line) this.selection.setRange(line, 0, line, 0);
+			return true;
+		} else if (this.format.isLine(nextSibling)) {
+			this.selection.setRange(nextSibling, 0, nextSibling, 0);
+			return true;
+		}
+
+		return false;
+	},
+
 	/**
 	 * @private
 	 * @this {ComponentThis}
@@ -469,7 +550,7 @@ Component.prototype = {
 		const info = this.get(element);
 		if (!info) return;
 
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 		const container = info.container;
 		const isNonSelected = dom.utils.hasClass(container, 'se-flex-component');
 		const lb_t = fc.get('lineBreaker_t');
@@ -487,7 +568,7 @@ Component.prototype = {
 		const { top, left, right, scrollX, scrollY } = this.offset.getLocal(offsetTarget);
 		const sideOffset = isRtl ? right : left;
 
-		if (isList ? !container.previousSibling : !this.format.isLine(container.previousElementSibling)) {
+		if (isList ? (!dom.check.isBreak(container.previousElementSibling) && !container.previousSibling?.textContent?.trim()) || this.is(container.previousElementSibling) : !this.format.isLine(container.previousElementSibling)) {
 			const cStyle = _w.getComputedStyle(lb_t);
 			const cH = numbers.get(cStyle.height, 1);
 			const cW = numbers.get(cStyle.width, 1);
@@ -496,7 +577,7 @@ Component.prototype = {
 			componentTop = top;
 			w = target.offsetWidth / 2 / 2;
 
-			t_style.top = componentTop - scrollY - cH / 2 + 'px';
+			t_style.top = componentTop - cH / 2 + 'px';
 			t_style[dir[0]] = (isNonSelected ? sideOffset - cW / 2 : sideOffset + w) + 'px';
 			t_style[dir[1]] = '';
 
@@ -511,7 +592,7 @@ Component.prototype = {
 		}
 
 		// bottom
-		if (isList ? !container.nextSibling : !this.format.isLine(container.nextElementSibling)) {
+		if (isList ? (!dom.check.isBreak(container.nextElementSibling) && !container.nextSibling?.textContent?.trim()) || this.is(container.nextElementSibling) : !this.format.isLine(container.nextElementSibling)) {
 			const cStyle = _w.getComputedStyle(lb_b);
 			const cH = numbers.get(cStyle.height, 1);
 			const cW = numbers.get(cStyle.width, 1);
@@ -522,7 +603,7 @@ Component.prototype = {
 				w = target.offsetWidth / 2 / 2;
 			}
 
-			b_style.top = componentTop + target.offsetHeight - scrollY - cH / 2 + 'px';
+			b_style.top = componentTop + target.offsetHeight - cH / 2 + 'px';
 			b_style[dir[0]] = sideOffset + target.offsetWidth - (isNonSelected ? 0 : w) - (isNonSelected ? cW / 2 : cW) + 'px';
 			b_style[dir[1]] = '';
 
@@ -556,9 +637,9 @@ Component.prototype = {
 	 */
 	__removeGlobalEvent() {
 		this.__removeNotFileGlobalEvent();
-		if (this._bindClose_copy) this._bindClose_copy = this.eventManager.removeGlobalEvent(this._bindClose_copy);
-		if (this._bindClose_cut) this._bindClose_cut = this.eventManager.removeGlobalEvent(this._bindClose_cut);
-		if (this._bindClose_keydown) this._bindClose_keydown = this.eventManager.removeGlobalEvent(this._bindClose_keydown);
+		this._bindClose_copy &&= this.eventManager.removeGlobalEvent(this._bindClose_copy);
+		this._bindClose_cut &&= this.eventManager.removeGlobalEvent(this._bindClose_cut);
+		this._bindClose_keydown &&= this.eventManager.removeGlobalEvent(this._bindClose_keydown);
 	},
 
 	/**
@@ -568,8 +649,7 @@ Component.prototype = {
 	 */
 	__addNotFileGlobalEvent() {
 		this.__removeNotFileGlobalEvent();
-		if (!isMobile) this._bindClose_mousedown = this.eventManager.addGlobalEvent('mousedown', this.__globalEvents.mousedown, true);
-		else this._bindClose_touchstart = this.eventManager.addGlobalEvent('touchstart', this.__globalEvents.mousedown, true);
+		this._bindClose_mousedown = this.eventManager.addGlobalEvent(isMobile ? 'click' : 'mousedown', this.__globalEvents.mousedown, true);
 	},
 
 	/**
@@ -578,8 +658,7 @@ Component.prototype = {
 	 * @description Removes global event listeners related to non-file interactions.
 	 */
 	__removeNotFileGlobalEvent() {
-		if (this._bindClose_mousedown) this._bindClose_mousedown = this.eventManager.removeGlobalEvent(this._bindClose_mousedown);
-		if (this._bindClose_touchstart) this._bindClose_touchstart = this.eventManager.removeGlobalEvent(this._bindClose_touchstart);
+		this._bindClose_mousedown &&= this.eventManager.removeGlobalEvent(this._bindClose_mousedown);
 	},
 
 	/**
@@ -660,6 +739,8 @@ function OnDragClick(e) {
 	if (!dom.utils.hasClass(target, 'se-drag-handle-full')) return;
 
 	const dragInst = _DragHandle.get('__dragInst');
+	if (!dragInst) return;
+
 	this._removeDragEvent();
 	this.select(dragInst.currentTarget, dragInst.currentPluginName);
 }
@@ -733,10 +814,10 @@ async function OnKeyDown_component(e) {
 	if (ctrl) {
 		if (keyCode !== 'ControlRight' && keyCode !== 'ControlLeft') {
 			const info = this.editor.shortcutsKeyMap.get(keyCode + (e.shiftKey ? '1000' : ''));
-			if (/^(redo|undo)$/.test(info?.c)) {
+			if (/^(redo|undo)$/.test(info?.command)) {
 				e.preventDefault();
 				e.stopPropagation();
-				this.editor.run(info.c, info.t, info.e);
+				this.editor.run(info.command, info.type, info.button);
 			}
 		}
 		return;
@@ -746,10 +827,16 @@ async function OnKeyDown_component(e) {
 	if (keyCodeMap.isRemoveKey(keyCode)) {
 		e.preventDefault();
 		e.stopPropagation();
-		if (typeof this.currentPlugin?.destroy === 'function') {
+		if (typeof this.currentPlugin?.destroy === 'function' && (!this.info.isInputType || !this.status.hasFocus)) {
+			const focusNode = this.info.container.previousSibling;
 			await this.currentPlugin.destroy(this.currentTarget);
 			this.deselect();
-			this.editor.focus();
+			if (focusNode) {
+				const offset = focusNode.nodeType === 3 ? focusNode.textContent.length : 1;
+				this.selection.setRange(focusNode, offset, focusNode, offset);
+			} else {
+				this.editor.focus();
+			}
 			return;
 		}
 	}
@@ -777,6 +864,7 @@ async function OnKeyDown_component(e) {
 	}
 
 	// up down, left right
+	DIR_KEYCODE.lastIndex = 0;
 	if (DIR_KEYCODE.test(keyCode)) {
 		const { container } = this.get(this.currentTarget);
 		const isInline = this.isInline(container || this.currentTarget);
@@ -808,6 +896,7 @@ async function OnKeyDown_component(e) {
 				}
 			}
 		} else {
+			DIR_UP_KEYCODE.lastIndex = 0;
 			if (DIR_UP_KEYCODE.test(keyCode)) {
 				el = container.previousElementSibling;
 			} else {