suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/plugins/input/fontSize.js

@@ -1,5 +1,5 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom, numbers, keyCodeMap } from '../../helper';
 
 const DEFAULT_UNIT_MAP = {
 	text: {
@@ -85,76 +85,100 @@ const DEFAULT_UNIT_MAP = {
 	}
 };
 
-const FontSize = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-
-	// create HTML
-	this.unitMap = { ...DEFAULT_UNIT_MAP, ...(pluginOptions.unitMap || {}) };
-	this.sizeUnit = /text/.test(pluginOptions.sizeUnit) ? '' : pluginOptions.sizeUnit || this.options.get('fontSizeUnits')[0];
-
-	const unitMap = this.unitMap[this.sizeUnit || 'text'];
-	const menu = CreateHTML(editor, unitMap, this.sizeUnit, pluginOptions.showDefaultSizeLabel);
-
-	// plugin basic properties
-	const showIncDec = this.sizeUnit ? pluginOptions.showIncDecControls ?? false : false;
-	const disableInput = this.sizeUnit ? pluginOptions.disableInput ?? false : true;
-
-	this.title = this.lang.fontSize;
-	this.inner =
-		disableInput && !showIncDec
-			? false
-			: disableInput
-			? `<span class="se-txt se-not-arrow-text __se__font_size">${this.lang.fontSize}</span>`
-			: `<input type="text" class="__se__font_size se-not-arrow-text" placeholder="${this.lang.fontSize}" />`;
-
-	// increase, decrease buttons
-	if (showIncDec) {
-		this.beforeButton = domUtils.createElement(
-			'button',
-			{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
-			`${this.icons.minus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.decrease}</span></span>`
-		);
-		this.afterButton = domUtils.createElement(
-			'button',
-			{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
-			`${this.icons.plus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.increase}</span></span>`
-		);
-	} else if (!disableInput) {
-		this.afterButton = domUtils.createElement(
-			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': FontSize.key, 'data-type': 'dropdown' },
-			`${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.fontSize}</span></span>`
-		);
-		this.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
-	} else if (disableInput && !showIncDec) {
-		this.replaceButton = domUtils.createElement(
-			'button',
-			{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', 'data-command': FontSize.key, 'data-type': 'dropdown' },
-			`<span class="se-txt __se__font_size">${this.lang.fontSize}</span>${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.fontSize}</span></span>`
-		);
-		this.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
-	}
+/**
+ * @class
+ * @description FontSize Plugin
+ * - This plugin enables users to modify the font size of selected text within the editor.
+ * - It supports various measurement units (e.g., 'px', 'pt', 'em', 'rem', 'vw', 'vh', '%') and
+ * - provides multiple interfaces: dropdown menus, direct input, and optional increment/decrement buttons.
+ */
+class FontSize extends EditorInjector {
+	static key = 'fontSize';
+	static type = 'input';
+	static className = 'se-btn-select se-btn-input se-btn-tool-font-size';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions - Configuration options for the FontSize plugin.
+	 * @param {string=} [pluginOptions.sizeUnit='px'] - The unit for the font size.
+	 * - Accepted values include: 'px', 'pt', 'em', 'rem', 'vw', 'vh', '%' or 'text'.
+	 * - If 'text' is used, a text-based font size list is applied.
+	 * @param {boolean=} [pluginOptions.showDefaultSizeLabel=true] - Determines whether the default size label is displayed in the dropdown menu.
+	 * @param {boolean=} [pluginOptions.showIncDecControls=false] - When true, displays increase and decrease buttons for font size adjustments.
+	 * @param {boolean=} [pluginOptions.disableInput=true] - When true, disables the direct font size input box.
+	 * @param {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [pluginOptions.unitMap={}] - Optional object to override or extend the default unit mapping for font sizes.
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+
+		// create HTML
+		this.unitMap = { ...DEFAULT_UNIT_MAP, ...(pluginOptions.unitMap || {}) };
+		this.sizeUnit = /text/.test(pluginOptions.sizeUnit) ? '' : pluginOptions.sizeUnit || this.options.get('fontSizeUnits')[0];
+
+		const unitMap = this.unitMap[this.sizeUnit || 'text'];
+		const menu = CreateHTML(editor, unitMap, this.sizeUnit, pluginOptions.showDefaultSizeLabel);
+
+		// plugin basic properties
+		const showIncDec = this.sizeUnit ? pluginOptions.showIncDecControls ?? false : false;
+		const disableInput = this.sizeUnit ? pluginOptions.disableInput ?? false : true;
+
+		this.title = this.lang.fontSize;
+		this.inner =
+			disableInput && !showIncDec
+				? false
+				: disableInput
+				? `<span class="se-txt se-not-arrow-text __se__font_size">${this.lang.fontSize}</span>`
+				: `<input type="text" class="__se__font_size se-not-arrow-text" placeholder="${this.lang.fontSize}" />`;
+
+		// increase, decrease buttons
+		if (showIncDec) {
+			this.beforeItem = dom.utils.createElement(
+				'button',
+				{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
+				`${this.icons.minus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.decrease}</span></span>`
+			);
+			this.afterItem = dom.utils.createElement(
+				'button',
+				{ class: 'se-btn se-tooltip se-sub-btn', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
+				`${this.icons.plus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.increase}</span></span>`
+			);
+		} else if (!disableInput) {
+			this.afterItem = dom.utils.createElement(
+				'button',
+				{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				`${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.fontSize}</span></span>`
+			);
+			this.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
+		} else if (disableInput && !showIncDec) {
+			this.replaceButton = dom.utils.createElement(
+				'button',
+				{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				`<span class="se-txt __se__font_size">${this.lang.fontSize}</span>${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.fontSize}</span></span>`
+			);
+			this.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
+		}
 
-	// members
-	this.currentSize = '';
-	this.sizeList = menu.querySelectorAll('li button');
-	this.hasInputFocus = false;
-	this.isInputActive = false; // input target event
-	this._disableInput = disableInput;
+		// members
+		this.currentSize = '';
+		this.sizeList = menu.querySelectorAll('li button');
+		this.hasInputFocus = false;
+		this.isInputActive = false; // input target event
+		this._disableInput = disableInput;
 
-	// init
-	this.menu.initDropdownTarget(FontSize, menu);
-};
+		// init
+		this.menu.initDropdownTarget(FontSize, menu);
+	}
 
-FontSize.key = 'fontSize';
-FontSize.type = 'input';
-FontSize.className = 'se-btn-select se-btn-input se-btn-tool-font-size';
-FontSize.prototype = {
 	/**
-	 * @override core
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the method that is called whenever the cursor position changes.
+	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
+	 * @param {?HTMLElement=} target - The plugin's toolbar button element
+	 * @returns {boolean} - Whether the plugin is active
 	 */
 	active(element, target) {
-		if (!domUtils.hasClass(target, '__se__font_size')) return false;
+		if (!dom.utils.hasClass(target, '__se__font_size')) return false;
 
 		if (!element) {
 			this._setSize(target, this._getDefaultSize());
@@ -164,15 +188,19 @@ FontSize.prototype = {
 		}
 
 		return false;
-	},
+	}
 
 	/**
-	 * @override core
+	 * @editorMethod Editor.Toolbar
+	 * @description Executes the event function of toolbar's input tag - "keydown".
+	 * @param {Object} params
+	 * @param {HTMLElement} params.target Input element
+	 * @param {KeyboardEvent} params.event Event object
 	 */
 	onInputKeyDown({ target, event }) {
-		const keyCode = event.keyCode;
+		const keyCode = event.code;
 
-		if (this._disableInput || keyCode === 32) {
+		if (this._disableInput || keyCodeMap.isSpace(keyCode)) {
 			event.preventDefault();
 			return;
 		}
@@ -182,16 +210,17 @@ FontSize.prototype = {
 		const { value, unit } = this._getSize(target);
 		if (!value) return;
 
+		const numValue = numbers.get(value);
 		const unitMap = this.unitMap[unit];
-		let changeValue = value;
+		let changeValue = numValue;
 		switch (keyCode) {
-			case 38: //up
+			case 'ArrowUp': //up
 				changeValue += unitMap.inc;
-				if (changeValue > unitMap.max) changeValue = value;
+				if (changeValue > unitMap.max) changeValue = numValue;
 				break;
-			case 40: //down
+			case 'ArrowDown': //down
 				changeValue -= unitMap.inc;
-				if (changeValue < unitMap.min) changeValue = value;
+				if (changeValue < unitMap.min) changeValue = numValue;
 		}
 
 		event.preventDefault();
@@ -201,17 +230,19 @@ FontSize.prototype = {
 			const size = this._setSize(target, changeValue + unit);
 			if (this._disableInput) return;
 
-			const newNode = domUtils.createElement('SPAN', { style: 'font-size: ' + size + ';' });
-			this.format.applyTextStyle(newNode, ['font-size'], null, null);
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + size + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 
-			if (keyCode !== 13) target.focus();
+			if (!keyCodeMap.isEnter(keyCode)) target.focus();
 		} finally {
 			this.isInputActive = false;
 		}
-	},
+	}
 
 	/**
-	 * @override core
+	 * @editorMethod Editor.Toolbar
+	 * @description Executes the event function of toolbar's input tag - "change".
+	 * @param {__se__PluginToolbarInputChangeEventInfo} params
 	 */
 	onInputChange({ target, value: changeValue, event }) {
 		if (this._disableInput) return;
@@ -224,17 +255,19 @@ FontSize.prototype = {
 			const { max, min } = this.unitMap[unit];
 			value = value > max ? max : value < min ? min : value;
 
-			const newNode = domUtils.createElement('SPAN', { style: 'font-size: ' + this._setSize(target, value + unit) + ';' });
-			this.format.applyTextStyle(newNode, ['font-size'], null, null);
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + this._setSize(target, value + unit) + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} finally {
 			this.isInputActive = false;
 			event.preventDefault();
 			this.editor.focus();
 		}
-	},
+	}
 
 	/**
-	 * @override dropdown
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @param {HTMLElement} target Line element at the current cursor position
 	 */
 	on(target) {
 		const { value, unit } = this._getSize(target);
@@ -245,44 +278,59 @@ FontSize.prototype = {
 		const sizeList = this.sizeList;
 		for (let i = 0, len = sizeList.length; i < len; i++) {
 			if (currentSize === sizeList[i].getAttribute('data-value')) {
-				domUtils.addClass(sizeList[i], 'active');
+				dom.utils.addClass(sizeList[i], 'active');
 			} else {
-				domUtils.removeClass(sizeList[i], 'active');
+				dom.utils.removeClass(sizeList[i], 'active');
 			}
 		}
 
 		this.currentSize = currentSize;
-	},
+	}
 
 	/**
-	 * @override
-	 * @param {Element} target Target command button
+	 * @editorMethod Editor.core
+	 * @description Executes the main execution method of the plugin.
+	 * - Called when an item in the "dropdown" menu is clicked.
+	 * @param {HTMLElement} target - The plugin's toolbar button element
 	 */
 	action(target) {
 		const commandValue = target.getAttribute('data-command');
 
 		if (commandValue === FontSize.key) {
 			const { value, unit } = this._getSize(target);
-			let newSize = value + (target.getAttribute('data-value') === 'inc' ? 1 : -1);
+			let newSize = numbers.get(value) + (target.getAttribute('data-value') === 'inc' ? 1 : -1);
 			const { min, max } = this.unitMap[unit];
 			newSize = newSize < min ? min : newSize > max ? max : newSize;
 
-			const newNode = domUtils.createElement('SPAN', { style: 'font-size: ' + newSize + unit + ';' });
-			this.format.applyTextStyle(newNode, ['font-size'], null, null);
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + newSize + unit + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} else if (commandValue) {
-			const newNode = domUtils.createElement('SPAN', { style: 'font-size: ' + commandValue + ';' });
-			this.format.applyTextStyle(newNode, ['font-size'], null, null);
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + commandValue + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyTextStyle(null, ['font-size'], ['span'], true);
+			this.format.applyInlineElement(null, { stylesToModify: ['font-size'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Retrieves the default font size of the editor.
+	 * @returns {string} - The computed font size from the editor.
+	 */
 	_getDefaultSize() {
 		return this.editor.frameContext.get('wwComputedStyle').fontSize;
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Extracts the font size and unit from the given element or input value.
+	 * @param {string|Element} target - The target input or element.
+	 * @returns {{ unit: string, value: number|string }} - An object containing:
+	 * - `unit` (string): The detected font size unit.
+	 * - `value` (number|string): The numeric font size value or text-based size.
+	 */
 	_getSize(target) {
 		target = typeof target === 'string' ? target : target.parentElement.querySelector('.__se__font_size');
 		if (!target)
@@ -291,34 +339,39 @@ FontSize.prototype = {
 				value: this.sizeUnit ? 0 : ''
 			};
 
-		const size = typeof target === 'string' ? target : /^INPUT$/i.test(target.nodeName) ? target.value : target.textContent;
+		const size = typeof target === 'string' ? target : dom.check.isInputElement(target) ? target.value : target.textContent;
 		const splitValue = this.sizeUnit ? size.split(/(\d+)/) : [size, ''];
 
 		let unit = (splitValue.pop() || '').trim().toLowerCase();
 		unit = this.options.get('fontSizeUnits').includes(unit) ? unit : this.sizeUnit;
 
-		let value = splitValue.pop();
-		value = unit ? value * 1 : value;
+		const tempValue = splitValue.pop();
+		const value = unit ? Number(tempValue) : tempValue;
 
 		return {
 			unit,
 			value
 		};
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets the font size in the toolbar input field or button label.
+	 * @param {HTMLElement} target - The target element in the toolbar.
+	 * @param {string|number} value - The font size value.
+	 * @returns {string|number} - The applied font size.
+	 */
 	_setSize(target, value) {
 		target = target.parentElement.querySelector('.__se__font_size');
 		if (!target) return 0;
 
-		if (/^INPUT$/i.test(target.nodeName)) {
-			return (target.value = value);
+		if (dom.check.isInputElement(target)) {
+			return (target.value = String(value));
 		} else {
-			return (target.textContent = this.sizeUnit ? value : this.unitMap.text.list.find((v) => v.size === value)?.title || value);
+			return (target.textContent = String(this.sizeUnit ? value : this.unitMap.text.list.find((v) => v.size === value)?.title || value));
 		}
-	},
-
-	constructor: FontSize
-};
+	}
+}
 
 function CreateHTML({ lang }, unitMap, sizeUnit, showDefaultSizeLabel) {
 	const sizeList = unitMap.list;
@@ -351,7 +404,7 @@ function CreateHTML({ lang }, unitMap, sizeUnit, showDefaultSizeLabel) {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-size' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-size' }, list);
 }
 
 export default FontSize;

package/src/plugins/input/pageNavigator.js

@@ -0,0 +1,70 @@
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description PageNavigator Plugin
+ * - This plugin provides functionality for navigating between pages within the editor's document.
+ * - It features an input field for entering the desired page number and a display element showing
+ * - the total number of pages. When the user changes the value in the input field, the plugin triggers
+ * - a page navigation event through the editor's document context.
+ */
+class PageNavigator extends EditorInjector {
+	static key = 'pageNavigator';
+	static type = 'input';
+	static className = 'se-btn-input se-btn-tool-pageNavigator';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor) {
+		super(editor);
+
+		// create HTML
+		this.title = this.lang.pageNumber;
+		this.inner = CreateInner();
+		this.afterItem = dom.utils.createElement('span', { class: 'se-btn se-sub-btn' }, ``);
+
+		// members
+		this.pageNum = 1;
+		this.totalPages = 1;
+
+		// init
+		this.eventManager.addEvent(this.inner, 'change', this.#OnChangeInner.bind(this));
+	}
+	/**
+	 * @editorMethod Editor.documentType
+	 * @description Updates the displayed page number and total pages in the navigator.
+	 * @param {number} pageNum - The current page number to display.
+	 * @param {number} totalPages - The total number of pages in the document.
+	 */
+	display(pageNum, totalPages) {
+		// data update
+		this.pageNum = pageNum;
+		this.totalPages = totalPages;
+		// display
+		this.inner.value = String(pageNum);
+		this.afterItem.textContent = this.inner.max = String(totalPages);
+	}
+
+	/**
+	 * @description Page number change event handler
+	 * @param {InputEvent} e - Event object
+	 */
+	#OnChangeInner(e) {
+		if (!this.editor.frameContext.has('documentType-use-page')) return;
+
+		/** @type {HTMLInputElement} */
+		const eventTarget = dom.query.getEventTarget(e);
+
+		const value = Number(eventTarget.value) || 1;
+		this.editor.frameContext.get('documentType').pageGo(value);
+	}
+}
+
+function CreateInner() {
+	return /** @type {HTMLInputElement} */ (dom.utils.createElement('input', { type: 'number', class: 'se-not-arrow-text', placeholder: '1', value: '1', min: '1' }, null));
+}
+
+export default PageNavigator;