Add open URL and copy text click events support.

Author: retrixe

src/minecraft/chatToJsx.tsx

@@ -75,7 +75,6 @@ export interface TranslatedChat {
 export type MinecraftChat = PlainTextChat | TranslatedChat | string
 
 export interface ClickEvent {
-  // TODO: Build actual support for this.
   action:
     | 'open_url'
     | 'open_file'
@@ -166,6 +165,7 @@ const parseChatToJsx = (
   chat: MinecraftChat,
   Component: React.ComponentType<TextProps>,
   colorMap: ColorMap,
+  clickEventHandler: (clickEvent: ClickEvent) => void = () => {},
   componentProps?: {},
   trim = false
 ) => {
@@ -197,8 +197,15 @@ const parseChatToJsx = (
         if (c.color && c.color.startsWith('#')) style.color = c.color
         else if (c.color && colorMap[c.color]) style.color = colorMap[c.color]
 
+        const ce = c.clickEvent
         return (
-          <Component key={i} style={style}>
+          <Component
+            key={i}
+            style={style}
+            selectable
+            onPress={ce ? () => clickEventHandler(ce) : undefined}
+            onLongPress={() => {}}
+          >
             {c.text ? (trim ? trimLines(c.text) : c.text) : ''}
           </Component>
         )
@@ -208,21 +215,24 @@ const parseChatToJsx = (
 }
 
 // React Component-ised.
-const ChatToJsxNonMemo = ({
-  chat,
-  component,
-  colorMap,
-  componentProps,
-  trim
-}: {
+const ChatToJsxNonMemo = (props: {
   chat: MinecraftChat
   component: React.ComponentType<TextProps>
   colorMap: ColorMap
   componentProps?: {}
+  clickEventHandler?: (clickEvent: ClickEvent) => void
   trim?: boolean
-}) => parseChatToJsx(chat, component, colorMap, componentProps, trim)
+}) =>
+  parseChatToJsx(
+    props.chat,
+    props.component,
+    props.colorMap,
+    props.clickEventHandler,
+    props.componentProps,
+    props.trim
+  )
 // Memoisation means this is only re-rendered if the props changed.
-// TODO: This over parsing might be hurting performance...
+// TODO: This might be hurting performance...
 export const ChatToJsx = React.memo(ChatToJsxNonMemo)
 
 export const parseValidJson = (text: string) => {

src/screens/ChatScreen.tsx

@@ -4,15 +4,17 @@ import {
   StyleSheet,
   View,
   ActivityIndicator,
-  Platform
+  Platform,
+  Linking,
+  Clipboard
 } from 'react-native'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 
 import globalStyle from '../globalStyle'
 import useDarkMode from '../context/useDarkMode'
-import SettingsContext from '../context/settingsContext'
 import ConnectionContext from '../context/connectionContext'
+import SettingsContext, { Settings } from '../context/settingsContext'
 import {
   ChatToJsx,
   parseValidJson,
@@ -37,22 +39,45 @@ interface Message {
   text: MinecraftChat
 }
 
-const renderItem = (colorMap: ColorMap) => {
+const renderItem = (colorMap: ColorMap, settings: Settings) => {
   const ItemRenderer = ({ item }: { item: Message }) => (
     <View style={styles.androidScaleInvert}>
-      <ChatToJsx chat={item.text} component={Text} colorMap={colorMap} />
+      <ChatToJsx
+        chat={item.text}
+        component={Text}
+        colorMap={colorMap}
+        clickEventHandler={async ce => {
+          // TODO: run_command, suggest_command and URL prompt support.
+          if (
+            ce.action === 'open_url' &&
+            settings.webLinks &&
+            (ce.value.startsWith('https://') || ce.value.startsWith('http://'))
+          ) {
+            await Linking.openURL(ce.value)
+          } else if (ce.action === 'copy_to_clipboard') {
+            Clipboard.setString(ce.value)
+          } // No open_file/change_page handling.
+        }}
+      />
     </View>
   )
   return ItemRenderer // LOW-TODO: Performance implications?
 } // https://reactnative.dev/docs/optimizing-flatlist-configuration
-const ChatMessageList = (props: { messages: Message[]; darkMode: boolean }) => {
+const ChatMessageList = (props: {
+  messages: Message[]
+  darkMode: boolean
+  settings: Settings
+}) => {
   return (
     <FlatList
       inverted={Platform.OS !== 'android'}
       data={props.messages}
       style={[styles.androidScaleInvert, styles.chatArea]}
       contentContainerStyle={styles.chatAreaScrollView}
-      renderItem={renderItem(props.darkMode ? mojangColorMap : lightColorMap)}
+      renderItem={renderItem(
+        props.darkMode ? mojangColorMap : lightColorMap,
+        props.settings
+      )}
     />
   )
 }
@@ -207,7 +232,11 @@ const ChatScreen = ({ navigation }: { navigation: ChatNavigationProp }) => {
       )}
       {loggedIn && (
         <>
-          <ChatMessageListMemo messages={messages} darkMode={darkMode} />
+          <ChatMessageListMemo
+            messages={messages}
+            darkMode={darkMode}
+            settings={settings}
+          />
           <View style={darkMode ? styles.textAreaDark : styles.textArea}>
             <TextField
               value={message}

src/screens/settings/SettingScreen.tsx

@@ -40,7 +40,7 @@ const SettingScreen = (props: { button?: JSX.Element }) => {
           setValue={sendSpawnCommand => setSettings({ sendSpawnCommand })}
         />
         <Setting
-          name='Enable web links'
+          name='Enable clicking web links'
           value={settings.webLinks}
           setValue={webLinks => setSettings({ webLinks })}
         />