suneditor 3.0.0-beta.3 → 3.0.0-beta.30

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

@@ -0,0 +1,89 @@
+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 {Object} KeydownReducerCtx - Keydown Reducer Context object
+ * @property {KeyboardEvent} ctx.e - The keyboard event
+ * @property {__se__FrameContext} ctx.fc - Frame context object
+ * @property {__se__EditorStatus} ctx.status - Editor status object
+ * @property {__se__BaseOptions} ctx.options - Options object
+ * @property {__se__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
+ */
+
+/**
+ * @description Keydown event reducer
+ * @param {__se__EventPorts} ports - Ports for interacting with editor
+ * @param {KeydownReducerCtx} ctx - Context object
+ * @returns {Promise<__se__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,54 @@
+import { dom } from '../../../helper';
+import { A } from '../actions';
+
+/**
+ * @this {void}
+ * @description Arrow key down rule
+ * @param {__se__EventActions} actions - Action list
+ * @param {__se__EventPorts} ports - Ports for interacting with editor
+ * @param {__se__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));
+	}
+}

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

@@ -0,0 +1,202 @@
+import { dom } from '../../../helper';
+import { cleanRemovedTags, hardDelete, isUneditableNode, setDefaultLine } from '../effects/ruleHelpers';
+import { A } from '../actions';
+
+/**
+ * @this {void}
+ * @description Backspace key down rule
+ * @param {__se__EventActions} actions - Action list
+ * @param {__se__EventPorts} ports - Ports for interacting with editor
+ * @param {__se__EventKeydownCtx} ctx - Context object
+ * @returns {boolean} Return false to stop the processing
+ */
+export function reduceBackspaceDown(actions, ports, ctx) {
+	const { format, component } = ports;
+	const { fc, options, range, selectionNode } = ctx;
+	let { formatEl } = ctx;
+
+	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+
+	actions.push(A.componentDeselect());
+	actions.push(A.cacheStyleNode());
+
+	if (selectRange && hardDelete(ports)) {
+		actions.push(A.preventStop());
+		return true;
+	}
+
+	if (!format.isNormalLine(formatEl) && !format.isBrLine(formatEl) && !fc.get('wysiwyg').firstElementChild && !component.is(selectionNode) && setDefaultLine(ports, options.get('defaultLine')) !== null) {
+		actions.push(A.preventStop());
+		return false;
+	}
+
+	// line delete
+	if (
+		format.isLine(formatEl) &&
+		selectRange &&
+		dom.check.isEdgePoint(range.startContainer, range.startOffset, 'front') &&
+		(!range.startContainer.previousSibling || dom.check.isZeroWidth(range.startContainer.previousSibling)) &&
+		format.getLine(range.startContainer) !== format.getLine(range.endContainer) &&
+		(format.isLine(formatEl.previousElementSibling) || dom.check.isListCell(formatEl))
+	) {
+		actions.push(A.preventStop());
+		actions.push(A.delFormatRemoveAndMove(range.startContainer, formatEl));
+		actions.push(A.historyPush(true));
+		return false;
+	}
+
+	// closure, default
+	if (
+		!selectRange &&
+		!formatEl.previousElementSibling &&
+		range.startOffset === 0 &&
+		!selectionNode.previousSibling &&
+		!dom.check.isListCell(formatEl) &&
+		format.isLine(formatEl) &&
+		(!format.isBrLine(formatEl) || format.isClosureBrLine(formatEl))
+	) {
+		// closure range
+		if (format.isClosureBlock(formatEl.parentNode)) {
+			actions.push(A.preventStop());
+			return false;
+		}
+
+		// maintain default format
+		if (dom.check.isWysiwygFrame(formatEl.parentNode) && formatEl.childNodes.length <= 1 && (!formatEl.firstChild || dom.check.isZeroWidth(formatEl.textContent))) {
+			actions.push(A.preventStop());
+			actions.push(A.backspaceFormatMaintain(formatEl));
+		}
+
+		actions.push(A.editorNativeFocus());
+		return false;
+	}
+
+	// clean remove tag
+	const startCon = range.startContainer;
+	if (formatEl && !formatEl.previousElementSibling && range.startOffset === 0 && startCon.nodeType === 3 && dom.check.isZeroWidth(startCon)) {
+		if (cleanRemovedTags(ports, startCon, formatEl) === true) return true;
+	}
+
+	// line component
+	if (!selectRange && formatEl && (range.startOffset === 0 || selectionNode === formatEl)) {
+		const sel =
+			selectionNode === formatEl
+				? isUneditableNode(ports, range, true)
+				: dom.check.isElement(selectionNode.previousSibling)
+					? selectionNode.previousSibling
+					: dom.check.isEdgePoint(range.startContainer, range.startOffset)
+						? dom.query.getPreviousDeepestNode(range.startContainer)
+						: null;
+		if (component.is(sel)) {
+			const fileComponentInfo = component.get(sel);
+			if (fileComponentInfo) {
+				actions.push(A.preventStop());
+				actions.push(A.backspaceComponentSelect(selectionNode, range, fileComponentInfo));
+				return true;
+			}
+		}
+	}
+
+	// tag[contenteditable='false']
+	if (isUneditableNode(ports, range, true)) {
+		actions.push(A.preventStop());
+		return true;
+	}
+
+	// format attributes
+	if (!selectRange && format.isEdgeLine(range.startContainer, range.startOffset, 'front')) {
+		if (format.isLine(formatEl.previousElementSibling)) {
+			actions.push(A.cacheFormatAttrsTemp(formatEl.previousElementSibling.attributes));
+		}
+	}
+
+	// nested list
+	formatEl = format.getLine(range.startContainer, null);
+	const rangeEl = format.getBlock(formatEl, null);
+	const commonCon = range.commonAncestorContainer;
+	if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
+		if (
+			dom.check.isListCell(formatEl) &&
+			dom.check.isList(rangeEl) &&
+			(dom.check.isListCell(rangeEl.parentElement) || formatEl.previousElementSibling) &&
+			(selectionNode === formatEl || (selectionNode.nodeType === 3 && (!selectionNode.previousSibling || dom.check.isList(selectionNode.previousSibling)))) &&
+			(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null) ? rangeEl.contains(range.startContainer) : range.startOffset === 0 && range.collapsed)
+		) {
+			if (range.startContainer !== range.endContainer) {
+				actions.push(A.prevent());
+				actions.push(A.backspaceListRemoveNested(range));
+				actions.push(A.historyPush(true));
+			} else {
+				let prev = formatEl.previousElementSibling || rangeEl.parentElement;
+				if (dom.check.isListCell(prev)) {
+					actions.push(A.prevent());
+
+					let prevLast = prev;
+					if (!prev.contains(formatEl) && dom.check.isListCell(prevLast) && dom.check.isList(prevLast.lastElementChild)) {
+						prevLast = /** @type {HTMLLIElement} */ (prevLast.lastElementChild.lastElementChild);
+						while (dom.check.isListCell(prevLast) && dom.check.isList(prevLast.lastElementChild)) {
+							prevLast = /** @type {HTMLLIElement} */ (prevLast.lastElementChild && prevLast.lastElementChild.lastElementChild);
+						}
+						prev = prevLast;
+					}
+
+					actions.push(A.backspaceListMergePrev(prev, formatEl, rangeEl));
+					actions.push(A.historyPush(true));
+				}
+			}
+
+			return true;
+		}
+
+		// detach range
+		if (!selectRange && range.startOffset === 0) {
+			let detach = true;
+			let comm = commonCon;
+			while (comm && comm !== rangeEl && !dom.check.isWysiwygFrame(comm)) {
+				if (comm.previousSibling) {
+					if (comm.previousSibling.nodeType === 1 || !dom.check.isZeroWidth(comm.previousSibling.textContent.trim())) {
+						detach = false;
+						break;
+					}
+				}
+				comm = comm.parentNode;
+			}
+
+			if (detach && rangeEl.parentNode) {
+				actions.push(A.prevent());
+				actions.push(A.formatRemoveBlock(rangeEl, dom.check.isListCell(formatEl) ? [formatEl] : null, null, false, false));
+				actions.push(A.historyPush(true));
+				return true;
+			}
+		}
+	}
+
+	// component
+	if (!selectRange && formatEl && (range.startOffset === 0 || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
+		const isList = dom.check.isListCell(formatEl);
+		const sel = selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : selectionNode;
+		const prev = (isList ? sel : formatEl).previousSibling;
+		// select file component
+		const ignoreZWS = isList || ((commonCon.nodeType === 3 || dom.check.isBreak(commonCon)) && !commonCon.previousSibling && range.startOffset === 0);
+		if (sel && (isList || !sel.previousSibling) && ((commonCon && component.is(commonCon.previousSibling)) || (ignoreZWS && component.is(prev)))) {
+			const fileComponentInfo = component.get(prev);
+			if (fileComponentInfo) {
+				actions.push(A.preventStop());
+				actions.push(A.backspaceComponentRemove(isList, sel, formatEl, fileComponentInfo));
+			} else if (component.is(prev)) {
+				actions.push(A.preventStop());
+				actions.push(A.domUtilsRemoveItem(prev));
+			}
+			return true;
+		}
+
+		// delete nonEditable
+		if (sel && dom.check.isNonEditable(sel.previousSibling)) {
+			actions.push(A.preventStop());
+			actions.push(A.domUtilsRemoveItem(sel.previousSibling));
+			return true;
+		}
+	}
+
+	return true;
+}

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

@@ -0,0 +1,126 @@
+import { dom } from '../../../helper';
+import { hardDelete, isUneditableNode } from '../effects/ruleHelpers';
+import { A } from '../actions';
+
+/**
+ * @this {void}
+ * @description Delete key down rule
+ * @param {__se__EventActions} actions - Action list
+ * @param {__se__EventPorts} ports - Ports for interacting with editor
+ * @param {__se__EventKeydownCtx} ctx - Context object
+ * @returns {boolean} Return false to stop the processing
+ */
+export function reduceDeleteDown(actions, ports, ctx) {
+	const { format, component } = ports;
+	const { range, selectionNode } = ctx;
+	let { formatEl } = ctx;
+
+	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+
+	actions.push(A.componentDeselect());
+	actions.push(A.cacheStyleNode());
+
+	if (selectRange && hardDelete(ports)) {
+		actions.push(A.preventStop());
+		return true;
+	}
+
+	if (!selectRange && format.isEdgeLine(range.endContainer, range.endOffset, 'end') && !formatEl.nextSibling) {
+		actions.push(A.preventStop());
+		return false;
+	}
+
+	// line delete
+	if (
+		format.isLine(formatEl) &&
+		selectRange &&
+		dom.check.isEdgePoint(range.endContainer, range.endOffset, 'end') &&
+		(!range.endContainer.nextSibling || dom.check.isZeroWidth(range.endContainer.nextSibling)) &&
+		format.getLine(range.startContainer) !== format.getLine(range.endContainer) &&
+		(format.isLine(formatEl.nextElementSibling) || dom.check.isListCell(formatEl))
+	) {
+		actions.push(A.preventStop());
+		actions.push(A.delFormatRemoveAndMove(range.endContainer, formatEl));
+		actions.push(A.historyPush(true));
+		return false;
+	}
+
+	// line component
+	if (!selectRange && formatEl && (range.endOffset === range.endContainer.textContent.length || selectionNode === formatEl)) {
+		const sel =
+			selectionNode === formatEl
+				? isUneditableNode(ports, range, false)
+				: dom.check.isElement(selectionNode.nextSibling)
+					? selectionNode.nextSibling
+					: dom.check.isEdgePoint(range.endContainer, range.endOffset)
+						? dom.query.getNextDeepestNode(range.endContainer, null)
+						: null;
+		if (component.is(sel)) {
+			const fileComponentInfo = component.get(sel);
+			if (fileComponentInfo) {
+				actions.push(A.preventStop());
+				actions.push(A.deleteComponentSelect(formatEl, fileComponentInfo));
+				return true;
+			}
+		}
+	}
+
+	// tag[contenteditable='false']
+	if (isUneditableNode(ports, range, false)) {
+		actions.push(A.preventStop());
+		return true;
+	}
+
+	// component
+	if (
+		(format.isLine(selectionNode) || selectionNode.nextSibling === null || (dom.check.isZeroWidth(selectionNode.nextSibling) && selectionNode.nextSibling.nextSibling === null)) &&
+		range.startOffset === selectionNode.textContent.length
+	) {
+		const nextEl = formatEl.nextElementSibling;
+		if (!nextEl) return true;
+
+		if (component.is(nextEl)) {
+			actions.push(A.prevent());
+			actions.push(A.deleteComponentSelectNext(formatEl, nextEl));
+			return true;
+		}
+	}
+
+	if (!selectRange && (dom.check.isEdgePoint(range.endContainer, range.endOffset) || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
+		const sel = selectionNode === formatEl ? formatEl.childNodes[range.startOffset] || selectionNode : selectionNode;
+		// delete nonEditable
+		if (sel && dom.check.isNonEditable(sel.nextSibling)) {
+			actions.push(A.preventStop());
+			actions.push(A.domUtilsRemoveItem(sel.nextSibling));
+			return true;
+		} else if (component.is(sel)) {
+			actions.push(A.preventStop());
+			actions.push(A.domUtilsRemoveItem(sel));
+			return true;
+		}
+	}
+
+	// format attributes
+	if (!selectRange && format.isEdgeLine(range.endContainer, range.endOffset, 'end')) {
+		if (format.isLine(formatEl.nextElementSibling)) {
+			actions.push(A.cacheFormatAttrsTemp(formatEl.attributes));
+		}
+	}
+
+	// nested list
+	formatEl = format.getLine(range.startContainer, null);
+	const rangeEl = format.getBlock(formatEl, null);
+	if (
+		dom.check.isListCell(formatEl) &&
+		dom.check.isList(rangeEl) &&
+		(selectionNode === formatEl ||
+			(selectionNode.nodeType === 3 &&
+				(!selectionNode.nextSibling || dom.check.isList(selectionNode.nextSibling)) &&
+				(format.getLine(range.startContainer, null) !== format.getLine(range.endContainer, null) ? rangeEl.contains(range.endContainer) : range.endOffset === selectionNode.textContent.length && range.collapsed)))
+	) {
+		actions.push(A.deleteListRemoveNested(range, formatEl, rangeEl));
+		return true;
+	}
+
+	return true;
+}

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

@@ -0,0 +1,144 @@
+import { dom } from '../../../helper';
+import { A } from '../actions';
+
+/**
+ * @this {void}
+ * @description Enter key down rule
+ * @param {__se__EventActions} actions - Action list
+ * @param {__se__EventPorts} ports - Ports for interacting with editor
+ * @param {__se__EventKeydownCtx} ctx - Context object
+ * @returns {boolean} Return false to stop the processing
+ */
+export function reduceEnterDown(actions, ports, ctx) {
+	const { format, char, selection } = ports;
+	const { frameOptions, range, formatEl, selectionNode, shift, e } = ctx;
+	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+
+	actions.push(A.componentDeselect());
+
+	const brBlock = format.getBrLine(selectionNode, null);
+	const rangeEl = format.getBlock(formatEl, null);
+
+	if (frameOptions.get('charCounter_type') === 'byte-html') {
+		let enterHTML = '';
+		if ((!shift && brBlock) || shift) {
+			enterHTML = '<br>';
+		} else {
+			enterHTML = '<' + formatEl.nodeName + '><br></' + formatEl.nodeName + '>';
+		}
+
+		if (!char.check(enterHTML)) {
+			actions.push(A.prevent());
+			return false;
+		}
+	}
+
+	if (!shift) {
+		const formatEndEdge = !range.endContainer.nextSibling && format.isEdgeLine(range.endContainer, range.endOffset, 'end');
+		const formatStartEdge = !range.startContainer.previousSibling && format.isEdgeLine(range.startContainer, range.startOffset, 'front');
+
+		// add default format line
+		if (formatEndEdge && (/^H[1-6]$/i.test(formatEl.nodeName) || /^HR$/i.test(formatEl.nodeName))) {
+			ports.enterPrevent(e);
+			actions.push(A.enterLineAddDefault(formatEl));
+			actions.push(A.enterScrollTo(range));
+			return true;
+		} else if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
+			// add default List line
+			const rangeEnt = selection.getRange();
+			if (dom.check.isEdgePoint(rangeEnt.endContainer, rangeEnt.endOffset) && dom.check.isList(selectionNode.nextSibling)) {
+				ports.enterPrevent(e);
+				actions.push(A.enterListAddItem(formatEl, selectionNode));
+				actions.push(A.enterScrollTo(range));
+				return true;
+			}
+
+			if (
+				(rangeEnt.commonAncestorContainer.nodeType === 3 ? !(/** @type {HTMLElement} */ (rangeEnt.commonAncestorContainer).nextElementSibling) : true) &&
+				dom.check.isZeroWidth(formatEl.innerText.trim()) &&
+				!dom.check.isListCell(formatEl.nextElementSibling)
+			) {
+				ports.enterPrevent(e);
+				actions.push(A.enterFormatExitEmpty(formatEl, rangeEl));
+				return true;
+			}
+		}
+
+		// br line | closure block exception
+		if (brBlock || (rangeEl === formatEl && format.isClosureBlock(rangeEl) && format.isLine(formatEl))) {
+			ports.enterPrevent(e);
+
+			const selectionFormat = selectionNode === brBlock;
+			const wSelection = selection.get();
+			const children = selectionNode.childNodes,
+				offset = wSelection.focusOffset,
+				prev = selectionNode.previousElementSibling,
+				next = selectionNode.nextSibling;
+
+			if (
+				!format.isClosureBrLine(brBlock) &&
+				children &&
+				((selectionFormat &&
+					range.collapsed &&
+					children.length - 1 <= offset + 1 &&
+					dom.check.isBreak(children[offset]) &&
+					(!children[offset + 1] || ((!children[offset + 2] || dom.check.isZeroWidth(children[offset + 2].textContent)) && children[offset + 1].nodeType === 3 && dom.check.isZeroWidth(children[offset + 1].textContent))) &&
+					offset > 0 &&
+					dom.check.isBreak(children[offset - 1])) ||
+					(!selectionFormat &&
+						dom.check.isZeroWidth(selectionNode.textContent) &&
+						dom.check.isBreak(prev) &&
+						(dom.check.isBreak(prev.previousSibling) || !dom.check.isZeroWidth(prev.previousSibling?.textContent)) &&
+						(!next || (!dom.check.isBreak(next) && dom.check.isZeroWidth(next.textContent)))))
+			) {
+				actions.push(A.enterFormatCleanBrAndZWS(selectionNode, selectionFormat, brBlock, children, offset));
+				actions.push(A.enterScrollTo(range));
+				return true;
+			}
+
+			if (selectionFormat) {
+				actions.push(A.enterFormatInsertBrHtml(brBlock, range, wSelection, offset));
+			} else {
+				actions.push(A.enterFormatInsertBrNode(wSelection));
+			}
+
+			actions.push(A.enterScrollTo(range));
+			return true;
+		}
+
+		// set format attrs - edge
+		if (range.collapsed && (formatStartEdge || formatEndEdge)) {
+			ports.enterPrevent(e);
+			actions.push(A.enterFormatBreakAtEdge(formatEl, selectionNode, formatStartEdge, formatEndEdge));
+			actions.push(A.enterScrollTo(range));
+			return true;
+		}
+
+		if (formatEl) {
+			actions.push(A.prevent());
+
+			/** @type {HTMLElement} */
+			if (selectRange) {
+				actions.push(A.enterFormatBreakWithSelection(formatEl, range, formatStartEdge, formatEndEdge));
+			} else {
+				actions.push(A.enterFormatBreakAtCursor(formatEl, range));
+			}
+
+			actions.push(A.enterScrollTo(range));
+			return true;
+		}
+	}
+
+	if (selectRange) {
+		actions.push(A.enterScrollTo(range));
+		return true;
+	}
+
+	if (rangeEl && dom.query.getParentElement(rangeEl, 'FIGCAPTION') && dom.query.getParentElement(rangeEl, dom.check.isList)) {
+		ports.enterPrevent(e);
+		actions.push(A.enterFigcaptionExitInList(formatEl));
+		actions.push(A.enterScrollTo(range));
+	}
+
+	return true;
+}

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

@@ -0,0 +1,29 @@
+import { dom } from '../../../helper';
+import { A } from '../actions';
+
+/**
+ * @this {void}
+ * @description Tab key down rule
+ * @param {__se__EventActions} actions - Action list
+ * @param {__se__EventPorts} _ports - Ports for interacting with editor
+ * @param {__se__EventKeydownCtx} ctx - Context object
+ * @returns {boolean} Return false to stop the processing
+ */
+export function reduceTabDown(actions, _ports, ctx) {
+	const { options, selectionNode, range, formatEl, ctrl, alt, shift } = ctx;
+
+	if (options.get('tabDisable')) {
+		return true;
+	}
+
+	actions.push(A.prevent());
+
+	if (ctrl || alt || dom.check.isWysiwygFrame(selectionNode)) {
+		return true;
+	}
+
+	actions.push(A.tabFormatIndent(range, formatEl, shift));
+	actions.push(A.historyPush(false));
+
+	return true;
+}