update(table): Optimize drag to change the row and column size

examples/react/editor.less

@@ -10,28 +10,40 @@
 
 body {
 	.am-engine h1,
+	.am-engine-view h1,
 	.am-engine h2,
+	.am-engine-view h2,
 	.am-engine h3,
+	.am-engine-view h3,
 	.am-engine h4,
+	.am-engine-view h4,
 	.am-engine h5,
-	.am-engine h6 {
+	.am-engine-view h5,
+	.am-engine h6.am-engine-view h6 {
 		margin-top: 1em;
 		margin-bottom: 8px;
 	}
 
 	.am-engine > [data-id],
-	.am-engine > div[data-card-key] {
+	.am-engine > div[data-card-key],
+	.am-engine-view > [data-id],
+	.am-engine-view > div[data-card-key] {
 		margin: 8px 0;
 	}
 
 	.am-engine table,
 	.am-engine tbody,
 	.am-engine tr,
-	.am-engine td {
+	.am-engine td,
+	.am-engine-view table,
+	.am-engine-view tbody,
+	.am-engine-view tr,
+	.am-engine-view td {
 		margin: 0;
 	}
 
-	.am-engine > ul > li {
+	.am-engine > ul > li,
+	.am-engine-view > ul > li {
 		margin-top: 4px;
 		margin-bottom: 4px;
 	}

packages/engine/src/card/index.ts

@@ -435,7 +435,7 @@ class CardModel implements CardModelInterface {
 					(!event ||
 						!event?.target ||
 						!this.closest(event.target as Node, false))) ||
-				(card.isEditable && range.collapsed) ||
+				card.isEditable ||
 				card.isMaximize
 			)
 				return;

packages/engine/src/engine/index.css

@@ -589,10 +589,6 @@
     line-height: 1;
 }
 
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
 .am-engine {
     position: relative;
     background-color: #FFFFFF;

packages/engine/src/scrollbar/index.ts

@@ -326,7 +326,7 @@ class Scrollbar extends EventEmitter2 {
 				containerElement.scrollLeft = left;
 			}
 		},
-		isMacos ? 100 : 0,
+		isMacos ? 50 : 0,
 		{ trailing: true },
 	);
 

packages/engine/src/view.ts

@@ -38,6 +38,7 @@ import Block from './block';
 import Command from './command';
 import Request from './request';
 import NodeId from './node/id';
+import { DATA_ELEMENT, ROOT } from './constants';
 
 class View implements ViewInterface {
 	private options: ContentViewOptions = {
@@ -89,6 +90,7 @@ class View implements ViewInterface {
 			this.options.root || this.container.parent() || document.body,
 		);
 		this.container.addClass('am-engine-view');
+		this.container.attributes(DATA_ELEMENT, ROOT);
 		this.mark.init();
 		this.inline.init();
 		this.block.init();

plugins/heading/src/index.ts

@@ -128,6 +128,9 @@ export default class<T extends HeadingOptions> extends BlockPlugin<T> {
 		this.editor.on('select', () => {
 			this.showAnchor();
 		});
+		this.editor.on('blur', () => {
+			this.showAnchor();
+		});
 		window.addEventListener(
 			'resize',
 			() => {
@@ -202,13 +205,18 @@ export default class<T extends HeadingOptions> extends BlockPlugin<T> {
 		if (
 			block.length === 0 ||
 			(button.length > 0 &&
-				button.find('.data-icon-'.concat(block.name)).length === 0)
+				button.find('.data-icon-'.concat(block.name)).length === 0) ||
+			!this.editor.isFocus()
 		) {
 			button.remove();
 			Tooltip.hide();
 		}
 
-		if (block.length === 0 || card.closest(block, true)) {
+		if (
+			block.length === 0 ||
+			card.closest(block, true) ||
+			!this.editor.isFocus()
+		) {
 			return;
 		}
 

plugins/table/src/component/command.ts

@@ -1,6 +1,7 @@
 import {
 	$,
 	ClipboardData,
+	DATA_ID,
 	DATA_TRANSIENT_ATTRIBUTES,
 	EditorInterface,
 	isEngine,
@@ -90,6 +91,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 				: widths;
 			cloneColHeader.css({ width: `${width}px` });
 			const insertCloneCol = cloneNode?.clone();
+			insertCloneCol.removeAttributes(DATA_ID);
 			insertCloneCol.attributes('width', width);
 			insertCloneCol.attributes(
 				DATA_TRANSIENT_ATTRIBUTES,
@@ -98,6 +100,7 @@ class TableCommand extends EventEmitter2 implements TableCommandInterface {
 			if (insertCloneCol.find(Template.TABLE_TD_BG_CLASS).length === 0) {
 				insertCloneCol.append($(Template.CellBG));
 			}
+			this.editor.nodeId.create(insertCloneCol);
 			const baseCol = cols[index];
 			if (insertMethod === 'after') $(baseCol).after(insertCloneCol);
 			else colgroup[0].insertBefore(insertCloneCol[0], baseCol);

plugins/table/src/component/controllbar.ts

@@ -871,9 +871,9 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
 			this.dragging = undefined;
 			// 拖完再渲染一次，行高会受内容限制，无法拖到你想要的高度
 			this.renderRowBars();
-			this.unbindChangeSizeEvent();
 			this.emit('sizeChanged');
 		}
+		this.unbindChangeSizeEvent();
 	};
 
 	onDragStartColsHeader = (event: DragEvent) => {

plugins/table/src/component/index.ts

@@ -654,30 +654,55 @@ class TableComponent<V extends TableValue = TableValue>
 			// 重新绘制列头部和行头部
 			const colsHeader = this.wrapper.find(Template.COLS_HEADER_CLASS);
 			const superValue = super.getValue();
-			if (superValue?.cols) {
-				colsHeader
-					.empty()
-					.append(
-						$(
-							this.template.renderColsHeader(
-								superValue?.cols || 0,
-							),
-						).children(),
-					);
+			let colItems = colsHeader.find(Template.COLS_HEADER_ITEM_CLASS);
+			const colCount = colItems.length;
+			if (superValue.cols > colCount) {
+				colsHeader.append(
+					$(
+						this.template.renderColsHeader(
+							superValue.cols - colCount,
+						),
+					).children(),
+				);
+				colItems = colsHeader.find(Template.COLS_HEADER_ITEM_CLASS);
+			} else if (superValue.cols < colCount) {
+				for (let i = colCount; i > superValue.cols; i--) {
+					colItems.eq(i - 1)?.remove();
+				}
 			}
+			const table = superValue.html
+				? $(superValue.html)
+				: this.wrapper.find('table');
+			const colElements = table.find('col').toArray();
+			colElements.forEach((colElement, index) => {
+				const width = colElement.attributes('width');
+				colItems.eq(index)?.css('width', `${width}px`);
+			});
+
 			const rowsHeader = this.wrapper.find(Template.ROWS_HEADER_CLASS);
-			if (superValue?.rows) {
-				rowsHeader
-					.empty()
-					.append(
-						$(
-							this.template.renderRowsHeader(
-								superValue?.rows || 0,
-							),
-						).children(),
-					);
+			let rowItems = rowsHeader.find(Template.ROWS_HEADER_ITEM_CLASS);
+			const rowCount = rowItems.length;
+			if (superValue.rows > rowCount) {
+				rowsHeader.append(
+					$(
+						this.template.renderRowsHeader(
+							superValue.rows - rowCount,
+						),
+					).children(),
+				);
+				rowItems = rowsHeader.find(Template.ROWS_HEADER_ITEM_CLASS);
+			} else if (superValue.rows < rowCount) {
+				for (let i = rowCount; i > superValue.rows; i--) {
+					rowItems.eq(i - 1)?.remove();
+				}
 			}
+			const rowElements = table.find('tr').toArray();
+			rowElements.forEach((rowElement, index) => {
+				const height = rowElement.css('height');
+				rowItems.eq(index)?.css('height', height);
+			});
 			this.conltrollBar.refresh();
+			this.scrollbar?.refresh();
 			setTimeout(() => {
 				// 找到所有可编辑节点，对没有 contenteditable 属性的节点添加contenteditable一下
 				this.wrapper?.find(EDITABLE_SELECTOR).each((editableNode) => {