suneditor 3.0.0-rc.5 → 3.0.0

package/src/plugins/command/codeBlock.js

@@ -0,0 +1,324 @@
+import { PluginCommand, PluginDropdown } from '../../interfaces';
+import { converter, dom } from '../../helper';
+import { Controller } from '../../modules/contract';
+import { SelectMenu } from '../../modules/ui';
+
+void PluginDropdown;
+
+const DEFAULT_LANGS = ['javascript', 'typescript', 'html', 'css', 'json', 'python', 'java', 'c', 'cpp', 'csharp', 'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'sql', 'bash', 'markdown', 'xml', 'yaml'];
+
+/**
+ * @typedef {Object} CodeBlockPluginOptions
+ * @property {Array<string>} [langs] - List of selectable programming languages for code blocks.
+ * - Defaults to 21 common languages
+ * - [javascript, typescript, html, css, json, python, java, c, cpp, csharp, go, rust, ruby, php, swift, kotlin, sql, bash, markdown, xml, yaml].
+ * - Set to empty array `[]` to disable language selection UI entirely.
+ * ```js
+ * { codeBlock: { langs: ['javascript', 'python', 'html', 'css'] } }
+ * ```
+ */
+
+/**
+ * @class
+ * @implements {PluginDropdown}
+ * @description Code block plugin — toggles `<pre>` formatting with language selection.
+ * - Toolbar: command button (toggle `<pre>`) + optional dropdown (language list)
+ * - Hover UI: shows language selector on `<pre>` hover (Controller + SelectMenu)
+ * - I/O conversion: `<pre class="language-xxx">` ↔ `<pre><code class="language-xxx">`
+ */
+class CodeBlock extends PluginCommand {
+	static key = 'codeBlock';
+	static className = '';
+
+	#preTag;
+	#langItems;
+	#langs;
+
+	// hover UI
+	#hoverButton;
+	#hoverSelectMenu;
+	#hoverController;
+	#hoverCurrentPre;
+	#mouseLeaveEvent;
+	#removeEventFunc;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel - The Kernel instance
+	 * @param {CodeBlockPluginOptions} pluginOptions - Configuration options for the CodeBlock plugin.
+	 */
+	constructor(kernel, pluginOptions) {
+		super(kernel);
+		this.title = this.$.lang.codeBlock || 'Code Block';
+		this.icon = 'code_block';
+
+		this.#preTag = dom.utils.createElement('PRE');
+		this.#langs = pluginOptions?.langs ?? DEFAULT_LANGS;
+
+		if (!this.#langs.length) return;
+
+		/**
+		 * ──────────────────────────────────
+		 * [[ langs select ]]
+		 * ──────────────────────────────────
+		 */
+
+		// ───────────────── [[toolbar dropdown type]] ─────────────────
+		this.afterItem = dom.utils.createElement(
+			'button',
+			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
+			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.codeLanguage || 'Language'}</span></span>`,
+		);
+
+		const menu = CreateDropdownHTML(this.$, this.#langs);
+		this.#langItems = menu.querySelectorAll('li button');
+		this.$.menu.initDropdownTarget({ key: CodeBlock.key, type: 'dropdown' }, menu);
+
+		// ───────────────── [hover UI] ─────────────────
+		// controller
+		const containerEl = dom.utils.createElement('DIV', { class: 'se-controller se-code-lang' });
+		this.#hoverButton = dom.utils.createElement('DIV', { class: 'se-code-lang-button' });
+		this.#updateHoverButtonText('');
+		containerEl.appendChild(this.#hoverButton);
+
+		this.#hoverController = new Controller(this, this.$, containerEl, { position: 'top', isWWTarget: true });
+
+		// mouseleave handler
+		this.#removeEventFunc = converter.debounce((e) => {
+			this.#mouseLeaveEvent = this.$.eventManager.removeEvent(this.#mouseLeaveEvent);
+
+			if (e && containerEl.contains(e.relatedTarget)) {
+				this.#addCtrlLeaveEvent();
+			} else {
+				this.#hideHover();
+			}
+		}, 0);
+
+		// SelectMenu
+		this.#hoverSelectMenu = new SelectMenu(this.$, {
+			position: 'bottom-right',
+			dir: this.$.options.get('_rtl') ? 'rtl' : 'ltr',
+			maxHeight: '214px',
+			minWidth: '132px',
+			closeMethod: this.#removeEventFunc,
+		});
+
+		this.#hoverSelectMenu.on(this.#hoverButton, this.#onHoverSelect.bind(this));
+		this.#buildHoverMenu('');
+
+		// selectMenu
+		this.$.eventManager.addEvent(this.#hoverButton, 'click', (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			if (this.#hoverSelectMenu.isOpen) {
+				this.#hoverSelectMenu.close();
+			} else {
+				const currentLang = this.#getPreLang(this.#hoverCurrentPre);
+				this.#buildHoverMenu(currentLang);
+				const items = this.#hoverSelectMenu.items;
+				const idx = currentLang ? items.indexOf(currentLang) : 0;
+				this.#hoverSelectMenu.open(null, idx >= 0 ? `[data-index="${idx}"]` : null);
+			}
+		});
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.OnMouseMove}
+	 */
+	onMouseMove({ event }) {
+		if (!this.#hoverController) return;
+		const eventTarget = dom.query.getEventTarget(event);
+		const pre = eventTarget.closest('pre');
+
+		if (pre && !this.#isHoverOpen() && this.$.ui.opendControllers.length === 0) {
+			this.#showHover(pre);
+		}
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
+	 */
+	active(element, target) {
+		if (/^PRE$/i.test(element?.nodeName)) {
+			dom.utils.addClass(target, 'active');
+			return true;
+		}
+
+		dom.utils.removeClass(target, 'active');
+		return false;
+	}
+
+	/**
+	 * @override
+	 * @type {PluginCommand['action']}
+	 */
+	action(target) {
+		const lang = target?.getAttribute('data-value') || '';
+		const selNode = this.$.selection.getNode();
+		const currentPre = dom.query.getParentElement(selNode, (el) => /^PRE$/i.test(el.nodeName));
+
+		if (currentPre && !lang) {
+			// toggle off: convert <pre> to default line
+			this.$.format.setLine(dom.utils.createElement(this.$.options.get('defaultLine')));
+		} else {
+			// toggle on or change language
+			if (!currentPre) {
+				this.$.format.setBrLine(this.#preTag.cloneNode(false));
+			}
+
+			if (lang) {
+				const pre = dom.query.getParentElement(this.$.selection.getNode(), (el) => /^PRE$/i.test(el.nodeName));
+				if (pre) this.#setLang(pre, lang);
+			}
+		}
+
+		this.$.menu.dropdownOff();
+		this.$.focusManager.focus();
+		this.$.history.push(false);
+	}
+
+	/**
+	 * @impl Dropdown
+	 * @type {PluginDropdown['on']}
+	 */
+	on() {
+		if (!this.#langItems) return;
+		const currentLang = this.#getPreLang(this.$.selection.getNode());
+
+		for (let i = 0, len = this.#langItems.length; i < len; i++) {
+			const item = this.#langItems[i];
+			dom.utils.toggleClass(item, 'active', item.getAttribute('data-value') === currentLang);
+		}
+	}
+
+	/**
+	 * @description Shows the hover language selector over the given pre element.
+	 * @param {HTMLElement} preElement
+	 */
+	#showHover(preElement) {
+		if (this.#hoverCurrentPre === preElement && this.#hoverController.isOpen) return;
+
+		if (this.#hoverCurrentPre && this.#hoverCurrentPre !== preElement) {
+			dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+		}
+		this.#hoverCurrentPre = preElement;
+		dom.utils.addClass(preElement, 'se-pre-code-focus');
+
+		this.#hoverController.open(preElement, null, { passive: true, addOffset: { right: preElement.offsetWidth } });
+		this.#updateHoverButtonText(this.#getPreLang(preElement));
+
+		this.#addPreLeaveEvent();
+	}
+
+	#hideHover() {
+		if (this.#hoverSelectMenu?.isOpen) return;
+		this.#closeHover();
+	}
+
+	#closeHover() {
+		if (this.#hoverSelectMenu?.isOpen) this.#hoverSelectMenu.close();
+		dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+		this.#hoverController.close(true);
+	}
+
+	/** @hook Module.Controller */
+	controllerClose() {
+		if (this.#hoverCurrentPre) {
+			dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+			this.#hoverCurrentPre = null;
+		}
+	}
+
+	#onHoverSelect(langValue) {
+		if (!this.#hoverCurrentPre) return;
+		this.#setLang(this.#hoverCurrentPre, langValue);
+		this.#updateHoverButtonText(langValue);
+		this.#hoverSelectMenu.close();
+		this.#hideHover();
+		this.$.focusManager.focus();
+		this.$.history.push(false);
+	}
+
+	#addPreLeaveEvent() {
+		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(this.#hoverCurrentPre, 'mouseleave', this.#removeEventFunc);
+	}
+
+	#addCtrlLeaveEvent() {
+		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(this.#hoverController.form, 'mouseleave', this.#removeEventFunc);
+	}
+
+	#buildHoverMenu(currentLang) {
+		const noneLabel = this.$.lang.codeLanguage_none || 'None';
+		const hasExtra = currentLang && !this.#langs.includes(currentLang);
+		const items = hasExtra ? ['', currentLang, ...this.#langs] : ['', ...this.#langs];
+		const menus = hasExtra ? [noneLabel, currentLang, ...this.#langs] : [noneLabel, ...this.#langs];
+		this.#hoverSelectMenu.create(items, menus);
+	}
+
+	#updateHoverButtonText(lang) {
+		this.#hoverButton.innerHTML = /* html */ `<span class="se-code-lang-icon">&lt;/&gt;</span><span class="se-code-lang-text">${lang || this.$.lang.codeLanguage || 'Language'}</span>`;
+	}
+
+	#isHoverOpen() {
+		return this.#hoverSelectMenu?.isOpen || this.#hoverController?.isOpen;
+	}
+
+	/**
+	 * @description Get the language from a pre element's class.
+	 * @param {?Node} preOrChild - The pre element or a node inside it
+	 * @returns {string}
+	 */
+	#getPreLang(preOrChild) {
+		const pre = preOrChild?.nodeName === 'PRE' ? preOrChild : dom.query.getParentElement(preOrChild, (el) => /^PRE$/i.test(el.nodeName));
+		if (!pre) return '';
+		return /** @type {HTMLElement} */ (pre).className.match(/language-(\S+)/)?.[1] || '';
+	}
+
+	/**
+	 * @description Set language class on a pre element.
+	 * @param {HTMLElement} pre
+	 * @param {string} lang
+	 */
+	#setLang(pre, lang) {
+		pre.className = pre.className.replace(/\s*language-\S+/g, '').trim();
+		if (lang) {
+			dom.utils.addClass(pre, 'language-' + lang);
+			pre.setAttribute('data-se-lang', lang);
+		} else {
+			pre.removeAttribute('data-se-lang');
+		}
+	}
+
+	/**
+	 * @description Cleans up resources.
+	 */
+	destroy() {
+		if (this.#hoverCurrentPre) {
+			dom.utils.removeClass(this.#hoverCurrentPre, 'se-pre-code-focus');
+		}
+		this.#hoverController?.form?.parentNode?.removeChild(this.#hoverController.form);
+		this.#hoverCurrentPre = null;
+	}
+}
+
+/**
+ * @param {SunEditor.Deps} $
+ * @param {string[]} langs
+ * @returns {HTMLElement}
+ */
+function CreateDropdownHTML($, langs) {
+	const noneLabel = $.lang.codeLanguage_none || 'None';
+	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
+
+	list += `<li><button type="button" class="se-btn se-btn-list" data-command="codeBlock" data-value="" title="${noneLabel}">${noneLabel}</button></li>`;
+	for (const lang of langs) {
+		list += `<li><button type="button" class="se-btn se-btn-list" data-command="codeBlock" data-value="${lang}" title="${lang}">${lang}</button></li>`;
+	}
+
+	list += '</ul></div>';
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-code-block' }, list);
+}
+
+export default CodeBlock;

package/src/plugins/command/exportPDF.js

@@ -63,12 +63,17 @@ class ExportPDF extends PluginCommand {
 
 		try {
 			const standardWW = this.$.frameContext.get('documentTypePageMirror') || this.$.frameContext.get('wysiwygFrame');
-			const editableDiv = dom.utils.createElement('div', { class: standardWW.className }, standardWW.innerHTML);
+
+			// Strip theme class so getComputedStyle resolves default (light) colors for borders, shadows, etc.
+			const themeClass = (this.$.options.get('_themeClass') || '').trim();
+			const wwClassName = themeClass ? standardWW.className.replace(themeClass, '').trim() : standardWW.className;
+			const editableDiv = dom.utils.createElement('div', { class: wwClassName }, standardWW.innerHTML);
 			ww = dom.utils.createElement('div', { style: `position: absolute; top: -10000px; left: -10000px; width: 21cm; columns: 21cm; height: auto;` }, editableDiv);
 
 			const innerPadding = _w.getComputedStyle(standardWW).padding;
 			const inlineWW = dom.utils.applyInlineStylesAll(editableDiv, true, this.$.options.get('allUsedStyles'));
 			inlineWW.style.padding = inlineWW.style.paddingTop = inlineWW.style.paddingBottom = inlineWW.style.paddingLeft = inlineWW.style.paddingRight = '0';
+
 			ww.innerHTML = `
 				<style>
 					@page {
@@ -109,8 +114,15 @@ class ExportPDF extends PluginCommand {
 		const xhr = await this.apiManager.asyncCall({ data: JSON.stringify(data) });
 
 		if (xhr.status !== 200) {
-			const res = !xhr.responseText ? xhr : JSON.parse(xhr.responseText);
-			throw Error(`[SUNEDITOR.plugins.exportPDF.error] ${res.errorMessage}`);
+			let errorMessage;
+
+			try {
+				errorMessage = JSON.parse(xhr.responseText).errorMessage;
+			} catch {
+				// ignore
+			}
+
+			throw Error(`[SUNEDITOR.plugins.exportPDF.error] ${errorMessage || xhr.statusText}`);
 		}
 
 		const blob = new Blob([xhr.response], { type: 'application/pdf' });

package/src/plugins/dropdown/blockStyle.js

@@ -139,7 +139,7 @@ class BlockStyle extends PluginDropdown {
  * @returns {HTMLElement}
  */
 function CreateHTML({ lang }, items) {
-	const defaultFormats = ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+	const defaultFormats = ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 	const formatList = !items || items.length === 0 ? defaultFormats : items;
 
 	let list = /*html*/ `

package/src/plugins/dropdown/paragraphStyle.js

@@ -76,9 +76,8 @@ class ParagraphStyle extends PluginDropdown {
 		}
 
 		// change format class
-		const toggleClass = dom.utils.hasClass(target, 'active') ? dom.utils.removeClass : dom.utils.addClass;
 		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-			toggleClass(selectedFormsts[i], value);
+			dom.utils.toggleClass(selectedFormsts[i], value);
 		}
 
 		this.$.menu.dropdownOff();

package/src/plugins/dropdown/table/render/table.html.js

@@ -190,7 +190,7 @@ export function CreateHTML_controller_properties({ lang, icons, options }) {
 	const html = /*html*/ `
 		<div class="se-controller-content">
 			<div class="se-controller-header">
-				<button type="button" data-command="close_props" class="se-btn se-close-btn close" title="${lang.close}" aria-label="${lang.close}">${icons.cancel}</button>
+				<button type="button" data-command="close" class="se-btn se-close-btn close" title="${lang.close}" aria-label="${lang.close}">${icons.cancel}</button>
 				<span class="se-controller-title">${lang.tableProperties}</span>
 			</div>
 			<div class="se-controller-body">

package/src/plugins/dropdown/table/services/table.grid.js

@@ -311,15 +311,23 @@ export class TableGridService {
 			if (remove) {
 				dom.utils.removeItem(cols[insertIndex]);
 			} else {
-				let totalW = 0;
-				for (let i = 0, len = cols.length, w; i < len; i++) {
-					w = numbers.get(cols[i].style.width);
-					w -= Math.round((w * len * 0.1) / 2);
-					totalW += w;
-					cols[i].style.width = `${w}%`;
+				const isAutoLayout = !dom.utils.hasClass(this.#main._element, 'se-table-layout-fixed') && this.#main._element.style.tableLayout !== 'fixed';
+				const hasWidth = !isAutoLayout && Array.prototype.some.call(cols, (col) => numbers.get(col.style.width) > 0);
+
+				if (hasWidth) {
+					let totalW = 0;
+					for (let i = 0, len = cols.length, w; i < len; i++) {
+						w = numbers.get(cols[i].style.width);
+						w -= Math.round((w * len * 0.1) / 2);
+						totalW += w;
+						cols[i].style.width = `${w}%`;
+					}
+					const newCol = dom.utils.createElement('col', { style: `width:${100 - totalW}%` });
+					colgroup.insertBefore(newCol, cols[insertIndex]);
+				} else {
+					// auto layout or no explicit widths — add bare col, let browser distribute
+					colgroup.insertBefore(dom.utils.createElement('col'), cols[insertIndex] || null);
 				}
-				const newCol = dom.utils.createElement('col', { style: `width:${100 - totalW}%` });
-				colgroup.insertBefore(newCol, cols[insertIndex]);
 			}
 		}
 

package/src/plugins/dropdown/table/services/table.style.js

@@ -597,7 +597,6 @@ export class TableStyleService {
 			align_v = verticalAlign;
 		this._propsCache = [];
 
-		const tempColorStyles = _w.getComputedStyle(this.#$.eventManager.__focusTemp);
 		for (let i = 0, t, isBreak; (t = targets[i]); i++) {
 			// eslint-disable-next-line no-shadow
 			const { cssText, border, backgroundColor, color, textAlign, verticalAlign, fontWeight, textDecoration, fontStyle } = t.style;
@@ -606,16 +605,13 @@ export class TableStyleService {
 
 			const { c, s, w } = this.#getBorderStyle(border);
 
-			// colors
+			// use getComputedStyle to normalize any CSS color format to rgb
 			let hexBackColor = backgroundColor;
 			let hexColor = color;
-			if (hexBackColor) {
-				this.#$.eventManager.__focusTemp.style.backgroundColor = hexBackColor;
-				hexBackColor = tempColorStyles.backgroundColor;
-			}
-			if (hexColor) {
-				this.#$.eventManager.__focusTemp.style.color = hexColor;
-				hexColor = tempColorStyles.color;
+			if (hexBackColor || hexColor) {
+				const computed = _w.getComputedStyle(t);
+				if (hexBackColor) hexBackColor = computed.backgroundColor;
+				if (hexColor) hexColor = computed.color;
 			}
 
 			if (b_color && cellBorder.c !== c) b_color = '';

package/src/plugins/index.js

@@ -1,5 +1,6 @@
 // command
 import blockquote from './command/blockquote';
+import codeBlock from './command/codeBlock';
 import exportPDF from './command/exportPDF';
 import fileUpload from './command/fileUpload';
 import list_bulleted from './command/list_bulleted';
@@ -48,6 +49,7 @@ import anchor from './popup/anchor';
 
 export {
 	blockquote,
+	codeBlock,
 	exportPDF,
 	fileUpload,
 	list_bulleted,
@@ -84,6 +86,7 @@ export {
 };
 export default {
 	blockquote,
+	codeBlock,
 	exportPDF,
 	fileUpload,
 	list_bulleted,

package/src/plugins/input/fontSize.js

@@ -94,8 +94,10 @@ const DEFAULT_UNIT_MAP = {
  * - Accepted values include: `'px'`, `'pt'`, `'em'`, `'rem'`, `'vw'`, `'vh'`, `'%'` or `'text'`.
  * - If `'text'` is used, a text-based font size list is applied.
  * @property {boolean} [showDefaultSizeLabel=true] - Determines whether the default size label is displayed in the dropdown menu.
- * @property {boolean} [showIncDecControls=false] - When `true`, displays increase and decrease buttons for font size adjustments.
- * @property {boolean} [disableInput=true] - When `true`, disables the direct font size input box.
+ * @property {boolean} [showIncDecControls] - When `true`, displays increase and decrease buttons for font size adjustments.
+ * - Defaults to `false`. Always `false` when `sizeUnit` is `'text'` (ignored).
+ * @property {boolean} [disableInput] - When `true`, disables the direct font size input box.
+ * - Defaults to `true` when `sizeUnit` is `'text'`, otherwise `false`.
  * @property {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [unitMap={}] - Override or extend the default unit mapping for font sizes.
  * Each key is a unit name (e.g., `'px'`, `'em'`). `default`: initial size, `inc`: step for inc/dec buttons, `min`/`max`: range limits, `list`: dropdown values.
  * When `sizeUnit` is `'text'`, list items use `{title: string, size: string}` instead of numbers.

package/src/plugins/modal/audio.js

@@ -10,7 +10,8 @@ const { NO_EVENT, ON_OVER_COMPONENT } = env;
  * @property {string} [defaultWidth="300px"] - The default width of the `AUDIO` tag.
  * @property {string} [defaultHeight="150px"] - The default height of the `AUDIO` tag.
  * @property {boolean} [createFileInput] - Whether to create a file input element.
- * @property {boolean} [createUrlInput] - Whether to create a URL input element (default is `true` if file input is not created).
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element.
+ * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL to which files will be uploaded.
  * @property {Object<string, string>} [uploadHeaders] - Headers to include in the file upload request.
  * @property {number} [uploadSizeLimit] - The total upload size limit in bytes.

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

@@ -19,7 +19,8 @@ const { NO_EVENT } = env;
  * @property {string} [defaultHeight="auto"] - The default height of the image. If a number is provided, `"px"` will be appended.
  * @property {boolean} [percentageOnlySize=false] - Whether to allow only percentage-based sizing.
  * @property {boolean} [createFileInput=true] - Whether to create a file input element for image uploads.
- * @property {boolean} [createUrlInput=true] - Whether to create a URL input element for image insertion.
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element for image insertion.
+ * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL endpoint for image file uploads.
  * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the file upload request.
  * ```js

package/src/plugins/modal/math.js

@@ -16,7 +16,8 @@ const { _w, _d } = env;
  * @property {?(...args: *) => *} [onPaste] - A callback function to handle paste events in the math input area.
  * @property {Object} [formSize={}] - An object specifying the dimensions for the math modal.
  * @property {string} [formSize.width="460px"] - The default width of the math modal.
- * @property {string} [formSize.height="14em"] - The default height of the math modal.
+ * @property {string} [formSize.height] - The default height of the math modal.
+ * - Defaults to `"14em"`. When `autoHeight` is `true`, defaults to `formSize.minHeight`.
  * @property {string} [formSize.maxWidth] - The maximum width of the math modal.
  * @property {string} [formSize.maxHeight] - The maximum height of the math modal.
  * @property {string} [formSize.minWidth="400px"] - The minimum width of the math modal.

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

@@ -16,7 +16,8 @@ import { CreateHTML_modal } from './render/video.html';
  * @property {string} [defaultHeight] - The default height of the video element. If a number is provided, `"px"` will be appended.
  * @property {boolean} [percentageOnlySize=false] - Whether to allow only percentage-based sizing.
  * @property {boolean} [createFileInput=false] - Whether to create a file input element for video uploads.
- * @property {boolean} [createUrlInput=true] - Whether to create a URL input element for video embedding.
+ * @property {boolean} [createUrlInput] - Whether to create a URL input element for video embedding.
+ * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL endpoint for video file uploads.
  * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the video upload request.
  * @property {number} [uploadSizeLimit] - The total upload size limit for videos in bytes.

package/src/themes/cobalt.css

@@ -38,15 +38,19 @@
 	--se-edit-outline: #444;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #444;
 	--se-main-color: #ccc;
 	--se-main-color-lighter: #aaa;
 	--se-main-background-color: #0f1828;
-	--se-code-view-color: #030712;
+	--se-code-view-color: #ccc;
 	--se-main-font-color: #ccc;
-	--se-code-view-background-color: #ddd;
+	--se-code-view-background-color: #0d1520;
+	--se-code-view-line-color: #8899aa;
+	--se-code-view-line-background-color: #0f1828;
+	--se-markdown-view-color: #ccc;
+	--se-markdown-view-background-color: #0d1520;
+	--se-markdown-view-line-color: #8899aa;
+	--se-markdown-view-line-background-color: #0f1828;
 	--se-main-divider-color: #555;
 	--se-main-border-color: #666;
 	--se-main-outline-color: #444;
@@ -54,6 +58,11 @@
 	--se-statusbar-font-color: #aaa;
 	--se-overlay-background-color: #111;
 
+	/* finder */
+	--se-find-match-color: rgba(255, 213, 0, 0.3);
+	--se-find-current-color: rgba(255, 150, 50, 0.55);
+	--se-find-no-match-color: rgba(255, 80, 80, 0.2);
+
 	/* hover states */
 	--se-hover-color: #162040;
 	--se-hover-dark-color: #304878;

package/src/themes/cream.css

@@ -38,8 +38,6 @@
 	--se-edit-outline: #c4a06e;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #ebe4d5;
 	--se-main-color: #2b2b2b;
 	--se-main-color-lighter: #555555;
@@ -47,6 +45,12 @@
 	--se-code-view-color: #2b2b2b;
 	--se-main-font-color: #2b2b2b;
 	--se-code-view-background-color: #fefcf6;
+	--se-code-view-line-color: #8a7e68;
+	--se-code-view-line-background-color: #f5f0e0;
+	--se-markdown-view-color: #2b2b2b;
+	--se-markdown-view-background-color: #fefcf6;
+	--se-markdown-view-line-color: #8a7e68;
+	--se-markdown-view-line-background-color: #f5f0e0;
 	--se-main-divider-color: #d5c9b0;
 	--se-main-border-color: #c4a06e;
 	--se-main-outline-color: #e0d6c2;
@@ -54,6 +58,11 @@
 	--se-statusbar-font-color: #666666;
 	--se-overlay-background-color: rgba(0, 0, 0, 0.3);
 
+	/* finder */
+	--se-find-match-color: rgba(255, 213, 0, 0.4);
+	--se-find-current-color: rgba(255, 150, 50, 0.65);
+	--se-find-no-match-color: rgba(255, 80, 80, 0.12);
+
 	/* hover states */
 	--se-hover-color: #d6e8f8;
 	--se-hover-dark-color: #6ba3d6;

package/src/themes/dark.css

@@ -39,15 +39,19 @@
 	--se-edit-outline: #3b4048;
 
 	/** --------------------------- layout - [colors] ----------- */
-	/* main shell and typography */
-	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #21252b;
 	--se-main-color: #d7dae0;
 	--se-main-color-lighter: #abb2bf;
 	--se-main-background-color: #282c34;
-	--se-code-view-color: #181a1f;
+	--se-code-view-color: #d7dae0;
 	--se-main-font-color: #d7dae0;
-	--se-code-view-background-color: #d7dae0;
+	--se-code-view-background-color: #1e2127;
+	--se-code-view-line-color: #abb2bf;
+	--se-code-view-line-background-color: #282c34;
+	--se-markdown-view-color: #d7dae0;
+	--se-markdown-view-background-color: #1e2127;
+	--se-markdown-view-line-color: #abb2bf;
+	--se-markdown-view-line-background-color: #282c34;
 	--se-main-divider-color: #3b4048;
 	--se-main-border-color: #3e4451;
 	--se-main-outline-color: #2f333d;
@@ -55,6 +59,11 @@
 	--se-statusbar-font-color: #9da5b4;
 	--se-overlay-background-color: rgba(0, 0, 0, 0.55);
 
+	/* finder */
+	--se-find-match-color: rgba(255, 213, 0, 0.3);
+	--se-find-current-color: rgba(255, 150, 50, 0.55);
+	--se-find-no-match-color: rgba(255, 80, 80, 0.2);
+
 	/* hover states */
 	--se-hover-color: #28434c;
 	--se-hover-dark-color: #365864;