fix(table):新增行/列无法输入问题

plugins/table/src/component/command.ts

@@ -111,7 +111,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 			const insertIndex = selection.getCellIndex(r, insertCol);
 			for (let r = 0; r < count; r++) {
 				const td = (tr as HTMLTableRowElement).insertCell(insertIndex);
-				td.innerHTML = Template.EmptyCell;
+				td.innerHTML = this.table.template.getEmptyCell();
 				$(td).attributes(
 					DATA_TRANSIENT_ATTRIBUTES,
 					'table-cell-selection',
@@ -238,7 +238,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 								?.get<HTMLTableRowElement>()
 								?.insertCell(insertIndex);
 							if (!td) return;
-							td.innerHTML = Template.EmptyCell;
+							td.innerHTML = this.table.template.getEmptyCell();
 							td.colSpan = tdModel.colSpan - cutCount;
 							td.rowSpan = tdModel.rowSpan;
 							//if(tdModel.element)
@@ -324,7 +324,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 			if (!tr) return;
 			insertTdProps.forEach((props) => {
 				const td = tr.insertCell();
-				td.innerHTML = Template.EmptyCell;
+				td.innerHTML = this.table.template.getEmptyCell();
 				td.colSpan = props.tdBase.colSpan;
 			});
 			$(baseRowBar)[insertMethod](
@@ -417,7 +417,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 							trs[end.row + 1] as HTMLTableRowElement
 						).insertCell(insertIndex);
 						const cutCount = end.row - r + 1;
-						td.innerHTML = Template.EmptyCell;
+						td.innerHTML = this.table.template.getEmptyCell();
 						td.colSpan = tdModel.colSpan;
 						td.rowSpan = tdModel.rowSpan - cutCount;
 					}
@@ -526,7 +526,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 
 		selection.each((tdModel) => {
 			if (!helper.isEmptyModelCol(tdModel) && tdModel.element) {
-				tdModel.element.innerHTML = Template.EmptyCell;
+				tdModel.element.innerHTML = this.table.template.getEmptyCell();
 			}
 		});
 		this.emit('actioned', 'clear');
@@ -736,7 +736,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 						const _td2 = (tr as HTMLTableRowElement).insertCell(
 							_insertIndex2,
 						);
-						_td2.innerHTML = Template.EmptyCell;
+						_td2.innerHTML = this.table.template.getEmptyCell();
 					}
 				}
 			}

plugins/table/src/component/helper.ts

@@ -14,6 +14,7 @@ import {
 	NodeInterface,
 	transformCustomTags,
 	EditorInterface,
+	isEngine,
 } from '@aomao/engine';
 import Template from './template';
 
