[pull] main from pingdotgg:main

apps/marketing/src/lib/site.ts

@@ -7,6 +7,6 @@ export const ANDROID_PLAY_STORE_URL =
   "https://play.google.com/store/apps/details?id=com.t3tools.t3code";
 
 export const MARKETING_STATS = {
-  githubStars: "21k+",
-  users: "200,000",
+  githubStars: "22k+",
+  users: "300,000",
 } as const;

apps/marketing/vercel.ts

@@ -7,4 +7,11 @@ export const config: VercelConfig = {
   installCommand: "npm install -g vite-plus && vp install --filter '@t3tools/marketing...'",
   buildCommand: "vp run --filter @t3tools/marketing build",
   outputDirectory: "dist",
+  redirects: [
+    {
+      source: "/app",
+      destination: "https://app.t3.codes",
+      permanent: true,
+    },
+  ],
 };

apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt

@@ -3,6 +3,8 @@ package expo.modules.t3markdowntext
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
+import android.text.Spannable
+import android.text.SpannableStringBuilder
 import android.text.Spanned
 import android.text.style.ReplacementSpan
 import android.view.ActionMode
@@ -18,6 +20,14 @@ import kotlin.math.min
 
 private const val OBJECT_REPLACEMENT_CHARACTER = "\uFFFC"
 
