fix(editor): adapt font size in turbo renderer (#10858)

blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-layout-provider.ts

@@ -39,6 +39,10 @@ export class ParagraphLayoutHandlerExtension extends BlockLayoutHandlerExtension
     };
 
     paragraphNodes.forEach(paragraphNode => {
+      const computedStyle = window.getComputedStyle(paragraphNode);
+      const fontSizeStr = computedStyle.fontSize;
+      const fontSize = parseInt(fontSizeStr);
+
       const sentences = segmentSentences(paragraphNode.textContent || '');
       const sentenceLayouts = sentences.map(sentence => {
         const sentenceRects = getSentenceRects(paragraphNode, sentence);
@@ -60,6 +64,7 @@ export class ParagraphLayoutHandlerExtension extends BlockLayoutHandlerExtension
         return {
           text: sentence,
           rects,
+          fontSize,
         };
       });
 

blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-painter.worker.ts

@@ -9,6 +9,7 @@ import { BlockLayoutPainterExtension } from '@blocksuite/affine-gfx-turbo-render
 interface SentenceLayout {
   text: string;
   rects: TextRect[];
+  fontSize: number;
 }
 
 export interface ParagraphLayout extends BlockLayout {
@@ -24,8 +25,7 @@ const meta = {
 
 const debugSentenceBorder = false;
 
-function getBaseline() {
+function getBaseline(fontSize: number) {
-  const fontSize = 15;
   const lineHeight = 1.2 * fontSize;
 
   const A = fontSize * (meta.hHeadAscent / meta.emSize); // ascent
@@ -89,12 +89,14 @@ class ParagraphLayoutPainter implements BlockLayoutPainter {
 
     if (!isParagraphLayout(layout)) return; // cast to ParagraphLayout
 
-    const fontSize = 15;
-    ctx.font = `300 ${fontSize}px Inter`;
-    const baselineY = getBaseline();
     const renderedPositions = new Set<string>();
 
     layout.sentences.forEach(sentence => {
+      const fontSize = sentence.fontSize;
+      const baselineY = getBaseline(fontSize);
+      if (fontSize !== 15) return; // TODO: fine-tune for heading font sizes
+
+      ctx.font = `${fontSize}px Inter`;
       ctx.strokeStyle = 'yellow';
       sentence.rects.forEach(textRect => {
         const x = textRect.rect.x - layoutBaseX;