suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/core/class/shortcuts.js

@@ -2,32 +2,92 @@
  * @fileoverview Shortcuts class
  */
 
-const Shortcuts = function (editor) {
+import { keyCodeMap } from '../../helper';
+
+/**
+ * @typedef {Omit<Shortcuts & Partial<__se__EditorInjector>, 'shortcuts'>} ShortcutsThis
+ */
+
+/**
+ * @typedef {Object} ShortcutInfo
+ * @property {boolean} c - Whether the [Ctrl, Command] key is pressed.
+ * @property {boolean} s - Whether the [Shift] key is pressed.
+ * @property {boolean} space - Whether the [Space] key is pressed.
+ * @property {boolean} enter - Whether the Enter key is pressed.
+ * @property {string} command - The command key. (e.g. "bold")
+ * @property {boolean} edge - Whether the cursor is at the end of the line.
+ * @property {string=} key - The key pressed (e.g., "1.").
+ * @property {string=} keyCode - The keyEvent.code.
+ * @property {string|((...args: *) => *)=} method - A plugin's "shortcut" method that is called instead of the default "editor.run" method.
+ * @property {string} plugin - The plugin name.
+ * @property {string} type - Plugin's type. ("command", "dropdown", "modal", "browser", "input", "field", "popup").
+ * @property {Node} button - The plugin command button.
+ * @property {Array<string>} r - An array of key codes generated with the reverseButtons option, used to reverse the action for a specific key combination.
+ * @property {string} textTrigger - Whether the event was triggered by a text input (e.g., mention like @ab).
+ */
+
+/**
+ * @constructor
+ * @this {ShortcutsThis}
+ * @description Shortcuts class
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function Shortcuts(editor) {
 	this.editor = editor;
 	this.isDisabled = false;
-};
+}
 
 Shortcuts.prototype = {
 	/**
+	 * @this {ShortcutsThis}
 	 * @description If there is a shortcut function, run it.
-	 * @param {number} keyCode event.keyCode
-	 * @param {boolean} shift Whether to press shift key
+	 * @param {KeyboardEvent} event Keyboard event object
+	 * @param {boolean} ctrl Whether the Ctrl key is pressed
+	 * @param {boolean} shift Whether the Shift key is pressed
+	 * @param {string} keyCode The keyEvent.code.
+	 * @param {string} text The text content of the key
+	 * @param {boolean} edge Whether the cursor is at the end of the line
+	 * @param {HTMLElement} line The current line node
+	 * @param {Range} range The current range object
 	 * @returns {boolean} Whether to execute shortcuts
 	 */
-	command(keyCode, shift) {
+	command(event, ctrl, shift, keyCode, text, edge, line, range) {
 		if (this.isDisabled) return false;
 
-		const info = this.editor.shortcutsKeyMap.get(keyCode + (shift ? 1000 : 0));
-		if (!info || (!shift && info.s)) return false;
+		/** @type {ShortcutInfo} */
+		let info = null;
+
+		if (ctrl) {
+			info = this.editor.shortcutsKeyMap.get(keyCode + (shift ? '1000' : ''));
+		} else {
+			info = this.editor.shortcutsKeyMap.get(text) || this.editor.shortcutsKeyMap.get(text + event.key);
+		}
+
+		if (!info || (!shift && info.s) || (info.space && !keyCodeMap.isSpace(keyCode)) || (info.enter && !keyCodeMap.isEnter(keyCode)) || (info.textTrigger && !event.key.trim()) || (info.edge && !edge)) return false;
+
+		if (info.plugin && typeof info.method === 'string') {
+			this.editor.plugins[info.plugin][info.method]?.({ range, line, info, event, keyCode });
+		} else if (typeof info.method === 'function') {
+			info.method({ range, line, info, event, keyCode, editor: this.editor });
+		} else {
+			this.editor.run(info.command, info.type, info.button);
+		}
 
-		this.editor.run(info.c, info.t, info.e);
 		return true;
 	},
 
+	/**
+	 * @this {ShortcutsThis}
+	 * @description Disable the shortcut activation.
+	 */
 	disable() {
 		this.isDisabled = true;
 	},
 
+	/**
+	 * @this {ShortcutsThis}
+	 * @description Enable the shortcut activation.
+	 */
 	enable() {
 		this.isDisabled = false;
 	},

package/src/core/class/toolbar.js

@@ -2,13 +2,29 @@
  * @fileoverview Toolbar class
  */
 
-import { domUtils, env } from '../../helper';
+import { dom, env } from '../../helper';
 import CoreInjector from '../../editorInjector/_core';
 import { CreateToolBar, UpdateButton } from '../section/constructor';
 
-const { _w, _d } = env;
+const { _w } = env;
 
-const Toolbar = function (editor, { keyName, balloon, inline, balloonAlways, res }) {
+/**
+ * @typedef {Omit<Toolbar & Partial<__se__EditorInjector>, 'toolbar' | 'subToolbar'>} ToolbarThis
+ */
+
+/**
+ * @constructor
+ * @this {ToolbarThis}
+ * @description Toolbar class
+ * @param {__se__EditorCore} editor - The root editor instance
+ * @param {Object} options - toolbar options
+ * @param {String} options.keyName - toolbar key name
+ * @param {Boolean} options.balloon - balloon toolbar
+ * @param {Boolean} options.inline - inline toolbar
+ * @param {Boolean} options.balloonAlways - balloon toolbar always show
+ * @param {Array<Node>} options.res - responsive toolbar button list
+ */
+function Toolbar(editor, { keyName, balloon, inline, balloonAlways, res }) {
 	CoreInjector.call(this, editor);
 
 	// members
@@ -21,6 +37,7 @@ const Toolbar = function (editor, { keyName, balloon, inline, balloonAlways, res
 	this._responsiveCurrentSize = 'default';
 	this._originRes = res;
 	this._rButtonArray = res;
+	this._rButtonsInfo = null;
 	this._rButtonsize = null;
 	this._sticky = false;
 	this._isViewPortSize = 'visualViewport' in _w;
@@ -35,10 +52,11 @@ const Toolbar = function (editor, { keyName, balloon, inline, balloonAlways, res
 	};
 
 	this._setResponsive();
-};
+}
 
 Toolbar.prototype = {
 	/**
+	 * @this {ToolbarThis}
 	 * @description Disable the toolbar
 	 */
 	disable() {
@@ -46,17 +64,19 @@ Toolbar.prototype = {
 		this._moreLayerOff();
 		this.menu.dropdownOff();
 		this.menu.containerOff();
-		domUtils.setDisabled(this.context.get(this.keyName + '.buttonTray').querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), true);
+		dom.utils.setDisabled(this.context.get(this.keyName + '.buttonTray').querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), true);
 	},
 
 	/**
+	 * @this {ToolbarThis}
 	 * @description Enable the toolbar
 	 */
 	enable() {
-		domUtils.setDisabled(this.context.get(this.keyName + '.buttonTray').querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), false);
+		dom.utils.setDisabled(this.context.get(this.keyName + '.buttonTray').querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), false);
 	},
 
 	/**
+	 * @this {ToolbarThis}
 	 * @description Show the toolbar
 	 */
 	show() {
@@ -73,6 +93,7 @@ Toolbar.prototype = {
 	},
 
 	/**
+	 * @this {ToolbarThis}
 	 * @description Hide the toolbar
 	 */
 	hide() {
@@ -83,7 +104,7 @@ Toolbar.prototype = {
 		} else {
 			this.context.get(this.keyName + '.main').style.display = 'none';
 			if (!this.isSub) this.editor.frameContext.get('_stickyDummy').style.display = 'none';
-			if (this.editorisBalloon) {
+			if (this._isBalloon) {
 				this._balloonOffset = {
 					top: 0,
 					left: 0
@@ -93,20 +114,7 @@ Toolbar.prototype = {
 	},
 
 	/**
-	 * @desscription Show or hide the toolbar
-	 * @param {boolean} isShow Show or hide
-	 * @private
-	 */
-	_visible(isShow) {
-		const toolbar = this.context.get(this.keyName + '.main');
-		if (isShow) {
-			domUtils.removeClass(toolbar, 'se-toolbar-onscroll-hide');
-		} else {
-			domUtils.addClass(toolbar, 'se-toolbar-onscroll-hide');
-		}
-	},
-
-	/**
+	 * @this {ToolbarThis}
 	 * @description Reset buttons of the responsive toolbar.
 	 */
 	resetResponsiveToolbar() {
@@ -115,7 +123,7 @@ Toolbar.prototype = {
 		const responsiveSize = this._rButtonsize;
 		if (responsiveSize) {
 			let w = 0;
-			if (((this._isBalloon || this._isInline) && this.options.get('toolbar_width') === 'auto') || (this._isSubBalloon && this.options.get('toolbar.sub_width') === 'auto')) {
+			if (((this._isBalloon || this._isInline) && this.options.get('toolbar_width') === 'auto') || (this.editor.isSubBalloon && this.options.get('toolbar.sub_width') === 'auto')) {
 				w = this.editor.frameContext.get('topArea').offsetWidth;
 			} else {
 				w = this.context.get(this.keyName + '.main').offsetWidth;
@@ -131,15 +139,16 @@ Toolbar.prototype = {
 
 			if (this._responsiveCurrentSize !== responsiveWidth) {
 				this._responsiveCurrentSize = responsiveWidth;
-				this.setButtons(this._rButtonArray[responsiveWidth]);
+				this.setButtons(this._rButtonsInfo[responsiveWidth]);
 				// this.viewer._resetFullScreenHeight();
 			}
 		}
 	},
 
 	/**
+	 * @this {ToolbarThis}
 	 * @description Reset the buttons on the toolbar. (Editor is not reloaded)
-	 * You cannot set a new plugin for the button.
+	 * - You cannot set a new plugin for the button.
 	 * @param {Array} buttonList Button list
 	 */
 	setButtons(buttonList) {
@@ -150,13 +159,13 @@ Toolbar.prototype = {
 		const { options, icons, lang, isSub } = this;
 		const newToolbar = CreateToolBar(buttonList, this.plugins, options, icons, lang, true);
 
-		const shortcutss = options.get('shortcuts');
-		newToolbar.updateButtons.forEach((v) => UpdateButton(v.button, v.plugin, this.icons, this.lang, shortcutss[v.key]));
+		newToolbar.updateButtons.forEach((v) => UpdateButton(v.button, v.plugin, this.icons, this.lang));
 
 		let cmdButtons;
 		if (isSub) cmdButtons = this.editor.subAllCommandButtons = new Map();
 		else cmdButtons = this.editor.allCommandButtons = new Map();
 		this.editor.commandTargets = new Map();
+		this.editor.shortcutsKeyMap = new Map();
 		this.editor.__saveCommandButtons(cmdButtons, newToolbar.buttonTray);
 
 		this.context.get(this.keyName + '.main').replaceChild(newToolbar.buttonTray, this.context.get(this.keyName + '.buttonTray'));
@@ -170,19 +179,27 @@ Toolbar.prototype = {
 		this.editor.effectNode = null;
 		this.viewer._setButtonsActive();
 		if (this.status.hasFocus) this.eventManager.applyTagEffect();
-		if (this.editor.frameContext.get('isReadOnly')) domUtils.setDisabled(this.editor._controllerOnDisabledButtons, true);
+		if (this.editor.frameContext.get('isReadOnly')) this.ui.setControllerOnDisabledButtons(true);
 
 		this.triggerEvent('onSetToolbarButtons', { buttonTray: newToolbar.buttonTray, frameContext: this.editor.frameContext });
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Reset the sticky toolbar position based on the editor state.
+	 */
 	_resetSticky() {
+		const wrapper = this.editor.frameContext.get('wrapper');
+		if (!wrapper) return;
+
 		const toolbar = this.context.get(this.keyName + '.main');
 		if (this.editor.frameContext.get('isFullScreen') || toolbar.offsetWidth === 0 || this.options.get('toolbar_sticky') < 0) return;
 
 		const currentScrollY = this._isViewPortSize ? _w.visualViewport.pageTop : _w.scrollY;
 
 		const minHeight = this.editor.frameContext.get('_minHeight');
-		const editorHeight = this.editor.frameContext.get('wrapper').offsetHeight;
+		const editorHeight = wrapper.offsetHeight;
 		const editorOffset = this.offset.getGlobal(this.editor.frameContext.get('topArea'));
 		const y = currentScrollY + this.options.get('toolbar_sticky');
 		const t = (this._isBalloon || this._isInline ? editorOffset.top : this.offset.getGlobal(this.options.get('toolbar_container')).top) - (this._isInline ? toolbar.offsetHeight : 0);
@@ -201,6 +218,11 @@ Toolbar.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Enable sticky toolbar mode and adjust position.
+	 */
 	_onSticky(inlineOffset) {
 		const toolbar = this.context.get(this.keyName + '.main');
 
@@ -213,10 +235,16 @@ Toolbar.prototype = {
 		const toolbarTopPosition = this.options.get('toolbar_sticky') + inlineOffset + this.__getViewportTop();
 		toolbar.style.top = `${toolbarTopPosition}px`;
 		toolbar.style.width = this._isInline ? this._inlineToolbarAttr.width : toolbar.offsetWidth + 'px';
-		domUtils.addClass(toolbar, 'se-toolbar-sticky');
+		dom.utils.addClass(toolbar, 'se-toolbar-sticky');
 		this._sticky = true;
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Get the viewport's top offset.
+	 * @returns {number}
+	 */
 	__getViewportTop() {
 		if (this._isViewPortSize) {
 			return _w.visualViewport.offsetTop;
@@ -224,6 +252,11 @@ Toolbar.prototype = {
 		return 0;
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Disable sticky toolbar mode.
+	 */
 	_offSticky() {
 		const stickyDummy = !this.options.get('toolbar_container') ? this.editor.frameContext.get('_stickyDummy') : this.context.get('_stickyDummy');
 		stickyDummy.style.display = 'none';
@@ -233,10 +266,15 @@ Toolbar.prototype = {
 		toolbar.style.width = this._isInline ? this._inlineToolbarAttr.width : '';
 		this.editor.frameContext.get('wrapper').style.marginTop = '';
 
-		domUtils.removeClass(toolbar, 'se-toolbar-sticky');
+		dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
 		this._sticky = false;
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Set up responsive behavior for the toolbar buttons.
+	 */
 	_setResponsive() {
 		if (this._rButtonArray?.length === 0) {
 			this._rButtonArray = null;
@@ -246,7 +284,7 @@ Toolbar.prototype = {
 		this._responsiveCurrentSize = 'default';
 		const _rButtonsize = (this._rButtonsize = []);
 		const _responsiveButtons = this._originRes;
-		const buttonsObj = (this._rButtonArray = {
+		const buttonsObj = (this._rButtonsInfo = {
 			default: _responsiveButtons[0]
 		});
 
@@ -257,13 +295,15 @@ Toolbar.prototype = {
 			buttonsObj[size] = buttonGroup[1];
 		}
 
-		_rButtonsize
-			.sort(function (a, b) {
-				return a - b;
-			})
-			.unshift('default');
+		_rButtonsize.sort((a, b) => a - b).unshift('default');
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Show the balloon toolbar based on the current selection.
+	 * @param {?Range=} rangeObj - Selection range
+	 */
 	_showBalloon(rangeObj) {
 		if (!this._isBalloon || this.editor.opendControllers.length > 0) {
 			return;
@@ -280,50 +320,31 @@ Toolbar.prototype = {
 		} else if (selection.focusNode === selection.anchorNode) {
 			isDirTop = selection.focusOffset < selection.anchorOffset;
 		} else {
-			const childNodes = domUtils.getListChildNodes(range.commonAncestorContainer, null);
-			isDirTop = domUtils.getArrayIndex(childNodes, selection.focusNode) < domUtils.getArrayIndex(childNodes, selection.anchorNode);
-		}
-
-		toolbar.style.top = '-10000px';
-		if (toolbar.style.display !== 'block') {
-			toolbar.style.visibility = 'hidden';
-			toolbar.style.display = 'block';
+			const childNodes = dom.query.getListChildNodes(range.commonAncestorContainer, null);
+			isDirTop = dom.utils.getArrayIndex(childNodes, selection.focusNode) < dom.utils.getArrayIndex(childNodes, selection.anchorNode);
 		}
 
 		this._setBalloonOffset(isDirTop, range);
 
 		this.triggerEvent('onShowToolbar', { toolbar, mode: 'balloon', frameContext: this.editor.frameContext });
-
-		_w.setTimeout(() => {
-			toolbar.style.visibility = '';
-		}, 0);
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Adjust the balloon toolbar's position.
+	 * @param {boolean} positionTop - Whether the toolbar should be positioned above the selection
+	 * @param {Range} [range] - Selection range
+	 */
 	_setBalloonOffset(positionTop, range) {
-		const isFullScreen = this.editor.frameContext.get('isFullScreen');
-		range = range || this.selection.getRange();
-		const rectsObj = this.selection.getRects(range, positionTop ? 'start' : 'end');
-		positionTop = rectsObj.position === 'start';
 		const toolbar = this.context.get(this.keyName + '.main');
 		const topArea = this.editor.frameContext.get('topArea');
-		const rects = rectsObj.rects;
-		const scrollLeft = isFullScreen ? 0 : rectsObj.scrollLeft;
-		const scrollTop = isFullScreen ? 0 : rectsObj.scrollTop;
-		const editorWidth = topArea.offsetWidth;
 		const offsets = this.offset.getGlobal(topArea);
 		const stickyTop = offsets.top;
-		const editorLeft = offsets.left;
-		const toolbarWidth = toolbar.offsetWidth;
-		const toolbarHeight = toolbar.offsetHeight;
-
-		this._setBalloonPosition(positionTop, rects, toolbar, editorLeft, editorWidth, scrollLeft, scrollTop, stickyTop);
-		if (this.isSub && this.offset.getGlobal(toolbar).top - offsets.top < 0) {
-			positionTop = !positionTop;
-			this._setBalloonPosition(positionTop, rects, toolbar, editorLeft, editorWidth, scrollLeft, scrollTop, stickyTop);
-		}
 
-		if (toolbarWidth !== toolbar.offsetWidth || toolbarHeight !== toolbar.offsetHeight) {
-			this._setBalloonPosition(positionTop, rects, toolbar, editorLeft, editorWidth, scrollLeft, scrollTop, stickyTop);
+		if (!this.offset.setRangePosition(toolbar, range, { position: positionTop ? 'top' : 'bottom', addTop: stickyTop })) {
+			this.hide();
+			return;
 		}
 
 		if (this.options.get('toolbar_container')) {
@@ -351,51 +372,11 @@ Toolbar.prototype = {
 		};
 	},
 
-	_setBalloonPosition(isDirTop, rects, toolbarEl, editorLeft, editorWidth, scrollLeft, scrollTop, stickyTop) {
-		const padding = 1;
-		const arrow = this.context.get(this.keyName + '._arrow');
-		const arrowMargin = Math.round(arrow.offsetWidth / 2);
-		const toolbarWidth = toolbarEl.offsetWidth;
-		const toolbarHeight = rects.noText && !isDirTop ? 0 : toolbarEl.offsetHeight;
-
-		const absoluteLeft = (isDirTop ? rects.left : rects.right) - editorLeft - toolbarWidth / 2 + scrollLeft;
-		const overRight = absoluteLeft + toolbarWidth - editorWidth;
-
-		let t = (isDirTop ? rects.top - toolbarHeight - arrowMargin : rects.bottom + arrowMargin) - (rects.noText ? 0 : stickyTop) + scrollTop;
-		const l = absoluteLeft < 0 ? padding : overRight < 0 ? absoluteLeft : absoluteLeft - overRight - padding - 1;
-
-		let resetTop = false;
-		const space = t + (isDirTop ? this.offset.getGlobal(this.editor.frameContext.get('topArea')).top : toolbarEl.offsetHeight - this.editor.frameContext.get('wysiwyg').offsetHeight);
-		if (!isDirTop && space > 0 && this._getPageBottomSpace() < space) {
-			isDirTop = true;
-			resetTop = true;
-		} else if (isDirTop && _d.documentElement.offsetTop > space) {
-			isDirTop = false;
-			resetTop = true;
-		}
-
-		if (resetTop) t = (isDirTop ? rects.top - toolbarHeight - arrowMargin : rects.bottom + arrowMargin) - (rects.noText ? 0 : stickyTop) + scrollTop;
-
-		toolbarEl.style.left = Math.floor(l) + 'px';
-		toolbarEl.style.top = Math.floor(t) + 'px';
-
-		if (isDirTop) {
-			domUtils.removeClass(arrow, 'se-arrow-up');
-			domUtils.addClass(arrow, 'se-arrow-down');
-		} else {
-			domUtils.removeClass(arrow, 'se-arrow-down');
-			domUtils.addClass(arrow, 'se-arrow-up');
-		}
-
-		const arrow_left = Math.floor(toolbarWidth / 2 + (absoluteLeft - l));
-		arrow.style.left = (arrow_left + arrowMargin > toolbarEl.offsetWidth ? toolbarEl.offsetWidth - arrowMargin : arrow_left < arrowMargin ? arrowMargin : arrow_left) + 'px';
-	},
-
-	_getPageBottomSpace() {
-		const topArea = this.editor.frameContext.get('topArea');
-		return _d.documentElement.scrollHeight - (this.offset.getGlobal(topArea).top + topArea.offsetHeight);
-	},
-
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Show the inline toolbar mode.
+	 */
 	_showInline() {
 		if (!this._isInline) return;
 
@@ -416,20 +397,29 @@ Toolbar.prototype = {
 		toolbar.style.visibility = '';
 	},
 
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Show a more options layer for toolbar buttons.
+	 * @param {Node} button - Button element
+	 * @param {Node} layer - More options layer element
+	 */
 	_moreLayerOn(button, layer) {
 		this._moreLayerOff();
-		this.currentMoreLayerActiveButton = button;
-		layer.style.display = 'block';
+		this.currentMoreLayerActiveButton = /** @type {HTMLButtonElement} */ (button);
+		/** @type {HTMLElement} */ (layer).style.display = 'block';
 	},
 
 	/**
-	 * @description Disable more layer
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Hide the currently active more options layer.
 	 */
 	_moreLayerOff() {
 		if (this.currentMoreLayerActiveButton) {
 			const layer = this.context.get(this.keyName + '.main').querySelector('.' + this.currentMoreLayerActiveButton.getAttribute('data-command'));
 			layer.style.display = 'none';
-			domUtils.removeClass(this.currentMoreLayerActiveButton, 'on');
+			dom.utils.removeClass(this.currentMoreLayerActiveButton, 'on');
 			this.currentMoreLayerActiveButton = null;
 		}
 	},