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

package/src/plugins/input/fontSize.js

@@ -1,162 +1,172 @@
-import EditorInjector from '../../editorInjector';
+import { PluginCommand, PluginDropdown, PluginInput } from '../../interfaces';
 import { dom, numbers, keyCodeMap } from '../../helper';
 
+void PluginCommand;
+void PluginDropdown;
+
 const DEFAULT_UNIT_MAP = {
 	text: {
 		default: '13px',
 		list: [
 			{
 				title: 'XX-Small',
-				size: '8px'
+				size: '8px',
 			},
 			{
 				title: 'X-Small',
-				size: '10px'
+				size: '10px',
 			},
 			{
 				title: 'Small',
-				size: '13px'
+				size: '13px',
 			},
 			{
 				title: 'Medium',
-				size: '16px'
+				size: '16px',
 			},
 			{
 				title: 'Large',
-				size: '18px'
+				size: '18px',
 			},
 			{
 				title: 'X-Large',
-				size: '24px'
+				size: '24px',
 			},
 			{
 				title: 'XX-Large',
-				size: '32px'
-			}
-		]
+				size: '32px',
+			},
+		],
 	},
 	px: {
 		default: 13,
 		inc: 1,
 		min: 8,
 		max: 72,
-		list: [8, 10, 13, 15, 18, 20, 22, 26, 28, 36, 48, 72]
+		list: [8, 10, 13, 15, 18, 20, 22, 26, 28, 36, 48, 72],
 	},
 	pt: {
 		default: 10,
 		inc: 1,
 		min: 6,
 		max: 72,
-		list: [6, 8, 10, 12, 14, 18, 22, 26, 32]
+		list: [6, 8, 10, 12, 14, 18, 22, 26, 32],
 	},
 	em: {
 		default: 1,
 		inc: 0.1,
 		min: 0.5,
 		max: 5,
-		list: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]
+		list: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
 	},
 	rem: {
 		default: 1,
 		inc: 0.1,
 		min: 0.5,
 		max: 5,
-		list: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]
+		list: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
 	},
 	vw: {
 		inc: 0.1,
 		min: 0.5,
 		max: 10,
-		list: [2, 3.5, 4, 4.5, 6, 8]
+		list: [2, 3.5, 4, 4.5, 6, 8],
 	},
 	vh: {
 		default: 1.5,
 		inc: 0.1,
 		min: 0.5,
 		max: 10,
-		list: [1, 1.5, 2, 2.5, 3, 3.5, 4]
+		list: [1, 1.5, 2, 2.5, 3, 3.5, 4],
 	},
 	'%': {
 		default: 100,
 		inc: 1,
 		min: 50,
 		max: 200,
-		list: [50, 70, 90, 100, 120, 140, 160, 180, 200]
-	}
+		list: [50, 70, 90, 100, 120, 140, 160, 180, 200],
+	},
 };
 
+/**
+ * @typedef {Object} FontSizePluginOptions
+ * @property {string} [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.
+ * @property {boolean} [showDefaultSizeLabel=true] - Determines whether the default size label is displayed in the dropdown menu.
+ * @property {boolean} [showIncDecControls=false] - When `true`, displays increase and decrease buttons for font size adjustments.
+ * @property {boolean} [disableInput=true] - When `true`, disables the direct font size input box.
+ * @property {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [unitMap={}] - Optional object to override or extend the default unit mapping for font sizes.
+ */
+
 /**
  * @class
+ * @implements {PluginCommand}
+ * @implements {PluginDropdown}
  * @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 {
+class FontSize extends PluginInput {
 	static key = 'fontSize';
-	static type = 'input';
 	static className = 'se-btn-select se-btn-input se-btn-tool-font-size';
 
+	#disableInput;
+
 	/**
 	 * @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.
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {FontSizePluginOptions} pluginOptions - Configuration options for the FontSize plugin.
 	 */
 	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];
+		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);
+		const menu = CreateHTML(this.$, unitMap, this.sizeUnit, pluginOptions.showDefaultSizeLabel);
 
 		// plugin basic properties
