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

package/src/core/config/contextProvider.js

@@ -0,0 +1,288 @@
+import { dom, env } from '../../helper';
+
+const { _w, _d } = env;
+
+/**
+ * @typedef {import('../schema/frameContext').FrameContextStore} ConfigFrameContextStore
+ * @typedef {import('../schema/context').ContextStore} ConfigContextStore
+ */
+
+/**
+ * @typedef {Object} ContextMap
+ * @property {(k: keyof ConfigContextStore) => HTMLElement|null} get - Get a DOM element from the context by key.
+ * @property {(k: keyof ConfigContextStore, v: HTMLElement) => void} set - Set a DOM element in the context by key.
+ * @property {(k: keyof ConfigContextStore) => boolean} has - Check if a key exists in the context.
+ * @property {(k: keyof ConfigContextStore) => boolean} delete - Delete a key from the context.
+ * @property {() => Object<keyof ConfigContextStore, HTMLElement|null>} [getAll] - Get all DOM elements in the context as an object.
+ * @property {number} size - Get context size
+ * @property {() => void} clear - Clear all elements in the context.
+ */
+
+/**
+ * @typedef {Object} FrameContextMap
+ * @property {<K extends keyof ConfigFrameContextStore>(k: K) => ConfigFrameContextStore[K]} get - Get a DOM element from the context by key.
+ * @property {<K extends keyof ConfigFrameContextStore>(k: K, v: ConfigFrameContextStore[K]) => void} set - Set a DOM element in the context by key.
+ * @property {<K extends keyof ConfigFrameContextStore>(k: K) => boolean} has - Check if a key exists in the context.
+ * @property {<K extends keyof ConfigFrameContextStore>(k: K) => boolean} delete - Delete a key from the context.
+ * @property {() => Object<keyof ConfigFrameContextStore, *>} [getAll] - Get all DOM elements in the context as an object.
+ * @property {(newMap: *) => void} [reset] - Reset the context with a new Map.
+ * @property {number} size - Get context size
+ * @property {() => void} clear - Clear all elements in the context.
+ */
+
+/**
+ * @description Provides Map-based access to editor DOM contexts (global and per-frame).
+ */
+export default class ContextProvider {
+	/**
+	 * @description Frame root map
+	 */
+	#frameRoots;
+
+	/**
+	 * @description Utility object that manages the editor's runtime context.
+	 * Provides methods to get, set, and inspect internal context.
+	 */
+	#contextMap;
+
+	/**
+	 * @description Utility object that manages the editor's runtime [frame] context.
+	 * Provides methods to get, set, and inspect internal context.
+	 * @type {FrameContextMap}
+	 */
+	#frameContextMap;
+
+	/**
+	 * @constructor
+	 * @param {import('../section/constructor').ConstructorReturnType} product
+	 */
+	constructor(product) {
+		this.#frameRoots = product.frameRoots;
+		this.#contextMap = this.#CreateContextMap(product.context);
+		this.#frameContextMap = this.#CreateFrameContextMap({ value: new Map() });
+
+		/**
+		 * @description Frame root key array
+		 * @type {Array<*>}
+		 */
+		this.rootKeys = product.rootKeys;
+
+		/**
+		 * @description Controllers carrier
+		 * @type {HTMLElement}
+		 */
+		this.carrierWrapper = product.carrierWrapper;
+
+		/**
+		 * @description Default icons object
+		 * @type {Object<string, string>}
+		 */
+		this.icons = product.icons;
+
+		/**
+		 * @description loaded language
+		 * @type {Object<string, *>}
+		 */
+		this.lang = product.lang;
+
+		/**
+		 * @description Closest ShadowRoot to editor if found
+		 * @type {ShadowRoot & { getSelection?: () => Selection }} - Chromium-based browsers (Chrome, Edge, etc.) has a getSelection method on the ShadowRoot
+		 */
+		this.shadowRoot = null;
+	}
+
+	get frameRoots() {
+		return this.#frameRoots;
+	}
+
+	get context() {
+		return this.#contextMap;
+	}
+
+	get frameContext() {
+		return this.#frameContextMap;
+	}
+
+	init() {
+		this.applyToRoots((e) => {
+			this.#setEditorParams(e);
+		});
+	}
+
+	/**
+	 * @param {SunEditor.FrameContext} rt Root target[key] FrameContext
+	 */
+	reset(rt) {
+		this.#frameContextMap.reset(rt);
+	}
+
+	/**
+	 * @description Execute a function by traversing all root targets.
+	 * @param {(frameContext: SunEditor.FrameContext, rootKey: string|null, frameRoots: Map<string|null, SunEditor.FrameContext>) => void} f Callback function
+	 */
+	applyToRoots(f) {
+		this.#frameRoots.forEach(f);
+	}
+
+	/**
+	 * @description Set the FrameContext parameters and options
+	 * @param {SunEditor.FrameContext} e - Frame context object
+	 */
+	#setEditorParams(e) {
+		const frameOptions = e.get('options');
+
+		e.set('wwComputedStyle', _w.getComputedStyle(e.get('wysiwyg')));
+
+		if (!frameOptions.get('iframe') && typeof ShadowRoot === 'function') {
+			let child = e.get('wysiwygFrame');
+			while (child) {
+				if (child.shadowRoot) {
+					this.shadowRoot = child.shadowRoot;
+					break;
+				} else if (child instanceof ShadowRoot) {
+					this.shadowRoot = child;
+					break;
+				}
+				child = /** @type {SunEditor.WysiwygFrame} */ (child.parentNode);
+			}
+		}
+
+		// init, validate
+		if (frameOptions.get('iframe')) {
+			e.set('_ww', e.get('wysiwygFrame').contentWindow);
+			e.set('_wd', e.get('wysiwygFrame').contentDocument);
+			e.set('wysiwyg', e.get('_wd').body);
+			// e.get('wysiwyg').className += ' ' + options.get('_editableClass');
+			if (frameOptions.get('_defaultStyles').editor) e.get('wysiwyg').style.cssText = frameOptions.get('_defaultStyles').editor;
+			if (frameOptions.get('height') === 'auto') e.set('_iframeAuto', e.get('_wd').body);
+		} else {
+			e.set('_ww', _w);
+			e.set('_wd', _d);
+		}
+
+		// wisywig attributes
+		const attr = frameOptions.get('editableFrameAttributes');
+		for (const k in attr) {
+			e.get('wysiwyg').setAttribute(k, attr[k]);
+		}
+	}
+
+	/**
+	 * @description Creates a utility wrapper for editor base options.
+	 * - Provides get, set, has, getAll with internal Map support.
+	 * @param {*} _context - Origin options object
+	 * @returns {ContextMap}
+	 */
+	#CreateContextMap(_context) {
+		const store = _context;
+
+		return {
+			get(k) {
+				return store.get(k);
+			},
+			set(k, v) {
+				return store.set(k, v);
+			},
+			has(k) {
+				return store.has(k);
+			},
+			delete(k) {
+				return store.delete(k);
+			},
+			getAll() {
+				return Object.fromEntries(store.entries());
+			},
+			get size() {
+				return store.size;
+			},
+			clear() {
+				store.clear();
+			},
+		};
+	}
+
+	/**
+	 * @description Creates a utility wrapper for editor base options.
+	 * - Provides get, set, has, getAll with internal Map support.
+	 * @param {{value: Map}} _frameContext - The editor instance
+	 * @returns {FrameContextMap}
+	 */
+	#CreateFrameContextMap(_frameContext) {
+		let store = _frameContext.value;
+
+		return {
+			/**
+			 * @template {keyof ConfigFrameContextStore} K
+			 * @param {K} k
+			 * @returns {ConfigFrameContextStore[K]}
+			 */
+			get(k) {
+				return store.get(k);
+			},
+			/**
+			 * @template {keyof ConfigFrameContextStore} K
+			 * @param {K} k
+			 * @param {ConfigFrameContextStore[K]} v
+			 */
+			set(k, v) {
+				return store.set(k, v);
+			},
+			/**
+			 * @template {keyof ConfigFrameContextStore} K
+			 * @param {K} k
+			 * @returns {boolean}
+			 */
+			has(k) {
+				return store.has(k);
+			},
+			/**
+			 * @template {keyof ConfigFrameContextStore} K
+			 * @param {K} k
+			 * @returns {boolean}
+			 */
+			delete(k) {
+				return store.delete(k);
+			},
+			getAll() {
+				return Object.fromEntries(store.entries());
+			},
+			/** @param {*} newMap */
+			reset(newMap) {
+				store = _frameContext.value = newMap;
+			},
+			get size() {
+				return store.size;
+			},
+			clear() {
+				store.clear();
+			},
+		};
+	}
+
+	_destroy() {
+		/** clear frame roots */
+		this.applyToRoots((e) => {
+			// destroy documentType instance
+			const docType = e.get('documentType');
+			if (docType) {
+				docType._destroy();
+			}
+			dom.utils.removeItem(e.get('topArea'));
+			e.get('options').clear();
+			e.clear();
+		});
+
+		this.#contextMap.clear();
+		this.#frameContextMap.clear();
+		this.#frameRoots.clear();
+
+		dom.utils.removeItem(this.carrierWrapper);
+
+		this.rootKeys = null;
+		this.carrierWrapper = null;
+		this.icons = null;
+		this.lang = null;
+		this.shadowRoot = null;
+	}
+}

