mirror of
https://github.com/block/buzz.git
synced 2026-11-03 07:51:22 +00:00
Fix video comment effect wrapping (#5748)
## What changed - render video-review timecode chips inside the first Markdown paragraph so comment text wraps naturally around them - reuse the canonical video-review chip treatment across the timeline, Inbox previews, and Inbox detail - preserve video-review context in Inbox so timestamp chips remain interactive ## Why Video comments now support Markdown-like effects, but non-player surfaces rendered the timestamp beside a separate text layout. That kept the chip and comment from sharing the same inline flow and made Inbox behavior inconsistent with the player. ## Validation - `pnpm --dir desktop check` - 100 focused Markdown, timecode, video-review, and Inbox unit tests - `pnpm --dir desktop build:e2e` - focused `video-attachment.spec.ts` Playwright scenario - pre-push desktop typecheck and 4,761-test desktop suite - native Builderlab staging with the configured profile Focused timeline and Inbox snapshots will be attached in a PR comment. --------- Signed-off-by: kenny lopez <klopez4212@gmail.com> Signed-off-by: Fast Fizz <2df81cb51f05a9d5387ef24d7b9ecb8fcdfcd1c70ffabc67061c9596e1b5b1c4@buzz.block.builderlab.xyz> Co-authored-by: Fast Fizz <2df81cb51f05a9d5387ef24d7b9ecb8fcdfcd1c70ffabc67061c9596e1b5b1c4@buzz.block.builderlab.xyz>
This commit is contained in:
@@ -5,6 +5,7 @@ import remarkGfm from "remark-gfm";
|
||||
|
||||
import remarkMessageLinks from "@/features/messages/lib/remarkMessageLinks";
|
||||
import rehypeImageGallery from "@/shared/lib/rehypeImageGallery";
|
||||
import rehypeLeadingInlineContent from "@/shared/lib/rehypeLeadingInlineContent";
|
||||
import rehypeSearchHighlight from "@/shared/lib/rehypeSearchHighlight";
|
||||
import remarkChannelLinks from "@/shared/lib/remarkChannelLinks";
|
||||
import remarkCustomEmoji, {
|
||||
@@ -65,6 +66,8 @@ export type MarkdownParseInputs = {
|
||||
components: Components;
|
||||
content: string;
|
||||
customEmoji?: CustomEmoji[];
|
||||
/** Inserts the runtime-provided leading content marker during parsing. */
|
||||
leadingInlineContent?: boolean;
|
||||
mentionNames?: string[];
|
||||
searchQuery?: string;
|
||||
variant: string;
|
||||
@@ -84,6 +87,9 @@ function buildMarkdownElement(input: MarkdownParseInputs): React.ReactElement {
|
||||
markdownParseCount += 1;
|
||||
// biome-ignore lint/suspicious/noExplicitAny: PluggableList type not directly importable
|
||||
const rehypePlugins: any[] = [rehypeImageGallery];
|
||||
if (input.leadingInlineContent) {
|
||||
rehypePlugins.push(rehypeLeadingInlineContent);
|
||||
}
|
||||
if (input.searchQuery && input.searchQuery.trim().length >= 2) {
|
||||
rehypePlugins.push([rehypeSearchHighlight, { query: input.searchQuery }]);
|
||||
}
|
||||
@@ -131,6 +137,7 @@ export function renderCachedMarkdown(
|
||||
// before it is self-delimiting.
|
||||
const key =
|
||||
segment(input.variant) +
|
||||
segment(input.leadingInlineContent ? "leading" : "") +
|
||||
listSegment(input.mentionNames) +
|
||||
listSegment(input.channelNames) +
|
||||
listSegment(
|
||||
|
||||
Reference in New Issue
Block a user