mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
T3 tune markdown reserve overshoot
Co-authored-by: npub1mprnacetjua2xx3p5eddmhxyk6wv929ymm5py8kd2xfxurxahspqqlgyta <d8473ee32b973aa31a21a65adddcc4b69cc2a8a4dee8121ecd51926e0cddbc02@sprout-oss.stage.blox.sqprod.co> Signed-off-by: npub1mprnacetjua2xx3p5eddmhxyk6wv929ymm5py8kd2xfxurxahspqqlgyta <d8473ee32b973aa31a21a65adddcc4b69cc2a8a4dee8121ecd51926e0cddbc02@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
parent
207048758c
commit
1fa4551a70
@@ -36,7 +36,7 @@ test("estimateRowHeight: fenced code adds height by line", () => {
|
|||||||
msg({ body: "see:\n```\na\nb\nc\nd\ne\n```" }),
|
msg({ body: "see:\n```\na\nb\nc\nd\ne\n```" }),
|
||||||
);
|
);
|
||||||
const withoutCode = estimateRowHeight(msg({ body: "see:" }));
|
const withoutCode = estimateRowHeight(msg({ body: "see:" }));
|
||||||
assert.ok(withCode > withoutCode + 100, `code ${withCode} vs ${withoutCode}`);
|
assert.ok(withCode > withoutCode + 80, `code ${withCode} vs ${withoutCode}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("estimateRowHeight: imeta image with dim reserves bounded media height", () => {
|
test("estimateRowHeight: imeta image with dim reserves bounded media height", () => {
|
||||||
|
|||||||
@@ -35,7 +35,6 @@ const CONTINUATION_ROW_CHROME = 8; // dense row padding only; header/avatar are
|
|||||||
const MEDIA_BLOCK_MARGIN_TOP = 4; // image/video blocks use mt-1 in markdown
|
const MEDIA_BLOCK_MARGIN_TOP = 4; // image/video blocks use mt-1 in markdown
|
||||||
const REACTION_ROW = 24;
|
const REACTION_ROW = 24;
|
||||||
const PREVIEW_CARD = 70;
|
const PREVIEW_CARD = 70;
|
||||||
const CODE_BLOCK_CHROME = 18; // pre border/padding above the mono line boxes
|
|
||||||
const THREAD_SUMMARY_ROW = 38;
|
const THREAD_SUMMARY_ROW = 38;
|
||||||
const FOOTER_ROW = 32;
|
const FOOTER_ROW = 32;
|
||||||
const MESSAGE_ITEM_BOTTOM_PADDING = 10; // TimelineMessageList pb-2.5
|
const MESSAGE_ITEM_BOTTOM_PADDING = 10; // TimelineMessageList pb-2.5
|
||||||
@@ -99,23 +98,20 @@ function wrappedLineCount(text: string, charsPerLine: number): number {
|
|||||||
*/
|
*/
|
||||||
function splitFencedCode(body: string): {
|
function splitFencedCode(body: string): {
|
||||||
prose: string;
|
prose: string;
|
||||||
codeBlockCount: number;
|
|
||||||
codeLines: number;
|
codeLines: number;
|
||||||
} {
|
} {
|
||||||
const parts = body.split(/```/);
|
const parts = body.split(/```/);
|
||||||
// Even indices are prose, odd indices are inside a fence.
|
// Even indices are prose, odd indices are inside a fence.
|
||||||
let prose = "";
|
let prose = "";
|
||||||
let codeBlockCount = 0;
|
|
||||||
let codeLines = 0;
|
let codeLines = 0;
|
||||||
for (let i = 0; i < parts.length; i += 1) {
|
for (let i = 0; i < parts.length; i += 1) {
|
||||||
if (i % 2 === 1) {
|
if (i % 2 === 1) {
|
||||||
codeBlockCount += 1;
|
|
||||||
codeLines += parts[i].split("\n").length;
|
codeLines += parts[i].split("\n").length;
|
||||||
} else {
|
} else {
|
||||||
prose += parts[i];
|
prose += parts[i];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { prose, codeBlockCount, codeLines };
|
return { prose, codeLines };
|
||||||
}
|
}
|
||||||
|
|
||||||
// Image/video file extensions the markdown renderer turns into inline media.
|
// Image/video file extensions the markdown renderer turns into inline media.
|
||||||
@@ -153,7 +149,6 @@ function stripMediaOnlyLines(text: string): string {
|
|||||||
function markdownStructureExtraHeight(text: string): number {
|
function markdownStructureExtraHeight(text: string): number {
|
||||||
let extra = 0;
|
let extra = 0;
|
||||||
let tableRunLines = 0;
|
let tableRunLines = 0;
|
||||||
let listRunLines = 0;
|
|
||||||
|
|
||||||
const flushTableRun = () => {
|
const flushTableRun = () => {
|
||||||
if (tableRunLines >= 2) {
|
if (tableRunLines >= 2) {
|
||||||
@@ -163,35 +158,19 @@ function markdownStructureExtraHeight(text: string): number {
|
|||||||
}
|
}
|
||||||
tableRunLines = 0;
|
tableRunLines = 0;
|
||||||
};
|
};
|
||||||
const flushListRun = () => {
|
|
||||||
if (listRunLines >= 2) {
|
|
||||||
// The renderer applies `space-y-1` between list items.
|
|
||||||
extra += (listRunLines - 1) * 4;
|
|
||||||
}
|
|
||||||
listRunLines = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const line of text.split("\n")) {
|
for (const line of text.split("\n")) {
|
||||||
const trimmed = line.trim();
|
const trimmed = line.trim();
|
||||||
const isTableLine =
|
const isTableLine =
|
||||||
/^\|.+\|$/.test(trimmed) || /\S\s+\|\s+\S/.test(trimmed);
|
/^\|.+\|$/.test(trimmed) || /\S\s+\|\s+\S/.test(trimmed);
|
||||||
const isListLine = /^(?:[-+*]|\d+[.)])\s+\S/.test(trimmed);
|
|
||||||
|
|
||||||
if (isTableLine) tableRunLines += 1;
|
if (isTableLine) tableRunLines += 1;
|
||||||
else flushTableRun();
|
else flushTableRun();
|
||||||
|
|
||||||
if (isListLine) listRunLines += 1;
|
|
||||||
else flushListRun();
|
|
||||||
|
|
||||||
if (/^#{1,3}\s+\S/.test(trimmed)) extra += 8;
|
|
||||||
else if (/^#{4,6}\s+\S/.test(trimmed)) extra += 4;
|
|
||||||
|
|
||||||
if (/^>\s?\S/.test(trimmed)) extra += 4;
|
|
||||||
if (/^(?:---+|\*\*\*+|___+)\s*$/.test(trimmed)) extra += 12;
|
if (/^(?:---+|\*\*\*+|___+)\s*$/.test(trimmed)) extra += 12;
|
||||||
}
|
}
|
||||||
|
|
||||||
flushTableRun();
|
flushTableRun();
|
||||||
flushListRun();
|
|
||||||
return extra;
|
return extra;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -204,7 +183,7 @@ export function estimateRowHeight(
|
|||||||
}: EstimateRowHeightOptions = {},
|
}: EstimateRowHeightOptions = {},
|
||||||
): number {
|
): number {
|
||||||
const body = message.body ?? "";
|
const body = message.body ?? "";
|
||||||
const { prose, codeBlockCount, codeLines } = splitFencedCode(body);
|
const { prose, codeLines } = splitFencedCode(body);
|
||||||
const proseForLineCount = stripMediaOnlyLines(prose);
|
const proseForLineCount = stripMediaOnlyLines(prose);
|
||||||
const charsPerLine = charsPerLineFromColumnWidth(columnWidthPx);
|
const charsPerLine = charsPerLineFromColumnWidth(columnWidthPx);
|
||||||
|
|
||||||
@@ -215,7 +194,6 @@ export function estimateRowHeight(
|
|||||||
charsPerLine,
|
charsPerLine,
|
||||||
) * TEXT_LINE_HEIGHT;
|
) * TEXT_LINE_HEIGHT;
|
||||||
height += codeLines * CODE_LINE_HEIGHT;
|
height += codeLines * CODE_LINE_HEIGHT;
|
||||||
height += codeBlockCount * CODE_BLOCK_CHROME;
|
|
||||||
height += markdownStructureExtraHeight(proseForLineCount);
|
height += markdownStructureExtraHeight(proseForLineCount);
|
||||||
|
|
||||||
const imetaUrls = new Set<string>();
|
const imetaUrls = new Set<string>();
|
||||||
|
|||||||
Reference in New Issue
Block a user