-		const showIncDec = this.sizeUnit ? pluginOptions.showIncDecControls ?? false : false;
-		const disableInput = this.sizeUnit ? pluginOptions.disableInput ?? false : true;
+		const showIncDec = this.sizeUnit ? (pluginOptions.showIncDecControls ?? false) : false;
+		const disableInput = this.sizeUnit ? (pluginOptions.disableInput ?? false) : true;
 
-		this.title = this.lang.fontSize;
+		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}" />`;
+					? `<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.$.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>`
+				`${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.$.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);
+			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>`
+				`<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);
+			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
 		}
 
 		// members
@@ -164,30 +174,26 @@ class FontSize extends EditorInjector {
 		this.sizeList = menu.querySelectorAll('li button');
 		this.hasInputFocus = false;
 		this.isInputActive = false; // input target event
-		this._disableInput = disableInput;
+		this.#disableInput = disableInput;
 
 		// init
-		this.menu.initDropdownTarget(FontSize, menu);
+		this.$.menu.initDropdownTarget(FontSize, menu);
 	}
 
 	/**
-	 * @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
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		if (!dom.utils.hasClass(target, '__se__font_size')) return false;
 
 		let fontSize = '';
 		if (!element) {
-			this._setSize(target, this._getDefaultSize());
-		} else if (this.format.isLine(element)) {
+			this.#setSize(target, this.#getDefaultSize());
+		} else if (this.$.format.isLine(element)) {
 			return undefined;
 		} else if ((fontSize = dom.utils.getStyle(element, 'fontSize'))) {
-			this._setSize(target, fontSize);
+			this.#setSize(target, fontSize);
 			return true;
 		}
 
@@ -195,23 +201,20 @@ class FontSize extends EditorInjector {
 	}
 
 	/**
-	 * @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
+	 * @override
+	 * @type {PluginInput['toolbarInputKeyDown']}
 	 */
-	onInputKeyDown({ target, event }) {
+	toolbarInputKeyDown({ target, event }) {
 		const keyCode = event.code;
 
-		if (this._disableInput || keyCodeMap.isSpace(keyCode)) {
+		if (this.#disableInput || keyCodeMap.isSpace(keyCode)) {
 			event.preventDefault();
 			return;
 		}
 
-		if (!/^(38|40|13)$/.test(keyCode)) return;
+		if (!/^(ArrowUp|ArrowDown|Enter)$/.test(keyCode)) return;
 
-		const { value, unit } = this._getSize(target);
+		const { value, unit } = this.#getSize(target);
 		if (!value) return;
 
 		const numValue = numbers.get(value);
@@ -231,11 +234,11 @@ class FontSize extends EditorInjector {
 
 		try {
 			this.isInputActive = true;
-			const size = this._setSize(target, changeValue + unit);
-			if (this._disableInput) return;
+			const size = this.#setSize(target, changeValue + unit);
+			if (this.#disableInput) return;
 
 			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + size + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 
 			if (!keyCodeMap.isEnter(keyCode)) target.focus();
 		} finally {
@@ -244,37 +247,35 @@ class FontSize extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.Toolbar
-	 * @description Executes the event function of toolbar's input tag - "change".
-	 * @param {__se__PluginToolbarInputChangeEventInfo} params
+	 * @override
+	 * @type {PluginInput['toolbarInputChange']}
 	 */
-	onInputChange({ target, value: changeValue, event }) {
-		if (this._disableInput) return;
+	toolbarInputChange({ target, value: changeValue, event }) {
+		if (this.#disableInput) return;
 
 		try {
 			this.isInputActive = true;
 
 			// eslint-disable-next-line prefer-const
-			let { value, unit } = this._getSize(changeValue);
+			let { value, unit } = this.#getSize(changeValue);
 			const { max, min } = this.unitMap[unit];
 			value = value > max ? max : value < min ? min : value;
 
-			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 });
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + this.#setSize(target, value + unit) + ';' });
+			this.$.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} finally {
 			this.isInputActive = false;
 			event.preventDefault();
-			this.editor.focus();
+			this.$.focusManager.focus();
 		}
 	}
 
 	/**
-	 * @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
+	 * @imple Dropdown
+	 * @type {PluginDropdown['on']}
 	 */
 	on(target) {
-		const { value, unit } = this._getSize(target);
+		const { value, unit } = this.#getSize(target);
 		const currentSize = value + unit;
 
 		if (currentSize === this.currentSize) return;
@@ -292,80 +293,75 @@ class FontSize extends EditorInjector {
 	}
 
 	/**
-	 * @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
+	 * @imple Command
+	 * @type {PluginCommand['action']}
 	 */
 	action(target) {
 		const commandValue = target.getAttribute('data-command');
 
 		if (commandValue === FontSize.key) {
-			const { value, unit } = this._getSize(target);
+			const { value, unit } = this.#getSize(target);
 			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 = dom.utils.createElement('SPAN', { style: 'font-size: ' + newSize + unit + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} else if (commandValue) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + commandValue + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['font-size'], nodesToRemove: ['span'], strictRemove: true });
+			this.$.inline.apply(null, { stylesToModify: ['font-size'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
-		this.menu.dropdownOff();
+		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;
+	#getDefaultSize() {
+		return this.$.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) {
+	#getSize(target) {
 		target = typeof target === 'string' ? target : target.parentElement.querySelector('.__se__font_size');
 		if (!target)
 			return {
 				unit: this.sizeUnit,
-				value: this.sizeUnit ? 0 : ''
+				value: this.sizeUnit ? 0 : '',
 			};
 
 		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;
+		unit = this.$.options.get('fontSizeUnits').includes(unit) ? unit : this.sizeUnit;
 
 		const tempValue = splitValue.pop();
 		const value = unit ? Number(tempValue) : tempValue;
 
 		return {
 			unit,
-			value
+			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) {
+	#setSize(target, value) {
 		target = target.parentElement.querySelector('.__se__font_size');
 		if (!target) return 0;
 
@@ -377,6 +373,13 @@ class FontSize extends EditorInjector {
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {{list: Array<number|{title: string, size: string}>, default?: number|string}} unitMap - Font size unit map
+ * @param {string} sizeUnit - Size unit string
+ * @param {boolean} showDefaultSizeLabel - Whether to show default size label
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, unitMap, sizeUnit, showDefaultSizeLabel) {
 	const sizeList = unitMap.list;
 	const defaultSize = unitMap.default;

package/src/plugins/input/pageNavigator.js

@@ -1,4 +1,4 @@
-import EditorInjector from '../../editorInjector';
+import { PluginInput } from '../../interfaces';
 import { dom } from '../../helper';
 
 /**
@@ -9,20 +9,19 @@ import { dom } from '../../helper';
  * - 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 {
+class PageNavigator extends PluginInput {
 	static key = 'pageNavigator';
-	static type = 'input';
 	static className = 'se-btn-input se-btn-tool-pageNavigator';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 */
 	constructor(editor) {
 		super(editor);
 
 		// create HTML
-		this.title = this.lang.pageNumber;
+		this.title = this.$.lang.pageNumber;
 		this.inner = CreateInner();
 		this.afterItem = dom.utils.createElement('span', { class: 'se-btn se-sub-btn' }, ``);
 
@@ -31,13 +30,14 @@ class PageNavigator extends EditorInjector {
 		this.totalPages = 1;
 
 		// init
-		this.eventManager.addEvent(this.inner, 'change', this.#OnChangeInner.bind(this));
+		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.
+	 * 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.
+	 * @returns {void}
 	 */
 	display(pageNum, totalPages) {
 		// data update
@@ -53,16 +53,19 @@ class PageNavigator extends EditorInjector {
 	 * @param {InputEvent} e - Event object
 	 */
 	#OnChangeInner(e) {
-		if (!this.editor.frameContext.has('documentType-use-page')) return;
+		if (!this.$.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);
+		this.$.frameContext.get('documentType').pageGo(value);
 	}
 }
 
+/**
+ * @returns {HTMLInputElement}
+ */
 function CreateInner() {
 	return /** @type {HTMLInputElement} */ (dom.utils.createElement('input', { type: 'number', class: 'se-not-arrow-text', placeholder: '1', value: '1', min: '1' }, null));
 }