package/src/core/config/eventManager.js

@@ -0,0 +1,188 @@
+import { dom, numbers, env } from '../../helper';
+import { _DragHandle } from '../../modules/ui';
+
+const { _w, _d, NO_EVENT } = env;
+
+/**
+ * @description Event manager, editor's all event management class
+ */
+class EventManager {
+	#$;
+	#frameContext;
+	#frameOptions;
+
+	/** @type {?SunEditor.Event.GlobalInfo} */
+	#geckoActiveEvent = null;
+
+	/** @type {Array<*>} */
+	#events = [];
+
+	/**
+	 * @constructor
+	 * @param {import('./contextProvider').default} contextProvider
+	 * @param {import('./optionProvider').default} optionProvider
+	 * @param {import('../kernel/coreKernel').Deps} $
+	 */
+	constructor(contextProvider, optionProvider, $) {
+		this.#$ = $;
+		this.#frameContext = contextProvider.frameContext;
+		this.#frameOptions = optionProvider.frameOptions;
+
+		/**
+		 * @description Events object, call by triggerEvent function
+		 * @type {SunEditor.Event.Handlers}
+		 */
+		this.events = optionProvider.options.get('events') || {};
+
+		/**
+		 * @description Call the event function by injecting self: this.
+		 * @type {(eventName: string, ...args: *) => Promise<*>}
+		 */
+		this.triggerEvent = async (eventName, eventData) => {
+			// [iframe] wysiwyg is disabled, the event is not called.
+			if (dom.check.isNonEditable(eventData?.frameContext?.get('wysiwyg'))) return false;
+
+			const eventHandler = this.events[eventName];
+			if (typeof eventHandler === 'function') {
+				try {
+					return await eventHandler({ $: this.#$, ...eventData });
+				} catch (error) {
+					console.error(`[SUNEDITOR.triggerEvent.${eventName}]`, error);
+					return false;
+				}
+			}
+
+			return NO_EVENT;
+		};
+
+		/** @type {HTMLInputElement} */
+		this.__focusTemp = contextProvider.carrierWrapper.querySelector('.__se__focus__temp__');
+	}
+
+	/**
+	 * @description Register for an event.
+	 * - Only events registered with this method are unregistered or re-registered when methods such as 'setOptions', 'destroy' are called.
+	 * @param {*} target Target element
+	 * @param {string} type Event type
+	 * @param {EventListenerOrEventListenerObject} listener Event handler
+	 * @param {boolean|AddEventListenerOptions} [useCapture] Event useCapture option
+	 * @return {?SunEditor.Event.Info} Registered event information
+	 */
+	addEvent(target, type, listener, useCapture) {
+		if (!target) return null;
+		if (target === _w || target === _d || typeof target.length !== 'number' || target.nodeType || (!Array.isArray(target) && target.length < 1)) target = [target];
+		if (target.length === 0) return null;
+
+		const len = target.length;
+		for (let i = 0; i < len; i++) {
+			target[i].addEventListener(type, listener, useCapture);
+			this.#events.push({
+				target: target[i],
+				type,
+				listener,
+				useCapture,
+			});
+		}
+
+		return {
+			target: len > 1 ? target : target[0],
+			type,
+			listener,
+			useCapture,
+		};
+	}
+
+	/**
+	 * @description Remove event
+	 * @param {SunEditor.Event.Info} params event info = this.addEvent()
+	 * @returns {undefined|null} Success: null, Not found: undefined
+	 */
+	removeEvent(params) {
+		if (!params) return;
+
+		let target = params.target;
+		const type = params.type;
+		const listener = params.listener;
+		const useCapture = params.useCapture;
+
+		if (!target) return;
+		if (!numbers.is(target.length) || target.nodeName || (!Array.isArray(target) && target.length < 1)) target = /** @type {Array<Element>} */ ([target]);
+		if (target.length === 0) return;
+
+		for (let i = 0, len = target.length; i < len; i++) {
+			target[i].removeEventListener(type, listener, useCapture);
+		}
+
+		return null;
+	}
+
+	/**
+	 * @description Add an event to document.
+	 * - When created as an Iframe, the same event is added to the document in the Iframe.
+	 * @param {string} type Event type
+	 * @param {(...args: *) => *} listener Event listener
+	 * @param {boolean|AddEventListenerOptions} [useCapture] Use event capture
+	 * @return {SunEditor.Event.GlobalInfo} Registered event information
+	 */
+	addGlobalEvent(type, listener, useCapture) {
+		if (this.#frameOptions.get('iframe')) {
+			this.#frameContext.get('_ww').addEventListener(type, listener, useCapture);
+		}
+		_w.addEventListener(type, listener, useCapture);
+		return {
+			type,
+			listener,
+			useCapture,
+		};
+	}
+
+	/**
+	 * @description Remove events from document.
+	 * - When created as an Iframe, the event of the document inside the Iframe is also removed.
+	 * @param {string|SunEditor.Event.GlobalInfo} type Event type or (Event info = this.addGlobalEvent())
+	 * @param {(...args: *) => *} [listener] Event listener
+	 * @param {boolean|AddEventListenerOptions} [useCapture] Use event capture
+	 * @returns {undefined|null} Success: null, Not found: undefined
+	 */
+	removeGlobalEvent(type, listener, useCapture) {
+		if (!type) return;
+
+		if (typeof type === 'object') {
+			listener = type.listener;
+			useCapture = type.useCapture;
+			type = type.type;
+		}
+		if (this.#frameOptions.get('iframe')) {
+			this.#frameContext.get('_ww').removeEventListener(type, listener, useCapture);
+		}
+		_w.removeEventListener(type, listener, useCapture);
+
+		return null;
+	}
+
+	/**
+	 * @internal
+	 * @description Gives an active effect when the mouse down event is blocked. (Used when "env.isGecko" is true)
+	 * @param {Node} target Target element
+	 */
+	_injectActiveEvent(target) {
+		dom.utils.addClass(target, '__se__active');
+		this.#geckoActiveEvent = this.addGlobalEvent('mouseup', () => {
+			dom.utils.removeClass(target, '__se__active');
+			this.#geckoActiveEvent = this.removeGlobalEvent(this.#geckoActiveEvent);
+		});
+	}
+
+	_init() {
+		for (let i = 0, len = this.#events.length, e; i < len; i++) {
+			e = this.#events[i];
+			e.target.removeEventListener(e.type, e.listener, e.useCapture);
+		}
+
+		this.#events = null;
+
+		this.#geckoActiveEvent &&= this.removeGlobalEvent(this.#geckoActiveEvent);
+	}
+}
+
+export default EventManager;

package/src/core/config/instanceCheck.js

@@ -0,0 +1,59 @@
+/**
+ * @description iframe-safe instanceof check utility class
+ */
+class InstanceCheck {
+	#frameContext;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.FrameContext} frameContext - Frame context
+	 */
+	constructor(frameContext) {
+		this.#frameContext = frameContext;
+	}
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Node}
+	 */
+	isNode(obj) {
+		// Check nodeType first for cross-context compatibility (e.g., elements created from main document in iframe mode)
+		return (obj && typeof obj.nodeType === 'number') || obj instanceof this.#getFrameWindow().Node;
+	}
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Element}
+	 */
+	isElement(obj) {
+		// Check nodeType === 1 for cross-context compatibility
+		return (obj && obj.nodeType === 1) || obj instanceof this.#getFrameWindow().Element;
+	}
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Range}
+	 */
+	isRange(obj) {
+		// Check constructor name for cross-context compatibility
+		return (obj && obj.constructor?.name === 'Range') || obj instanceof this.#getFrameWindow().Range;
+	}
+
+	/**
+	 * @param {*} obj
+	 * @returns {obj is Selection}
+	 */
+	isSelection(obj) {
+		// Check constructor name for cross-context compatibility
+		return (obj && obj.constructor?.name === 'Selection') || obj instanceof this.#getFrameWindow().Selection;
+	}
+
+	/**
+	 * @returns {SunEditor.GlobalWindow}
+	 */
+	#getFrameWindow() {
+		return /** @type {SunEditor.GlobalWindow} */ (this.#frameContext.get('_ww'));
+	}
+}
+
+export default InstanceCheck;