3

Thanks for the amazing library. It's similar to the previous questions, so I hope this will help him/her as well. But I will try to be more clear and provide some examples.

Basically, what I want is when I try to select the rendered text:

  1. I want to be able to select word by word by dragging,
  2. once selected, I want it to be prompted with a prompt "Copy" / "Paste" / "Look Up" which is a native iOS module.

So when we render the demo snippet and try to select the text, this is what we have. Please excuse the link haha.

Current:

Current Behavior. When we make selectable={true}, the copy tooltip pops up on top of the entire text element without allowing to select each word.

Desired:

Desired Behavior. So here we can drag each text and the ** copy/share/lookup** tooltip pops over. The tooltip is controlled by UIMenuController in iOS, but I couldn't find wherein the source code it's being manipulated or changed.

Any help or suggestion would be greatly appreciated, and thanks again for the library! My environment setting looks like below just in case.

react-native: 0.62.2
react-native-render-html: 4.2.3
iOS: 13.6
fatihyildizhan
  • 8,614
  • 7
  • 64
  • 88
sanghapark
  • 250
  • 4
  • 10
  • Can you post the relevant section of the code where this is happening? – aquaraga Aug 15 '20 at 06:29
  • Please share a snippet of the code rendered in snapshot 2, and we''ll be happy to investigate :-) – Jules Sam. Randolph Aug 15 '20 at 11:36
  • @aquaraga, the "copy" tooltip is found in the https://github.com/facebook/react-native/blob/ce0edca620d49597aa73c71a68b70efa170bc828/Libraries/Text/Text/RCTTextView.m. So it's not immediately visible in the source code of the library. – sanghapark Aug 19 '20 at 09:00
  • @JulesSam.Randolph, the tooltip that I'm referencing in a photo is actually a default behavior in Chrome. But I was able to re-create it through the library https://github.com/Astrocoders/react-native-selectable-text in react native as well. The exact code snippet for the tooltip can be found here https://github.com/Astrocoders/react-native-selectable-text/blob/master/ios/RNSelectableTextView.m (for iOS). – sanghapark Aug 19 '20 at 09:03
  • 1
    I tried to directly integrate the selectable-text library by replacing the tag in HTML.js with . The highlight itself worked when the start & end index of characters to highlight were given, but the tooltip still failed to pop up. Gut interpretation is that somehow render-html cannot access the selectable-text's library's overriden native tooltip settings. Any thoughts? Thanks again! – sanghapark Aug 19 '20 at 09:06
  • @sanghapark This is likely an inconsistent behavior in React Native with nested Text elements... Sorry to insist, but without a reproduction it is impossible to confirm my hypothesis. I warmly suggest you read this in details to catch a key element of the software internet culture: https://stackoverflow.com/help/minimal-reproducible-example – Jules Sam. Randolph Aug 20 '20 at 09:29
  • 1
    @JulesSam.Randolph Thanks for the hunch. I will see if I could provide a simple example. I didn't want to drag you too much to another library that you probably are not aware of :) – sanghapark Aug 20 '20 at 10:27

1 Answers1

3

Just add defaultTextProps={{selectable:true}} to it. it solves the problem for me.

<HTML
    defaultTextProps={{selectable:true}}
    source={{ HTML: "<p>some text</p>" }}
/>
Samson Akinfenwa
  • 61
  • 6