From 8bbb9d0dc4b79e25a6c89fdee303acda359082c8 Mon Sep 17 00:00:00 2001
From: yanmao <55792257+yanmao-cc@users.noreply.github.com>
Date: Sat, 18 Dec 2021 13:58:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8D=8F=E5=90=8C=E4=B8=8B=E6=87=92?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/engine/src/ot/producer.ts       |  6 +----
 packages/engine/src/ot/range-coloring.ts | 30 ++++++++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/engine/src/ot/producer.ts b/packages/engine/src/ot/producer.ts
index 295ac88d..48f30a44 100644
--- a/packages/engine/src/ot/producer.ts
+++ b/packages/engine/src/ot/producer.ts
@@ -539,11 +539,7 @@ class Producer extends EventEmitter2 {
 						},
 					);
 					// 没有这个卡片节点，或者卡片内部已经渲染了才需要过滤
-					if (
-						result &&
-						!result.rendered &&
-						cardElement.attributes(CARD_LOADING_KEY) !== 'remote'
-					) {
+					if (result && !result.rendered) {
 						isTransient = false;
 						record['nl'] = true;
 					} else {
diff --git a/packages/engine/src/ot/range-coloring.ts b/packages/engine/src/ot/range-coloring.ts
index 59ccfc6c..c7e30eb2 100644
--- a/packages/engine/src/ot/range-coloring.ts
+++ b/packages/engine/src/ot/range-coloring.ts
@@ -71,17 +71,27 @@ class RangeColoring implements RangeColoringInterface {
 		range: RangeInterface,
 		style: DrawStyle,
 	) {
-		let startOffset = range.startOffset;
-		while (startOffset < range.endOffset) {
-			range.setStart(range.commonAncestorContainer, startOffset);
-			range.setEnd(range.commonAncestorContainer, startOffset + 1);
-			const rect = this.getRectWithRange(node, range);
-			canvas.clearRect(rect);
-			canvas.drawRect({ ...rect.toJSON(), ...style });
-			startOffset++;
+		const { startOffset, startNode, endNode } = range;
+		let start = range.startOffset;
+		const endOffset = range.endOffset;
+		let startTop = range.getClientRect().top;
+		let drawOffset = startOffset;
+		while (start < endOffset) {
+			range.setStart(range.commonAncestorContainer, start);
+			range.setEnd(range.commonAncestorContainer, start + 1);
+			const curRect = range.getClientRect();
+			if (curRect.top > startTop || start === endOffset - 1) {
+				range.setStart(range.commonAncestorContainer, drawOffset);
+				drawOffset = start;
+				startTop = curRect.top;
+				const rect = this.getRectWithRange(node, range);
+				canvas.clearRect(rect);
+				canvas.drawRect({ ...rect.toJSON(), ...style });
+			}
+			start++;
 		}
-		range.setStart(range.startContainer, range.startOffset);
-		range.setEnd(range.endContainer, range.endOffset);
+		range.setStart(startNode, startOffset);
+		range.setEnd(endNode, endOffset);
 	}
 
 	drawBackground(