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

package/src/modules/{ColorPicker.js → contract/ColorPicker.js}

@@ -1,154 +1,154 @@
-import { dom, converter } from '../helper';
-import { isElement } from '../helper/dom/domCheck';
-import CoreInjector from '../editorInjector/_core';
-import { HueSlider } from '../modules';
+import { dom, converter, env } from '../../helper';
+import { isElement } from '../../helper/dom/domCheck';
+import HueSlider from './HueSlider';
 
 const DEFAULT_COLOR_LIST = [
-	'#ff0000',
-	'#ff5e00',
-	'#ffe400',
-	'#abf200',
-	'#00d8ff',
-	'#0055ff',
-	'#6600ff',
-	'#ff00dd',
+	// vivid
+	'#ef4444',
+	'#f97316',
+	'#eab308',
+	'#22c55e',
+	'#06b6d4',
+	'#3b82f6',
+	'#8b5cf6',
+	'#ec4899',
 	'#000000',
-	'#ffd8d8',
-	'#fae0d4',
-	'#faf4c0',
-	'#e4f7ba',
-	'#d4f4fa',
-	'#d9e5ff',
-	'#e8d9ff',
-	'#ffd9fa',
-	'#f1f1f1',
-	'#ffa7a7',
-	'#ffc19e',
-	'#faed7d',
-	'#cef279',
-	'#b2ebf4',
-	'#b2ccff',
-	'#d1b2ff',
-	'#ffb2f5',
-	'#bdbdbd',
-	'#f15f5f',
-	'#f29661',
-	'#e5d85c',
-	'#bce55c',
-	'#5cd1e5',
-	'#6699ff',
-	'#a366ff',
-	'#f261df',
-	'#8c8c8c',
-	'#980000',
-	'#993800',
-	'#998a00',
-	'#6b9900',
-	'#008299',
-	'#003399',
-	'#3d0099',
-	'#990085',
-	'#353535',
-	'#670000',
-	'#662500',
-	'#665c00',
-	'#476600',
-	'#005766',
-	'#002266',
-	'#290066',
-	'#660058',
-	'#222222'
+	// highlighter
+	'#fca5a5',
+	'#fdba74',
+	'#fcd34d',
+	'#6ee7b7',
+	'#5eead4',
+	'#7dd3fc',
+	'#c4b5fd',
+	'#f9a8d4',
+	'#e5e7eb',
+	// pastel
+	'#fee2e2',
+	'#ffedd5',
+	'#fef9c3',
+	'#dcfce7',
+	'#cffafe',
+	'#dbeafe',
+	'#ede9fe',
+	'#fce7f3',
+	'#f3f4f6',
+	// medium
+	'#f87171',
+	'#fb923c',
+	'#facc15',
+	'#4ade80',
+	'#22d3ee',
+	'#60a5fa',
+	'#a78bfa',
+	'#f472b6',
+	'#9ca3af',
+	// deep
+	'#b91c1c',
+	'#c2410c',
+	'#a16207',
+	'#15803d',
+	'#0e7490',
+	'#1d4ed8',
+	'#6d28d9',
+	'#be185d',
+	'#4b5563',
+	// dark
+	'#7f1d1d',
+	'#7c2d12',
+	'#713f12',
+	'#14532d',
+	'#164e63',
+	'#1e3a8a',
+	'#4c1d95',
+	'#831843',
+	'#1f2937',
 ];
 
 const DEFAULLT_COLOR_SPLITNUM = 9;
 
