Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using the Trix editor with Rails' Turbo Frames, attempting to insert/edit any hyperlinks after the first doesn't render the link properly #1176

Open
katstasaph opened this issue Aug 6, 2024 · 0 comments

Comments

@katstasaph
Copy link

katstasaph commented Aug 6, 2024

Hi, thanks for taking a look at this -- very possible this is on my end. Apologies for the excess detail, trying to nail down the parameters of the issue.

I'm using Trix's editor (the version bundled with Action Text in Rails) for a project of mine. Basically, I have some pages representing songs, each of which has several reviews editable inline with Turbo Frames. Adding a single link with the text editor (selecting some text, clicking the button, adding the URL) works OK. However, when attempting to add subsequent links, the link will be inserted at the beginning of the textbox, and the text of the new link will be the URL, not whatever text was selected before, e.g.:

<div>
<a href="https://www.test2.com">https://www.test2.com</a><a href="https://www.test.com">Test</a>. Test2.
</div>

This issue also happens when editing hyperlinks with the toolbar, including editing them when there is only one link.

Notably:

  • The text that was selected no longer appears to be selected after clicking the hyperlink button; the span with highlight isn't inserted, hiding the dialog box element reveals no highlighted text. (presumably freezeSelection isn't being called/the check is false/the selection isn't recognized)
  • Trix appears to think the cursor is at the beginning; attempting to just insert a link with no highlighted text will insert that link at the beginning of the text box no matter what.
  • When editing an existing link, the URL field doesn't populate. (also consistent with the selection not being processed)
  • Some stray quotation marks are being inserted into the trix-editor div after the first hyperlink -- in the example above, after inserting the hyperlink the HTML looks like <a href="https://www.test.com">Test</a>". Test2."</div> They don't show up on the page or get submitted with the form. Not sure whether this is relevant but I did want to mention it.
  • Undoing (whether via the button or CTRL-Z) after inserting a link has some weird behavior -- the hyperlink will be removed but the text will still appear selected, still have the highlight style applied, etc. Same as Add Link then Undo Leaves Behind Background Color Highlight #1096.

There are some other odd interactions with formatting, but this is the one I have most consistently been able to reproduce and the one that comes up the most in our workflow. The issue can be worked around by just editing the text inside the new hyperlink and copy/pasting it to where it needs to be, but it is a bit tedious to do especially when there are multiple links to edit/insert.

Steps to Reproduce
  1. Select some text inside an open editor, click the insert URL button, and attempt to insert a link.
  2. The link will appear as expected.
  3. Select some text again and attempt to insert a link.
  4. The link will show up at the beginning of the text box; the text of the link is just the URL (consistent w/ no text being selected).
Other info
  • As far as I can tell, the issue does not come up when I edit a review via its separate path (/reviews/:id/edit) or when I create a new review (which is never inline), suggesting it may be related specifically to Turbo Frames.
  • The issue comes up regardless of how many separate reviews are on the page, including if there's just one.
  • All of this is happening client side, nothing weird is going on there with form submission etc.
  • I'm also using the acts_as_list and sortablejs-rails gems to allow editors to reorder the reviews on the page (with Stimulus), but as far as I can tell this issue happens whether or not anyone's done that. Bringing it up though in case the mouse events are somehow involved.
Details
  • Trix version: Assumed 2.0.7 based on the Rails 7.1.2.changelog.
  • Browser name and version: Google Chrome v. 127.0.6533.89
  • Operating system: Windows 10

Thanks in advance!

@katstasaph katstasaph changed the title When using the Trix editor with Turbo Frames, attempting to insert/edit any hyperlinks after the first doesn't render the link properly When using the Trix editor with Rails' Turbo Frames, attempting to insert/edit any hyperlinks after the first doesn't render the link properly Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant