suneditor 3.1.3 → 3.2.0

package/src/core/config/contextProvider.js

@@ -154,7 +154,8 @@ export default class ContextProvider {
 			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('_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);

package/src/core/config/eventManager.js

@@ -11,6 +11,9 @@ class EventManager {
 	#frameContext;
 	#frameOptions;
 
+	/** @type {?import('../event/eventOrchestrator').default} */
+	#orchestrator = null;
+
 	/** @type {?SunEditor.Event.GlobalInfo} */
 	#geckoActiveEvent = null;
 
@@ -56,6 +59,28 @@ class EventManager {
 		};
 	}
 
+	/**
+	 * @internal
+	 * @description Bind the EventOrchestrator once it is constructed. Invoked by `coreKernel`
+	 * immediately after orchestrator creation so the public `applyTagEffect` method below can delegate.
+	 * @param {import('../event/eventOrchestrator').default} orchestrator
+	 */
+	_bindOrchestrator(orchestrator) {
+		this.#orchestrator = orchestrator;
+	}
+
+	/**
+	 * @description Re-run the toolbar/menu active-state pass against the given selection node (or the
+	 * current selection if `null`). Thin pass-through to {@link EventOrchestrator#applyTagEffect};
+	 * exposed on `$.eventManager` so modules/plugins can request an immediate sync after they mutate
+	 * `commandDispatcher.targets` (e.g. CommandMenu pushing newly-rendered rows).
+	 * @param {?Node} [selectionNode]
+	 * @returns {Node | undefined}
+	 */
+	applyTagEffect(selectionNode) {
+		return this.#orchestrator?.applyTagEffect(selectionNode);
+	}
+
 	/**
 	 * @description Register for an event.
 	 * - Only events registered with this method are unregistered or re-registered when methods such as 'setOptions', 'destroy' are called.
@@ -67,7 +92,14 @@ class EventManager {
 	 */
 	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 === _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;
@@ -103,7 +135,14 @@ class EventManager {
 		const useCapture = params.useCapture;
 
 		if (!target) return;
-		if (target === _w || target === _d || typeof target.length !== 'number' || target.nodeType || (!Array.isArray(target) && target.length < 1)) target = [target];
+		if (
+			target === _w ||
+			target === _d ||
+			typeof target.length !== 'number' ||
+			target.nodeType ||
+			(!Array.isArray(target) && target.length < 1)
+		)
+			target = [target];
 		if (target.length === 0) return;
 
 		for (let i = 0, len = target.length; i < len; i++) {

package/src/core/config/optionProvider.js

@@ -215,7 +215,10 @@ export default class OptionProvider {
 					const docHead = fc.get('_wd').head;
 					const links = docHead.getElementsByTagName('link');
 					while (links[0]) docHead.removeChild(links[0]);
-					const parseDocument = new DOMParser().parseFromString(converter._setIframeStyleLinks(newRootOptions.get('iframe_cssFileName')), 'text/html');
+					const parseDocument = new DOMParser().parseFromString(
+						converter._setIframeStyleLinks(newRootOptions.get('iframe_cssFileName')),
+						'text/html',
+					);
 					const newLinks = parseDocument.head.children;
 					const sTag = docHead.querySelector('style');
 					while (newLinks[0]) docHead.insertBefore(newLinks[0], sTag);
@@ -225,6 +228,22 @@ export default class OptionProvider {
 					fc.get('placeholder').textContent = newRootOptions.get('placeholder');
 				}
 
+				if (diff.has('placeholder_line')) {
+					const phLineText = newRootOptions.get('placeholder_line');
+					fc.set('placeholder_line', phLineText);
+
+					const marked = fc.get('wysiwyg').querySelector('.se-placeholder-line');
+					if (marked) {
+						if (phLineText) {
+							marked.setAttribute('data-se-placeholder-line', phLineText);
+						} else {
+							marked.classList.remove('se-placeholder-line');
+							marked.removeAttribute('data-se-placeholder-line');
+							if (!marked.getAttribute('class')) marked.removeAttribute('class');
+						}
+					}
+				}
+
 				// frame styles
 				ui.setEditorStyle(newRootOptions.get('editorStyle'), fc);
 
@@ -339,7 +358,9 @@ export default class OptionProvider {
 		for (let i = 0, len = keys.length, k; i < len; i++) {
 			k = keys[i];
 			if (OPTION_FIXED_FLAG[k] === 'fixed' || OPTION_FRAME_FIXED_FLAG[k] === 'fixed' || (plugins && plugins[k])) {
-				console.warn(`[SUNEDITOR.warn.resetOptions] The "[${root + k}]" option cannot be changed after the editor is created.`);
+				console.warn(
+					`[SUNEDITOR.warn.resetOptions] The "[${root + k}]" option cannot be changed after the editor is created.`,
+				);
 				keys.splice(i--, 1);
 				len--;
 			}

package/src/core/editor.js

@@ -44,7 +44,11 @@ class Editor {
 	 */
 	isEmpty(fc) {
 		const wysiwyg = (fc || this.$.frameContext).get('wysiwyg');
-		return dom.check.isZeroWidth(wysiwyg.textContent) && !wysiwyg.querySelector(this.$.options.get('allowedEmptyTags')) && (wysiwyg.innerText.match(/\n/g) || '').length <= 1;
+		return (
+			dom.check.isZeroWidth(wysiwyg.textContent) &&
+			!wysiwyg.querySelector(this.$.options.get('allowedEmptyTags')) &&
+			(wysiwyg.innerText.match(/\n/g) || '').length <= 1
+		);
 	}
 
 	/**
@@ -160,7 +164,9 @@ class Editor {
 		env._w.setTimeout(() => {
 			// Check if instance was destroyed (e.g., in SSR with dynamic imports mistake)
 			if (!this.$.context?.size) {
-				console.warn('[SUNEDITOR:E_INIT_FAIL] Editor instance was destroyed before initialization completed. Check if destroy() was called.');
+				console.warn(
+					'[SUNEDITOR:E_INIT_FAIL] Editor instance was destroyed before initialization completed. Check if destroy() was called.',
+				);
 				return;
 			}
 
@@ -169,8 +175,10 @@ class Editor {
 			// roots
 			this.$.contextProvider.applyToRoots((e) => {
 				// observer
-				if (this.#kernel._eventOrchestrator._wwFrameObserver) this.#kernel._eventOrchestrator._wwFrameObserver.observe(e.get('wysiwygFrame'));
-				if (this.#kernel._eventOrchestrator._toolbarObserver) this.#kernel._eventOrchestrator._toolbarObserver.observe(e.get('_toolbarShadow'));
+				if (this.#kernel._eventOrchestrator._wwFrameObserver)
+					this.#kernel._eventOrchestrator._wwFrameObserver.observe(e.get('wysiwygFrame'));
+				if (this.#kernel._eventOrchestrator._toolbarObserver)
+					this.#kernel._eventOrchestrator._toolbarObserver.observe(e.get('_toolbarShadow'));
 				// resource state
 				this.$.ui._syncFrameState(e);
 			});
@@ -195,12 +203,19 @@ class Editor {
 	#initWysiwygArea(e, value) {
 		// set content
 		e.get('wysiwyg').innerHTML =
-			this.$.html.clean(typeof value === 'string' ? value : (/^TEXTAREA$/i.test(e.get('originElement').nodeName) ? e.get('originElement').value : e.get('originElement').innerHTML) || '', {
-				forceFormat: true,
-				whitelist: null,
-				blacklist: null,
-				_freeCodeViewMode: this.$.options.get('freeCodeViewMode'),
-			}) || '<' + this.$.options.get('defaultLine') + '><br></' + this.$.options.get('defaultLine') + '>';
+			this.$.html.clean(
+				typeof value === 'string'
+					? value
+					: (/^TEXTAREA$/i.test(e.get('originElement').nodeName)
+							? e.get('originElement').value
+							: e.get('originElement').innerHTML) || '',
+				{
+					forceFormat: true,
+					whitelist: null,
+					blacklist: null,
+					_freeCodeViewMode: this.$.options.get('freeCodeViewMode'),
+				},
+			) || '<' + this.$.options.get('defaultLine') + '><br></' + this.$.options.get('defaultLine') + '>';
 
 		// char counter
 		if (e.has('charCounter')) e.get('charCounter').textContent = String(this.$.char.getLength());
@@ -299,15 +314,18 @@ class Editor {
 
 			// document type
 			if (e.get('documentTypeInner')) {
-				if (this.$.options.get('_rtl')) e.get('wrapper').appendChild(e.get('documentTypeInner'));
-				else e.get('wrapper').insertBefore(e.get('documentTypeInner'), e.get('wysiwygFrame'));
+				e.get('wrapper').insertBefore(e.get('documentTypeInner'), e.get('wysiwygFrame'));
 			}
 			if (e.get('documentTypePage')) {
-				if (this.$.options.get('_rtl')) e.get('wrapper').insertBefore(e.get('documentTypePage'), e.get('wysiwygFrame'));
-				else e.get('wrapper').appendChild(e.get('documentTypePage'));
+				e.get('wrapper').appendChild(e.get('documentTypePage'));
 				// page mirror
 				e.get('wrapper').appendChild(e.get('documentTypePageMirror'));
 			}
+
+			// block handle
+			if (e.get('blockHandleArea')) {
+				e.get('wrapper').insertBefore(e.get('blockHandleArea'), e.get('wysiwygFrame'));
+			}
 		});
 
 		if (iframePromises.length > 0) {

package/src/core/event/actions/index.js

@@ -102,7 +102,10 @@ export const A = {
 	 * @param {SunEditor.ComponentInfo} fileComponentInfo
 	 * @returns {Action}
 	 */
-	backspaceComponentSelect: (selectionNode, range, fileComponentInfo) => ({ t: 'backspace.component.select', p: { selectionNode, range, fileComponentInfo } }),
+	backspaceComponentSelect: (selectionNode, range, fileComponentInfo) => ({
+		t: 'backspace.component.select',
+		p: { selectionNode, range, fileComponentInfo },
+	}),
 	/**
 	 * @param {boolean} isList
 	 * @param {Node} sel
@@ -110,19 +113,41 @@ export const A = {
 	 * @param {SunEditor.ComponentInfo} fileComponentInfo
 	 * @returns {Action}
 	 */
-	backspaceComponentRemove: (isList, sel, formatEl, fileComponentInfo) => ({ t: 'backspace.component.remove', p: { isList, sel, formatEl, fileComponentInfo } }),
+	backspaceComponentRemove: (isList, sel, formatEl, fileComponentInfo) => ({
+		t: 'backspace.component.remove',
+		p: { isList, sel, formatEl, fileComponentInfo },
+	}),
 	/**
 	 * @param {Element} prev
 	 * @param {Element} formatEl
 	 * @param {Element} rangeEl
 	 * @returns {Action}
 	 */
-	backspaceListMergePrev: (prev, formatEl, rangeEl) => ({ t: 'backspace.list.mergePrev', p: { prev, formatEl, rangeEl } }),
+	backspaceListMergePrev: (prev, formatEl, rangeEl) => ({
+		t: 'backspace.list.mergePrev',
+		p: { prev, formatEl, rangeEl },
+	}),
 	/**
 	 * @param {Range} range
 	 * @returns {Action}
 	 */
 	backspaceListRemoveNested: (range) => ({ t: 'backspace.list.removeNested', p: { range } }),
+	/**
+	 * @param {Element} formatEl - empty line to remove
+	 * @param {Element} prev - previous (normal) line to receive the caret
+	 * @returns {Action}
+	 */
+	backspaceEmptyLineMergePrev: (formatEl, prev) => ({ t: 'backspace.emptyLine.mergePrev', p: { formatEl, prev } }),
+
+	/**
+	 * @param {Node} rowEndBr - the `<br>` the caret sits on (end of the empty row)
+	 * @param {Node} rowStartBr - the `<br>` that starts the empty row (removed to merge it up)
+	 * @returns {Action}
+	 */
+	backspaceBrLineRowMerge: (rowEndBr, rowStartBr) => ({
+		t: 'backspace.brline.rowMerge',
+		p: { rowEndBr, rowStartBr },
+	}),
 
 	// === delete ===
 	/**
@@ -130,7 +155,10 @@ export const A = {
 	 * @param {SunEditor.ComponentInfo} fileComponentInfo
 	 * @returns {Action}
 	 */
-	deleteComponentSelect: (formatEl, fileComponentInfo) => ({ t: 'delete.component.select', p: { formatEl, fileComponentInfo } }),
+	deleteComponentSelect: (formatEl, fileComponentInfo) => ({
+		t: 'delete.component.select',
+		p: { formatEl, fileComponentInfo },
+	}),
 	/**
 	 * @param {Element} nextEl
 	 * @returns {Action}
@@ -142,7 +170,22 @@ export const A = {
 	 * @param {Element} rangeEl
 	 * @returns {Action}
 	 */
-	deleteListRemoveNested: (range, formatEl, rangeEl) => ({ t: 'delete.list.removeNested', p: { range, formatEl, rangeEl } }),
+	deleteListRemoveNested: (range, formatEl, rangeEl) => ({
+		t: 'delete.list.removeNested',
+		p: { range, formatEl, rangeEl },
+	}),
+	/**
+	 * @param {Element} formatEl - empty line to remove
+	 * @param {Element} next - next (normal) line to receive the caret
+	 * @returns {Action}
+	 */
+	deleteEmptyLineMergeNext: (formatEl, next) => ({ t: 'delete.emptyLine.mergeNext', p: { formatEl, next } }),
+
+	/**
+	 * @param {Node} rowEndBr - the `<br>` the caret sits on (end of the empty row); removed to pull the next row up
+	 * @returns {Action}
+	 */
+	deleteBrLineRowMerge: (rowEndBr) => ({ t: 'delete.brline.rowMerge', p: { rowEndBr } }),
 
 	// === tab ===
 	/**
@@ -184,7 +227,10 @@ export const A = {
 	 * @param {number} offset
 	 * @returns {Action}
 	 */
-	enterFormatCleanBrAndZWS: (selectionNode, selectionFormat, brBlock, children, offset) => ({ t: 'enter.format.cleanBrAndZWS', p: { selectionNode, selectionFormat, brBlock, children, offset } }),
+	enterFormatCleanBrAndZWS: (selectionNode, selectionFormat, brBlock, children, offset) => ({
+		t: 'enter.format.cleanBrAndZWS',
+		p: { selectionNode, selectionFormat, brBlock, children, offset },
+	}),
 	/**
 	 * @param {Element} brBlock
 	 * @param {Range} range
@@ -192,12 +238,27 @@ export const A = {
 	 * @param {number} offset
 	 * @returns {Action}
 	 */
-	enterFormatInsertBrHtml: (brBlock, range, wSelection, offset) => ({ t: 'enter.format.insertBrHtml', p: { brBlock, range, wSelection, offset } }),
+	enterFormatInsertBrHtml: (brBlock, range, wSelection, offset) => ({
+		t: 'enter.format.insertBrHtml',
+		p: { brBlock, range, wSelection, offset },
+	}),
 	/**
 	 * @param {Selection} wSelection
 	 * @returns {Action}
 	 */
 	enterFormatInsertBrNode: (wSelection) => ({ t: 'enter.format.insertBrNode', p: { wSelection } }),
+	/**
+	 * @description Insert one empty row at the caret inside a normal brLine (e.g. PRE).
+	 * @param {Range} range Caret range captured at rule time.
+	 * @returns {Action}
+	 */
+	enterBrLineInsert: (range) => ({ t: 'enter.brline.insert', p: { range } }),
+	/**
+	 * @description Exit a normal brLine — drop its trailing empty rows and add a default line after it.
+	 * @param {Element} brBlock
+	 * @returns {Action}
+	 */
+	enterBrLineExit: (brBlock) => ({ t: 'enter.brline.exit', p: { brBlock } }),
 	/**
 	 * @param {Element} formatEl
 	 * @param {Node} selectionNode
@@ -206,7 +267,10 @@ export const A = {
 	 * @param {boolean} [bidiSwapped]
 	 * @returns {Action}
 	 */
-	enterFormatBreakAtEdge: (formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped) => ({ t: 'enter.format.breakAtEdge', p: { formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped } }),
+	enterFormatBreakAtEdge: (formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped) => ({
+		t: 'enter.format.breakAtEdge',
+		p: { formatEl, selectionNode, formatStartEdge, formatEndEdge, bidiSwapped },
+	}),
 	/**
 	 * @param {Element} formatEl
 	 * @param {Range} range
@@ -214,7 +278,10 @@ export const A = {
 	 * @param {boolean} formatEndEdge
 	 * @returns {Action}
 	 */
-	enterFormatBreakWithSelection: (formatEl, range, formatStartEdge, formatEndEdge) => ({ t: 'enter.format.breakWithSelection', p: { formatEl, range, formatStartEdge, formatEndEdge } }),
+	enterFormatBreakWithSelection: (formatEl, range, formatStartEdge, formatEndEdge) => ({
+		t: 'enter.format.breakWithSelection',
+		p: { formatEl, range, formatStartEdge, formatEndEdge },
+	}),
 	/**
 	 * @param {Element} formatEl
 	 * @param {Range} range

package/src/core/event/effects/common.registry.js

@@ -58,7 +58,8 @@ export default {
 	'selection.setRange': ({ ports }, { sc, so, ec, eo }) => ports.selection.setRange(sc, so, ec, eo),
 
 	/** @action formatRemoveBlock */
-	'format.removeBlock': ({ ports }, { rangeEl, selectedFormats, newBlockElement, shouldDelete, skipHistory }) => ports.format.removeBlock(rangeEl, { selectedFormats, newBlockElement, shouldDelete, skipHistory }),
+	'format.removeBlock': ({ ports }, { rangeEl, selectedFormats, newBlockElement, shouldDelete, skipHistory }) =>
+		ports.format.removeBlock(rangeEl, { selectedFormats, newBlockElement, shouldDelete, skipHistory }),
 
 	/** [helper] */