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:
klopez4212
2026-08-14 17:16:28 +01:00
committed by GitHub
parent 1d51081b8a
commit 17d2147eca
20 changed files with 951 additions and 127 deletions

View File

@@ -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(