Editing a rich text field which contains a rango hint submits the hint contained when submitting the form

[richardmcmillen]

I have only witnessed this in Jira but have not gone looking to replicate anywhere else yet.

If you are editing a rich text input area which has a link in it, it is marked up with a rango hint bq

If you then submit the form the hint letters end up in the saved content - bq

[richardmcmillen]

Inspecting this HTML

We can see the whole content editable area is the body of an iframe 😬

I don't know how you got iframes working yet and if it would be possible to break out of them to place hints in the main viewport container. I know there are security settings for this but curious for your take on it.

[david-tejada]

This is a weird one 😅. I don't use Jira so I can't test. Would you mind trying to set the attribute readonly to the hints to see if the issue goes away? Maybe you can do it in the devtools to see if it works.

Making it work for iframes was just a matter of setting all_frames to true in the manifest so the content scripts get executed in all frames. Then I store the hints and to which frame it belongs in the background script. It's all a bit more convoluted now because I have to use local storage to support manifest v3. In theory I believe I could move all the hints to the main frame if I also stored the coordinates but it would not be trivial

[richardmcmillen]

You mean add readonly="true" on individual hints? I did that and they still ended up in the submitted content. :(
It's not a huge deal for me and I understand how much extra complexity this could add, so I am happy if you want to close this.

[david-tejada]

Could you try setting the div container to <div id="rango-hints-container" contenteditable="false" readonly="readonly">?

[richardmcmillen]

That doesn't change the behaviour either.

[david-tejada]

Ok. Thanks for trying. Let's leave this issue open for now. I'll see if I can come up with something.

[richardmcmillen]

No problem. I'm pretty sure the editor is TinyMCE from what I can see from the DOM and searching info about Jira. I then tried googling to see if there are any classes you can add to elements which the lib would ignore/exclude when grabbing content but I didn't see anything. It would be fine if they didn't attach the editor to the `body`, it is unfortunate.

…

On Sat, 4 Jun 2022, 6:41 pm David Tejada, ***@***.***> wrote: Ok. Thanks for trying. Let's leave this issue open for now. I'll see if I can come up with something. — Reply to this email directly, view it on GitHub <#20 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACIYKRMGCUPNDL5LDSAMNTVNL3BRANCNFSM5XDFGGYA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[david-tejada]

I'm thinking a possible solution could be not to display hints in frames where the whole body is contenteditable.

[richardmcmillen]

Oh I like that nice and simple idea! Hopefully that wouldn't cause much confusion or oddness for anyone else.

[david-tejada]

I've tested it in this TinyMCE example page and seems to work nicely.

[david-tejada]

Will be available in v0.2.0 that I will release soon

[richardmcmillen]

This is working great!! Thanks heaps

[richardmcmillen]

Oh that's quite a nice and simple idea!

…

On Wed, Jun 8, 2022 at 6:40 PM David Tejada ***@***.***> wrote: I'm thinking a possible solution could be not to display hints in frames where the whole body is contenteditable. — Reply to this email directly, view it on GitHub <#20 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACIYKVM7JASULBGUQ6UYLDVOA553ANCNFSM5XDFGGYA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[david-tejada]

From version 0.3.0 on this issue is not present. The hints are rendered but they will not be submitted or appear if you copy the text. Hints are rendered using shadow dom, what avoids the issue altogether.