Text is not Selectable.

[NuZard84]

Output of the markdown text is not selectable to frontend side, Can not copy or other actions within Texts.

[markwitt1]

Any update on this?

[Stars-Chan]

重写text、textgroup标签，给Text增加selectable属性即可

...other code

interface ITextNode {
  key: string;
  content: string;
}

interface IStylesNode {
  text: object;
  textgroup: object;
}

const rules = {
  text: (
    node: ITextNode,
    children: unknown,
    parent: unknown,
    styles: IStylesNode,
    inheritedStyles = {},
  ) => (
    <Text key={node.key} style={[inheritedStyles, styles.text]} selectable>
      {node.content}
    </Text>
  ),
  textgroup: (
    node: ITextNode,
    children: unknown,
    parent: unknown,
    styles: IStylesNode,
  ) => (
    <Text key={node.key} style={styles.textgroup} selectable>
      {children}
    </Text>
  ),
};
function APP(){
  return (
    <Markdown rules={rules} style={styles}>
      {markdown}
    </Markdown>
  );
}

[NuZard84]

I implement this with the SelectableText to hover a menubar instead of defualt menu of device when user select the text from the markdown

import { SelectableText } from "@rob117/react-native-selectable-text";
import React from "react";
import { StyleSheet, View, Text, ScrollView, Clipboard } from "react-native";
import Markdown from "react-native-markdown-display";
import colors from "../../constants/colors";

const SelectableMarkdown = ({
  content,
  onExplanation,
  onAskQuestion,
  onAddNote,
  onTextSelected,
}) => {
  const addSelectedTextToClipboard = (selectedContent) => {
    Clipboard.setString(selectedContent);
  };

  const handleSelection = ({ eventType, content: selectedContent }) => {
    onTextSelected(selectedContent);
    switch (eventType) {
      case "Explanation":
        onExplanation(selectedContent);
      
        break;
      case "Ask Question":
        onAskQuestion(selectedContent);
        analytics().logEvent("button_click", {
          button_name: "IDC_Ask_Question",
        });
        break;
      case "Add Note":
        onAddNote(selectedContent);
      
        break;
      case "Copy":
        addSelectedTextToClipboard(selectedContent);
      
        break;
      default:
        break;
    }
  };

  const rules = {
    textgroup: (node, children, parent, styles) => (
      <SelectableText
        menuItems={["Copy", "Explanation", "Ask Question", "Add Note"]}
        textComponentProps={{
          children: (
            <Text
              key={node.key}
              selectable={true}
              style={[styles.text, markdownStyles.text]}
            >
              {children}
            </Text>
          ),
        }}
        onSelection={handleSelection}
        value={content}
        prependToChild={""}
      />
    ),
  };

  return (
    <ScrollView style={styles.container}>
      <View>
        <Markdown style={markdownStyles} rules={rules} debugPrintTree={false}>
          {content}
        </Markdown>
      </View>
    </ScrollView>
  );
};

const markdownStyles = StyleSheet.create({
  textgroup: {
    userSelect: "all",
  },
  heading1: {
    fontSize: 28,
    fontWeight: "bold",
    marginVertical: 10,
  },
  heading2: {
    fontSize: 24,
    color: colors.blue,
    fontWeight: "bold",
    marginVertical: 8,
  },
  heading3: {
    fontSize: 20,
    fontWeight: "bold",
    marginVertical: 6,
  },
  heading4: {
    fontSize: 18,
    fontWeight: "bold",
    marginVertical: 5,
  },
  heading5: {
    fontSize: 16,
    color: colors.gray,
    fontWeight: "bold",
    marginVertical: 4,
  },
  heading6: {
    fontSize: 14,
    color: colors.gray,
    fontWeight: "bold",
    marginVertical: 3,
  },
  body: {
    textAlign: "justify",
  },

with this property [
textgroup: {
userSelect: "all",
},
] add the rules and if you need simple selecting text then @markwitt1 's code explanation is good to fix this selecting text issue.

Maybe this will assist you.