fix(table): 表格初始化加载会出现在历史记录

packages/engine/src/change/index.ts

@@ -135,7 +135,7 @@ class ChangeModel implements ChangeInterface {
 		this.clearChangeTimer();
 		this.changeTimer = setTimeout(() => {
 			this._change();
-		}, 200);
+		}, 50);
 	}
 
 	private clearChangeTimer() {

packages/engine/src/history.ts

@@ -191,7 +191,7 @@ class HistoryModel implements HistoryInterface {
 			if (!isCursorOp(op)) {
 				isSave = true;
 				if (this.filterEvents.some((filter) => filter(op))) {
-					if (this.actionOps.length > 0)
+					if (this.actionOps.length > 0 && !op['nl'])
 						this.actionOps[this.actionOps.length - 1].ops?.push(op);
 				} else {
 					this.currentAction.self = true;

packages/engine/src/types/card.ts

@@ -374,8 +374,9 @@ export interface CardInterface<T extends CardValue = CardValue> {
 	executeMark?(mark?: NodeInterface, warp?: boolean): void;
 	/**
 	 * 查询当前卡片包含的所有mark样式
+	 * @param clone 是否克隆
 	 */
-	queryMarks?(): NodeInterface[];
+	queryMarks?(clone?: boolean): NodeInterface[];
 }
 
 export interface CardModel {

plugins/mark-range/src/index.ts

@@ -19,6 +19,7 @@ import Engine, {
 	isView,
 	View,
 	EditorInterface,
+	CardInterface,
 } from '@aomao/engine';
 import { Path } from 'sharedb';
 
@@ -172,18 +173,28 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 		const { startNode, startOffset, endNode, endOffset, collapsed } =
 			cloneRange;
 		let startMark = startNode.closest(`[${this.MARK_KEY}]`);
-		const startChild = startNode.children().eq(startOffset);
+		const startChild = startNode.isElement()
+			? startNode.children().eq(startOffset)
+			: startNode;
+		let component: CardInterface | undefined;
 		//如果选择是块级卡片就选择在卡片根节点
 		if (startNode.type === Node.ELEMENT_NODE && startChild?.isBlockCard()) {
 			startMark = startChild;
 		} else {
-			const cardMark = card.find(startMark);
-			if (
-				cardMark &&
-				!cardMark.isEditable &&
-				cardMark.root.isBlockCard()
+			component = card.find(
+				startMark.length == 0 && startChild ? startChild : startMark,
+			);
+			if (component?.queryMarks) {
+				const cardMark = component
+					.queryMarks(false)
+					.find((mark) => !!mark.attributes(this.MARK_KEY));
+				if (cardMark) startMark = cardMark;
+			} else if (
+				component &&
+				!component.isEditable &&
+				component.root.isBlockCard()
 			) {
-				startMark = cardMark.root;
+				startMark = component.root;
 			}
 		}
 		let key = startMark.attributes(this.MARK_KEY);
@@ -193,7 +204,12 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 		let selectId: string | undefined = !!startId ? startId : undefined;
 
 		//不是重合状态，并且开始节点不是块级卡片
-		if (!collapsed && !!startId && !startMark.isBlockCard()) {
+		if (
+			!collapsed &&
+			!!startId &&
+			!startMark.isBlockCard() &&
+			!component?.queryMarks
+		) {
 			let endMark = endNode.closest(`[${this.MARK_KEY}]`);
 			const endKey = endMark.attributes(this.MARK_KEY);
 			const endChild = endNode.children().eq(endOffset);
@@ -410,7 +426,7 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 				}
 				const cardComponent = this.editor.card.find(mark);
 				if (cardComponent && cardComponent.executeMark) {
-					cardComponent.executeMark(mark.clone(), false);
+					cardComponent.executeMark(mark.clone(), true);
 				}
 			});
 		this.#isApply = true;
@@ -642,14 +658,15 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 		container.css({
 			position: 'fixed',
 			top: '-999px',
-			width: '100%',
+			width: this.editor.container.css('width') || '100%',
 			clip: 'rect(0, 0, 0, 0)',
 		});
 		$(document.body).append(container);
 
-		const editor: EditorInterface = isEngine(this.editor)
-			? new Engine(container, this.editor.options)
-			: new View(container, this.editor.options);
+		const editor: EditorInterface = new View(
+			container,
+			this.editor.options,
+		);
 
 		const { node, card } = editor;
 		if (value) container.html(transformCustomTags(value));
@@ -747,13 +764,14 @@ export default class<T extends MarkRangeOptions> extends MarkPlugin<T> {
 		container.css({
 			position: 'fixed',
 			top: '-999px',
-			width: '100%',
+			width: this.editor.container.css('width') || '100%',
 			clip: 'rect(0, 0, 0, 0)',
 		});
 		$(document.body).append(container);
-		const editor: EditorInterface = isEngine(this.editor)
-			? new Engine(container, this.editor.options)
-			: new View(container, this.editor.options);
+		const editor: EditorInterface = new View(
+			container,
+			this.editor.options,
+		);
 		const { card } = editor;
 		if (value) container.html(transformCustomTags(value));
 		card.render(container, undefined, false);

plugins/table/src/component/controllbar.ts

@@ -330,7 +330,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
 					range.startNode,
 					CardActiveTrigger.MOUSE_DOWN,
 				);
-				this.editor.focus();
+				change.range.select(range);
 			},
 		);
 

plugins/table/src/component/index.ts

@@ -623,7 +623,7 @@ class TableComponent<V extends TableValue = TableValue>
 				const value = this.getValue();
 				if (value) this.setValue(value);
 			}
-		}, 100);
+		}, 50);
 	};
 
 	maximize() {
@@ -678,6 +678,8 @@ class TableComponent<V extends TableValue = TableValue>
 		});
 	};
 