-/**
- * @typedef {import('./HueSlider').HueSliderParams} HueSliderParams_colorPicker
- */
-
-/**
- * @typedef {import('./HueSlider').HueSliderColor} HueSliderColor_colorPicker
- */
-
 /**
  * @typedef {Object} ColorPickerParams
- * @property {Array<string|{value: string, name: string}>=} [colorList=[]] color list
- * @property {number=} [splitNum=0] Number of colors to be displayed in one line
- * @property {string=} [defaultColor] Default color
- * @property {boolean=} [disableHEXInput=false] Disable HEX input
- * @property {boolean=} [disableRemove=false] Disable remove button
- * @property {HueSliderParams_colorPicker=} [hueSliderOptions] hue slider options
+ * @property {HTMLElement} form The form element to attach the color picker.
+ * @property {Array<string|{value: string, name: string}>} [colorList=[]] color list
+ * @property {number} [splitNum=0] Number of colors to be displayed in one line
+ * @property {string} [defaultColor] Default color
+ * @property {boolean} [disableHEXInput=false] Disable HEX input
+ * @property {boolean} [disableRemove=false] Disable remove button
+ * @property {import('./HueSlider').HueSliderParams} [hueSliderOptions] hue slider options
  */
 
 /**
  * @class
- * @description Create a color picker element and register for related events. (this.target)
- * - When calling the color selection, "submit", and "remove" buttons, the "action" method of the instance is called with the "color" value as an argument.
+ * @description Create a color picker element and register for related events. (`this.target`)
+ * - When calling the color selection, `submit`, and `remove` buttons, the `action` method of the instance is called with the `color` value as an argument.
  */
