suneditor 3.0.0-rc.4 → 3.0.0

package/src/core/config/eventManager.js

@@ -1,4 +1,4 @@
-import { dom, numbers, env } from '../../helper';
+import { dom, env } from '../../helper';
 import { _DragHandle } from '../../modules/ui';
 
 const { _w, _d, NO_EVENT } = env;
@@ -54,9 +54,6 @@ class EventManager {
 
 			return NO_EVENT;
 		};
-
-		/** @type {HTMLInputElement} */
-		this.__focusTemp = contextProvider.carrierWrapper.querySelector('.__se__focus__temp__');
 	}
 
 	/**
@@ -64,7 +61,7 @@ class EventManager {
 	 * - 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 {*} listener Event handler
 	 * @param {boolean|AddEventListenerOptions} [useCapture] Event useCapture option
 	 * @return {?SunEditor.Event.Info} Registered event information
 	 */
@@ -85,7 +82,7 @@ class EventManager {
 		}
 
 		return {
-			target: len > 1 ? target : target[0],
+			target,
 			type,
 			listener,
 			useCapture,
@@ -106,7 +103,7 @@ class EventManager {
 		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 === _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++) {
@@ -120,7 +117,7 @@ class EventManager {
 	 * @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 {*} listener Event listener
 	 * @param {boolean|AddEventListenerOptions} [useCapture] Use event capture
 	 * @return {SunEditor.Event.GlobalInfo} Registered event information
 	 */
@@ -140,7 +137,7 @@ class EventManager {
 	 * @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 {*} [listener] Event listener
 	 * @param {boolean|AddEventListenerOptions} [useCapture] Use event capture
 	 * @returns {undefined|null} Success: `null`, Not found: `undefined`
 	 */

package/src/core/editor.js

@@ -224,7 +224,7 @@ class Editor {
 	 */
 	#init(options) {
 		this.$.pluginManager.init(options);
-		this.$.shortcuts._registerCustomShortcuts();
+		this.$.shortcuts._registerShortcuts();
 		this.$.commandDispatcher._initCommandButtons();
 		this.$.ui.init();
 	}

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

@@ -91,6 +91,11 @@ export const A = {
 	 * @returns {Action}
 	 */
 	backspaceFormatMaintain: (formatEl) => ({ t: 'backspace.format.maintain', p: { formatEl } }),
+	/**
+	 * @param {Element} formatEl - brLine element (e.g. PRE) to strip
+	 * @returns {Action}
+	 */
+	backspaceBrLineStrip: (formatEl) => ({ t: 'backspace.brline.strip', p: { formatEl } }),
 	/**
 	 * @param {Node} selectionNode
 	 * @param {Range} range

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

@@ -30,6 +30,31 @@ export default {
 
 	/** [backspace]  */
 
+	/** @action backspaceBrLineStrip — extract first line from brLine (PRE) */
+	'backspace.brline.strip': ({ ctx, ports }, { formatEl }) => {
+		const defaultTag = ctx.options.get('defaultLine');
+		const parent = formatEl.parentNode;
+		const newLine = dom.utils.createElement(defaultTag);
+
+		while (formatEl.firstChild && !dom.check.isBreak(formatEl.firstChild)) {
+			newLine.appendChild(formatEl.firstChild);
+		}
+
+		if (formatEl.firstChild && dom.check.isBreak(formatEl.firstChild)) {
+			formatEl.removeChild(formatEl.firstChild);
+		}
+
+		if (!newLine.firstChild) newLine.innerHTML = '<br>';
+		parent.insertBefore(newLine, formatEl);
+
+		if (!formatEl.firstChild || (!formatEl.textContent.trim() && !formatEl.querySelector('br'))) {
+			parent.removeChild(formatEl);
+		}
+
+		const focusNode = newLine.firstChild;
+		ports.selection.setRange(focusNode, 0, focusNode, 0);
+	},
+
 	/** @action backspaceFormatMaintain */
 	'backspace.format.maintain': ({ ctx }, { formatEl }) => {
 		if (formatEl.nodeName.toUpperCase() === ctx.options.get('defaultLine').toUpperCase()) {

package/src/core/event/eventOrchestrator.js

@@ -106,6 +106,9 @@ class EventOrchestrator extends KernelInjector {
 		this.__eventDoc = null;
 		/** @type {string} */
 		this.__secopy = null;
+
+		/** @type {HTMLInputElement} */
+		this.__focusTemp = this.#contextProvider.carrierWrapper.querySelector('.__se__focus__temp__');
 	}
 
 	/**
@@ -343,6 +346,9 @@ class EventOrchestrator extends KernelInjector {
 					entries.forEach((e) => {
 						this.#ui._emitResizeEvent(this.$.frameRoots.get(e.target.getAttribute('data-root-key')), -1, e);
 					});
+					if (this.#store.mode.isInline && this.#store.mode.isBottom) {
+						this.#toolbar._resetSticky();
+					}
 				}, 0);
 			});
 		}
@@ -443,10 +449,35 @@ class EventOrchestrator extends KernelInjector {
 			this.#eventManager.addEvent(codeArea, 'keyup', cvAuthHeight, false);
 			this.#eventManager.addEvent(codeArea, 'paste', cvAuthHeight, false);
 
+			/** code view tab key */
+			if (!this.#options.get('tabDisable')) {
+				this.#eventManager.addEvent(codeArea, 'keydown', InsertTab, false);
+			}
+
 			/** code view numbers */
 			if (codeNumbers) this.#eventManager.addEvent(codeArea, 'scroll', this.$.viewer._scrollLineNumbers.bind(codeArea, codeNumbers), false);
 		}
 
+		/** markdown view area */
+		const markdownArea = fc.get('markdown');
+		if (markdownArea) {
+			this.#eventManager.addEvent(markdownArea, 'mousedown', this.#OnFocus_markdown.bind(this, fc), false);
+
+			const mdNumbers = fc.get('markdownNumbers');
+			const mdAutoHeight = this.$.viewer._markdownViewAutoHeight.bind(this.$.viewer, markdownArea, mdNumbers, this.$.frameOptions.get('height') === 'auto');
+
+			this.#eventManager.addEvent(markdownArea, 'keydown', mdAutoHeight, false);
+			this.#eventManager.addEvent(markdownArea, 'keyup', mdAutoHeight, false);
+			this.#eventManager.addEvent(markdownArea, 'paste', mdAutoHeight, false);
+
+			/** markdown view tab key */
+			if (!this.#options.get('tabDisable')) {
+				this.#eventManager.addEvent(markdownArea, 'keydown', InsertTab, false);
+			}
+
+			if (mdNumbers) this.#eventManager.addEvent(markdownArea, 'scroll', this.$.viewer._scrollMarkdownLineNumbers.bind(markdownArea, mdNumbers), false);
+		}
+
 		if (fc.has('statusbar')) this.__addStatusbarEvent(fc, fc.get('options'));
 
 		const OnScrollAbs = this.#OnScroll_Abs.bind(this);
@@ -636,7 +667,16 @@ class EventOrchestrator extends KernelInjector {
 	 * @param {FocusEvent} event - Focus event object
 	 */
 	__postBlurEvent(frameContext, event) {
-		if (this.#store.mode.isInline || this.#store.mode.isBalloon) this._hideToolbar();
+		if (this.#store.mode.isInline) {
+			// Defer hide — prevents race with deferred focus show (setTimeout in #OnFocus_wysiwyg)
+			_w.setTimeout(() => {
+				if (!this.#store.get('hasFocus')) {
+					this._hideToolbar();
+				}
+			}, 0);
+		} else if (this.#store.mode.isBalloon) {
+			this._hideToolbar();
+		}
 		if (this.#store.mode.isSubBalloon) this._hideToolbar_sub();
 
 		// user event
@@ -699,7 +739,9 @@ class EventOrchestrator extends KernelInjector {
 		this.#ui._iframeAutoHeight(fc);
 
 		if (this.#toolbar.isSticky) {
-			this.#context.get('toolbar_main').style.width = fc.get('topArea').offsetWidth - 2 + 'px';
+			if (!this.#toolbar.isCSSSticky) {
+				this.#context.get('toolbar_main').style.width = fc.get('topArea').offsetWidth - 2 + 'px';
+			}
 			this.#toolbar._resetSticky();
 		}
 	}
@@ -939,6 +981,31 @@ class EventOrchestrator extends KernelInjector {
 		dom.utils.addClass(this.$.commandDispatcher.targets.get('codeView'), 'active');
 		this.#ui._toggleCodeViewButtons(true);
 	}
+
+	/**
+	 * @param {SunEditor.FrameContext} frameContext - frame context object
+	 */
+	#OnFocus_markdown(frameContext) {
+		this.$.facade.changeFrameContext(frameContext.get('key'));
+		dom.utils.addClass(this.$.commandDispatcher.targets.get('markdownView'), 'active');
+		this.#ui._toggleCodeViewButtons(true);
+	}
+}
+
+/**
+ * @description Inserts a tab character at the cursor position in a textarea
+ * @param {KeyboardEvent} e
+ */
+function InsertTab(e) {
+	if (e.key !== 'Tab') return;
+	e.preventDefault();
+
+	const textarea = /** @type {HTMLTextAreaElement} */ (e.target);
+	const start = textarea.selectionStart;
+	const end = textarea.selectionEnd;
+
+	textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end);
+	textarea.selectionStart = textarea.selectionEnd = start + 1;
 }
 
 export default EventOrchestrator;

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

@@ -89,6 +89,7 @@ export async function OnClick_wysiwyg(fc, e) {
 	// plugin event
 	if ((await this._callPluginEventAsync('onClick', { frameContext: fc, event: e })) === false) return;
 
+	// component
 	const componentInfo = this.$.component.get(eventTarget);
 	if (componentInfo) {
 		e.preventDefault();

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

@@ -59,7 +59,7 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 		!selectionNode.previousSibling &&
 		!dom.check.isListCell(formatEl) &&
 		format.isLine(formatEl) &&
-		(!format.isBrLine(formatEl) || format.isClosureBrLine(formatEl))
+		(!format.isBrLine(formatEl) || format.isClosureBrLine(formatEl) || dom.check.isWysiwygFrame(formatEl.parentNode))
 	) {
 		// closure range
 		if (format.isClosureBlock(formatEl.parentNode)) {
@@ -67,6 +67,14 @@ export function reduceBackspaceDown(actions, ports, ctx) {
 			return false;
 		}
 
+		// brLine (pre): strip tag to default line(s)
+		if (format.isBrLine(formatEl) && dom.check.isWysiwygFrame(formatEl.parentNode)) {
+			actions.push(A.preventStop());
+			actions.push(A.backspaceBrLineStrip(formatEl));
+			actions.push(A.historyPush(true));
+			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());

package/src/core/kernel/coreKernel.js

@@ -30,6 +30,7 @@ import History from '../logic/shell/history';
 import Toolbar from '../logic/panel/toolbar';
 import Menu from '../logic/panel/menu';
 import Viewer from '../logic/panel/viewer';
+import Finder from '../logic/panel/finder';
 
 // L4: event
 import EventOrchestrator from '../event/eventOrchestrator';
@@ -78,6 +79,7 @@ import EventOrchestrator from '../event/eventOrchestrator';
  * @property {import('../logic/panel/toolbar').default} subToolbar - L3: Sub-toolbar renderer
  * @property {import('../logic/panel/menu').default} menu - L3: Menu renderer
  * @property {import('../logic/panel/viewer').default} viewer - L3: View mode handler
+ * @property {import('../logic/panel/finder').default} finder - L3: Finder handler
  */
 
 /**
@@ -218,6 +220,7 @@ class CoreKernel {
 		}
 		this.#logic.set('menu', new Menu(this));
 		this.#logic.set('viewer', new Viewer(this));
+		this.#logic.set('finder', new Finder(this));
 
 		// history (last — closure captures all L3 modules above)
 		this.#logic.set('history', History(this));
@@ -268,6 +271,7 @@ class CoreKernel {
 			subToolbar: this.#logic.get('subToolbar'),
 			menu: this.#logic.get('menu'),
 			viewer: this.#logic.get('viewer'),
+			finder: this.#logic.get('finder'),
 		});
 	}
 

package/src/core/kernel/store.js

@@ -28,6 +28,7 @@ import { numbers } from '../../helper';
  * @property {boolean} isBalloonAlways - Whether the toolbar is in `balloon-always` mode (always visible as floating).
  * @property {boolean} isSubBalloon - Whether the sub-toolbar is in `balloon` mode.
  * @property {boolean} isSubBalloonAlways - Whether the sub-toolbar is in `balloon-always` mode.
+ * @property {boolean} isBottom - Whether the toolbar is placed at the bottom of the editor (`classic:bottom`, `inline:bottom`).
  */
 
 /**
@@ -64,6 +65,7 @@ class Store {
 			isBalloonAlways: /balloon-always/i.test(mode),
 			isSubBalloon: /balloon/i.test(subMode),
 			isSubBalloonAlways: /balloon-always/i.test(subMode),
+			isBottom: !!options.get('_toolbar_bottom'),
 		};
 
 		this.#state = {

package/src/core/logic/dom/char.js

@@ -27,6 +27,8 @@ class Char {
 	 * @description Returns `false` if char count is greater than "frameOptions.get('charCounter_max')" when "html" is added to the current editor.
 	 * @param {Node|string} html Element node or String.
 	 * @returns {boolean}
+	 * @example
+	 * const canInsert = editor.$.char.check('<strong>new text</strong>');
 	 */
 	check(html) {
 		const maxCharCount = this.#frameOptions.get('charCounter_max');
@@ -45,6 +47,9 @@ class Char {
 	 * - If [content] is `undefined`, get the current editor's number of characters or binary data size.
 	 * @param {string} [content] Content to count. (defalut: this.#frameContext.get('wysiwyg'))
 	 * @returns {number}
+	 * @example
+	 * const currentLength = editor.$.char.getLength();
+	 * const textLength = editor.$.char.getLength('Hello World');
 	 */
 	getLength(content) {
 		if (typeof content !== 'string') {
@@ -57,6 +62,8 @@ class Char {
 	 * @descriptionGets Get the length in bytes of a string.
 	 * @param {string} text String text
 	 * @returns {number}
+	 * @example
+	 * const bytes = editor.$.char.getByteLength('Hello 世界'); // 12
 	 */
 	getByteLength(text) {
 		if (!text || !text.toString) return 0;
@@ -105,6 +112,10 @@ class Char {
 	 * @param {string} inputText Text added.
 	 * @param {boolean} _fromInputEvent Whether the test is triggered from an input event.
 	 * @returns {boolean}
+	 * @example
+	 * if (!editor.$.char.test(inputData, true)) {
+	 *   e.preventDefault();
+	 * }
 	 */
 	test(inputText, _fromInputEvent) {
 		let nextCharCount = 0;

package/src/core/logic/dom/format.js

@@ -94,6 +94,9 @@ class Format {
 	 * @param {Node} node Reference node.
 	 * @param {?(current: Node) => boolean} [validation] Additional validation function.
 	 * @returns {HTMLElement|null}
+	 * @example
+	 * const line = editor.$.format.getLine(editor.$.selection.getNode());
+	 * const lineWithFilter = editor.$.format.getLine(node, (el) => el.nodeName !== 'LI');
 	 */
 	getLine(node, validation) {
 		if (!node) return null;
@@ -125,6 +128,8 @@ class Format {
 	/**
 	 * @description Replace the br-line tag of the current selection.
 	 * @param {Node} element BR-Line element (PRE..)
+	 * @example
+	 * editor.$.format.setBrLine(document.createElement('pre'));
 	 */
 	setBrLine(element) {
 		if (!this.isBrLine(element)) {
@@ -195,6 +200,8 @@ class Format {
 	 * @param {Node} element Reference node.
 	 * @param {?(current: Node) => boolean} [validation] Additional validation function.
 	 * @returns {HTMLBRElement|null}
+	 * @example
+	 * const brLine = editor.$.format.getBrLine(editor.$.selection.getNode());
 	 */
 	getBrLine(element, validation) {
 		if (!element) return null;
@@ -245,6 +252,8 @@ class Format {
 	 * @param {Node} element Reference node.
 	 * @param {?(current: Node) => boolean} [validation] Additional validation function.
 	 * @returns {HTMLElement|null}
+	 * @example
+	 * const block = editor.$.format.getBlock(editor.$.selection.getNode());
 	 */
 	getBlock(element, validation) {
 		if (!element) return null;
@@ -777,6 +786,9 @@ class Format {
 	 * @description It is judged whether it is a node related to the text style.
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isTextStyleNode('STRONG'); // true
+	 * editor.$.format.isTextStyleNode('P'); // false
 	 */
 	isTextStyleNode(element) {
 		return typeof element === 'string' ? this.#textStyleTagsCheck.test(element) : element?.nodeType === 1 && this.#textStyleTagsCheck.test(element.nodeName);
@@ -788,6 +800,9 @@ class Format {
 	 * - `line` element also contain `brLine` element
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isLine(document.createElement('p')); // true
+	 * editor.$.format.isLine('SPAN'); // false
 	 */
 	isLine(element) {
 		return typeof element === 'string'
@@ -812,6 +827,8 @@ class Format {
 	 * ※ Entering the Enter key in the space on the last line ends `brLine` and appends `line`.
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isBrLine(document.createElement('pre')); // true
 	 */
 	isBrLine(element) {
 		return (
@@ -828,6 +845,9 @@ class Format {
 	 * - `block` is wrap the `line` and `component`
 	 * @param {Node|string} element The node to check
 	 * @returns {element is HTMLElement}
+	 * @example
+	 * editor.$.format.isBlock(document.createElement('blockquote')); // true
+	 * editor.$.format.isBlock(document.createElement('ul')); // true
 	 */
 	isBlock(element) {
 		return typeof element === 'string'
@@ -871,6 +891,8 @@ class Format {
 	 * @description Returns a `line` array from selected range.
 	 * @param {?(current: Node) => boolean} [validation] The validation function. (Replaces the default validation `format.isLine(current)`)
 	 * @returns {Array<HTMLElement>}
+	 * @example
+	 * const selectedLines = editor.$.format.getLines();
 	 */
 	getLines(validation) {
 		if (!this.#$.selection.resetRangeToTextNode()) return [];

package/src/core/logic/dom/html.js

@@ -1,4 +1,4 @@
-import { dom, converter, numbers, unicode, clipboard, env } from '../../../helper';
+import { dom, converter, markdown, numbers, unicode, clipboard, env } from '../../../helper';
 
 const { _d } = env;
 const REQUIRED_DATA_ATTRS = 'data-se-[^\\s]+';
@@ -293,7 +293,7 @@ class HTML {
 			for (const [key, value] of Object.entries(attrs)) {
 				// Block event handler attributes and validate src protocol
 				if (/^on/i.test(key)) continue;
-				if (key === 'src' && !_SAFE_URL_PROTOCOL.test(String(value).replace(/[\s\r\n\t]+/g, ''))) continue;
+				if (key === 'src' && !_isSafeURL(String(value))) continue;
 				iframe.setAttribute(key, value);
 			}
 
@@ -1107,6 +1107,9 @@ class HTML {
 	 * @param {boolean} [options.includeFullPage=false] Return only the content of the body without headers when the `iframe_fullPage` option is `true`
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
 	 * @returns {string|Object<*, string>}
+	 * @example
+	 * const html = editor.$.html.get();
+	 * const htmlWithFrame = editor.$.html.get({ withFrame: true });
 	 */
 	get({ withFrame, includeFullPage, rootKey } = {}) {
 		if (!rootKey) rootKey = [this.#store.get('rootKey')];
@@ -1146,6 +1149,9 @@ class HTML {
 				emptyCells[j].innerHTML = '<br>';
 			}
 
+			// output: wrap code blocks <pre class="language-xxx"> → <pre><code class="language-xxx">
+			this.#wrapPreCode(renderHTML);
+
 			const content = renderHTML.innerHTML;
 			if (this.#frameOptions.get('iframe_fullPage')) {
 				if (includeFullPage) {
@@ -1170,6 +1176,9 @@ class HTML {
 	 * @param {string} html HTML string
 	 * @param {Object} [options] Options
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
+	 * @example
+	 * editor.$.html.set('<p>New content</p>');
+	 * editor.$.html.set(html, { rootKey: 'header' });
 	 */
 	set(html, { rootKey } = {}) {
 		this.#$.ui.offCurrentController();
@@ -1182,7 +1191,10 @@ class HTML {
 		for (let i = 0; i < rootKey.length; i++) {
 			this.#$.facade.changeFrameContext(rootKey[i]);
 
-			if (!this.#frameContext.get('isCodeView')) {
+			if (this.#frameContext.get('isMarkdownView')) {
+				const json = converter.htmlToJson(convertValue);
+				this.#frameContext.get('markdown').value = markdown.jsonToMarkdown(json);
+			} else if (!this.#frameContext.get('isCodeView')) {
 				this.#frameContext.get('wysiwyg').innerHTML = convertValue;
 				this.#$.pluginManager.resetFileInfo();
 				this.#$.history.push(false, rootKey[i]);
@@ -1209,7 +1221,10 @@ class HTML {
 			this.#$.facade.changeFrameContext(rootKey[i]);
 			const convertValue = this.clean(html, { forceFormat: true, whitelist: null, blacklist: null });
 
-			if (!this.#frameContext.get('isCodeView')) {
+			if (this.#frameContext.get('isMarkdownView')) {
+				const json = converter.htmlToJson(convertValue);
+				this.#frameContext.get('markdown').value += '\n' + markdown.jsonToMarkdown(json);
+			} else if (!this.#frameContext.get('isCodeView')) {
 				const temp = dom.utils.createElement('DIV', null, convertValue);
 				const children = Array.from(temp.children);
 				for (let j = 0, jLen = children.length; j < jLen; j++) {
@@ -1229,6 +1244,9 @@ class HTML {
 	 * @param {boolean} [options.withFrame=false] Gets the current content with containing parent `div.sun-editor-editable` (`<div class="sun-editor-editable">{content}</div>`).
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
 	 * @returns {Object<string, *>} JSON data
+	 * @example
+	 * const json = editor.$.html.getJson();
+	 * const jsonWithFrame = editor.$.html.getJson({ withFrame: true });
 	 */
 	getJson({ withFrame, rootKey } = {}) {
 		return converter.htmlToJson(this.get({ withFrame, rootKey }));
@@ -1236,9 +1254,16 @@ class HTML {
 
 	/**
 	 * @description Sets the JSON data to the editor content
+	 * (see @link converter.jsonToHtml)
 	 * @param {Object<string, *>} jsdonData HTML string
 	 * @param {Object} [options] Options
 	 * @param {number|Array<number>} [options.rootKey=null] Root index
+	 * @example
+	 * const html = editor.$.html.setJson({
+	 *   type: 'element', tag: 'p', attributes: { class: 'txt' },
+	 *   children: [{ type: 'text', content: 'Hello' }],
+	 * });
+	 * // '<p class="txt">Hello</p>'
 	 */
 	setJson(jsdonData, { rootKey } = {}) {
 		this.set(converter.jsonToHtml(jsdonData), { rootKey });
@@ -1505,6 +1530,9 @@ class HTML {
 					}
 				}
 
+				// code block: unwrap <pre><code class="language-xxx"> → <pre class="language-xxx">
+				if (current.nodeName === 'PRE') this.#unwrapPreCode(current);
+
 				const nrtag = !dom.query.getParentElement(current, dom.check.isExcludeFormat);
 
 				// formatFilter
@@ -1984,13 +2012,58 @@ class HTML {
 			this.#cleanStyleRegExpMap.clear();
 		}
 	}
+
+	/**
+	 * @description Input: unwrap `<pre><code class="language-xxx">` → `<pre class="language-xxx">`
+	 * @param {HTMLElement} pre
+	 */
+	#unwrapPreCode(pre) {
+		if (pre.children.length !== 1 || pre.firstElementChild?.nodeName !== 'CODE') return;
+
+		const codeEl = pre.firstElementChild;
+		const langMatch = (codeEl.className || '').match(/language-(\S+)/);
+
+		if (langMatch) {
+			dom.utils.addClass(pre, 'language-' + langMatch[1]);
+			pre.setAttribute('data-se-lang', langMatch[1]);
+		}
+
+		while (codeEl.firstChild) {
+			pre.insertBefore(codeEl.firstChild, codeEl);
+		}
+
+		pre.removeChild(codeEl);
+	}
+
+	/**
+	 * @description Output: wrap `<pre class="language-xxx">` → `<pre><code class="language-xxx">`
+	 * @param {HTMLElement} container
+	 */
+	#wrapPreCode(container) {
+		const preEls = container.querySelectorAll('pre[class*="language-"]');
+
+		for (let j = 0, jlen = preEls.length, pre, lang, codeEl; j < jlen; j++) {
+			pre = preEls[j];
+			lang = (pre.className.match(/language-(\S+)/) || [])[1];
+			if (!lang) continue;
+
+			codeEl = dom.utils.createElement('CODE', { class: 'language-' + lang });
+			while (pre.firstChild) {
+				codeEl.appendChild(pre.firstChild);
+			}
+
+			pre.appendChild(codeEl);
+			pre.className = pre.className.replace(/\s*language-\S+/g, '').trim();
+			pre.removeAttribute('data-se-lang');
+		}
+	}
 }
 
 /** Module-level regex constants */
 // #CleanElements
 const _RE_XML_NS_TAG = /^<[a-z0-9]+:[a-z0-9]+/i;
 const _RE_TAG_NAME = /(?!<)[a-zA-Z0-9-]+/;
-const _RE_ON_HANDLER = /\s(?:on[a-z]+)\s*=\s*(")[^"]*\1/gi;
+const _RE_ON_HANDLER = /\s(?:on[a-z]+)\s*=\s*(?:(["'])[^"']*\1|\S+)/gi;
 const _RE_STYLE_EQ = /style=/i;
 const _RE_STYLE_ATTR = /style\s*=\s*(?:"|')[^"']*(?:"|')/;
 const _RE_LEADING_SPACE = /^\s/;
@@ -2013,20 +2086,62 @@ const _RE_SPAN = /^span$/i;
 
 // _isSafeAttribute
 const _SAFE_URL_PROTOCOL = /^(?:https?|ftps?|mailto|tel|blob|sms|geo|webcal|callto):|^[#/]|^data:image\//i;
-const _URL_ATTR_PATTERN = /^(?:href|src)\s*=\s*(?:'|"|\s)*/i;
-const _RE_ATTR_VALUE = /=\s*(?:"|'|)\s*([^"'\s>]*)/;
-const _RE_WHITESPACE = /[\s\r\n\t]+/g;
-const _RE_HTML_ENTITY = /&(#x?[0-9a-f]+|[a-z]+);/gi;
+const _URL_ATTR_PATTERN = /^(?:href|src)\s*=/i;
+const _RE_ATTR_VALUE = /=\s*(?:"([^"]*)"|'([^']*)'|(\S+))/;
 const _RE_COLON = /:/i;
 
+/**
+ * @description Normalize a URL by decoding all HTML entities, URL-encoded characters,
+ * and stripping whitespace/control characters. Used to detect obfuscated dangerous protocols.
+ * e.g. `java&#x09;script:`, `java%09script:`, `&#106;avascript:`
+ * @param {string} url Raw URL string
+ * @returns {string} Normalized URL
+ */
+function _normalizeURL(url) {
+	// Decode HTML entities (&#x09; &#9; etc.) — repeat to handle nested encoding (e.g. &#38;#x6a; → &#x6a; → j)
+	let prev,
+		limit = 5;
+	do {
+		prev = url;
+		url = url.replace(/&(#x([0-9a-f]+)|#([0-9]+)|([a-z]+));/gi, (_, __, hex, dec) => {
+			if (hex) return String.fromCharCode(parseInt(hex, 16));
+			if (dec) return String.fromCharCode(parseInt(dec, 10));
+			return '';
+		});
+	} while (url !== prev && --limit);
+
+	// Decode URL-encoded characters (%09, %0a, etc.)
+	try {
+		url = decodeURIComponent(url);
+	} catch {
+		// malformed URI — keep as is
+	}
+
+	// Strip all whitespace and control characters (U+0000–U+0020)
+	// eslint-disable-next-line no-control-regex -- intentional: strip control chars used to bypass protocol detection
+	url = url.replace(/[\u0000-\u0020]+/g, '');
+
+	return url;
+}
+
+/**
+ * @description Check if a URL is safe (matches the allowed protocol whitelist).
+ * @param {string} url Raw URL string
+ * @returns {boolean}
+ */
+function _isSafeURL(url) {
+	const normalized = _normalizeURL(url);
+	return _SAFE_URL_PROTOCOL.test(normalized) || !_RE_COLON.test(normalized);
+}
+
 function _isSafeAttribute(attr) {
 	if (!_URL_ATTR_PATTERN.test(attr)) return true;
 
 	const urlMatch = attr.match(_RE_ATTR_VALUE);
 	if (!urlMatch) return true;
 
-	const url = urlMatch[1].replace(_RE_WHITESPACE, '').replace(_RE_HTML_ENTITY, '');
-	return _SAFE_URL_PROTOCOL.test(url) || !_RE_COLON.test(url);
+	const url = urlMatch[1] ?? urlMatch[2] ?? urlMatch[3] ?? '';
+	return _isSafeURL(url);
 }
 
 /**