suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/src/plugins/dropdown/table/shared/table.constants.js

@@ -0,0 +1,109 @@
+export const ROW_SELECT_MARGIN = 6;
+export const CELL_SELECT_MARGIN = 6;
+export const CELL_DECIMAL_END = 0;
+
+export const RESIZE_CELL_CLASS = '.se-table-resize-line';
+export const RESIZE_CELL_PREV_CLASS = '.se-table-resize-line-prev';
+export const RESIZE_ROW_CLASS = '.se-table-resize-row';
+export const RESIZE_ROW_PREV_CLASS = '.se-table-resize-row-prev';
+
+export const BORDER_LIST = ['none', 'solid', 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'];
+
+export const BORDER_FORMATS = {
+	all: 'border_all',
+	inside: 'border_inside',
+	horizon: 'border_horizontal',
+	vertical: 'border_vertical',
+	outside: 'border_outside',
+	left: 'border_left',
+	top: 'border_top',
+	right: 'border_right',
+	bottom: 'border_bottom',
+	none: 'border_none',
+};
+
+export const BORDER_FORMAT_INSIDE = ['all', 'inside', 'horizon', 'vertical'];
+
+export const BORDER_NS = {
+	l: 'borderLeft',
+	t: 'borderTop',
+	r: 'borderRight',
+	b: 'borderBottom',
+};
+
+export const DEFAULT_BORDER_UNIT = 'px';
+
+export const DEFAULT_COLOR_LIST = [
+	// row-1 (light)
+	'#bbf7d0',
+	'#fde68a',
+	'#fecaca',
+	'#e9d5ff',
+	'#bfdbfe',
+	// row-2 (vivid)
+	'#22c55e',
+	'#eab308',
+	'#ef4444',
+	'#a855f7',
+	'#3b82f6',
+	// row-3 (deep)
+	'#15803d',
+	'#ca8a04',
+	'#b91c1c',
+	'#7e22ce',
+	'#1d4ed8',
+	// row-4 (gray)
+	'#e5e7eb',
+	'#9ca3af',
+	'#6b7280',
+	'#374151',
+	'#000000',
+];
+
+/**
+ * @typedef {Object} TableState
+ * @property {number} physical_cellCnt The number of physical cells in the current row.
+ * @property {number} logical_cellCnt The number of logical cells (columns) in the table.
+ * @property {number} cellCnt Alias for `logical_cellCnt`.
+ * @property {number} rowCnt The total number of rows in the table.
+ * @property {number} rowIndex The index of the current row.
+ * @property {number} physical_cellIndex The physical index of the current cell.
+ * @property {number} logical_cellIndex The logical index of the current cell (taking colspan into account).
+ * @property {number} current_colSpan The colspan of the current cell.
+ * @property {number} current_rowSpan The rowspan of the current cell.
+ * @property {boolean} isShiftPressed Whether the shift key is pressed (multi-selection mode).
+ * @property {Object|null} ref Reference object for multi-selection range calculation.
+ * @property {HTMLElement|null} figureElement The figure element wrapping the table.
+ * @property {HTMLTableElement|null} selectedTable The selected table element.
+ * @property {HTMLTableRowElement|null} trElement The currently active row element.
+ * @property {HTMLCollectionOf<HTMLTableRowElement>|HTMLTableRowElement[]|null} trElements The collection of rows in the table.
+ * @property {HTMLTableCellElement|null} tdElement The currently active cell element.
+ * @property {HTMLTableCellElement|null} fixedCell The anchor cell for selection.
+ * @property {HTMLTableCellElement|null} selectedCell The last selected cell.
+ * @property {HTMLTableCellElement[]|null} selectedCells Array of currently selected cells.
+ */
+
+/**
+ * @type {TableState}
+ */
+export const INITIAL_STATE = {
+	physical_cellCnt: 0,
+	logical_cellCnt: 0,
+	cellCnt: 0,
+	rowCnt: 0,
+	rowIndex: 0,
+	physical_cellIndex: 0,
+	logical_cellIndex: 0,
+	current_colSpan: 0,
+	current_rowSpan: 0,
+	isShiftPressed: false,
+	ref: null,
+	figureElement: null,
+	selectedTable: null,
+	trElement: null,
+	trElements: null,
+	tdElement: null,
+	fixedCell: null,
+	selectedCell: null,
+	selectedCells: null,
+};

package/src/plugins/dropdown/table/shared/table.utils.js

@@ -0,0 +1,219 @@
+import { dom, numbers, env } from '../../../../helper';
+import * as Constants from './table.constants';
+
+const { _w } = env;
+
+/**
+ * @description Cache for selected cell range references. (Use drag cells)
+ * - Stores the calculated logical start/end positions (row, col) for a given selection.
+ * @type {WeakMap<HTMLTableElement, Map<string, {cs: number, ce: number, rs: number, re: number, _i: number}>>}
+ */
+export const refCache = new WeakMap();
+
+/**
+ * @description Cache for mapping a table’s physical coordinates (row, cellIndex) to a logical column index
+ * @type {WeakMap<HTMLTableElement, number[][]>}
+ */
+const logicalIndexMapCache = new WeakMap();
+
+/**
+ * @description Builds a matrix of logical indices for the table.
+ * @param {HTMLTableElement} table The table element.
+ * @returns {number[][]} A 2D array where matrix[row][cell] = logicalColumnIndex.
+ */
+function BuildMatrix(table) {
+	const matrix = [];
+
+	const rows = table.rows;
+	const rowSpanMap = [];
+	for (let r = 0, rLen = rows.length; r < rLen; r++) {
+		const cells = rows[r].cells;
+		matrix[r] = [];
+
+		let logicalCol = 0;
+		for (let c = 0, cLen = cells.length; c < cLen; c++) {
+			while (rowSpanMap[r]?.[logicalCol]) {
+				logicalCol++;
+			}
+
+			matrix[r][c] = logicalCol;
+
+			// span calc
+			const cell = cells[c];
+			const colspan = cell.colSpan || 1;
+			const rowspan = cell.rowSpan || 1;
+
+			if (rowspan > 1) {
+				for (let rs = 1; rs < rowspan; rs++) {
+					if (!rowSpanMap[r + rs]) rowSpanMap[r + rs] = [];
+					for (let cs = 0; cs < colspan; cs++) {
+						rowSpanMap[r + rs][logicalCol + cs] = true;
+					}
+				}
+			}
+
+			logicalCol += colspan;
+		}
+	}
+
+	return matrix;
+}
+
+/** ================================================================================================================================ */
+
+/**
+ * @description Checks if the given node is a resizable table element.
+ * @param {Node} node The DOM node to check.
+ * @returns {boolean} True if the node is a table-related resizable element.
+ */
+export function IsResizeEls(node) {
+	return /^(TD|TH|TR)$/i.test(node?.nodeName);
+}
+
+/**
+ * @description Check table caption
+ * @param {Node} node The DOM node to check.
+ * @returns {boolean}
+ */
+export function IsTableCaption(node) {
+	return /^CAPTION$/i.test(node.nodeName);
+}
+
+/**
+ * @description Checks if a table cell is at its edge based on the mouse event.
+ * @param {MouseEvent} event The mouse event.
+ * @param {Element} tableCell The table cell to check.
+ * @returns {Object} An object containing edge detection details.
+ */
+export function CheckCellEdge(event, tableCell) {
+	const startX = event.clientX;
+	const startWidth = numbers.get(_w.getComputedStyle(tableCell).width, Constants.CELL_DECIMAL_END);
+	const rect = tableCell.getBoundingClientRect();
+	const offsetX = Math.round(startX - rect.left);
+	const isLeft = offsetX <= Constants.CELL_SELECT_MARGIN;
+	const is = isLeft || startWidth - offsetX <= Constants.CELL_SELECT_MARGIN;
+
+	return {
+		is,
+		isLeft,
+		startX,
+	};
+}
+
+/**
+ * @description Checks if a row is at its edge based on the mouse event.
+ * @param {MouseEvent} event The mouse event.
+ * @param {Element} tableCell The table row cell to check.
+ * @returns {Object} An object containing row edge detection details.
+ */
+export function CheckRowEdge(event, tableCell) {
+	const startY = event.clientY;
+	const startHeight = numbers.get(_w.getComputedStyle(tableCell).height, Constants.CELL_DECIMAL_END);
+	const rect = tableCell.getBoundingClientRect();
+	const is = Math.ceil(startHeight + rect.top - startY) <= Constants.ROW_SELECT_MARGIN;
+
+	return {
+		is,
+		startY,
+	};
+}
+
+/**
+ * @description Creates table cells as elements strings.
+ * @param {string} nodeName The tag name of the cell (`TD` or `TH`).
+ * @param {number} cnt The number of cells to create.
+ * @returns {string} The created cells string.
+ */
+export function CreateCellsString(nodeName, cnt) {
+	nodeName = nodeName.toLowerCase();
+	return `<${nodeName}><div><br></div></${nodeName}>`.repeat(cnt);
+}
+
+/**
+ * @description Creates table cells as element HTML.
+ * @param {string} nodeName The tag name of the cell (`TD` or `TH`).
+ * @returns {HTMLTableCellElement} The created cell element.
+ */
+export function CreateCellsHTML(nodeName) {
+	nodeName = nodeName.toLowerCase();
+	return /** @type {HTMLTableCellElement} */ (dom.utils.createElement(nodeName, null, '<div><br></div>'));
+}
+
+/**
+ * @description Gets the maximum number of columns in a table.
+ * @param {HTMLTableElement} table The table element.
+ * @returns {number} The maximum number of columns in the table.
+ */
+export function GetMaxColumns(table) {
+	const rows = table.rows;
+	let maxColumns = 0;
+
+	for (let i = 0, len = rows.length; i < len; i++) {
+		const cells = rows[i].cells;
+		let columnCount = 0;
+
+		for (let j = 0, jLen = cells.length; j < jLen; j++) {
+			columnCount += cells[j].colSpan;
+		}
+
+		maxColumns = Math.max(maxColumns, columnCount);
+	}
+
+	return maxColumns;
+}
+
+/**
+ * @description Gets the logical cell index for a cell in a table.
+ * @param {HTMLTableElement} table The table element.
+ * @param {number} rowIndex The physical row index.
+ * @param {number} cellIndex The physical cell index.
+ * @returns {number} The logical cell index.
+ */
+export function GetLogicalCellIndex(table, rowIndex, cellIndex) {
+	let indexMap = logicalIndexMapCache.get(table);
+
+	if (!indexMap) {
+		indexMap = BuildMatrix(table);
+		logicalIndexMapCache.set(table, indexMap);
+	}
+
+	return indexMap[rowIndex]?.[cellIndex] ?? 0;
+}
+
+/**
+ * @description Clone a table element and map selected cells to the cloned table
+ * @param {HTMLTableElement} table `<table>` element
+ * @param {HTMLTableCellElement[]} selectedCells Selected cells array
+ * @returns {{ clonedTable: HTMLTableElement, clonedSelectedCells: HTMLTableCellElement[] }}
+ */
+export function CloneTable(table, selectedCells) {
+	/** @type {HTMLTableElement} */
+	const clonedTable = dom.utils.clone(table, true);
+
+	const originalCells = Array.from(table.querySelectorAll('td, th'));
+	const clonedCells = Array.from(clonedTable.querySelectorAll('td, th'));
+
+	const clonedSelectedCells = /** @type {HTMLTableCellElement[]} */ (
+		selectedCells
+			.map((cell) => {
+				const index = originalCells.indexOf(cell);
+				return index > -1 ? clonedCells[index] : null;
+			})
+			.filter((cell) => cell !== null)
+	);
+
+	return {
+		clonedTable,
+		clonedSelectedCells,
+	};
+}
+
+/**
+ * @description Clear table cache
+ * @param {HTMLTableElement} table The table element.
+ */
+export function InvalidateTableCache(table) {
+	if (!table) return;
+	refCache.delete(table);
+	logicalIndexMapCache.delete(table);
+}

package/src/plugins/dropdown/template.js

@@ -1,25 +1,28 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} TemplatePluginOptions
+ * @property {Array<{name: string, html: string}>} [items] - Template list
+ */
+
 /**
  * @class
  * @description Template Plugin, Apply a template to the selection.
  */
