suneditor 3.1.4 → 3.2.1

package/src/plugins/modal/video/index.js

@@ -108,7 +108,10 @@ class Video extends PluginModal {
 	 */
 	static #checkContentType(url) {
 		url = url?.toLowerCase() || '';
-		if (this.#extensions.some((ext) => url.endsWith(ext)) || this.#urlPatterns.some((pattern) => pattern.test(url))) {
+		if (
+			this.#extensions.some((ext) => url.endsWith(ext)) ||
+			this.#urlPatterns.some((pattern) => pattern.test(url))
+		) {
 			return true;
 		}
 
@@ -157,17 +160,33 @@ class Video extends PluginModal {
 		this.pluginOptions = {
 			canResize: pluginOptions.canResize === undefined ? true : pluginOptions.canResize,
 			showHeightInput: pluginOptions.showHeightInput === undefined ? true : !!pluginOptions.showHeightInput,
-			defaultWidth: !pluginOptions.defaultWidth || !numbers.get(pluginOptions.defaultWidth, 0) ? '' : numbers.is(pluginOptions.defaultWidth) ? pluginOptions.defaultWidth + 'px' : pluginOptions.defaultWidth,
-			defaultHeight: !pluginOptions.defaultHeight || !numbers.get(pluginOptions.defaultHeight, 0) ? '' : numbers.is(pluginOptions.defaultHeight) ? pluginOptions.defaultHeight + 'px' : pluginOptions.defaultHeight,
+			defaultWidth:
+				!pluginOptions.defaultWidth || !numbers.get(pluginOptions.defaultWidth, 0)
+					? ''
+					: numbers.is(pluginOptions.defaultWidth)
+						? pluginOptions.defaultWidth + 'px'
+						: pluginOptions.defaultWidth,
+			defaultHeight:
+				!pluginOptions.defaultHeight || !numbers.get(pluginOptions.defaultHeight, 0)
+					? ''
+					: numbers.is(pluginOptions.defaultHeight)
+						? pluginOptions.defaultHeight + 'px'
+						: pluginOptions.defaultHeight,
 			percentageOnlySize: !!pluginOptions.percentageOnlySize,
 			createFileInput: !!pluginOptions.createFileInput,
-			createUrlInput: pluginOptions.createUrlInput === undefined || !pluginOptions.createFileInput ? true : pluginOptions.createUrlInput,
+			createUrlInput:
+				pluginOptions.createUrlInput === undefined || !pluginOptions.createFileInput
+					? true
+					: pluginOptions.createUrlInput,
 			uploadUrl: typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null,
 			uploadHeaders: pluginOptions.uploadHeaders || null,
 			uploadSizeLimit: numbers.get(pluginOptions.uploadSizeLimit, 0),
 			uploadSingleSizeLimit: numbers.get(pluginOptions.uploadSingleSizeLimit, 0),
 			allowMultiple: !!pluginOptions.allowMultiple,
-			acceptedFormats: typeof pluginOptions.acceptedFormats !== 'string' || pluginOptions.acceptedFormats.trim() === '*' ? 'video/*' : pluginOptions.acceptedFormats.trim() || 'video/*',
+			acceptedFormats:
+				typeof pluginOptions.acceptedFormats !== 'string' || pluginOptions.acceptedFormats.trim() === '*'
+					? 'video/*'
+					: pluginOptions.acceptedFormats.trim() || 'video/*',
 			defaultRatio: numbers.get(pluginOptions.defaultRatio, 4) || 0.5625,
 			showRatioOption: pluginOptions.showRatioOption === undefined ? true : !!pluginOptions.showRatioOption,
 			ratioOptions: !pluginOptions.ratioOptions ? null : pluginOptions.ratioOptions,
@@ -181,7 +200,11 @@ class Video extends PluginModal {
 		// create HTML
 		const sizeUnit = this.pluginOptions.percentageOnlySize ? '%' : 'px';
 		const modalEl = CreateHTML_modal(this.$, this.pluginOptions);
-		const figureControls = pluginOptions.controls || (!this.pluginOptions.canResize ? [['align', 'edit', 'copy', 'remove']] : [['resize_auto,75,50', 'align', 'edit', 'revert', 'copy', 'remove']]);
+		const figureControls =
+			pluginOptions.controls ||
+			(!this.pluginOptions.canResize
+				? [['align', 'edit', 'copy', 'remove']]
+				: [['resize_auto,75,50', 'align', 'edit', 'revert', 'copy', 'remove']]);
 
 		// show align
 		if (!figureControls.some((subArray) => subArray.includes('align'))) modalEl.alignForm.style.display = 'none';
@@ -189,7 +212,10 @@ class Video extends PluginModal {
 		// modules
 		const defaultRatio = this.pluginOptions.defaultRatio * 100 + '%';
 		this.modal = new Modal(this, this.$, modalEl.html);
-		this.figure = new Figure(this, this.$, figureControls, { sizeUnit: sizeUnit, autoRatio: { current: defaultRatio, default: defaultRatio } });
+		this.figure = new Figure(this, this.$, figureControls, {
+			sizeUnit: sizeUnit,
+			autoRatio: { current: defaultRatio, default: defaultRatio },
+		});
 		this.fileManager = new FileManager(this, this.$, {
 			query: 'iframe, video',
 			loadEventName: 'onVideoLoad',
@@ -204,7 +230,8 @@ class Video extends PluginModal {
 		this.previewSrc = modalEl.previewSrc;
 
 		this.#resizing = this.pluginOptions.canResize;
-		this.#nonResizing = !this.#resizing || !this.pluginOptions.showHeightInput || this.pluginOptions.percentageOnlySize;
+		this.#nonResizing =
+			!this.#resizing || !this.pluginOptions.showHeightInput || this.pluginOptions.percentageOnlySize;
 
 		this.query = {
 			youtube: {
@@ -247,9 +274,11 @@ class Video extends PluginModal {
 		const galleryButton = modalEl.galleryButton;
 		if (galleryButton) this.$.eventManager.addEvent(galleryButton, 'click', this.#OpenGallery.bind(this));
 
-		if (this.videoInputFile) this.$.eventManager.addEvent(modalEl.fileRemoveBtn, 'click', this.#RemoveSelectedFiles.bind(this));
+		if (this.videoInputFile)
+			this.$.eventManager.addEvent(modalEl.fileRemoveBtn, 'click', this.#RemoveSelectedFiles.bind(this));
 		if (this.videoUrlFile) this.$.eventManager.addEvent(this.videoUrlFile, 'input', this.#OnLinkPreview.bind(this));
-		if (this.videoInputFile && this.videoUrlFile) this.$.eventManager.addEvent(this.videoInputFile, 'change', this.#OnfileInputChange.bind(this));
+		if (this.videoInputFile && this.videoUrlFile)
+			this.$.eventManager.addEvent(this.videoInputFile, 'change', this.#OnfileInputChange.bind(this));
 	}
 
 	/**
@@ -311,9 +340,11 @@ class Video extends PluginModal {
 	 */
 	modalOn(isUpdate) {
 		if (!isUpdate) {
-			if (this.videoInputFile && this.pluginOptions.allowMultiple) this.videoInputFile.setAttribute('multiple', 'multiple');
+			if (this.videoInputFile && this.pluginOptions.allowMultiple)
+				this.videoInputFile.setAttribute('multiple', 'multiple');
 		} else {
-			if (this.videoInputFile && this.pluginOptions.allowMultiple) this.videoInputFile.removeAttribute('multiple');
+			if (this.videoInputFile && this.pluginOptions.allowMultiple)
+				this.videoInputFile.removeAttribute('multiple');
 		}
 
 		this.sizeService.on(isUpdate);
@@ -324,7 +355,9 @@ class Video extends PluginModal {
 	 * @type {SunEditor.Hook.Modal.Action}
 	 */
 	async modalAction() {
-		this.#align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_video_radio"]:checked')).value;
+		this.#align = /** @type {HTMLInputElement} */ (
+			this.modal.form.querySelector('input[name="suneditor_video_radio"]:checked')
+		).value;
 
 		let result = false;
 		if (this.videoInputFile && this.videoInputFile.files.length > 0) {
@@ -351,7 +384,9 @@ class Video extends PluginModal {
 			this.previewSrc.style.textDecoration = '';
 		}
 
-		/** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_video_radio"][value="none"]')).checked = true;
+		/** @type {HTMLInputElement} */ (
+			this.modal.form.querySelector('input[name="suneditor_video_radio"][value="none"]')
+		).checked = true;
 		this.#nonResizing = false;
 
 		this.sizeService.init();
@@ -384,7 +419,12 @@ class Video extends PluginModal {
 		const focusEl = container.previousElementSibling || container.nextElementSibling;
 		const emptyDiv = container.parentNode;
 
-		const message = await this.$.eventManager.triggerEvent('onVideoDeleteBefore', { element: targetEl, container, align: this.#align, url: this.#linkValue });
+		const message = await this.$.eventManager.triggerEvent('onVideoDeleteBefore', {
+			element: targetEl,
+			container,
+			align: this.#align,
+			url: this.#linkValue,
+		});
 		if (message === false) return;
 
 		dom.utils.removeItem(container);
@@ -524,7 +564,13 @@ class Video extends PluginModal {
 		/** rendering */
 		this.#element = oFrame;
 		this.#container = container;
-		this.figure.open(oFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+		this.figure.open(oFrame, {
+			nonResizing: this.#nonResizing,
+			nonSizeInfo: false,
+			nonBorder: false,
+			figureTarget: false,
+			infoOnly: true,
+		});
 
 		// set size
 		const resolved = this.sizeService.resolveSize(width, height, oFrame, isUpdate);
@@ -539,11 +585,15 @@ class Video extends PluginModal {
 		this.fileManager.setFileData(oFrame, file);
 
 		if (!isUpdate) {
-			this.$.component.insert(container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.pluginOptions.insertBehavior : 'line' });
+			this.$.component.insert(container, {
+				scrollTo: isLast ? true : false,
+				insertBehavior: isLast ? this.pluginOptions.insertBehavior : 'line',
+			});
 			return;
 		}
 
-		if (!this.#resizing || !resolved.isChanged || !this.figure.isVertical) this.figure.setTransform(oFrame, width, height, 0);
+		if (!this.#resizing || !resolved.isChanged || !this.figure.isVertical)
+			this.figure.setTransform(oFrame, width, height, 0);
 		this.$.history.push(false);
 	}
 
@@ -600,7 +650,8 @@ class Video extends PluginModal {
 
 			s = f.size;
 			if (singleSizeLimit > 0 && s > singleSizeLimit) {
-				const err = '[SUNEDITOR.videoUpload.fail] Size of uploadable single file: ' + singleSizeLimit / 1000 + 'KB';
+				const err =
+					'[SUNEDITOR.videoUpload.fail] Size of uploadable single file: ' + singleSizeLimit / 1000 + 'KB';
 				const message = await this.$.eventManager.triggerEvent('onVideoUploadError', {
 					error: err,
 					limitSize: singleSizeLimit,
@@ -621,7 +672,12 @@ class Video extends PluginModal {
 		const currentSize = this.fileManager.getSize();
 		if (limitSize > 0 && fileSize + currentSize > limitSize) {
 			const err = '[SUNEDITOR.videoUpload.fail] Size of uploadable total videos: ' + limitSize / 1000 + 'KB';
-			const message = await this.$.eventManager.triggerEvent('onVideoUploadError', { error: err, limitSize, currentSize, uploadSize: fileSize });
+			const message = await this.$.eventManager.triggerEvent('onVideoUploadError', {
+				error: err,
+				limitSize,
+				currentSize,
+				uploadSize: fileSize,
+			});
 
 			this.$.ui.alertOpen(message === NO_EVENT ? err : message || err, 'error');
 
@@ -676,7 +732,16 @@ class Video extends PluginModal {
 
 		const handler = function (infos, newInfos) {
 			infos = newInfos || infos;
-			this.create(this[/^iframe$/i.test(infos.process?.tag) ? 'createIframeTag' : 'createVideoTag'](), infos.url, infos.inputWidth, infos.inputHeight, infos.align, infos.isUpdate, infos.files, true);
+			this.create(
+				this[/^iframe$/i.test(infos.process?.tag) ? 'createIframeTag' : 'createVideoTag'](),
+				infos.url,
+				infos.inputWidth,
+				infos.inputHeight,
+				infos.align,
+				infos.isUpdate,
+				infos.files,
+				true,
+			);
 		}.bind(this, videoInfo);
 
 		const result = await this.$.eventManager.triggerEvent('onVideoUploadBefore', {
@@ -702,7 +767,13 @@ class Video extends PluginModal {
 	 */
 	#ready(target, infoOnly = false) {
 		if (!target) return;
-		const figureInfo = this.figure.open(target, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly });
+		const figureInfo = this.figure.open(target, {
+			nonResizing: this.#nonResizing,
+			nonSizeInfo: false,
+			nonBorder: false,
+			figureTarget: false,
+			infoOnly,
+		});
 
 		this.#element = target;
 		this.#container = figureInfo.container;
@@ -713,10 +784,16 @@ class Video extends PluginModal {
 		const originHeight = String(figureInfo.height || figureInfo.originHeight || figureInfo.h || '');
 		this.sizeService.setOriginSize(originWidth, originHeight);
 
-		if (this.videoUrlFile) this.#linkValue = this.previewSrc.textContent = this.videoUrlFile.value = this.#element.src || this.#element.querySelector('source')?.src || '';
+		if (this.videoUrlFile)
+			this.#linkValue =
+				this.previewSrc.textContent =
+				this.videoUrlFile.value =
+					this.#element.src || this.#element.querySelector('source')?.src || '';
 
 		/** @type {HTMLInputElement} */
-		const activeAlign = this.modal.form.querySelector('input[name="suneditor_video_radio"][value="' + this.#align + '"]') || this.modal.form.querySelector('input[name="suneditor_video_radio"][value="none"]');
+		const activeAlign =
+			this.modal.form.querySelector('input[name="suneditor_video_radio"][value="' + this.#align + '"]') ||
+			this.modal.form.querySelector('input[name="suneditor_video_radio"][value="none"]');
 		activeAlign.checked = true;
 
 		if (!this.#resizing) return;
@@ -768,7 +845,13 @@ class Video extends PluginModal {
 		}
 
 		// size
-		this.figure.open(cloneFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+		this.figure.open(cloneFrame, {
+			nonResizing: this.#nonResizing,
+			nonSizeInfo: false,
+			nonBorder: false,
+			figureTarget: false,
+			infoOnly: true,
+		});
 		const size = (cloneFrame.getAttribute('data-se-size') || ',').split(',');
 
 		const width = size[0] || prevFrame.width || '';
@@ -864,7 +947,10 @@ class Video extends PluginModal {
 	 * @param {HTMLInputElement} target - The selected video element.
 	 */
 	#SetUrlInput(target) {
-		this.#linkValue = this.previewSrc.textContent = this.videoUrlFile.value = target.getAttribute('data-command') || target.src;
+		this.#linkValue =
+			this.previewSrc.textContent =
+			this.videoUrlFile.value =
+				target.getAttribute('data-command') || target.src;
 		this.videoUrlFile.focus();
 	}
 

package/src/plugins/modal/video/render/video.html.js

@@ -71,7 +71,10 @@ export function CreateHTML_modal({ lang, icons, plugins }, pluginOptions) {
 		const onlyPercentDisplay = onlyPercentage ? ' style="display: none !important;"' : '';
 		const heightDisplay = !pluginOptions.showHeightInput ? ' style="display: none !important;"' : '';
 		const ratioDisplay = !pluginOptions.showRatioOption ? ' style="display: none !important;"' : '';
-		const onlyWidthDisplay = !onlyPercentage && !pluginOptions.showHeightInput && !pluginOptions.showRatioOption ? ' style="display: none !important;"' : '';
+		const onlyWidthDisplay =
+			!onlyPercentage && !pluginOptions.showHeightInput && !pluginOptions.showRatioOption
+				? ' style="display: none !important;"'
+				: '';
 		html += /*html*/ `
 			<div class="se-modal-form">
 				<div class="se-modal-size-text">

package/src/plugins/modal/video/services/video.size.js

@@ -39,7 +39,8 @@ export class VideoSizeService {
 		this.#defaultSizeX = '100%';
 		this.#defaultSizeY = this.#pluginOptions.defaultRatio * 100 + '%';
 		this.#origin_w = this.#pluginOptions.defaultWidth === '100%' ? '' : this.#pluginOptions.defaultWidth;
-		this.#origin_h = this.#pluginOptions.defaultHeight === this.#state.defaultRatio ? '' : this.#pluginOptions.defaultHeight;
+		this.#origin_h =
+			this.#pluginOptions.defaultHeight === this.#state.defaultRatio ? '' : this.#pluginOptions.defaultHeight;
 
 		if (this.#resizing) {
 			this.#proportion = modalEl.proportion;
@@ -236,7 +237,10 @@ export class VideoSizeService {
 		/** @type {HTMLSelectElement} */
 		const eventTarget = dom.query.getEventTarget(e);
 		const value = eventTarget.options[eventTarget.selectedIndex].value;
-		this.#defaultSizeY = this.#main.figure.autoRatio.current = this.#frameRatio = !value ? this.#defaultSizeY : Number(value) * 100 + '%';
+		this.#defaultSizeY =
+			this.#main.figure.autoRatio.current =
+			this.#frameRatio =
+				!value ? this.#defaultSizeY : Number(value) * 100 + '%';
 		this.#inputY.placeholder = !value ? '' : Number(value) * 100 + '%';
 		this.#inputY.value = '';
 	}
@@ -245,7 +249,9 @@ export class VideoSizeService {
 	 * @description Updates the ratio based on current input values.
 	 */
 	#OnChangeRatio() {
-		this.#ratio = this.#proportion.checked ? Figure.GetRatio(this.#inputX.value, this.#inputY.value, this.#state.sizeUnit) : { w: 0, h: 0 };
+		this.#ratio = this.#proportion.checked
+			? Figure.GetRatio(this.#inputX.value, this.#inputY.value, this.#state.sizeUnit)
+			: { w: 0, h: 0 };
 	}
 
 	/**
@@ -264,7 +270,12 @@ export class VideoSizeService {
 		if (xy === 'x' && this.#state.onlyPercentage && Number(eventTarget.value) > 100) {
 			eventTarget.value = '100';
 		} else if (this.#proportion.checked && !this.frameRatioOption?.value) {
-			const ratioSize = Figure.CalcRatio(this.#inputX.value, this.#inputY.value, this.#state.sizeUnit, this.#ratio);
+			const ratioSize = Figure.CalcRatio(
+				this.#inputX.value,
+				this.#inputY.value,
+				this.#state.sizeUnit,
+				this.#ratio,
+			);
 			if (xy === 'x') {
 				this.#inputY.value = String(ratioSize.h);
 			} else {

package/src/plugins/modal/video/services/video.upload.js

@@ -29,7 +29,13 @@ export class VideoUploadService {
 
 		const videoUploadUrl = this.#pluginOptions.uploadUrl;
 		if (typeof videoUploadUrl === 'string' && videoUploadUrl.length > 0) {
-			this.#main.fileManager.upload(videoUploadUrl, this.#pluginOptions.uploadHeaders, files, this.#UploadCallBack.bind(this, info), this.#error.bind(this));
+			this.#main.fileManager.upload(
+				videoUploadUrl,
+				this.#pluginOptions.uploadHeaders,
+				files,
+				this.#UploadCallBack.bind(this, info),
+				this.#error.bind(this),
+			);
 		}
 	}
 
@@ -43,7 +49,9 @@ export class VideoUploadService {
 		const videoTag = this.#main.createVideoTag();
 
 		for (let i = 0, len = fileList.length; i < len; i++) {
-			const ctag = info.isUpdate ? info.element : /** @type {HTMLIFrameElement|HTMLVideoElement} */ (videoTag.cloneNode(false));
+			const ctag = info.isUpdate
+				? info.element
+				: /** @type {HTMLIFrameElement|HTMLVideoElement} */ (videoTag.cloneNode(false));
 			this.#main.create(
 				ctag,
 				fileList[i].url,

package/src/plugins/popup/anchor.js

@@ -42,11 +42,23 @@ class Anchor extends PluginPopup {
 		// controller
 		const controllerSelectEl = CreateHTML_controller_select(this.$);
 		this.displayId = controllerSelectEl.querySelector('.se-controller-display');
-		this.controllerSelect = new Controller(this, this.$, controllerSelectEl, { position: 'bottom', disabled: true }, Anchor.key);
+		this.controllerSelect = new Controller(
+			this,
+			this.$,
+			controllerSelectEl,
+			{ position: 'bottom', disabled: true },
+			Anchor.key,
+		);
 
 		const controllerEl = CreateHTML_controller(this.$);
 		this.inputEl = controllerEl.querySelector('input');
-		this.controller = new Controller(this, this.$, controllerEl, { position: 'bottom', disabled: true, parents: [this.controllerSelect.form], parentsHide: true }, Anchor.key);
+		this.controller = new Controller(
+			this,
+			this.$,
+			controllerEl,
+			{ position: 'bottom', disabled: true, parents: [this.controllerSelect.form], parentsHide: true },
+			Anchor.key,
+		);
 	}
 
 	/**

package/src/suneditor.js

@@ -100,7 +100,10 @@ export default {
 		const multiTargets = [];
 		if (typeof target === 'string') {
 			const t = document.querySelector(target);
-			if (!t) throw Error(`[SUNEDITOR.create.fail]-[document.querySelector(${target})] Cannot find target element. Make sure "${target}" is a valid selector and exists in the document.`);
+			if (!t)
+				throw Error(
+					`[SUNEDITOR.create.fail]-[document.querySelector(${target})] Cannot find target element. Make sure "${target}" is a valid selector and exists in the document.`,
+				);
 			multiTargets.push({ key: null, target: t });
 		} else if (target.nodeType === 1) {
 			multiTargets.push({ key: null, target: target });
@@ -108,7 +111,10 @@ export default {
 			let props;
 			for (const key in target) {
 				props = target[key];
-				if (!props.target || props.target.nodeType !== 1) throw Error('[SUNEDITOR.create.fail] suneditor multi root requires textarea\'s element at the "target" property.');
+				if (!props.target || props.target.nodeType !== 1)
+					throw Error(
+						'[SUNEDITOR.create.fail] suneditor multi root requires textarea\'s element at the "target" property.',
+					);
 				props.key = key;
 				multiTargets.push(props);
 			}

package/src/themes/cobalt.css

@@ -161,4 +161,16 @@
 	--se-show-blocks-li-color: #d539ff;
 	--se-show-blocks-pre-color: #27c022;
 	--se-show-blocks-component-color: #f4b124;
+
+	/* block handle */
+	--se-block-handle-color: var(--se-main-color-lighter);
+	--se-block-handle-btn-hover-bg: rgba(255, 255, 255, 0.08);
+	--se-block-handle-btn-active-bg: rgba(255, 255, 255, 0.14);
+	--se-block-hover-bg: rgba(255, 255, 255, 0.04);
+	--se-block-hover-outline: rgba(255, 255, 255, 0.04);
+	--se-block-drag-indicator-color: var(--se-active-dark3-color);
+
+	/* select menu interactive states */
+	--se-select-menu-hover-bg: rgba(255, 255, 255, 0.08);
+	--se-select-menu-active-bg: rgba(255, 255, 255, 0.14);
 }

package/src/themes/cream.css

@@ -161,4 +161,16 @@
 	--se-show-blocks-li-color: #8844dd;
 	--se-show-blocks-pre-color: #1a8c3a;
 	--se-show-blocks-component-color: #e8a020;
+
+	/* block handle */
+	--se-block-handle-color: var(--se-main-color-lighter);
+	--se-block-handle-btn-hover-bg: rgba(55, 53, 47, 0.08);
+	--se-block-handle-btn-active-bg: rgba(55, 53, 47, 0.14);
+	--se-block-hover-bg: rgba(55, 53, 47, 0.04);
+	--se-block-hover-outline: rgba(55, 53, 47, 0.04);
+	--se-block-drag-indicator-color: var(--se-active-dark3-color);
+
+	/* select menu interactive states */
+	--se-select-menu-hover-bg: #eef3f9;
+	--se-select-menu-active-bg: #dde7f3;
 }

package/src/themes/dark.css

@@ -162,4 +162,16 @@
 	--se-show-blocks-li-color: #b46cc8;
 	--se-show-blocks-pre-color: #80be5a;
 	--se-show-blocks-component-color: #cc8844;
+
+	/* block handle */
+	--se-block-handle-color: var(--se-main-color-lighter);
+	--se-block-handle-btn-hover-bg: rgba(255, 255, 255, 0.08);
+	--se-block-handle-btn-active-bg: rgba(255, 255, 255, 0.14);
+	--se-block-hover-bg: rgba(255, 255, 255, 0.04);
+	--se-block-hover-outline: rgba(255, 255, 255, 0.04);
+	--se-block-drag-indicator-color: var(--se-active-dark3-color);
+
+	/* select menu interactive states */
+	--se-select-menu-hover-bg: rgba(255, 255, 255, 0.08);
+	--se-select-menu-active-bg: rgba(255, 255, 255, 0.14);
 }

package/src/themes/midnight.css

@@ -161,4 +161,16 @@
 	--se-show-blocks-li-color: #c084fc;
 	--se-show-blocks-pre-color: #34d399;
 	--se-show-blocks-component-color: #f0c34a;
+
+	/* block handle */
+	--se-block-handle-color: var(--se-main-color-lighter);
+	--se-block-handle-btn-hover-bg: rgba(255, 255, 255, 0.08);
+	--se-block-handle-btn-active-bg: rgba(255, 255, 255, 0.14);
+	--se-block-hover-bg: rgba(255, 255, 255, 0.04);
+	--se-block-hover-outline: rgba(255, 255, 255, 0.04);
+	--se-block-drag-indicator-color: var(--se-active-dark3-color);
+
+	/* select menu interactive states */
+	--se-select-menu-hover-bg: rgba(255, 255, 255, 0.08);
+	--se-select-menu-active-bg: rgba(255, 255, 255, 0.14);
 }

package/src/typedef.js

@@ -44,6 +44,17 @@
  */
 
 // --------------------------------------------------------- [Component Types] ---------------------------------------------------------------------------------------------------
+/**
+ * @typedef {Object} SunEditor.ComponentLauncher
+ * @property {(target: any) => (void | Promise<void>)} [componentDestroy] - Delete hook (invoked by the selected-component keydown handler).
+ * @property {(target: any) => (boolean | void)} [componentSelect] - Optional select hook.
+ * @property {(target: any) => void} [componentDeselect] - Optional deselect hook.
+ * @description Lightweight plugin stand-in for non-plugin components (e.g. `pageBreak`) registered
+ * via `pluginManager` component-checkers. Assigned to `component.currentPlugin` on selection, so its
+ * hook names MUST mirror the plugin component hooks — e.g. `componentDestroy`, not `destroy`.
+ * NOTE: `@property` tags must precede `@description`, or TS drops them and the excess-property check is lost.
+ */
+
 /**
  * @typedef {Object} SunEditor.ComponentInfo
  * @property {HTMLElement} target - The target element associated with the component.
@@ -54,7 +65,7 @@
  * @property {?HTMLElement} inlineCover - The inline cover element, if applicable.
  * @property {?HTMLElement} caption - The caption element, if applicable.
  * @property {boolean} isFile - Whether the component is a file-related component.
- * @property {?HTMLElement} launcher - The element that triggered the component, if applicable.
+ * @property {?SunEditor.ComponentLauncher} launcher - Hook object for non-plugin components (e.g. `pageBreak`), if applicable.
  * @property {boolean} isInputType - Whether the component is an input component (e.g., table).
  */
 
@@ -135,33 +146,33 @@
 
 // component
 /**
- * @typedef {typeof import('./interfaces/contracts').EditorComponent.prototype.componentSelect} SunEditor.Hook.Component.Select
- * @typedef {typeof import('./interfaces/contracts').EditorComponent.prototype.componentDeselect} SunEditor.Hook.Component.Deselect
- * @typedef {typeof import('./interfaces/contracts').EditorComponent.prototype.componentEdit} SunEditor.Hook.Component.Edit
- * @typedef {typeof import('./interfaces/contracts').EditorComponent.prototype.componentDestroy} SunEditor.Hook.Component.Destroy
- * @typedef {typeof import('./interfaces/contracts').EditorComponent.prototype.componentCopy} SunEditor.Hook.Component.Copy
+ * @typedef {import('./interfaces/contracts').EditorComponent['componentSelect']} SunEditor.Hook.Component.Select
+ * @typedef {import('./interfaces/contracts').EditorComponent['componentDeselect']} SunEditor.Hook.Component.Deselect
+ * @typedef {import('./interfaces/contracts').EditorComponent['componentEdit']} SunEditor.Hook.Component.Edit
+ * @typedef {import('./interfaces/contracts').EditorComponent['componentDestroy']} SunEditor.Hook.Component.Destroy
+ * @typedef {import('./interfaces/contracts').EditorComponent['componentCopy']} SunEditor.Hook.Component.Copy
  */
 
 // Module hooks - Called by Module instances (defined in interfaces/contracts.js)
 /**
- * @typedef {typeof import('./interfaces/contracts').ModuleModal.prototype.modalAction} SunEditor.Hook.Modal.Action
- * @typedef {typeof import('./interfaces/contracts').ModuleModal.prototype.modalOn} SunEditor.Hook.Modal.On
- * @typedef {typeof import('./interfaces/contracts').ModuleModal.prototype.modalInit} SunEditor.Hook.Modal.Init
- * @typedef {typeof import('./interfaces/contracts').ModuleModal.prototype.modalOff} SunEditor.Hook.Modal.Off
- * @typedef {typeof import('./interfaces/contracts').ModuleModal.prototype.modalResize} SunEditor.Hook.Modal.Resize
+ * @typedef {import('./interfaces/contracts').ModuleModal['modalAction']} SunEditor.Hook.Modal.Action
+ * @typedef {import('./interfaces/contracts').ModuleModal['modalOn']} SunEditor.Hook.Modal.On
+ * @typedef {import('./interfaces/contracts').ModuleModal['modalInit']} SunEditor.Hook.Modal.Init
+ * @typedef {import('./interfaces/contracts').ModuleModal['modalOff']} SunEditor.Hook.Modal.Off
+ * @typedef {import('./interfaces/contracts').ModuleModal['modalResize']} SunEditor.Hook.Modal.Resize
  *
- * @typedef {typeof import('./interfaces/contracts').ModuleController.prototype.controllerAction} SunEditor.Hook.Controller.Action
- * @typedef {typeof import('./interfaces/contracts').ModuleController.prototype.controllerOn} SunEditor.Hook.Controller.On
- * @typedef {typeof import('./interfaces/contracts').ModuleController.prototype.controllerClose} SunEditor.Hook.Controller.Close
+ * @typedef {import('./interfaces/contracts').ModuleController['controllerAction']} SunEditor.Hook.Controller.Action
+ * @typedef {import('./interfaces/contracts').ModuleController['controllerOn']} SunEditor.Hook.Controller.On
+ * @typedef {import('./interfaces/contracts').ModuleController['controllerClose']} SunEditor.Hook.Controller.Close
  *
- * @typedef {typeof import('./interfaces/contracts').ModuleBrowser.prototype.browserInit} SunEditor.Hook.Browser.Init
+ * @typedef {import('./interfaces/contracts').ModuleBrowser['browserInit']} SunEditor.Hook.Browser.Init
  *
- * @typedef {typeof import('./interfaces/contracts').ModuleColorPicker.prototype.colorPickerAction} SunEditor.Hook.ColorPicker.Action
- * @typedef {typeof import('./interfaces/contracts').ModuleColorPicker.prototype.colorPickerHueSliderOpen} SunEditor.Hook.ColorPicker.HueSliderOpen
- * @typedef {typeof import('./interfaces/contracts').ModuleColorPicker.prototype.colorPickerHueSliderClose} SunEditor.Hook.ColorPicker.HueSliderClose
+ * @typedef {import('./interfaces/contracts').ModuleColorPicker['colorPickerAction']} SunEditor.Hook.ColorPicker.Action
+ * @typedef {import('./interfaces/contracts').ModuleColorPicker['colorPickerHueSliderOpen']} SunEditor.Hook.ColorPicker.HueSliderOpen
+ * @typedef {import('./interfaces/contracts').ModuleColorPicker['colorPickerHueSliderClose']} SunEditor.Hook.ColorPicker.HueSliderClose
  *
- * @typedef {typeof import('./interfaces/contracts').ModuleHueSlider.prototype.hueSliderAction} SunEditor.Hook.HueSlider.Action
- * @typedef {typeof import('./interfaces/contracts').ModuleHueSlider.prototype.hueSliderCancelAction} SunEditor.Hook.HueSlider.CancelAction
+ * @typedef {import('./interfaces/contracts').ModuleHueSlider['hueSliderAction']} SunEditor.Hook.HueSlider.Action
+ * @typedef {import('./interfaces/contracts').ModuleHueSlider['hueSliderCancelAction']} SunEditor.Hook.HueSlider.CancelAction
  */
 
 // --------------------------------------------------------- [Plugin Hook parameter types] ---------------------------------------------------------------------------------------------------
@@ -268,7 +279,7 @@
  * @typedef {"bold"|"underline"|"italic"|"strike"|"subscript"|"superscript"|"removeFormat"|"copyFormat"|"indent"|"outdent"|"fullScreen"|"showBlocks"|"codeView"|"markdownView"|"undo"|"redo"|"preview"|"print"|"copy"|"dir"|"dir_ltr"|"dir_rtl"|"finder"|"save"|"newDocument"|"selectAll"|"pageBreak"|"pageUp"|"pageDown"|"pageNavigator"} SunEditor.UI.ButtonCommand
  *
  * Plugin buttons available in the toolbar
- * @typedef {"blockquote"|"codeBlock"|"exportPDF"|"fileUpload"|"list_bulleted"|"list_numbered"|"autocomplete"|"align"|"font"|"fontColor"|"backgroundColor"|"list"|"table"|"blockStyle"|"hr"|"layout"|"lineHeight"|"template"|"paragraphStyle"|"textStyle"|"link"|"image"|"video"|"audio"|"embed"|"math"|"drawing"|"imageGallery"|"videoGallery"|"audioGallery"|"fileGallery"|"fileBrowser"|"fontSize"|"pageNavigator"|"anchor"} SunEditor.UI.ButtonPlugin
+ * @typedef {"blockquote"|"codeBlock"|"exportPDF"|"fileUpload"|"list_bulleted"|"list_numbered"|"autocomplete"|"slashCommand"|"align"|"font"|"fontColor"|"backgroundColor"|"list"|"table"|"blockStyle"|"hr"|"layout"|"lineHeight"|"template"|"paragraphStyle"|"textStyle"|"link"|"image"|"video"|"audio"|"embed"|"math"|"drawing"|"imageGallery"|"videoGallery"|"audioGallery"|"fileGallery"|"fileBrowser"|"fontSize"|"pageNavigator"|"anchor"} SunEditor.UI.ButtonPlugin
  *
  * Single button item in the toolbar (includes special controls and custom strings)
  * @typedef {SunEditor.UI.ButtonCommand|SunEditor.UI.ButtonPlugin|SunEditor.UI.ButtonSpecial|string} SunEditor.UI.ButtonItem

package/types/assets/icons/defaultIcons.d.ts

@@ -109,6 +109,7 @@ declare namespace _default {
 	export let download: string;
 	export let dir_ltr: string;
 	export let dir_rtl: string;
+	export let dragHandle: string;
 	export let file_upload: string;
 	export let file_thumbnail: string;
 	export let file_plus: string;

package/types/core/config/contextProvider.d.ts

@@ -76,7 +76,13 @@ export default class ContextProvider {
 	 * @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: (frameContext: SunEditor.FrameContext, rootKey: string | null, frameRoots: Map<string | null, SunEditor.FrameContext>) => void): void;
+	applyToRoots(
+		f: (
+			frameContext: SunEditor.FrameContext,
+			rootKey: string | null,
+			frameRoots: Map<string | null, SunEditor.FrameContext>,
+		) => void,
+	): void;
 	_destroy(): void;
 	#private;
 }