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

This commit is contained in:
doodlewind
2025-03-18 19:01:47 +00:00
parent cb37d25d7b
commit 02d707feab
2 changed files with 12 additions and 5 deletions
@@ -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,
};
});
@@ -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() {
const fontSize = 15;
function getBaseline(fontSize: number) {
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;