fix(editor): render position of repeated sentence (#9948)

blocksuite/playground/examples/renderer/canvas.worker.ts

@@ -42,6 +42,9 @@ class CanvasWorkerManager {
     const { canvas, ctx } = this;
     if (!canvas || !ctx) return;
 
+    // Track rendered positions to avoid duplicate rendering across all paragraphs and sentences
+    const renderedPositions = new Set<string>();
+
     paragraphs.forEach(paragraph => {
       const scale = paragraph.scale ?? 1;
       const fontSize = 15 * scale;
@@ -53,14 +56,16 @@ class CanvasWorkerManager {
         sentence.rects.forEach(textRect => {
           const x = textRect.rect.left - hostRect.left;
           const y = textRect.rect.top - hostRect.top;
-          ctx.strokeRect(x, y, textRect.rect.width, textRect.rect.height);
-        });
 
-        ctx.fillStyle = 'black';
+          const posKey = `${x},${y}`;
-        sentence.rects.forEach(textRect => {
+          // Only render if we haven't rendered at this position before
-          const x = textRect.rect.left - hostRect.left;
+          if (renderedPositions.has(posKey)) return;
-          const y = textRect.rect.top - hostRect.top;
+
+          ctx.strokeRect(x, y, textRect.rect.width, textRect.rect.height);
+          ctx.fillStyle = 'black';
           ctx.fillText(textRect.text, x, y + baselineY);
+
+          renderedPositions.add(posKey);
         });
       });
     });

blocksuite/playground/examples/renderer/text-utils.ts

@@ -89,7 +89,6 @@ export function getSentenceRects(
   element: Element,
   sentence: string
 ): TextRect[] {
-  const range = document.createRange();
   const textNode = Array.from(element.childNodes).find(
     node => node.nodeType === Node.TEXT_NODE
   );
@@ -97,13 +96,20 @@ export function getSentenceRects(
   if (!textNode) return [];
 
   const text = textNode.textContent || '';
-  const startIndex = text.indexOf(sentence);
+  let rects: TextRect[] = [];
-  if (startIndex === -1) return [];
+  let startIndex = 0;
 
-  range.setStart(textNode, startIndex);
+  // Find all occurrences of the sentence
-  range.setEnd(textNode, startIndex + sentence.length);
+  while ((startIndex = text.indexOf(sentence, startIndex)) !== -1) {
+    const range = document.createRange();
+    range.setStart(textNode, startIndex);
+    range.setEnd(textNode, startIndex + sentence.length);
 
-  return getRangeRects(range, sentence);
+    rects = rects.concat(getRangeRects(range, sentence));
+    startIndex += sentence.length; // Move to next potential occurrence
+  }
+
+  return rects;
 }
 
 export function segmentSentences(text: string): string[] {