suneditor 3.0.0-beta.1 → 3.0.0-beta.2

package/src/plugins/dropdown/table.js

@@ -263,6 +263,7 @@ class Table extends EditorInjector {
 		this._fixedColumn = false;
 		this._physical_cellCnt = 0;
 		this._logical_cellCnt = 0;
+		this._cellCnt = 0;
 		this._rowCnt = 0;
 		this._rowIndex = 0;
 		this._physical_cellIndex = 0;
@@ -630,22 +631,27 @@ class Table extends EditorInjector {
 	 */
 	onKeyDown({ event, range, line }) {
 		this._ref = null;
-		if (this.editor.selectMenuOn || this._resizing || this.__s || keyCodeMap.isCtrl(event)) return;
+
+		const keyCode = event.code;
+		const isTab = keyCodeMap.isTab(keyCode);
+		if (this.editor.selectMenuOn || this._resizing || (!isTab && this.__s) || keyCodeMap.isCtrl(event)) return;
 
 		if (!this.cellControllerTop) {
 			this.controller_cell.hide();
 		}
 
-		const keyCode = event.code;
-		this.__s = event.shiftKey;
+		this.__s = keyCodeMap.isShift(event);
+
 		// table tabkey
-		if (keyCodeMap.isTab(keyCode)) {
+		if (isTab) {
 			this._deleteStyleSelectedCells();
 			const tableCell = dom.query.getParentElement(line, dom.check.isTableCell);
 			if (tableCell && range.collapsed && dom.check.isEdgePoint(range.startContainer, range.startOffset)) {
 				this._closeController();
 
-				const shift = event.shiftKey;
+				const shift = this.__s;
+				this._shift = this.__s = false;
+
 				/** @type {HTMLTableElement} */
 				const table = dom.query.getParentElement(tableCell, 'table');
 				/** @type {HTMLTableCellElement[]} */
@@ -655,7 +661,7 @@ class Table extends EditorInjector {
 				if (idx === cells.length && !shift) {
 					if (!dom.query.getParentElement(tableCell, 'thead')) {
 						const rows = table.rows;
-						const newRow = this.insertBodyRow(table, rows.length, rows[rows.length - 1].cells.length);
+						const newRow = this.insertBodyRow(table, rows.length, this._cellCnt);
 						const firstTd = newRow.querySelector('td div');
 						this.selection.setRange(firstTd, 0, firstTd, 0);
 					}
@@ -666,7 +672,7 @@ class Table extends EditorInjector {
 					return false;
 				}
 
-				if (idx === -1 && shift) return;
+				if (idx === -1 && shift) return false;
 
 				const moveCell = cells[idx];
 				if (!moveCell) return;
@@ -832,13 +838,13 @@ class Table extends EditorInjector {
 				this._maxWidth = !this._maxWidth;
 				this._setTableStyle('width', false);
 				this._historyPush();
-				this.component.select(this._element, Table.key, true);
+				this.component.select(this._element, Table.key, { isInput: true });
 				break;
 			case 'layout':
 				this._fixedColumn = !this._fixedColumn;
 				this._setTableStyle('column', false);
 				this._historyPush();
-				this.component.select(this._element, Table.key, true);
+				this.component.select(this._element, Table.key, { isInput: true });
 				break;
 			case 'copy':
 				this.component.copy(this._figure);
@@ -979,7 +985,7 @@ class Table extends EditorInjector {
 
 			// cell cnt, physical cell index
 			this._physical_cellCnt = this._trElement.cells.length;
-			this._logical_cellCnt = cellCnt;
+			this._logical_cellCnt = this._cellCnt = cellCnt;
 			this._physical_cellIndex = cellIndex;
 
 			// span
@@ -1460,15 +1466,43 @@ class Table extends EditorInjector {
 		// --- copy info ---
 		const copyRows = copyTable.rows;
 		let rowCnt = 0;
-		for (let i = 0, len = copyRows.length; i < len; i++) {
-			const cell = copyRows[i].cells[0];
-			rowCnt += cell.rowSpan || 1;
+		const colIndexMap = [];
+		for (let row = 0; row < copyRows.length; row++) {
+			const cells = copyRows[row].cells;
+			let logicalCol = 0;
+
+			for (let i = 0; i < cells.length; i++) {
+				const cell = cells[i];
+
+				while (colIndexMap[row]?.[logicalCol]) {
+					logicalCol++;
+				}
+
+				const rowspan = cell.rowSpan || 1;
+				const colspan = cell.colSpan || 1;
+
+				if (logicalCol === 0) {
+					rowCnt += rowspan;
+				}
+
+				// rowspan map
+				for (let r = 0; r < rowspan; r++) {
+					for (let c = 0; c < colspan; c++) {
+						if (!colIndexMap[row + r]) colIndexMap[row + r] = [];
+						colIndexMap[row + r][logicalCol + c] = true;
+					}
+				}
+
+				logicalCol += colspan;
+			}
 		}
+
 		let logicalColCount = 0;
 		for (let i = 0, cells = copyRows[0].cells, len = cells.length; i < len; i++) {
 			const cell = cells[i];
 			logicalColCount += cell.colSpan || 1;
 		}
+
 		const copyInfo = {
 			rowCnt: rowCnt,
 			logicalCellCnt: logicalColCount
@@ -2049,7 +2083,7 @@ class Table extends EditorInjector {
 		if (this._fixedCell === tdElement) dom.utils.addClass(tdElement, 'se-selected-cell-focus');
 		if (!this._selectedCells?.length) this._selectedCells = [tdElement];
 		const tableElement = this._selectedTable || this._element || dom.query.getParentElement(tdElement, 'TABLE');
-		this.component.select(tableElement, Table.key, true);
+		this.component.select(tableElement, Table.key, { isInput: true });
 	}
 
 	/**
@@ -2117,8 +2151,7 @@ class Table extends EditorInjector {
 			() => {
 				this.__removeGlobalEvents();
 				this.history.push(true);
-				// figure reopen
-				this.component.select(this._element, Table.key, true);
+				this.component.select(this._element, Table.key, { isInput: true });
 			},
 			(e) => {
 				this._stopResize(col, prevValue, 'width', e);
@@ -2213,7 +2246,7 @@ class Table extends EditorInjector {
 			() => {
 				this.__removeGlobalEvents();
 				// figure reopen
-				this.component.select(this._element, Table.key, true);
+				this.component.select(this._element, Table.key, { isInput: true });
 			},
 			this._stopResize.bind(this, figure, figure.style.width, 'width')
 		);
@@ -2286,7 +2319,7 @@ class Table extends EditorInjector {
 		target.style[styleProp] = prevValue;
 		// figure reopen
 		if (styleProp === 'width') {
-			this.component.select(this._element, Table.key, true);
+			this.component.select(this._element, Table.key, { isInput: true });
 		}
 	}
 

package/src/plugins/modal/audio.js

@@ -438,9 +438,9 @@ class Audio_ extends EditorInjector {
 			this.fileManager.setFileData(element, file);
 			if (element && element.src !== src) {
 				element.src = src;
-				this.component.select(element, Audio_.key, false);
+				this.component.select(element, Audio_.key);
 			} else {
-				this.component.select(element, Audio_.key, false);
+				this.component.select(element, Audio_.key);
 				return;
 			}
 		}

package/src/plugins/modal/embed.js

@@ -257,7 +257,7 @@ class Embed extends EditorInjector {
 			result = await this.submitSRC(this._linkValue);
 		}
 
-		if (result) this._w.setTimeout(this.component.select.bind(this.component, this._element, 'video'), 0);
+		if (result) this._w.setTimeout(this.component.select.bind(this.component, this._element, Embed.key), 0);
 
 		return result;
 	}
@@ -386,7 +386,7 @@ class Embed extends EditorInjector {
 		const focusEl = container.previousElementSibling || container.nextElementSibling;
 		const emptyDiv = container.parentNode;
 
-		const message = await this.triggerEvent('onVideoDeleteBefore', { element: targetEl, container, align: this._align, url: this._linkValue });
+		const message = await this.triggerEvent('onEmbedDeleteBefore', { element: targetEl, container, align: this._align, url: this._linkValue });
 		if (message === false) return;
 
 		dom.utils.removeItem(container);

package/src/plugins/modal/image.js

@@ -946,7 +946,7 @@ class Image_ extends EditorInjector {
 	_updateSrc(src, element, file) {
 		element.src = src;
 		this.fileManager.setFileData(element, file);
-		this.component.select(element, Image_.key, false);
+		this.component.select(element, Image_.key);
 	}
 
 	/**
@@ -1203,7 +1203,7 @@ class Image_ extends EditorInjector {
 		// svg exception handling
 		if (oImg.offsetWidth === 0) this._applySize(_svgDefaultSize, '');
 		if (this.options.get('componentAutoSelect')) {
-			this.component.select(oImg, Image_.key, false);
+			this.component.select(oImg, Image_.key);
 		} else {
 			if (!this.component.isInline(container)) {
 				const line = this.format.addLine(container, null);
@@ -1213,7 +1213,7 @@ class Image_ extends EditorInjector {
 				if (r) {
 					this.selection.setRange(r.container, r.offset, r.container, r.offset);
 				} else {
-					this.component.select(oImg, Image_.key, false);
+					this.component.select(oImg, Image_.key);
 				}
 			}
 		}

package/src/plugins/modal/math.js

@@ -259,7 +259,7 @@ class Math_ extends EditorInjector {
 			const containerEl = dom.query.getParentElement(this.controller.currentTarget, '.se-component');
 			containerEl.replaceWith(mathEl);
 			const compInfo = this.component.get(mathEl);
-			this.component.select(compInfo.target, compInfo.pluginName, false);
+			this.component.select(compInfo.target, compInfo.pluginName);
 			return true;
 		}
 
@@ -271,7 +271,7 @@ class Math_ extends EditorInjector {
 		if (r) {
 			this.selection.setRange(r.container, r.offset, r.container, r.offset);
 		} else {
-			this.component.select(mathEl, Math_.key, false);
+			this.component.select(mathEl, Math_.key);
 		}
 
 		return true;

package/src/plugins/modal/video.js

@@ -285,7 +285,7 @@ class Video extends EditorInjector {
 			result = await this.submitURL(this._linkValue);
 		}
 
-		if (result) this._w.setTimeout(this.component.select.bind(this.component, this._element, 'video'), 0);
+		if (result) this._w.setTimeout(this.component.select.bind(this.component, this._element, Video.key), 0);
 
 		return result;
 	}

package/src/plugins/popup/anchor.js

@@ -112,7 +112,7 @@ class Anchor extends EditorInjector {
 					if (r) {
 						this.selection.setRange(r.container, r.offset, r.container, r.offset);
 					} else {
-						this.component.select(a, Anchor.key, false);
+						this.component.select(a, Anchor.key);
 					}
 					this._init();
 				} else {

package/src/suneditor.js

@@ -91,7 +91,7 @@ export default {
 
 		const multiTargets = [];
 		if (target.nodeType === 1) {
-			multiTargets.push({ target: target });
+			multiTargets.push({ key: null, target: target });
 		} else {
 			let props;
 			for (const key in target) {

package/src/themes/dark.css

@@ -1,11 +1,13 @@
 .sun-editor.se-theme-dark,
 .sun-editor-editable.se-theme-dark {
-	/** --------- editable - styles --------- */
+	/** --------------------------- content - [colors] ----------- */
+	--se-caret-color: #ccc;
+	--se-placeholder-color: #64718c;
 	--se-edit-font-color: #ccc;
 	--se-edit-font-pre: #aaa;
 	--se-edit-font-quote: #888;
-	--se-edit-background-color: #1e1e1e;
-	--se-edit-background-pre: #2a2a2a;
+	--se-edit-background-color: #0f1828;
+	--se-edit-background-pre: #364153;
 	--se-edit-border-light: #555;
 	--se-edit-border-dark: #444;
 	--se-edit-border-dark-n1: #555;
@@ -14,76 +16,107 @@
 	--se-edit-anchor-on-back: #004cff;
 	--se-edit-anchor-on-font: #e8f7ff;
 	--se-edit-hr-color: #ccc;
-	--se-edit-hr-on-back: #2a2a2a;
+	--se-edit-hr-on-back: #77aaff;
 	--se-edit-active: #77aaff;
 	--se-edit-hover: #5599ff;
 	--se-edit-outline: #444;
 
-	/** --------- editor - styles --------- */
+	/** --------------------------- layout - [colors] ----------- */
+	/** main, common */
+	--se-main-font-family: Helvetica Neue;
 	--se-main-out-color: #444;
 	--se-main-color: #ccc;
 	--se-main-color-lighter: #aaa;
-	--se-main-background-color: #1e1e1e;
-	--se-main-background-color2: #2a2a2a;
-	--se-main-background-color3: #333;
+	--se-main-background-color: #0f1828;
+	--se-code-view-color: #030712;
 	--se-main-font-color: #ccc;
-	--se-main-font-color2: #ddd;
+	--se-code-view-background-color: #ddd;
 	--se-main-divider-color: #555;
 	--se-main-border-color: #666;
 	--se-main-outline-color: #444;
 	--se-main-shadow-color: #222;
 	--se-statusbar-font-color: #aaa;
 	--se-overlay-background-color: #111;
-	--se-active-color: #77aaff;
-	--se-active-dark-color: #5599ff;
-	--se-active-dark2-color: #407dd1;
-	--se-active-dark3-color: #77aaff;
-	--se-active-dark4-color: #5599ff;
-	--se-active-dark5-color: #004cff;
-	--se-active-light-color: #002244;
-	--se-active-light2-color: #003366;
-	--se-active-light3-color: #004488;
-	--se-active-light4-color: #0055aa;
-	--se-active-light5-color: #0066cc;
-	--se-active-light6-color: #0077ee;
+
+	/* hover, active */
+	--se-active-color: #5cd2e6;
+	--se-active-dark-color: #3bb9cd;
+	--se-active-dark2-color: #2a9fb1;
+	--se-active-dark3-color: #5cd2e6;
+	--se-active-dark4-color: #3bb9cd;
+	--se-active-dark5-color: #197d91;
+	--se-active-light-color: #17303a;
+	--se-active-light2-color: #1e3f4d;
+	--se-active-light3-color: #255e6f;
+	--se-active-light4-color: #2c7d91;
+	--se-active-light5-color: #33aacc;
+	--se-active-light6-color: #3bd1f2;
+
+	/* [toolbar, menu, modal] layer - shadow */
+	--se-shadow-layer-color: rgba(0, 64, 128, 0.25);
+
+	/* drag */
 	--se-drag-over-color: #ffcc00;
+
+	/* modal, browser, dropdown */
+	--se-modal-background-color: #1c202a;
+	--se-modal-color: #ececec;
 	--se-modal-border-color: #555;
 	--se-modal-anchor-color: #77aaff;
 	--se-modal-preview-color: #aaa;
+	--se-modal-file-input-background-color: #232837;
 	--se-modal-input-disabled-color: #666;
 	--se-modal-input-disabled-background-color: #333;
+
+	/* dropdown, selectMenu */
 	--se-dropdown-font-color: #ccc;
+
+	/* controller */
 	--se-controller-border-color: #555;
+	--se-controller-background-color: #091025;
+	--se-controller-color: #ececec;
+	--se-shadow-controller-color: rgba(80, 200, 255, 0.2);
+
+	/* button : input-side */
 	--se-input-btn-border-color: #444;
 	--se-input-btn-disabled-color: #666;
-	--se-success-color: #33cc33;
-	--se-success-dark-color: #2a7a2a;
-	--se-success-dark2-color: #207a20;
-	--se-success-dark3-color: #1a661a;
-	--se-success-light-color: #00ff00;
-	--se-success-light2-color: #00cc00;
-	--se-success-light3-color: #009900;
-	--se-success-light4-color: #006600;
-	--se-success-light5-color: #003300;
-	--se-error-color: #ff6666;
-	--se-error-dark-color: #b24a48;
-	--se-error-dark2-color: #993333;
-	--se-error-dark3-color: #662222;
-	--se-error-light-color: #ff9999;
-	--se-error-light2-color: #ffcccc;
-	--se-error-light3-color: #ff3333;
-	--se-error-light4-color: #ff0000;
-	--se-error-light5-color: #cc0000;
-	--se-doc-background: #aeaeae;
-	--se-doc-info-page-font-color: #2a2a2a;
+
+	/* success */
+	--se-success-color: #2cb67d;
+	--se-success-dark-color: #1f8f65;
+	--se-success-dark2-color: #186f4f;
+	--se-success-dark3-color: #125f44;
+	--se-success-light-color: #3dd9a5;
+	--se-success-light2-color: #57e2b7;
+	--se-success-light3-color: #8cf0ce;
+	--se-success-light4-color: #c1fae4;
+	--se-success-light5-color: #e9fef5;
+
+	/* error */
+	--se-error-color: #ef4444;
+	--se-error-dark-color: #991b1b;
+	--se-error-dark2-color: #7f1d1d;
+	--se-error-dark3-color: #651616;
+	--se-error-light-color: #f87171;
+	--se-error-light2-color: #fca5a5;
+	--se-error-light3-color: #fecaca;
+	--se-error-light4-color: #fee2e2;
+	--se-error-light5-color: #fef2f2;
+
+	/* document type */
+	--se-doc-background: #344153;
+	--se-doc-info-page-font-color: #0f1828;
 	--se-doc-info-page-background-color: #cfcfcf;
-	--se-doc-info-font-color: #2a2a2a;
-	--se-doc-info-active-color: #4a32ff;
+	/* document type - font, active */
+	--se-doc-info-font-color: #cfcfcf;
+	--se-doc-info-active-color: #5599ff;
+
+	/* loading */
 	--se-loading-color: #77aaff;
+
+	/* show blocks */
 	--se-show-blocks-color: #5599ff;
 	--se-show-blocks-li-color: #d539ff;
 	--se-show-blocks-pre-color: #27c022;
-	--se-shadow-layer-color: rgba(255, 255, 255, 0.5);
-	--se-shadow-controller-color: rgba(255, 255, 255, 0.2);
 	--se-show-blocks-component-color: #f4b124;
 }

package/types/core/base/eventManager.d.ts

@@ -375,4 +375,11 @@ declare class EventManager {
 	 * @param {Event} e The keyboard event
 	 */
 	__enterPrevent(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, e: Event): void;
+	/**
+	 * @private
+	 * @description Scrolls the editor view to the caret position after pressing Enter. (Ignored on mobile devices)
+	 * @this {EventManagerThis}
+	 * @param {*} range Range object
+	 */
+	__enterScrollTo(this: Omit<EventManager & Partial<import('../../editorInjector').default>, 'eventManager'>, range: any): void;
 }

package/types/core/class/component.d.ts

@@ -104,10 +104,19 @@ declare class Component {
 	 * @description The component(media, file component, table, etc) is selected and the resizing module is called.
 	 * @param {Node} element Target element
 	 * @param {string} pluginName The plugin name for the selected target.
-	 * @param {boolean} [isInput=false] Whether the target is an input component.(table)
-	 * @param {boolean} [force=false] Forces the component selection action again even if it is already selected.
+	 * @param {Object} [options] Options
+	 * @param {boolean} [options.isInput=false] Whether the target is an input component.(table)
 	 */
-	select(this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>, element: Node, pluginName: string, isInput?: boolean, force?: boolean): boolean;
+	select(
+		this: Omit<Component & Partial<import('../../editorInjector').default>, 'component'>,
+		element: Node,
+		pluginName: string,
+		{
+			isInput
+		}?: {
+			isInput?: boolean;
+		}
+	): boolean;
 	/**
 	 * @this {ComponentThis}
 	 * @description Deselects the selected component.

package/types/core/class/menu.d.ts

@@ -46,6 +46,8 @@ declare class Menu {
 	_bindClose_dropdown_key: any;
 	_bindClose_cons_mouse: any;
 	currentDropdownPlugin: any;
+	__menuBtn: Node;
+	__menuContainer: HTMLElement;
 	/**
 	 * @this {MenuThis}
 	 * @description Method for managing dropdown element.
@@ -94,6 +96,12 @@ declare class Menu {
 	 * @param {HTMLElement} menu Menu element
 	 */
 	_setMenuPosition(this: Omit<Menu & Partial<import('../../editorInjector').default>, 'menu'>, element: Node, menu: HTMLElement): void;
+	/**
+	 * @private
+	 * @this {MenuThis}
+	 * @description Restore the last menu position using previously stored button and menu elements.
+	 */
+	_restoreMenuPosition(this: Omit<Menu & Partial<import('../../editorInjector').default>, 'menu'>): void;
 	/**
 	 * @private
 	 * @this {MenuThis}