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

package/src/core/event/handlers/handler_ww_mouse.js

@@ -0,0 +1,166 @@
+import { dom, env } from '../../../helper';
+import { _DragHandle } from '../../../modules/ui';
+
+const { _w } = env;
+
+/**
+ * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_ww_mouse
+ */
+
+/**
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnMouseDown_wysiwyg(fc, e) {
+	const eventTarget = dom.query.getEventTarget(e);
+
+	this.$.store.set('_mousedown', true);
+	if (this.__onDownEv) _offDownFn.call(this);
+	this.__onDownEv = this.$.eventManager.addGlobalEvent('mouseup', _offDownFn.bind(this));
+
+	if (fc.get('isReadOnly') || dom.check.isNonEditable(fc.get('wysiwyg'))) return;
+	if (this.$.format._isExcludeSelectionElement(eventTarget)) {
+		e.preventDefault();
+		return;
+	}
+
+	this._setSelectionSync();
+
+	// Defer selection.init — browser finalizes selection/range after mousedown event returns
+	_w.setTimeout(this.$.selection.init.bind(this.$.selection), 0);
+
+	// user event
+	if ((await this.$.eventManager.triggerEvent('onMouseDown', { frameContext: fc, event: e })) === false) return;
+
+	// plugin event
+	if ((await this._callPluginEventAsync('onMouseDown', { frameContext: fc, event: e })) === false) return;
+
+	if (this.$.store.mode.isBalloon) {
+		this._hideToolbar();
+	} else if (this.$.store.mode.isSubBalloon) {
+		this._hideToolbar_sub();
+	}
+
+	if (/FIGURE/i.test(eventTarget?.nodeName)) e.preventDefault();
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_mouse}
+ */
+function _offDownFn() {
+	this.$.store.set('_mousedown', false);
+	this.__onDownEv = this.$.eventManager.removeGlobalEvent(this.__onDownEv);
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnMouseUp_wysiwyg(fc, e) {
+	// user event
+	if ((await this.$.eventManager.triggerEvent('onMouseUp', { frameContext: fc, event: e })) === false) return;
+
+	// plugin event
+	await this._callPluginEventAsync('onMouseUp', { frameContext: fc, event: e });
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnClick_wysiwyg(fc, e) {
+	const eventTarget = dom.query.getEventTarget(e);
+
+	if (fc.get('isReadOnly')) {
+		e.preventDefault();
+		if (dom.check.isAnchor(eventTarget)) {
+			_w.open(eventTarget.href, eventTarget.target);
+		}
+		return false;
+	}
+
+	if (dom.check.isNonEditable(fc.get('wysiwyg'))) return;
+
+	// user event
+	if ((await this.$.eventManager.triggerEvent('onClick', { frameContext: fc, event: e })) === false) return;
+	// plugin event
+	if ((await this._callPluginEventAsync('onClick', { frameContext: fc, event: e })) === false) return;
+
+	const componentInfo = this.$.component.get(eventTarget);
+	if (componentInfo) {
+		e.preventDefault();
+		this.$.component.select(componentInfo.target, componentInfo.pluginName);
+		return;
+	}
+
+	this.$.selection.init();
+
+	if (e.detail === 3) {
+		const range = this.$.selection.getRange();
+		if (this.$.format.isLine(range.endContainer) && range.endOffset === 0) {
+			this.$.selection.setRange(range.startContainer, range.startOffset, range.startContainer, range.startContainer.textContent.length);
+		}
+	}
+
+	const selectionNode = this.$.selection.getNode();
+	const formatEl = this.$.format.getLine(selectionNode, null);
+	const rangeEl = this.$.format.getBlock(selectionNode, null);
+	if (!formatEl && !dom.check.isNonEditable(eventTarget) && !dom.check.isList(rangeEl)) {
+		const range = this.$.selection.getRange();
+		if (this.$.format.getLine(range.startContainer) === this.$.format.getLine(range.endContainer)) {
+			if (dom.check.isList(rangeEl)) {
+				e.preventDefault();
+				const prevLi = selectionNode.nextElementSibling;
+				const oLi = dom.utils.createElement('LI', null, selectionNode);
+				rangeEl.insertBefore(oLi, prevLi);
+				this.$.focusManager.focus();
+			} else if (
+				!dom.check.isWysiwygFrame(selectionNode) &&
+				!this.$.component.is(selectionNode) &&
+				(!dom.check.isTableElements(selectionNode) || dom.check.isTableCell(selectionNode)) &&
+				this._setDefaultLine(this.$.format.isBlock(rangeEl) ? 'DIV' : this.$.options.get('defaultLine')) !== null
+			) {
+				e.preventDefault();
+				this.$.focusManager.focus();
+			}
+		}
+	}
+
+	// copy format
+	this.$.commandDispatcher._copyFormat();
+
+	// Defer balloon toggle — selection range is finalized after mouseup event returns
+	if (this.$.store.mode.isBalloon || this.$.store.mode.isSubBalloon) _w.setTimeout(this._toggleToolbarBalloon.bind(this), 0);
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export function OnMouseMove_wysiwyg(fc, e) {
+	if (fc.get('isReadOnly') || fc.get('isDisabled')) return false;
+	const eventTarget = dom.query.getEventTarget(e);
+
+	// over component
+	if (_DragHandle.get('__overInfo') !== false) {
+		this.$.component.hoverSelect(eventTarget);
+	}
+
+	this._callPluginEvent('onMouseMove', { frameContext: fc, event: e });
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnMouseLeave_wysiwyg(fc, e) {
+	// user event
+	if ((await this.$.eventManager.triggerEvent('onMouseLeave', { frameContext: fc, event: e })) === false) return;
+	// plugin event
+	await this._callPluginEventAsync('onMouseLeave', { frameContext: fc, event: e });
+}

package/src/core/event/ports.js

@@ -0,0 +1,211 @@
+import { isMobile } from '../../helper/env';
+
+/**
+ * @typedef {import('./eventOrchestrator').default} EventManagerInstanceType
+ */
+
+/**
+ * @typedef {import('../logic/dom/selection').default} Selection
+ * @typedef {import('../logic/dom/format').default} Format
+ * @typedef {import('../logic/dom/listFormat').default} ListFormat
+ * @typedef {import('../logic/shell/component').default} Component
+ * @typedef {import('../logic/dom/html').default} Html
+ * @typedef {import('../logic/dom/nodeTransform').default} NodeTransform
+ * @typedef {import('../logic/dom/char').default} Char
+ * @typedef {import('../logic/panel/menu').default} Menu
+ */
+
+/**
+ * @typedef {Object} SelectionPorts
+ * @property {(...args: Parameters<Selection['getRange']>) => ReturnType<Selection['getRange']>} getRange
+ * @property {(...args: Parameters<Selection['getNode']>) => ReturnType<Selection['getNode']>} getNode
+ * @property {(...args: Parameters<Selection['setRange']>) => ReturnType<Selection['setRange']>} setRange
+ * @property {(...args: Parameters<Selection['get']>) => ReturnType<Selection['get']>} get
+ */
+
+/**
+ * @typedef {Object} FormatPorts
+ * @property {(...args: Parameters<Format['isLine']>) => ReturnType<Format['isLine']>} isLine
+ * @property {(...args: Parameters<Format['getLine']>) => ReturnType<Format['getLine']>} getLine
+ * @property {(...args: Parameters<Format['getLines']>) => ReturnType<Format['getLines']>} getLines
+ * @property {(...args: Parameters<Format['getBrLine']>) => ReturnType<Format['getBrLine']>} getBrLine
+ * @property {(...args: Parameters<Format['getBlock']>) => ReturnType<Format['getBlock']>} getBlock
+ * @property {(...args: Parameters<Format['isNormalLine']>) => ReturnType<Format['isNormalLine']>} isNormalLine
+ * @property {(...args: Parameters<Format['isBrLine']>) => ReturnType<Format['isBrLine']>} isBrLine
+ * @property {(...args: Parameters<Format['isClosureBrLine']>) => ReturnType<Format['isClosureBrLine']>} isClosureBrLine
+ * @property {(...args: Parameters<Format['isClosureBlock']>) => ReturnType<Format['isClosureBlock']>} isClosureBlock
+ * @property {(...args: Parameters<Format['isEdgeLine']>) => ReturnType<Format['isEdgeLine']>} isEdgeLine
+ * @property {(...args: Parameters<Format['removeBlock']>) => ReturnType<Format['removeBlock']>} removeBlock
+ * @property {(...args: Parameters<Format['addLine']>) => ReturnType<Format['addLine']>} addLine
+ */
+
+/**
+ * @typedef {Object} ListFormatPorts
+ * @property {(...args: Parameters<ListFormat['applyNested']>) => ReturnType<ListFormat['applyNested']>} applyNested
+ */
+
+/**
+ * @typedef {Object} ComponentPorts
+ * @property {(...args: Parameters<Component['deselect']>) => ReturnType<Component['deselect']>} deselect
+ * @property {(...args: Parameters<Component['is']>) => ReturnType<Component['is']>} is
+ * @property {(...args: Parameters<Component['get']>) => ReturnType<Component['get']>} get
+ * @property {(...args: Parameters<Component['select']>) => ReturnType<Component['select']>} select
+ */
+
+/**
+ * @typedef {Object} HtmlPorts
+ * @property {(...args: Parameters<Html['remove']>) => ReturnType<Html['remove']>} remove
+ * @property {(...args: Parameters<Html['insert']>) => ReturnType<Html['insert']>} insert
+ * @property {(...args: Parameters<Html['insertNode']>) => ReturnType<Html['insertNode']>} insertNode
+ */
+
+/**
+ * @typedef {Object} NodeTransformPorts
+ * @property {(...args: Parameters<NodeTransform['removeAllParents']>) => ReturnType<NodeTransform['removeAllParents']>} removeAllParents
+ * @property {(...args: Parameters<NodeTransform['split']>) => ReturnType<NodeTransform['split']>} split
+ */
+
+/**
+ * @typedef {Object} CharPorts
+ * @property {(...args: Parameters<Char['check']>) => ReturnType<Char['check']>} check
+ */
+
+/**
+ * @typedef {Object} MenuPorts
+ * @property {(...args: Parameters<Menu['dropdownOff']>) => ReturnType<Menu['dropdownOff']>} dropdownOff
+ */
+
+/**
+ * @description Create ports for event reducers
+ * @param {EventManagerInstanceType} inst - EventManager instance
+ * @param {Object} param1 - Additional parameters
+ * @param {*} param1._styleNodes - Style nodes reference object
+ */
+export function makePorts(inst, { _styleNodes }) {
+	const { frameContext, ui, focusManager, selection, format, listFormat, component, html, nodeTransform, history, char, menu } = inst.$;
+
+	return {
+		// focusManager
+		focusManager: {
+			nativeFocus: () => focusManager.nativeFocus(),
+			blur: () => focusManager.blur(),
+		},
+
+		// === class ===
+		selection: {
+			getRange: () => selection.getRange(),
+			getNode: () => selection.getNode(),
+			setRange: (se, so, ec, eo) => selection.setRange(se, so, ec, eo),
+			get: () => selection.get(),
+		},
+
+		format: {
+			isLine: (n) => format.isLine(n),
+			getLine: (n, p) => format.getLine(n, p),
+			getLines: (v) => format.getLines(v),
+			getBrLine: (n, p) => format.getBrLine(n, p),
+			getBlock: (n, p) => format.getBlock(n, p),
+			isNormalLine: (n) => format.isNormalLine(n),
+			isBrLine: (n) => format.isBrLine(n),
+			isClosureBrLine: (n) => format.isClosureBrLine(n),
+			isClosureBlock: (n) => format.isClosureBlock(n),
+			isEdgeLine: (node, offset, dir) => format.isEdgeLine(node, offset, dir),
+			removeBlock: (n, p) => format.removeBlock(n, p),
+			addLine: (el, nextOrTag) => format.addLine(el, nextOrTag),
+		},
+
+		listFormat: {
+			applyNested: (cells, shift) => listFormat.applyNested(cells, shift),
+		},
+
+		component: {
+			deselect: () => component.deselect(),
+			is: (n) => component.is(n),
+			get: (n) => component.get(n),
+			select: (t, p) => component.select(t, p),
+		},
+
+		html: {
+			remove: () => html.remove(),
+			insert: (h, p) => html.insert(h, p),
+			insertNode: (n, p) => html.insertNode(n, p),
+		},
+
+		history: {
+			push: (hard) => history.push(!!hard),
+		},
+
+		nodeTransform: {
+			removeAllParents: (s, n, p) => nodeTransform.removeAllParents(s, n, p),
+			split: (n, o, d) => nodeTransform.split(n, o, d),
+		},
+
+		char: {
+			check: (content) => char.check(content),
+		},
+
+		menu: {
+			dropdownOff: () => menu.dropdownOff(),
+		},
+
+		// === inst(eventManager) commands ===
+		setDefaultLine: (tag) => inst._setDefaultLine(tag),
+		hideToolbar: () => inst._hideToolbar(),
+		hideToolbar_sub: () => inst._hideToolbar_sub(),
+		styleNodeCache: () => (_styleNodes.value = inst.__cacheStyleNodes),
+		formatAttrsTempCache: (attrs) => (inst._formatAttrsTemp = attrs),
+		setOnShortcutKey: (v) => (inst._onShortcutKey = v),
+
+		// === enter event specific ===
+		/**
+		 * @description Scrolls the editor view to the caret position after pressing `Enter`. (Ignored on mobile devices)
+		 * @param {Range} range Range object
+		 */
+		enterScrollTo(range) {
+			ui._iframeAutoHeight(frameContext);
+
+			// scroll to
+			if (isMobile && inst.scrollparents.length > 0) return;
+			selection.scrollTo(range, { behavior: 'auto', block: 'nearest', inline: 'nearest' });
+		},
+		/**
+		 * @description Prevents the default behavior of the `Enter` key and refocuses the editor.
+		 * @param {Event} e The keyboard event
+		 */
+		enterPrevent(e) {
+			e.preventDefault();
+			if (!isMobile) return;
+
+			inst.__focusTemp.focus({ preventScroll: true });
+			frameContext.get('wysiwyg').focus({ preventScroll: true });
+		},
+	};
+}
+
+/**
+ * @typedef {Object} EventReducerPorts
+ *
+ * @property {Object} focusManager
+ * @property {() => void} focusManager.nativeFocus
+ * @property {() => void} focusManager.blur
+ * @property {SelectionPorts} selection
+ * @property {FormatPorts} format
+ * @property {ListFormatPorts} listFormat
+ * @property {ComponentPorts} component
+ * @property {HtmlPorts} html
+ * @property {Object} history
+ * @property {(hard: boolean) => void} history.push
+ * @property {NodeTransformPorts} nodeTransform
+ * @property {CharPorts} char
+ * @property {MenuPorts} menu
+ *
+ * @property {(tag: string) => void} setDefaultLine
+ * @property {() => void} hideToolbar
+ * @property {() => void} hideToolbar_sub
+ * @property {() => void} styleNodeCache
+ * @property {(attrs: Object<string, *>) => void} formatAttrsTempCache
+ * @property {(v: boolean) => void} setOnShortcutKey
+ *
+ * @property {(e: Event) => void} enterPrevent
+ * @property {(range: Range) => void} enterScrollTo
+ */

package/src/core/event/reducers/keydown.reducer.js

@@ -0,0 +1,97 @@
+import { env, dom, keyCodeMap } from '../../../helper';
+
+import { reduceBackspaceDown } from '../rules/keydown.rule.backspace';
+import { reduceDeleteDown } from '../rules/keydown.rule.delete';
+import { reduceEnterDown } from '../rules/keydown.rule.enter';
+import { reduceTabDown } from '../rules/keydown.rule.tab';
+import { reduceArrowDown } from '../rules/keydown.rule.arrow';
+import { A } from '../actions';
+
+const { isOSX_IOS } = env;
+
+/**
+ * @typedef {import('../ports').EventReducerPorts} EventPorts
+ */
+
+/**
+ * @typedef {Object} KeydownReducerCtx - Keydown Reducer Context object
+ * @property {KeyboardEvent} ctx.e - The keyboard event
+ * @property {SunEditor.FrameContext} ctx.fc - Frame context object
+ * @property {SunEditor.Store} ctx.store - Editor store object
+ * @property {SunEditor.Options} ctx.options - Options object
+ * @property {SunEditor.FrameOptions} ctx.frameOptions - Frame options object
+ * @property {Range} ctx.range - Current selection range
+ * @property {HTMLElement|Text} ctx.selectionNode - Current selection node
+ * @property {HTMLElement} ctx.formatEl - Current format element
+ * @property {string} ctx.keyCode - Key code
+ * @property {boolean} ctx.ctrl - Whether the `ctrl` key is pressed
+ * @property {boolean} ctx.alt - Whether the `alt` key is pressed
+ * @property {boolean} ctx.shift - Whether the `shift` key is pressed
+ */
+
+/**
+ * @typedef {import('../actions').Action[]} EventActions
+ */
+
+/**
+ * @description Keydown event reducer
+ * @param {EventPorts} ports - Ports for interacting with editor
+ * @param {KeydownReducerCtx} ctx - Context object
+ * @returns {Promise<EventActions>} Action list
+ */
+export async function reduceKeydown(ports, ctx) {
+	const actions = [];
+
+	switch (ctx.keyCode) {
+		case 'Backspace' /** backspace key */: {
+			if (reduceBackspaceDown(actions, ports, ctx) === false) {
+				return actions;
+			}
+			break;
+		}
+		case 'Delete' /** delete key */: {
+			if (reduceDeleteDown(actions, ports, ctx) === false) {
+				return actions;
+			}
+			break;
+		}
+		case 'Tab' /** tab key */: {
+			if (reduceTabDown(actions, ports, ctx) === false) {
+				return actions;
+			}
+			break;
+		}
+		case 'Enter' /** enter key */: {
+			if (reduceEnterDown(actions, ports, ctx) === false) {
+				return actions;
+			}
+			break;
+		}
+	}
+
+	// ZWS, nbsp, documentType
+	const { fc, keyCode, shift, alt, ctrl, range } = ctx;
+
+	if (shift && (isOSX_IOS ? alt : ctrl) && keyCodeMap.isSpace(keyCode)) {
+		actions.push(A.preventStop());
+		actions.push(A.keydownInputInsertNbsp());
+		return actions;
+	}
+
+	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+	if (!ctrl && !alt && !selectRange && !keyCodeMap.isNonTextKey(keyCode) && dom.check.isBreak(range.commonAncestorContainer)) {
+		actions.push(A.keydownInputInsertZWS());
+		return actions;
+	}
+
+	// document type
+	if (fc.has('documentType_use_header') && selectRange && !ctrl && !alt && !shift && !keyCodeMap.isDirectionKey(keyCode)) {
+		actions.push(A.documentTypeRefreshHeader());
+		return actions;
+	}
+
+	// Arrow key - select component action
+	reduceArrowDown(actions, ports, ctx);
+
+	return actions;
+}

package/src/core/event/rules/keydown.rule.arrow.js

@@ -0,0 +1,63 @@
+import { dom } from '../../../helper';
+import { A } from '../actions';
+
+/**
+ * @typedef {import('../actions').Action[]} EventActions
+ * @typedef {import('../ports').EventReducerPorts} EventPorts
+ * @typedef {import('../reducers/keydown.reducer').KeydownReducerCtx} EventKeydownCtx
+ */
+
+/**
+ */
+
+/**
+ * @this {void}
+ * @description Arrow key down rule
+ * @param {EventActions} actions - Action list
+ * @param {EventPorts} ports - Ports for interacting with editor
+ * @param {EventKeydownCtx} ctx - Context object
+ */
+export function reduceArrowDown(actions, ports, ctx) {
+	const { component } = ports;
+	const { formatEl, range, selectionNode, keyCode } = ctx;
+
+	// next component
+	let cmponentInfo = null;
+	switch (keyCode) {
+		case 'ArrowUp' /** up key */:
+			if (component.is(formatEl.previousElementSibling)) {
+				cmponentInfo = component.get(formatEl.previousElementSibling);
+			}
+			break;
+		case 'ArrowLeft' /** left key */:
+			if (dom.check.isEdgePoint(selectionNode, range.startOffset, 'front')) {
+				const prevEl = selectionNode.previousElementSibling || dom.query.getPreviousDeepestNode(selectionNode);
+				if (prevEl) {
+					if (component.is(prevEl)) cmponentInfo = component.get(prevEl);
+				} else if (component.is(formatEl.previousElementSibling)) {
+					cmponentInfo = component.get(formatEl.previousElementSibling);
+				}
+			}
+			break;
+		case 'ArrowDown' /** down key */:
+			if (component.is(formatEl.nextElementSibling)) {
+				cmponentInfo = component.get(formatEl.nextElementSibling);
+			}
+			break;
+		case 'ArrowRight' /** right key */:
+			if (dom.check.isEdgePoint(selectionNode, range.endOffset, 'end')) {
+				const nextEl = selectionNode.nextElementSibling || dom.query.getNextDeepestNode(selectionNode);
+				if (nextEl) {
+					if (component.is(nextEl)) cmponentInfo = component.get(nextEl);
+				} else if (component.is(formatEl.nextElementSibling)) {
+					cmponentInfo = component.get(formatEl.nextElementSibling);
+				}
+			}
+			break;
+	}
+
+	if (cmponentInfo && !cmponentInfo.options?.isInputComponent) {
+		actions.push(A.prevent());
+		actions.push(A.selectComponentFallback(cmponentInfo));
+	}
+}