@@ -279,7 +280,11 @@ class Helper implements HelperInterface {
 			if (editableElement.length === 0) {
 				const content = tdNode.html();
 				tdNode.empty();
-				tdNode.append(Template.EmptyCell);
+				tdNode.append(
+					Template.EmptyCell(
+						!isEngine(this.#editor) || this.#editor.readonly,
+					),
+				);
 				editableElement = tdNode.find(EDITABLE_SELECTOR);
 				editableElement.html(content);
 			}
@@ -420,7 +425,11 @@ class Helper implements HelperInterface {
 
 		let editableElement = to.find(EDITABLE_SELECTOR);
 		if (editableElement.length === 0) {
-			to.html(Template.EmptyCell);
+			to.html(
+				Template.EmptyCell(
+					!isEngine(this.#editor) || this.#editor.readonly,
+				),
+			);
 			editableElement = to.find(EDITABLE_SELECTOR);
 		}
 		editableElement.html(transformCustomTags(from.html()));

plugins/table/src/component/index.ts

@@ -813,7 +813,8 @@ class TableComponent<V extends TableValue = TableValue>
 	}
 
 	render() {
-		Template.isReadonly = !isEngine(this.editor) || this.editor.readonly;
+		this.template.isReadonly =
+			!isEngine(this.editor) || this.editor.readonly;
 		// 重新渲染
 		if (
 			this.wrapper &&
@@ -879,7 +880,7 @@ class TableComponent<V extends TableValue = TableValue>
 					if (!editableElement.hasAttribute('contenteditable')) {
 						editableElement.setAttribute(
 							'contenteditable',
-							Template.isReadonly ? 'false' : 'true',
+							this.template.isReadonly ? 'false' : 'true',
 						);
 					}
 				});

plugins/table/src/component/template.ts

@@ -70,11 +70,14 @@ class Template implements TemplateInterface {
 	static readonly TABLE_TD_CONTENT_CLASS = `.${TABLE_TD_CONTENT_CLASS_NAME}`;
 	static readonly TABLE_TD_BG_CLASS = `.${TABLE_TD_BG_CLASS_NAME}`;
 	static readonly CellBG = `<div class="${TABLE_TD_BG_CLASS_NAME}"><div class="table-main-border-top"></div><div class="table-main-border-right"></div><div class="table-main-border-bottom"></div><div class="table-main-border-left"></div></div>`;
-	static isReadonly = false;
+	isReadonly: boolean = false;
-	static get EmptyCell() {
+	static EmptyCell(readonly: boolean = false) {
 		return `<div class="${TABLE_TD_CONTENT_CLASS_NAME}" ${DATA_TRANSIENT_ATTRIBUTES}="contenteditable" contenteditable="${
-			Template.isReadonly ? 'false' : 'true'
+			readonly ? 'false' : 'true'
-		}" ${DATA_ELEMENT}="${EDITABLE}"><p><br /></p></div>${this.CellBG}`;
+		}" ${DATA_ELEMENT}="${EDITABLE}"><p><br /></p></div>${Template.CellBG}`;
+	}
+	getEmptyCell() {
+		return Template.EmptyCell(this.isReadonly);
 	}
 	private table: TableInterface;
 
@@ -133,7 +136,7 @@ class Template implements TemplateInterface {
 		cols = cols === Infinity ? 10 : cols;
 		rows = rows === Infinity ? 10 : rows;
 		const tds =
-			`<td ${DATA_TRANSIENT_ATTRIBUTES}="table-cell-selection">${Template.EmptyCell}</td>`.repeat(
+			`<td ${DATA_TRANSIENT_ATTRIBUTES}="table-cell-selection">${this.getEmptyCell()}</td>`.repeat(
 				cols,
 			);
 		const trs = `<tr>${tds}</tr>`.repeat(rows);

plugins/table/src/index.ts

@@ -11,15 +11,13 @@ import {
 	READY_CARD_KEY,
 	decodeCardValue,
 	CARD_VALUE_KEY,
-	CARD_SELECTOR,
 	transformCustomTags,
-	READY_CARD_SELECTOR,
 } from '@aomao/engine';
+import { DATA_ID } from '@aomao/engine';
 import TableComponent, { Template, Helper } from './component';
 import locales from './locale';
 import { TableInterface, TableOptions, TableValue } from './types';
 import './index.css';
-import { DATA_ID } from '@aomao/engine';
 class Table<T extends TableOptions = TableOptions> extends Plugin<T> {
 	static get pluginName() {
 		return 'table';

plugins/table/src/types.ts

@@ -89,6 +89,10 @@ export interface HelperInterface {
 }
 
 export interface TemplateInterface {
+	/**
+	 * 是否只读
+	 */
+	isReadonly: boolean;
 	/**
 	 * 用于Card渲染
 	 * @param {object} value 参数
@@ -98,11 +102,25 @@ export interface TemplateInterface {
 	 * @return {string} 返回 html 字符串
 	 */
 	htmlEdit(value: TableValue, menus: TableMenu): string;
-
+	/**
+	 * 阅读模式渲染
+	 * @param value
+	 */
 	htmlView(value: TableValue): string;
-
+	/**
+	 * 获取空的单元格模版
+	 */
+	getEmptyCell(): string;
+	/**
+	 * 获取指定行数的行 header
+	 * @param rows
+	 */
 	renderRowsHeader(rows: number): string;
-	renderColsHeader(rows: number): string;
+	/**
+	 * 获取指定列数的列 header
+	 * @param cols
+	 */
+	renderColsHeader(cols: number): string;
 }
 
 export interface TableValue extends CardValue {