feat(mobile): make chat text selectable on Android (#8779)

Dara Adedeji committed 2 months ago

Commit 09d13de1 parent 5f878d210 files · +246 −23Browse files

Unified · Split

10 files

apps/mobile/modules/t3-markdown-text/android/build.gradle +20 −0
apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3MarkdownTextSelectionModule.kt +93 −0
apps/mobile/modules/t3-markdown-text/expo-module.config.json +6 −0
apps/mobile/modules/t3-markdown-text/package.json +3 −0
apps/mobile/modules/t3-markdown-text/src/MarkdownTextPrimitive.tsx +12 −5
apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.ios.tsx +17 −6
apps/mobile/modules/t3-markdown-text/src/NativeMarkdownSelectableText.ios.tsx +55 −10
apps/mobile/modules/t3-markdown-text/src/T3MarkdownTextSelectionModule.ts +12 −0
apps/mobile/src/native/SelectableMarkdownText.android.tsx +24 −0
pnpm-lock.yaml +4 −2

apps/mobile/modules/t3-markdown-text/android/build.gradle+20−0

@@ -0,0 +1,20 @@
	1	apply plugin: 'com.android.library'
	2	apply plugin: 'org.jetbrains.kotlin.android'
	3
	4	group = 'com.t3tools.markdowntext'
	5	version = '0.0.0'
	6
	7	android {
	8	namespace 'expo.modules.t3markdowntext'
	9	compileSdk rootProject.ext.compileSdkVersion
	10
	11	defaultConfig {
	12	minSdkVersion rootProject.ext.minSdkVersion
	13	targetSdkVersion rootProject.ext.targetSdkVersion
	14	}
	15	}
	16
	17	dependencies {
	18	implementation project(':expo-modules-core')
	19	implementation 'com.facebook.react:react-android'
	20	}

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

@@ -0,0 +1,93 @@
	1	package expo.modules.t3markdowntext
	2
	3	import android.content.ClipData
	4	import android.content.ClipboardManager
	5	import android.content.Context
	6	import android.text.Spanned
	7	import android.text.style.ReplacementSpan
	8	import android.view.ActionMode
	9	import android.view.Menu
	10	import android.view.MenuItem
	11	import android.widget.TextView
	12	import com.facebook.react.bridge.ReactContext
	13	import com.facebook.react.uimanager.UIManagerHelper
	14	import expo.modules.kotlin.modules.Module
	15	import expo.modules.kotlin.modules.ModuleDefinition
	16	import kotlin.math.max
	17	import kotlin.math.min
	18
	19	private const val OBJECT_REPLACEMENT_CHARACTER = "\uFFFC"
	20
	21	private fun copyTextWithoutInlineImages(
	22	text: CharSequence,
	23	start: Int,
	24	end: Int
	25	): String {
	26	if (text !is Spanned) return text.subSequence(start, end).toString()
	27
	28	return buildString {
	29	for (index in start until end) {
	30	val isInlineImage =
	31	text[index].toString() == OBJECT_REPLACEMENT_CHARACTER &&
	32	text.getSpans(index, index + 1, ReplacementSpan::class.java).isNotEmpty()
	33	if (!isInlineImage) append(text[index])
	34	}
	35	}
	36	}
	37
	38	private class SanitizingSelectionActionModeCallback(
	39	private val textView: TextView,
	40	private val delegate: ActionMode.Callback?
	41	) : ActionMode.Callback {
	42	override fun onCreateActionMode(mode: ActionMode, menu: Menu): Boolean =
	43	delegate?.onCreateActionMode(mode, menu) ?: true
	44
	45	override fun onPrepareActionMode(mode: ActionMode, menu: Menu): Boolean =
	46	delegate?.onPrepareActionMode(mode, menu) ?: false
	47
	48	override fun onActionItemClicked(mode: ActionMode, item: MenuItem): Boolean {
	49	if (item.itemId == android.R.id.copy) {
	50	val start = min(textView.selectionStart, textView.selectionEnd)
	51	val end = max(textView.selectionStart, textView.selectionEnd)
	52	if (start >= 0 && end > start) {
	53	val originalText = textView.text.subSequence(start, end).toString()
	54	val selectedText = copyTextWithoutInlineImages(textView.text, start, end)
	55	if (selectedText != originalText) {
	56	val clipboard =
	57	textView.context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
	58	clipboard.setPrimaryClip(ClipData.newPlainText(null, selectedText))
	59	mode.finish()
	60	return true
	61	}
	62	}
	63	}
	64	return delegate?.onActionItemClicked(mode, item) ?: false
	65	}
	66
	67	override fun onDestroyActionMode(mode: ActionMode) {
	68	delegate?.onDestroyActionMode(mode)
	69	}
	70	}
	71
	72	class T3MarkdownTextSelectionModule : Module() {
	73	override fun definition() = ModuleDefinition {
	74	Name("T3MarkdownTextSelection")
	75
	76	Function("installCopySanitizer") { reactTag: Int ->
	77	val reactContext = appContext.reactContext as? ReactContext ?: return@Function
	78	reactContext.runOnUiQueueThread {
	79	val textView =
	80	runCatching {
	81	UIManagerHelper.getUIManagerForReactTag(reactContext, reactTag)?.resolveView(reactTag)
	82	}
	83	.getOrNull() as? TextView ?: return@runOnUiQueueThread
	84	val currentCallback = textView.customSelectionActionModeCallback
	85	if (currentCallback is SanitizingSelectionActionModeCallback) {
	86	return@runOnUiQueueThread
	87	}
	88	textView.customSelectionActionModeCallback =
	89	SanitizingSelectionActionModeCallback(textView, currentCallback)
	90	}
	91	}
	92	}
	93	}

apps/mobile/modules/t3-markdown-text/expo-module.config.json+6−0

@@ -0,0 +1,6 @@
	1	{
	2	"platforms": ["android"],
	3	"android": {
	4	"modules": ["expo.modules.t3markdowntext.T3MarkdownTextSelectionModule"]
	5	}
	6	}

apps/mobile/modules/t3-markdown-text/package.json+3−0

   "private": true,
   "source": "./index.ts",
   "files": [
+    "android",
     "assets",
+    "expo-module.config.json",
     "ios",
     "src",
     "index.ts",
   "peerDependencies": {
     "@t3tools/client-runtime": "*",
     "@t3tools/shared": "*",
+    "expo": "*",
     "expo-asset": "*",
     "expo-clipboard": "*",
     "expo-haptics": "*",

apps/mobile/modules/t3-markdown-text/src/MarkdownTextPrimitive.tsx+12−5

-import React from "react";
+import React, { type Ref } from "react";
 import { Platform, StyleSheet, Text as RNText, type TextProps, type ViewStyle } from "react-native";
 import T3MarkdownTextRunNativeComponent from "./T3MarkdownTextRunNativeComponent";
 import T3MarkdownTextNativeComponent from "./T3MarkdownTextNativeComponent";
  * while the React Native Text fallback reports measured `TextLayoutLine`s.
  */
 export type MarkdownTextPrimitiveProps = Omit<TextProps, "onTextLayout"> & {
+  nativeTextRef?: Ref<RNText>;
   uiTextView?: boolean;
   contextMenuConfig?: string;
   onContextMenuAction?: (event: ContextMenuActionEvent) => void;
   onSelectionChange?: (event: SelectionChangeEvent) => void;
 };
-function MarkdownTextPrimitiveChild({ style, children, ...rest }: MarkdownTextPrimitiveProps) {
+function MarkdownTextPrimitiveChild({
+  style,
+  children,
+  nativeTextRef: _nativeTextRef,
+  ...rest
+}: MarkdownTextPrimitiveProps) {
   const [isAncestor, rootStyle] = useTextAncestorContext();
   // Flatten the styles, and apply the root styles when needed
   return <>{nativeChildren}</>;
 }
-function MarkdownTextPrimitiveInner(props: MarkdownTextPrimitiveProps) {
+function MarkdownTextPrimitiveInner({ nativeTextRef, ...props }: MarkdownTextPrimitiveProps) {
   const [isAncestor] = useTextAncestorContext();
   // Even if the uiTextView prop is set, we can still default to using
   // normal selection (i.e. base RN text) if the text doesn't need to be
   // selectable
   if ((!props.selectable || !props.uiTextView) && !isAncestor) {
-    return <RNText {...props} />;
+    return <RNText ref={nativeTextRef} {...props} />;
   }
   return <MarkdownTextPrimitiveChild {...props} />;
 }
 export function MarkdownTextPrimitive(props: MarkdownTextPrimitiveProps) {
   if (Platform.OS !== "ios") {
-    return <RNText {...props} />;
+    const { nativeTextRef, ...textProps } = props;
+    return <RNText ref={nativeTextRef} {...textProps} />;
   }
   return <MarkdownTextPrimitiveInner {...props} />;
 }

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.ios.tsx+17−6

 import { createContext, useContext, useEffect, useState } from "react";
-import { Image, ScrollView, Text, useColorScheme, View } from "react-native";
+import { Image, Platform, ScrollView, Text, useColorScheme, View } from "react-native";
 import type { MarkdownNode } from "react-native-nitro-markdown/headless";
 import { CopyTextButton } from "./CopyTextButton";
 const highlightedCodeCache = new Map<string, HighlightedCode>();
 const highlightedCodePromiseCache = new Map<string, Promise<HighlightedCode>>();
 const HIGHLIGHTED_CODE_CACHE_LIMIT = 64;
+const MONO_FONT_FAMILY = Platform.select({
+  ios: "ui-monospace",
+  android: "monospace",
+  default: "monospace",
+});
 function nodeKey(node: MarkdownNode, index: number): string {
   return `${node.type}:${node.beg ?? index}:${node.end ?? index}`;
         selectable
         style={{
           color: props.textStyle.codeColor,
-          fontFamily: "ui-monospace",
+          fontFamily: MONO_FONT_FAMILY,
           fontSize: codeBlockFontSize(props.textStyle),
           lineHeight: codeBlockLineHeight(props.textStyle),
         }}
       selectable
       style={{
         color: props.textStyle.codeColor,
-        fontFamily: "ui-monospace",
+        fontFamily: MONO_FONT_FAMILY,
         fontSize: codeBlockFontSize(props.textStyle),
         lineHeight: codeBlockLineHeight(props.textStyle),
       }}
               key={key}
               style={{
                 color: token.color ?? props.textStyle.codeColor,
-                fontFamily: "ui-monospace",
+                fontFamily: MONO_FONT_FAMILY,
                 fontStyle:
                   token.fontStyle !== null && (token.fontStyle & 1) === 1 ? "italic" : "normal",
                 fontWeight: token.fontStyle !== null && (token.fontStyle & 2) === 2 ? "700" : "400",
           style={{
             flex: 1,
             color: props.textStyle.mutedColor,
-            fontFamily: "ui-monospace",
+            fontFamily: MONO_FONT_FAMILY,
             fontSize: codeBlockFontSize(props.textStyle),
           }}
         >
       <ScrollView
         horizontal
         bounces={false}
+        nestedScrollEnabled={Platform.OS === "android"}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{ paddingHorizontal: 14, paddingVertical: 12 }}
       >
 }) {
   const rows = collectTableRows(props.node);
   return (
-    <ScrollView horizontal bounces={false} showsHorizontalScrollIndicator={false}>
+    <ScrollView
+      horizontal
+      bounces={false}
+      nestedScrollEnabled={Platform.OS === "android"}
+      showsHorizontalScrollIndicator={false}
+    >
       <View
         style={{
           borderColor: props.textStyle.dividerColor,

apps/mobile/modules/t3-markdown-text/src/NativeMarkdownSelectableText.ios.tsx+55−10

-import { createContext, useContext } from "react";
+import { createContext, useCallback, useContext } from "react";
-import { Image, Linking, type TextStyle, useColorScheme } from "react-native";
+import {
+  findNodeHandle,
+  Image,
+  Linking,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  type TextStyle,
+  useColorScheme,
+} from "react-native";
 import { MarkdownTextPrimitive } from "./MarkdownTextPrimitive";
 import { markdownFileIconSource } from "./markdownFileIcons";
   MarkdownFileContextMenu,
   NativeMarkdownTextStyle,
 } from "./SelectableMarkdownText.types";
+import { installMarkdownCopySanitizer } from "./T3MarkdownTextSelectionModule";
 export interface MarkdownFileContextMenuHandlers {
   readonly fileContextMenu: (href: string) => MarkdownFileContextMenu | undefined;
 const INLINE_ATTACHMENT_PREFIX = "\uFFFC\u00A0";
 const SKILL_ICON_PLACEHOLDER = "\uFFFC";
 const PARAGRAPH_STYLE_ENCODING_OFFSET = 1000;
+const MONO_FONT_FAMILY = Platform.select({
+  ios: "ui-monospace",
+  android: "monospace",
+  default: "monospace",
+});
+const styles = StyleSheet.create({
+  inlineIcon: {
+    width: 14,
+    height: 14,
+    marginHorizontal: 3,
+    transform: [{ translateY: 2 }],
+  },
+});
 function runKeySignature(run: NativeMarkdownTextRun): string {
   return [
       isFile || isSkill
         ? textStyle.boldFontFamily
         : run.code || isCodeBlock
-          ? "ui-monospace"
+          ? MONO_FONT_FAMILY
           : isHeading
             ? textStyle.headingFontFamily
             : run.bold
 }) {
   const colorScheme = useColorScheme();
   const menu = useContext(MarkdownFileContextMenuContext);
+  const containsInlineFileIcon = props.runs.some((run) => run.fileIcon != null);
+  const attachAndroidText = useCallback(
+    (textView: RNText | null) => {
+      if (Platform.OS !== "android" || !containsInlineFileIcon || textView === null) {
+        return;
+      }
+      const reactTag = findNodeHandle(textView);
+      if (reactTag !== null) {
+        installMarkdownCopySanitizer(reactTag);
+      }
+    },
+    [containsInlineFileIcon],
+  );
   const occurrences = new Map<string, number>();
   const prefixedExternalLinks = new Set<string>();
   const keyedRuns = props.runs.map((run) => {
     occurrences.set(signature, occurrence + 1);
     let text = run.text;
-    if (run.fileIcon) {
+    if (run.fileIcon && Platform.OS === "ios") {
       text = `${INLINE_ATTACHMENT_PREFIX}${text}`;
     } else if (run.skillName && run.skillLabel) {
-      text = `${SKILL_ICON_PLACEHOLDER}\u00A0${run.skillLabel}`;
+      text =
+        Platform.OS === "ios"
+          ? `${SKILL_ICON_PLACEHOLDER}\u00A0${run.skillLabel}`
+          : `$${run.skillName}`;
     } else if (run.externalHost && run.href && !prefixedExternalLinks.has(run.href)) {
       prefixedExternalLinks.add(run.href);
       text = `${EXTERNAL_LINK_PREFIX}${text}`;
   return (
     <MarkdownTextPrimitive
       key={appearanceKey}
+      nativeTextRef={attachAndroidText}
       uiTextView
       selectable
       style={{
           <MarkdownTextPrimitive
             key={key}
             nativeID={
-              run.fileIcon
+              Platform.OS === "ios"
-                ? `t3-file:${Image.resolveAssetSource(markdownFileIconSource(run.fileIcon)).uri}`
+                ? run.fileIcon
-                : run.skillName
+                  ? `t3-file:${Image.resolveAssetSource(markdownFileIconSource(run.fileIcon)).uri}`
-                  ? "t3-skill:sf:cube"
+                  : run.skillName
-                  : undefined
+                    ? "t3-skill:sf:cube"
+                    : undefined
+                : undefined
             }
             contextMenuConfig={contextMenu ? JSON.stringify(contextMenu) : undefined}
             style={runStyle(run, props.textStyle)}
                 : undefined
             }
           >
+            {Platform.OS === "android" && run.fileIcon ? (
+              <Image source={markdownFileIconSource(run.fileIcon)} style={styles.inlineIcon} />
+            ) : null}
             {text}
           </MarkdownTextPrimitive>
         );

apps/mobile/modules/t3-markdown-text/src/T3MarkdownTextSelectionModule.ts+12−0

@@ -0,0 +1,12 @@
	1	import { requireOptionalNativeModule } from "expo";
	2
	3	interface T3MarkdownTextSelectionNativeModule {
	4	readonly installCopySanitizer: (reactTag: number) => void;
	5	}
	6
	7	const nativeModule =
	8	requireOptionalNativeModule<T3MarkdownTextSelectionNativeModule>("T3MarkdownTextSelection");
	9
	10	export function installMarkdownCopySanitizer(reactTag: number): void {
	11	nativeModule?.installCopySanitizer(reactTag);
	12	}

apps/mobile/src/native/SelectableMarkdownText.android.tsx+24−0

@@ -0,0 +1,24 @@
	1	import {
	2	SelectableMarkdownText as T3SelectableMarkdownText,
	3	type SelectableMarkdownTextProps,
	4	} from "@t3tools/mobile-markdown-text/renderer";
	5
	6	import { highlightCodeSnippet } from "../features/review/shikiReviewHighlighter";
	7
	8	type MobileSelectableMarkdownTextProps = Omit<SelectableMarkdownTextProps, "highlightCode">;
	9
	10	export type {
	11	MarkdownImageRequest,
	12	NativeMarkdownTextStyle,
	13	SelectableMarkdownSkill,
	14	} from "@t3tools/mobile-markdown-text/types";
	15
	16	// The renderer falls back to React Native Text outside iOS, so Android can use
	17	// the same Markdown chunking while retaining native text selection.
	18	export function hasNativeSelectableMarkdownText(): boolean {
	19	return true;
	20	}
	21
	22	export function SelectableMarkdownText(props: MobileSelectableMarkdownTextProps) {
	23	return <T3SelectableMarkdownText {...props} highlightCode={highlightCodeSnippet} />;
	24	}

pnpm-lock.yaml+4−2

         version: link:../../packages/contracts
       '@t3tools/mobile-markdown-text':
         specifier: file:./modules/t3-markdown-text
-        version: file:apps/mobile/modules/t3-markdown-text(cd0d4cdec0d5bee3af406af520908919)
+        version: file:apps/mobile/modules/t3-markdown-text(eb96cd030e772ab91fe21f812240338a)
       '@t3tools/mobile-review-diff-native':
         specifier: file:./modules/t3-review-diff
         version: file:apps/mobile/modules/t3-review-diff
     peerDependencies:
       '@t3tools/client-runtime': '*'
       '@t3tools/shared': '*'
+      expo: '*'
       expo-asset: '*'
       expo-clipboard: '*'
       expo-haptics: '*'
     dependencies:
       defer-to-connect: 2.0.1
-  '@t3tools/mobile-markdown-text@file:apps/mobile/modules/t3-markdown-text(cd0d4cdec0d5bee3af406af520908919)':
+  '@t3tools/mobile-markdown-text@file:apps/mobile/modules/t3-markdown-text(eb96cd030e772ab91fe21f812240338a)':
     dependencies:
       '@t3tools/client-runtime': link:packages/client-runtime
       '@t3tools/shared': link:packages/shared
+      expo: 57.0.18(f9c992a5d7c53d81398568d3950992dc)
       expo-asset: 57.0.15(expo@57.0.18)(react-native@0.86.3(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(@types/react@19.2.16)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3)(typescript@6.0.3)
       expo-clipboard: 57.0.1(expo@57.0.18)(react-native@0.86.3(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(@types/react@19.2.16)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3)
       expo-haptics: 57.0.2(expo@57.0.18)