-class ColorPicker extends CoreInjector {
+class ColorPicker {
+	#$;
+
 	/**
 	 * @constructor
-	 * @param {*} inst The instance object that called the constructor.
-	 * @param {string} styles style property ("color", "backgroundColor"..)
+	 * @param {*} host The instance object that called the constructor.
+	 * @param {SunEditor.Deps} $ Kernel dependencies
+	 * @param {string} styles style property (`"color"`, `"backgroundColor"`..)
 	 * @param {ColorPickerParams} params Color picker options
 	 */
-	constructor(inst, styles, params) {
-		const editor = inst.editor;
-		super(editor);
+	constructor(host, $, styles, params) {
+		this.#$ = $;
 
 		// members
-		this.kind = inst.constructor.key || inst.constructor.name;
-		this.inst = inst;
-		this.target = CreateHTML(editor, params);
+		this.kind = host.constructor['key'] || host.constructor.name;
+		this.host = host;
+		this.form = params.form;
+		this.target = CreateHTML(this.#$, params);
 		this.targetButton = null;
 		this.inputElement = /** @type {HTMLInputElement} */ (this.target.querySelector('.se-color-input'));
 		this.styleProperties = styles;
 		this.splitNum = params.splitNum || 0;
 		this.defaultColor = params.defaultColor || '';
 		this.hueSliderOptions = params.hueSliderOptions;
-		this.parentDisplay = '';
 		this.currentColor = '';
-		this.parentForm = null;
 		this.colorList = this.target.querySelectorAll('li button') || [];
 		this.hueSlider = null;
 
 		// check icon
 		const parser = new DOMParser();
-		const svgDoc = parser.parseFromString(this.icons.color_checked, 'image/svg+xml');
+		const svgDoc = parser.parseFromString(this.#$.icons.color_checked, 'image/svg+xml');
 		this.checkedIcon = svgDoc.documentElement;
 
 		// modules - hex, hue slider
 		if (!params.disableHEXInput) {
-			this.hueSlider = new HueSlider(this, params.hueSliderOptions, 'se-dropdown');
-			this.parentFormDisplay = [];
-			this.parentForm = params.hueSliderOptions?.controllerOptions?.parents?.length > 0 && !params.hueSliderOptions?.controllerOptions?.isInsideForm ? params.hueSliderOptions.controllerOptions.parents : null;
+			this.hueSlider = new HueSlider(this, $, params.hueSliderOptions, 'se-dropdown');
 			// hue open
-			this.eventManager.addEvent(this.target.querySelector('.se-btn-info'), 'click', this.#OnColorPalette.bind(this));
-			this.eventManager.addEvent(this.inputElement, 'input', this.#OnChangeInput.bind(this));
-			this.eventManager.addEvent(this.target.querySelector('form'), 'submit', this.#Submit.bind(this));
+			this.#$.eventManager.addEvent(this.target.querySelector('.__se_hue'), 'click', this.#OnColorPalette.bind(this));
+			this.#$.eventManager.addEvent(this.inputElement, 'input', this.#OnChangeInput.bind(this));
+			this.#$.eventManager.addEvent(this.target.querySelector('form'), 'submit', this.#Submit.bind(this));
 		}
 
 		// remove style
 		if (!params.disableRemove) {
-			this.eventManager.addEvent(this.target.querySelector('.__se_remove'), 'click', this.#Remove.bind(this));
+			this.#$.eventManager.addEvent(this.target.querySelector('.__se_remove'), 'click', this.#Remove.bind(this));
 		}
 
-		this.eventManager.addEvent(this.target, 'click', this.#OnClickColor.bind(this));
+		this.#$.eventManager.addEvent(this.target, 'click', this.#OnClickColor.bind(this));
+
+		// append to form
+		this.form.appendChild(this.target);
 	}
 
 	/**
 	 * @description Displays or resets the currently selected color at color list.
 	 * @param {Node|string} nodeOrColor Current Selected node
 	 * @param {Node} target target
-	 * @param {?((current: Node) => boolean)=} stopCondition - A function used to stop traversing parent nodes while finding the color.
-	 * - When this function returns true, the traversal ends at that node.
+	 * @param {?(current: Node) => boolean} [stopCondition] - A function used to stop traversing parent nodes while finding the color.
+	 * - When this function returns `true`, the traversal ends at that node.
 	 * - e.g., `(node) => this.format.isLine(node)` stops at line-level elements like <p>, <div>.
 	 */
 	init(nodeOrColor, target, stopCondition) {
 		this.targetButton = target;
 		if (typeof stopCondition !== 'function') stopCondition = () => false;
 
-		let fillColor = (typeof nodeOrColor === 'string' ? nodeOrColor : this._getColorInNode(nodeOrColor, stopCondition)) || this.defaultColor;
+		let fillColor = (typeof nodeOrColor === 'string' ? nodeOrColor : this.#getColorInNode(nodeOrColor, stopCondition)) || this.defaultColor;
 		fillColor = converter.isHexColor(fillColor) ? fillColor : converter.rgb2hex(fillColor) || fillColor || '';
 
 		const colorList = this.colorList;
@@ -163,7 +163,7 @@ class ColorPicker extends CoreInjector {
 			}
 		}
 
-		this._setInputText(this._colorName2hex(fillColor));
+		this.#setInputText(this.#colorName2hex(fillColor));
 	}
 
 	/**
@@ -179,28 +179,43 @@ class ColorPicker extends CoreInjector {
 	 * @description Close hue slider
 	 */
 	hueSliderClose() {
-		this.hueSlider.off();
+		this.hueSlider.close();
+	}
+
+	/**
+	 * @hook Modules.HueSlider
+	 * @type {SunEditor.Hook.ColorPicker.Action}
+	 */
+	hueSliderAction(color) {
+		this.#setInputText(color.hex);
+	}
+
+	/**
+	 * @hook Modules.HueSlider
+	 * @type {SunEditor.Hook.ColorPicker.HueSliderClose}
+	 */
+	hueSliderCancelAction() {
+		this.form.style.display = 'block';
+		this.host.colorPickerHueSliderClose?.();
 	}
 
 	/**
-	 * @private
 	 * @description Set color at input element
 	 * @param {string} hexColorStr Hax color value
 	 */
-	_setInputText(hexColorStr) {
+	#setInputText(hexColorStr) {
 		hexColorStr = !hexColorStr || /^#/.test(hexColorStr) ? hexColorStr : '#' + hexColorStr;
 		this.inputElement.value = hexColorStr;
 		this.setHexColor.call(this, hexColorStr);
 	}
 
 	/**
-	 * @private
 	 * @description Gets color value at color property of node
 	 * @param {Node} node Selected node
 	 * @param {(current: Node) => boolean} stopCondition - A function used to stop traversing parent nodes while finding the color.
 	 * @returns {string}
 	 */
-	_getColorInNode(node, stopCondition) {
+	#getColorInNode(node, stopCondition) {
 		let findColor = '';
 		const sp = this.styleProperties;
 
@@ -213,16 +228,15 @@ class ColorPicker extends CoreInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Converts color values of other formats to hex color values and returns.
 	 * @param {string} colorName Color value
 	 * @returns {string}
 	 */
-	_colorName2hex(colorName) {
+	#colorName2hex(colorName) {
 		if (!colorName || /^#/.test(colorName)) return colorName;
 		const temp = dom.utils.createElement('div', { style: 'display: none; color: ' + colorName });
-		const colors = this._w
-			.getComputedStyle(this._d.body.appendChild(temp))
+		const colors = env._w
+			.getComputedStyle(env._d.body.appendChild(temp))
 			.color.match(/\d+/g)
 			.map(function (a) {
 				return parseInt(a, 10);
@@ -231,33 +245,9 @@ class ColorPicker extends CoreInjector {
 		return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substring(1) : '';
 	}
 
-	/**
-	 * @editorMethod Modules.HueSlider
-	 * @description This method is called when the color is selected in the hue slider.
-	 * @param {HueSliderColor_colorPicker} color - Color object
-	 */
-	hueSliderAction(color) {
-		this._setInputText(color.hex);
-	}
-
-	/**
-	 * @editorMethod Modules.HueSlider
-	 * @description This method is called when the hue slider is closed.
-	 */
-	hueSliderCancelAction() {
-		if (this.parentForm?.length > 0) {
-			this.parentFormDisplay.forEach((e) => (e[0].style.display = e[1]));
-		}
-	}
-
 	#OnColorPalette() {
-		if (this.parentForm?.length > 0) {
-			this.parentForm.forEach((e) => {
-				this.parentFormDisplay.push([e, e.style.display]);
-				e.style.display = 'none';
-			});
-		}
 		this.hueSlider.open(this.targetButton);
+		this.host.colorPickerHueSliderOpen?.();
 	}
 
 	/**
@@ -265,9 +255,7 @@ class ColorPicker extends CoreInjector {
 	 */
 	#Submit(e) {
 		e.preventDefault();
-
-		if (typeof this.inst.colorPickerAction !== 'function') return;
-		this.inst.colorPickerAction(this.currentColor);
+		this.host.colorPickerAction?.(this.currentColor);
 	}
 
 	/**
@@ -278,13 +266,11 @@ class ColorPicker extends CoreInjector {
 		const color = eventTarget.getAttribute('data-value');
 		if (!color) return;
 
-		if (typeof this.inst.colorPickerAction !== 'function') return;
-		this.inst.colorPickerAction(color);
+		this.host.colorPickerAction?.(color);
 	}
 
 	#Remove() {
-		if (typeof this.inst.colorPickerAction !== 'function') return;
-		this.inst.colorPickerAction(null);
+		this.host.colorPickerAction?.(null);
 	}
 
 	/**
@@ -298,14 +284,13 @@ class ColorPicker extends CoreInjector {
 }
 
 /**
- * @private
  * @description Create a color picker element
- * @param {*} param0
+ * @param {SunEditor.Deps} param0
  * @param {*} param1
  * @returns
  */
 function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove, splitNum }) {
-	colorList = colorList || DEFAULT_COLOR_LIST;
+	colorList ||= DEFAULT_COLOR_LIST;
 	splitNum = colorList === DEFAULT_COLOR_LIST ? DEFAULLT_COLOR_SPLITNUM : splitNum;
 
 	let list = '';
@@ -327,7 +312,7 @@ function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove
 	}
 	list += /*html*/ `
 		<form class="se-form-group se-form-w0">
-			${disableHEXInput ? '' : `<button type="button" class="se-btn se-btn-info" title="${lang.colorPicker}" aria-label="${lang.colorPicker}">${icons.color_palette}</button>`}
+			${disableHEXInput ? '' : `<button type="button" class="se-btn __se_hue" title="${lang.colorPicker}" aria-label="${lang.colorPicker}">${icons.color_palette}</button>`}
 			<input type="text" class="se-color-input" ${disableHEXInput ? 'readonly' : ''} placeholder="${lang.color}" />
 			${disableHEXInput ? '' : `<button type="submit" class="se-btn se-btn-success" title="${lang.submitButton}" aria-label="${lang.submitButton}">${icons.checked}</button>`}
 			${disableRemove ? '' : `<button type="button" class="se-btn __se_remove" title="${lang.remove}" aria-label="${lang.remove}">${icons.remove_color}</button>`}
@@ -336,6 +321,11 @@ function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove
 	return dom.utils.createElement('DIV', { class: 'se-list-inner' }, list);
 }
 
+/**
+ * @param {Array<string|{value: string, name?: string}>} colorList - Color list
+ * @param {number} splitNum - Number of colors per row
+ * @returns {string} HTML string
+ */
 function _makeColor(colorList, splitNum) {
 	const ulHTML = `<ul class="se-color-pallet${splitNum ? ' se-list-horizontal' : ''}">`;