+// Match React Native's measurement buffer. Android orders tied line-height
+// spans differently in SpannableString, shifting inline images once RN's
+// span priorities are exhausted.
+private object MarkdownSpannableFactory : Spannable.Factory() {
+  override fun newSpannable(source: CharSequence): Spannable =
+    SpannableStringBuilder(source)
+}
+
 private fun copyTextWithoutInlineImages(
   text: CharSequence,
   start: Int,
@@ -85,6 +95,7 @@ class T3MarkdownTextSelectionModule : Module() {
         if (currentCallback is SanitizingSelectionActionModeCallback) {
           return@runOnUiQueueThread
         }
+        textView.setSpannableFactory(MarkdownSpannableFactory)
         textView.customSelectionActionModeCallback =
           SanitizingSelectionActionModeCallback(textView, currentCallback)
       }

apps/mobile/modules/t3-markdown-text/package.json

@@ -25,7 +25,7 @@
     "./links": "./src/markdownLinks.ts",
     "./markdown": "./src/nativeMarkdownText.ts",
     "./primitive": "./src/MarkdownTextPrimitive.tsx",
-    "./renderer": "./src/SelectableMarkdownText.ios.tsx",
+    "./renderer": "./src/SelectableMarkdownText.tsx",
     "./types": "./src/SelectableMarkdownText.types.ts"
   },
   "peerDependencies": {

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

@@ -5,7 +5,7 @@ import type { MarkdownNode } from "react-native-nitro-markdown/headless";
 import { CopyTextButton } from "./CopyTextButton";
 import { MarkdownTextPrimitive } from "./MarkdownTextPrimitive";
 import { nativeMarkdownDocumentRuns, nativeMarkdownListItemBlocks } from "./nativeMarkdownText";
-import { NativeMarkdownSelectableText } from "./NativeMarkdownSelectableText.ios";
+import { NativeMarkdownSelectableText } from "./NativeMarkdownSelectableText";
 import type {
   MarkdownCodeHighlighter,
   MarkdownHighlightedToken,

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

@@ -1,4 +1,25 @@
-import type { SelectableMarkdownTextProps } from "./SelectableMarkdownText.types";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { parseMarkdownWithOptions } from "react-native-nitro-markdown/headless";
+
+import {
+  nativeMarkdownChunkSpacing,
+  nativeMarkdownDocumentChunks,
+  nativeMarkdownDocumentRuns,
+  nativeMarkdownWithPreservedSoftBreaks,
+} from "./nativeMarkdownText";
+import { MarkdownImageRendererContext, NativeMarkdownBlock } from "./NativeMarkdownBlock";
+import {
+  MarkdownFileContextMenuContext,
+  NativeMarkdownSelectableText,
+  type MarkdownFileContextMenuHandlers,
+} from "./NativeMarkdownSelectableText";
+import type {
+  SelectableMarkdownSkill,
+  SelectableMarkdownTextProps,
+} from "./SelectableMarkdownText.types";
+
+const EMPTY_SKILLS: ReadonlyArray<SelectableMarkdownSkill> = [];
 
 export type {
   MarkdownCodeHighlighter,
@@ -10,6 +31,87 @@ export type {
   SelectableMarkdownTextProps,
 } from "./SelectableMarkdownText.types";
 
-export function SelectableMarkdownText(_props: SelectableMarkdownTextProps) {
-  return null;
+export function hasNativeSelectableMarkdownText(): boolean {
+  return true;
+}
+
+export function SelectableMarkdownText({
+  markdown,
+  skills = EMPTY_SKILLS,
+  textStyle,
+  highlightCode,
+  preserveSoftBreaks = false,
+  onLinkPress,
+  fileContextMenu,
+  onFileContextMenuAction,
+  renderImage,
+  marginTop = 0,
+  marginBottom = 0,
+}: SelectableMarkdownTextProps) {
+  const chunks = useMemo(() => {
+    const parsedDocument = parseMarkdownWithOptions(markdown, {
+      gfm: true,
+      html: true,
+      math: false,
+    });
+    const document = preserveSoftBreaks
+      ? nativeMarkdownWithPreservedSoftBreaks(parsedDocument)
+      : parsedDocument;
+    return nativeMarkdownDocumentChunks(document).map((chunk) =>
+      chunk.kind === "selectable"
+        ? {
+            ...chunk,
+            runs: nativeMarkdownDocumentRuns(chunk.node, skills),
+          }
+        : chunk,
+    );
+  }, [markdown, preserveSoftBreaks, skills]);
+
+  const fileContextMenuHandlers = useMemo<MarkdownFileContextMenuHandlers | null>(
+    () =>
+      fileContextMenu && onFileContextMenuAction
+        ? { fileContextMenu, onFileContextMenuAction }
+        : null,
+    [fileContextMenu, onFileContextMenuAction],
+  );
+
+  return (
+    <MarkdownImageRendererContext.Provider value={renderImage ?? null}>
+      <MarkdownFileContextMenuContext.Provider value={fileContextMenuHandlers}>
+        {/* A percentage width here creates a cyclic intrinsic measurement inside
+          shrink-to-fit containers such as user-message bubbles. Yoga then gives
+          the native text node an unbounded second pass and the parent only clips
+          the resulting single-line width instead of reflowing it. */}
+        <View style={{ flexShrink: 1, minWidth: 0, marginTop, marginBottom }}>
+          {chunks.map((chunk, index) => {
+            const content =
+              chunk.kind === "rich" ? (
+                <NativeMarkdownBlock
+                  node={chunk.node}
+                  skills={skills}
+                  textStyle={textStyle}
+                  highlightCode={highlightCode}
+                  onLinkPress={onLinkPress}
+                />
+              ) : (
+                <NativeMarkdownSelectableText
+                  runs={chunk.runs}
+                  textStyle={textStyle}
+                  onLinkPress={onLinkPress}
+                />
+              );
+
+            return (
+              <View
+                key={chunk.key}
+                style={{ paddingTop: nativeMarkdownChunkSpacing(chunks[index - 1], chunk) }}
+              >
+                {content}
+              </View>
+            );
+          })}
+        </View>
+      </MarkdownFileContextMenuContext.Provider>
+    </MarkdownImageRendererContext.Provider>
+  );
 }

apps/mobile/package.json

@@ -147,6 +147,7 @@
       "buildFromSource": [
         "expo-notifications",
         "react-native-screens",
+        "react-native-reanimated",
         "@react-native-menu/menu",
         "expo-audio"
       ]

apps/mobile/src/components/ComposerAttachmentButton.tsx

@@ -40,6 +40,9 @@ export function ComposerAttachmentButton(props: {
 
   return (
     <ControlPillMenu
+      accessible
+      accessibilityLabel="Add attachment"
+      accessibilityRole="button"
       actions={ATTACHMENT_MENU_ACTIONS}
       onPressAction={({ nativeEvent }) => {
         if (nativeEvent.event === "photos") {

apps/mobile/src/components/MediaVideoPlayer.tsx

@@ -19,6 +19,7 @@ function LoadedMediaVideo(props: {
 }) {
   const focused = useIsFocused();
   const active = useRef(focused && AppState.currentState === "active");
+  const fullscreen = useRef(false);
   const [attempt, setAttempt] = useState(0);
   // Expo's Android player also reports completed playback as idle.
   const [loadState, setLoadState] = useState<"pending" | "complete" | "error">("pending");
@@ -38,10 +39,12 @@ function LoadedMediaVideo(props: {
 
   useEffect(() => {
     active.current = focused && !props.paused && AppState.currentState === "active";
-    if (!active.current) player.pause();
+    if (!focused || props.paused || (!active.current && !fullscreen.current)) player.pause();
+    // Native background handling distinguishes Android's fullscreen activity
+    // from leaving the app; React Native reports both as background.
     const subscription = AppState.addEventListener("change", (state) => {
       active.current = focused && !props.paused && state === "active";
-      if (!active.current) player.pause();
+      if (state === "inactive" || (state === "background" && !fullscreen.current)) player.pause();
     });
     return () => subscription.remove();
   }, [focused, player, props.paused]);
@@ -70,6 +73,12 @@ function LoadedMediaVideo(props: {
         nativeControls
         contentFit="contain"
         fullscreenOptions={{ enable: true }}
+        onFullscreenEnter={() => {
+          fullscreen.current = true;
+        }}
+        onFullscreenExit={() => {
+          fullscreen.current = false;
+        }}
         allowsPictureInPicture={false}
       />
       {loadState === "error" || (loadState === "complete" && status === "error") ? (