-class Template extends EditorInjector {
+class Template extends PluginDropdown {
 	static key = 'template';
-	static type = 'dropdown';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {TemplatePluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.template;
+		this.title = this.$.lang.template;
 		this.icon = 'template';
 
 		// members
@@ -30,30 +33,32 @@ class Template extends EditorInjector {
 		const menu = CreateHTML(this.items);
 
 		// init
-		this.menu.initDropdownTarget(Template, menu);
+		this.$.menu.initDropdownTarget(Template, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		const index = Number(target.getAttribute('data-value'));
 		const temp = this.items[(this.selectedIndex = index)];
 
 		if (temp.html) {
-			this.html.insert(temp.html, { selectInserted: false, skipCharCount: false, skipCleaning: false });
+			this.$.html.insert(temp.html, { selectInserted: false, skipCharCount: false, skipCleaning: false });
 		} else {
-			this.menu.dropdownOff();
+			this.$.menu.dropdownOff();
 			throw Error('[SUNEDITOR.template.fail] cause : "templates[i].html not found"');
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 }
 
+/**
+ * @param {Array<{name: string, html: string}>} templateList - Template items
+ * @returns {HTMLElement}
+ */
 function CreateHTML(templateList) {
 	if (!templateList || templateList.length === 0) {
 		console.warn('[SUNEDITOR.plugins.template.warn] To use the "template" plugin, please define the "templates" option.');

package/src/plugins/dropdown/textStyle.js

@@ -1,44 +1,47 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} TextStylePluginOptions
+ * @property {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style item list
+ */
+
 /**
  * @class
  * @description Text style Plugin, Applies a tag that specifies text styles to a selection.
  */
-class TextStyle extends EditorInjector {
+class TextStyle extends PluginDropdown {
 	static key = 'textStyle';
-	static type = 'dropdown';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {TextStylePluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.textStyle;
+		this.title = this.$.lang.textStyle;
 		this.icon = 'text_style';
 
 		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
+		const menu = CreateHTML(this.$, pluginOptions.items);
 
 		// members
 		this.styleList = menu.querySelectorAll('li button');
 
 		// init
-		this.menu.initDropdownTarget(TextStyle, menu);
+		this.$.menu.initDropdownTarget(TextStyle, menu);
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @override
+	 * @type {PluginDropdown['on']}
 	 */
 	on() {
 		const styleButtonList = this.styleList;
-		const selectionNode = this.selection.getNode();
+		const selectionNode = this.$.selection.getNode();
 
 		for (let i = 0, len = styleButtonList.length, btn, data, active; i < len; i++) {
 			btn = styleButtonList[i];
@@ -48,7 +51,7 @@ class TextStyle extends EditorInjector {
 				node = selectionNode;
 				active = false;
 
-				while (node && !this.format.isLine(node) && !this.component.is(node)) {
+				while (node && !this.$.format.isLine(node) && !this.$.component.is(node)) {
 					if (node.nodeName.toLowerCase() === btn.getAttribute('data-command').toLowerCase()) {
 						value = data[v];
 						if (/^\./.test(value) ? dom.utils.hasClass(node, value.replace(/^\./, '')) : /** @type {HTMLElement} */ (node).style[value]) {
@@ -67,10 +70,8 @@ class TextStyle extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		const tempElement = /** @type {HTMLElement} */ (target.firstElementChild);
@@ -84,24 +85,29 @@ class TextStyle extends EditorInjector {
 
 		const newNode = dom.utils.hasClass(target, 'active') ? null : tempElement.cloneNode(false);
 		const removeNodes = newNode ? null : [tempElement.nodeName];
-		this.format.applyInlineElement(newNode, { stylesToModify: checkStyles, nodesToRemove: removeNodes, strictRemove: true });
+		this.$.inline.apply(newNode, { stylesToModify: checkStyles, nodesToRemove: removeNodes, strictRemove: true });
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style items
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, items) {
 	const defaultList = {
 		code: {
 			name: lang.menu_code,
 			class: '__se__t-code',
-			tag: 'code'
+			tag: 'code',
 		},
 		shadow: {
 			name: lang.menu_shadow,
 			class: '__se__t-shadow',
-			tag: 'span'
-		}
+			tag: 'span',
+		},
 	};
 	const styleList = items || Object.keys(defaultList);