+	isChanged: boolean = false;
+
 	didRender() {
 		super.didRender();
 		this.viewport = isEngine(this.editor)
@@ -762,6 +764,9 @@ class TableComponent<V extends TableValue = TableValue>
 		}
 		this.selection.on('select', () => {
 			this.conltrollBar.refresh();
+			setTimeout(() => {
+				this.isChanged = true;
+			}, 200);
 			if (!isEngine(this.editor)) return;
 			const { selectArea, tableModel } = this.selection;
 			if (selectArea && selectArea.count > 1 && tableModel) {

plugins/table/src/index.css

@@ -251,7 +251,7 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
 .table-wrapper .table-rows-header {
     position: absolute;
     left: -13px;
-    top: 41px;
+    top: 42px;
     width: 14px;
     z-index: 1;
     border-right: 0;
@@ -276,9 +276,8 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
     background-color: #e2e4e6;
 }
 
-.table-wrapper .table-rows-header .table-rows-header-item:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+.table-wrapper .table-rows-header .table-rows-header-item:nth-child(3) {
+    border-top: 0 none;
 }
 
 .table-wrapper .table-rows-header .table-rows-header-item:last-child{

plugins/table/src/index.ts

@@ -15,8 +15,10 @@ import {
 } from '@aomao/engine';
 import TableComponent, { Template, Helper } from './component';
 import locales from './locale';
-import { TableOptions, TableValue } from './types';
+import { TableInterface, TableOptions, TableValue } from './types';
 import './index.css';
+import { DATA_ID } from '@aomao/engine';
+import { CardInterface } from '@aomao/engine';
 class Table<T extends TableOptions = TableOptions> extends Plugin<T> {
 	static get pluginName() {
 		return 'table';
@@ -59,6 +61,45 @@ class Table<T extends TableOptions = TableOptions> extends Plugin<T> {
 				(event) => this.onPaste(event),
 				0,
 			);
+			// 过滤掉表格初始化的时候调整后的宽度作为历史记录
+			const targetTableCache: Record<string, TableInterface> = {};
+			editor.history.onFilter((op) => {
+				if (
+					op.id &&
+					(('od' in op &&
+						(op.od.startsWith('width') ||
+							op.od === op.id ||
+							op.od.startsWith('data:') ||
+							/^\d+$/.test(op.od))) ||
+						('oi' in op &&
+							(op.oi.startsWith('width') ||
+								op.oi === op.id ||
+								op.oi.startsWith('data:') ||
+								/^\d+$/.test(op.oi))))
+				) {
+					let component: TableInterface | undefined =
+						targetTableCache[op.id];
+					if (!component || !component.root.parent()) {
+						const targetNode = $(`[${DATA_ID}="${op.id}"]`);
+						delete targetTableCache[op.id];
+						if (targetNode.length > 0) {
+							component = editor.card.find<
+								TableValue,
+								TableComponent
+							>(targetNode);
+							//if(component && component?.name === TableComponent.cardName) targetTableCache[op.id] = component
+						}
+					}
+					if (
+						component?.name === TableComponent.cardName &&
+						!component.isChanged
+					) {
+						op['nl'] = true;
+						return true;
+					}
+				}
+				return false;
+			});
 		}
 	}
 

plugins/table/src/types.ts

@@ -160,6 +160,7 @@ export interface TableInterface<V extends TableValue = TableValue>
 	command: TableCommandInterface;
 	colMinWidth: number;
 	rowMinHeight: number;
+	isChanged: boolean;
 	/**
 	 * 渲染
 	 */