Ability Select Text within HTML component

Right now you cannot select text in an HTML component.

I have a client that could really use this.

Thanks @bradlymathews !

We're tracking this feedback internally as well.

For now, it looks like you could add this to css to the component: user-select: text

1 Like

Yup, that works.

Thanks!

Sorry to hijack your issue, but I have a similar use case where the client could benefit from selecting the text within the HTML. However, I am loading the HTML from a different source and do not want to edit the fields in that HTML. So I wrapped the entire HTML in another div element and applied myClass to that div (see screenshot) but it doesn't seem to be working.

Anything else that I might be missing here?

That looks correct, where you get the content of the HTML component is irrelevant, I use handlebar variables a lot. Maybe

This works for me:

would it matter if my handlebar variable is itself a preformatted HTML?
Here's a snapshot from one of the htmls.

<div><p class="drop-cap">Keith McCurdy has inked <a href="https://www.nydailynews.com/entertainment/gossip/justin-bieber-tattoos-bang-bang-plane-ride-article-1.1730660" target="_blank" rel="noopener nofollow">Justin Bieber</a> on a private jet, <a href="https://www.dailymail.co.uk/tvshowbiz/article-2324170/Cara-Delevingne-shows-new-tattoo-lion-forefinger--thanks-pal-Rihanna-recommendation.html" target="_blank" rel="noopener nofollow">Cara Delevingne</a> at the Gansevoort hotel, and <a href="https://www.instagram.com/p/0taRNYlcsg/?hl=en" target="_blank" rel="noopener nofollow">Katy Perry</a> while traveling with her on tour. He gave Rihanna the tiny handgun <a href="https://www.huffpost.com/entry/rihanna-gets-a-gun-tattoo_n_179454" target="_blank" rel="noopener nofollow">tattoo</a> that some speculated was a message to Chris Brown, her ex whom she'd accused of assault. Vogue has <a href="https://www.vogue.com/article/bang-bang-tattoo-best-tattoo-parlors-new-york-city" target="_blank" rel="noopener nofollow">heralded</a> the 37-year-old as "the best in the biz," and The New York Times has <a href="https://www.nytimes.com/2018/07/19/style/bang-bang-tattoo-parlor.html" target="_blank" rel="noopener nofollow">described</a> him as having "transformed the body-art industry."</p> </div>

Hi @satreja Thanks for sharing these details! This set up seems to be working for me :thinking:

We did get some recent feedback that a user had to set -webkit-user-select: all for this to work in Safari. Any chance you're using Safari?

No, I am using Firefox. And setting you provided also didn't work.

Interesting :thinking: I hadn't tested in Firefox, but I'm seeing the same issue. It seems to be better in preview mode or on the viewer link (compared to the editor canvas). I tried -moz-user-select, but I'm still having the issue. I'll post back here if I find a better solution. Otherwise, we may need to wait for the bug fix

I am also getting this issue in Firefox. I have set user_select to text or all but neither works. Ive been having this issue I think for at least 7-8 months now. Could we get a fix for this? Its been a while now and not having text selection on html components is quite a bit issue. Are there any work arounds we can try in the meantime?

@ashkan, could you try moving your html code into a custom component? I'm curious if that component works better (clear out the template code in the custom component & replace it with your html)

Hi Tess!

I tried this but custom component wont work very well for what we are doing here. This was not broken until 2 weeks ago. We could select HTML text in FF and all of a sudden we cannot anymore. Would be great if we could get this to work.

Thanks

Hi @ashkan,

Yes, I've shared this feedback internally!

For the time being, I am curious if you could share what limitation you're hitting with the custom component so that I can let our team know. It should be able to handle anything from the html component - but with added functionality :crossed_fingers: