feat(mobile): browse and review pull requests natively

.github/workflows/mobile-eas-preview.yml

@@ -100,6 +100,8 @@ jobs:
         uses: expo/expo-github-action/continuous-deploy-fingerprint@main
         env:
           EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+          # The Expo action otherwise suppresses the EAS command's failure output.
+          RUNNER_DEBUG: "1"
         with:
           profile: preview:dev
           branch: pr-${{ github.event.pull_request.number }}

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.tsx

@@ -1,3 +1,5 @@
+import { SymbolView } from "expo-symbols";
+import { githubAlert } from "./githubAlert";
 import { createContext, memo, useContext, useMemo } from "react";
 import { Image, Platform, ScrollView, Text, useColorScheme, View } from "react-native";
 import type { MarkdownNode } from "react-native-nitro-markdown/headless";
@@ -502,6 +504,7 @@ export function NativeMarkdownBlock(props: {
   readonly compact?: boolean;
 }) {
   const depth = props.depth ?? 0;
+  const dark = useColorScheme() === "dark";
   switch (props.node.type) {
     case "document":
       return (
@@ -555,19 +558,37 @@ export function NativeMarkdownBlock(props: {
           }}
         />
       );
-    case "blockquote":
+    case "blockquote": {
+      const alert = githubAlert(props.node);
+      const alertColor = dark ? alert?.color : alert?.lightColor;
       return (
         <View
           style={{
-            borderLeftColor: props.textStyle.quoteMarkerColor,
+            borderLeftColor: alertColor ?? props.textStyle.quoteMarkerColor,
             borderLeftWidth: 2,
             marginVertical: props.compact ? 4 : 0,
             paddingLeft: 11,
             paddingVertical: 2,
             gap: 6,
           }}
         >
-          {(props.node.children ?? []).map((child, index) => (
+          {alert ? (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 7 }}>
+              {Platform.OS === "ios" ? (
+                <SymbolView name={alert.symbol} size={17} tintColor={alertColor} />
+              ) : null}
+              <Text
+                style={{
+                  color: alertColor,
+                  fontFamily: props.textStyle.boldFontFamily,
+                  fontSize: props.textStyle.fontSize,
+                }}
+              >
+                {alert.title}
+              </Text>
+            </View>
+          ) : null}
+          {(alert?.children ?? props.node.children ?? []).map((child, index) => (
             <NativeMarkdownBlock
               key={nodeKey(child, index)}
               node={child}
@@ -581,6 +602,7 @@ export function NativeMarkdownBlock(props: {
           ))}
         </View>
       );
+    }
     case "list":
       return (
         <NativeList

apps/mobile/modules/t3-markdown-text/src/SelectableMarkdownText.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { parseMarkdownWithOptions } from "react-native-nitro-markdown/headless";
 
 import {
+  nativeMarkdownWithHtml,
   nativeMarkdownChunkSpacing,
   nativeMarkdownDocumentChunks,
   nativeMarkdownDocumentRuns,
@@ -53,7 +54,10 @@ export function SelectableMarkdownText({
 }: SelectableMarkdownTextProps) {
   const chunks = useMemo(() => {
     const parsedDocument = nativeMarkdownWithAuthoredWindowsPaths(
-      parseMarkdownWithOptions(markdown, { gfm: true, html: true, math: false }),
+      nativeMarkdownWithHtml(
+        parseMarkdownWithOptions(markdown, { gfm: true, html: true, math: false }),
+        (content) => parseMarkdownWithOptions(content, { gfm: true, html: false, math: false }),
+      ),
       markdown,
     );
     const document = preserveSoftBreaks

apps/mobile/modules/t3-markdown-text/src/githubAlert.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vite-plus/test";
+import type { MarkdownNode } from "react-native-nitro-markdown/headless";
+import { githubAlert } from "./githubAlert";
+
+const quote = (...children: MarkdownNode[]): MarkdownNode => ({
+  type: "blockquote",
+  children: [{ type: "paragraph", children }],
+});
+
+describe("GitHub alerts in native Markdown", () => {
+  it.each(["NOTE", "TIP", "IMPORTANT", "WARNING", "CAUTION"])(
+    "recognizes %s and retains formatted content",
+    (marker) => {
+      const bold: MarkdownNode = { type: "bold", children: [{ type: "text", content: "Details" }] };
+      const node = quote({ type: "text", content: `[!${marker}]` }, { type: "soft_break" }, bold);
+      const original = structuredClone(node);
+      const alert = githubAlert(node);
+      expect(alert?.title.toUpperCase()).toBe(marker);
+      expect(alert?.children[0]?.children).toEqual([bold]);
+      expect(node).toEqual(original);
+    },
+  );
+  it("handles text nodes containing the line break and following text", () => {
+    expect(
+      githubAlert(quote({ type: "text", content: "[!WARNING]\nKeep this text." }))?.children[0]
+        ?.children?.[0]?.content,
+    ).toBe("Keep this text.");
+  });
+  it("leaves inline markers, code, and ordinary quotes alone", () => {
+    expect(githubAlert(quote({ type: "text", content: "[!WARNING] inline" }))).toBeNull();
+    expect(
+      githubAlert(
+        quote(
+          { type: "text", content: "[!WARNING]" },
+          { type: "bold", children: [{ type: "text", content: "inline" }] },
+        ),
+      ),
+    ).toBeNull();
+    expect(githubAlert({ type: "code_block", content: "> [!WARNING]" })).toBeNull();
+    expect(githubAlert(quote({ type: "text", content: "Just a quote" }))).toBeNull();
+  });
+});

apps/mobile/modules/t3-markdown-text/src/githubAlert.ts

@@ -0,0 +1,52 @@
+import type { MarkdownNode } from "react-native-nitro-markdown/headless";
+
+const ALERTS = {
+  NOTE: { title: "Note", color: "#4493f8", lightColor: "#0969da", symbol: "info.circle" },
+  TIP: { title: "Tip", color: "#3fb950", lightColor: "#1a7f37", symbol: "lightbulb" },
+  IMPORTANT: {
+    title: "Important",
+    color: "#ab7df8",
+    lightColor: "#8250df",
+    symbol: "exclamationmark.bubble",
+  },
+  WARNING: {
+    title: "Warning",
+    color: "#d29922",
+    lightColor: "#9a6700",
+    symbol: "exclamationmark.triangle",
+  },
+  CAUTION: {
+    title: "Caution",
+    color: "#f85149",
+    lightColor: "#cf222e",
+    symbol: "exclamationmark.octagon",
+  },
+} as const;
+
+/** GitHub alerts are blockquotes whose first line contains only the alert marker. */
+export function githubAlert(node: MarkdownNode) {
+  if (node.type !== "blockquote") return null;
+  const paragraph = node.children?.[0];
+  const text = paragraph?.children?.[0];
+  if (paragraph?.type !== "paragraph" || text?.type !== "text") return null;
+  const match = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](\r?\n|$)/i.exec(text.content ?? "");
+  if (!match) return null;
+  const rest = (text.content ?? "").slice(match[0].length);
+  const siblings = paragraph.children?.slice(1) ?? [];
+  if (
+    !rest &&
+    !match[2] &&
+    siblings.length &&
+    !["soft_break", "line_break"].includes(siblings[0]!.type)
+  )
+    return null;
+  if (!rest && ["soft_break", "line_break"].includes(siblings[0]?.type ?? "")) siblings.shift();
+  const children = [...(rest ? [{ ...text, content: rest }] : []), ...siblings];
+  return {
+    ...ALERTS[match[1]!.toUpperCase() as keyof typeof ALERTS],
+    children: [
+      ...(children.length ? [{ ...paragraph, children }] : []),
+      ...(node.children?.slice(1) ?? []),
+    ],
+  };
+}

apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.ts

@@ -1059,3 +1059,101 @@ export function nativeMarkdownDocumentRuns(
   }
   return decorateMentionRuns(decorateSkillRuns(runs, skills));
 }
+
+const HTML_TAG = /<!--[\s\S]*?-->|<\/?[a-z](?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+
+function attribute(tag: string, name: string): string | null {
+  const attributes = /([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/g;
+  for (const match of tag.matchAll(attributes)) {
+    if (match[1]?.toLowerCase() === name) {
+      return decodeHtmlEntities(match[2] ?? match[3] ?? match[4] ?? "");
+    }
+  }
+  return null;
+}
+
+/** Called only for parsed HTML nodes, so Markdown code examples keep their literal tags. */
+export function markdownHtmlContent(content: string): string {
+  // An HTML block such as <details> can also contain Markdown fences and code spans.
+  const codeRanges: Array<{ start: number; end: number }> = [];
+  const delimiters = [...content.matchAll(/`+|~{3,}/g)];
+  for (let index = 0; index < delimiters.length; index += 1) {
+    const opening = delimiters[index]!;
+    const lineStart = content.lastIndexOf("\n", opening.index - 1) + 1;
+    const fenced =
+      opening[0].length >= 3 && /^ {0,3}$/.test(content.slice(lineStart, opening.index));
+    if (opening[0][0] === "~" && !fenced) continue;
+    let closingIndex = -1;
+    for (let candidate = index + 1; candidate < delimiters.length; candidate += 1) {
+      const closing = delimiters[candidate]!;
+      if (!fenced && closing[0] === opening[0]) {
+        closingIndex = candidate;
+        break;
+      }
+      if (!fenced || closing[0][0] !== opening[0][0] || closing[0].length < opening[0].length)
+        continue;
+      const start = content.lastIndexOf("\n", closing.index - 1) + 1;
+      const nextLine = content.indexOf("\n", closing.index);
+      const end = nextLine === -1 ? content.length : nextLine;
+      if (
+        /^ {0,3}$/.test(content.slice(start, closing.index)) &&
+        /^\s*$/.test(content.slice(closing.index + closing[0].length, end))
+      ) {
+        closingIndex = candidate;
+        break;
+      }
+    }
+    if (closingIndex === -1) {
+      if (fenced) codeRanges.push({ start: opening.index, end: content.length });
+      continue;
+    }
+    const closing = delimiters[closingIndex]!;
+    codeRanges.push({ start: opening.index, end: closing.index + closing[0].length });
+    index = closingIndex;
+  }
+  return content.replace(HTML_TAG, (tag, offset: number) => {
+    if (codeRanges.some((range) => offset >= range.start && offset < range.end)) return tag;
+    if (tag.startsWith("<!--")) return "";
+    if (/^<img\b/i.test(tag)) {
+      const src = attribute(tag, "src");
+      if (!src) return "";
+      const alt = (attribute(tag, "alt") ?? "").replace(/[\\[\]]/g, "\\$&");
+      const href = src.replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\n/g, "");
+      return `![${alt}](<${href}>)`;
+    }
+    if (/^<summary\b/i.test(tag)) return "\n\n**";
+    if (/^<\/summary\s*>/i.test(tag)) return "**\n\n";
+    if (/^<br\b/i.test(tag)) return "  \n";
+    if (/^<\/?(?:p|div|details)\b/i.test(tag)) return "\n\n";
+    return "";
+  });
+}
+
+export function nativeMarkdownWithHtml(
+  document: MarkdownNode,
+  parse: (content: string) => MarkdownNode,
+): MarkdownNode {
+  const withoutOffsets = (node: MarkdownNode): MarkdownNode => {
+    const { beg: _beg, end: _end, children, ...rest } = node;
+    return { ...rest, ...(children ? { children: children.map(withoutOffsets) } : {}) };
+  };
+  const transform = (node: MarkdownNode): MarkdownNode[] => {
+    if (node.type === "html_block" || node.type === "html_inline") {
+      const content = markdownHtmlContent(node.content ?? "");
+      if (!content.trim())
+        return /^<br\b/i.test(node.content ?? "") ? [{ type: "line_break" }] : [];
+      // Fragment offsets restart at zero, so they cannot identify chunks in the parent document.
+      const children = (parse(content).children ?? []).map(withoutOffsets);
+      return node.type === "html_inline"
+        ? children.flatMap((child) =>
+            child.type === "paragraph" ? (child.children ?? []) : [child],
+          )
+        : children;
+    }
+    if (!node.children) return [node];
+    const children = node.children.flatMap(transform);
+    if (node.type === "paragraph" && children.length === 0) return [];
+    return [{ ...node, children }];
+  };
+  return { ...document, children: (document.children ?? []).flatMap(transform) };
+}

apps/mobile/modules/t3-native-controls/ios/T3NativeControlsModule.swift

@@ -39,6 +39,18 @@ public final class T3NativeControlsModule: Module {
                            identifier: identifier, promise: promise)
     }.runOnQueue(.main)
 
+    AsyncFunction("presentFiles") { (urls: [URL], titles: [String], selectedIndex: Int, identifier: String, promise: Promise) in
+      guard !urls.isEmpty, urls.count == titles.count, urls.indices.contains(selectedIndex) else {
+        throw URLError(.badURL)
+      }
+      let file = try self.makeFilePresentation(sourceIdentifier: "", identifier: identifier, promise: promise)
+      guard let presenter = self.appContext?.utilities?.currentViewController() else {
+        file.dismiss()
+        return
+      }
+      file.present(urls: urls, titles: titles, selectedIndex: selectedIndex, from: presenter)
+    }.runOnQueue(.main)
+
     OnDestroy {
       let presentation = self.videoPresentation
       let file = self.filePresentation
@@ -204,17 +216,24 @@ public final class T3NativeControlsModule: Module {
     if videoPresentation?.identifier == identifier { videoPresentation?.dismiss() }
   }
 
-  private func presentFile(url: URL, title: String, sourceIdentifier: String,
-                           identifier: String, promise: Promise) throws {
+  private func makeFilePresentation(sourceIdentifier: String, identifier: String,
+                                    promise: Promise) throws -> T3NativeFilePresentation {
     guard filePresentation == nil, videoPresentation == nil,
-      let presenter = appContext?.utilities?.currentViewController()
+      appContext?.utilities?.currentViewController() != nil
     else { throw URLError(.cannotLoadFromNetwork) }
     let file = T3NativeFilePresentation(identifier: identifier, sources: presentationSources,
                                         sourceIdentifier: sourceIdentifier) { [weak self] error in
       self?.filePresentation = nil
       if let error { promise.reject(error) } else { promise.resolve(nil) }
     }
     filePresentation = file
+    return file
+  }
+
+  private func presentFile(url: URL, title: String, sourceIdentifier: String,
+                           identifier: String, promise: Promise) throws {
+    let file = try makeFilePresentation(sourceIdentifier: sourceIdentifier, identifier: identifier, promise: promise)
+    guard let presenter = appContext?.utilities?.currentViewController() else { file.dismiss(); return }
     file.present(url: url, title: title, from: presenter)
   }