trix icon indicating copy to clipboard operation
trix copied to clipboard

Ignore trix-changes until fully loaded

Open chanderhan opened this issue 3 years ago • 3 comments

When loading existing content rich text content from a rails backend:

<div>
<figure data-trix-attachment='{"sgid":"xyz123","contentType":"image/jpeg","url":"https://..."}'><figure>
</div>

Trix parses it into something like:

<div>
  <figure ...>
    <img ...>
  </figure>
</div>

The trix-change event is fired for each image. How do I distinguish these trix-change events from user-initiated changes?

Details
  • Trix version: 1.3.1

chanderhan avatar Mar 30 '21 16:03 chanderhan

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.

stale[bot] avatar Jul 21 '21 04:07 stale[bot]

I am having the same issue for my application and it is really annoying for the usecase I have. I have to bind the OnChange to update the reactJS state. When inputs are changed, my application automatically saves to the backend. Another feature I have, is that this save will add a logging of the user changing the entry. So on page load, users seem to change every trix input.

Unfortunately, converting the attachments happens after the trix-before-initialize and after the trix-initialize being fired, so I cannot filter on that. I would say that the trix-initialize would not fire until the attachments are enriched. Or is there another event for this moment to listen to?

Also, when filtering the onChange event, I cannot compare the html attribute with the original value of the initialisation of the trix input, and stop de change event, because the new html is indeed converted to the enriched attachment render. Is there a way to get the comparable, "before enrichment" trix input content?

OtherCroissant avatar Aug 25 '21 07:08 OtherCroissant

I wanted to bump this issue b/c I am experiencing a similar issue.

I have a situation in which I have multiple trix editors on a page. I have them autosaving on trix-change events, and when the value saves, I broadcast the update via hotwire to all people subscribed to the websocket.

The problem is that when the page loads, the image gets rendered, causing a trix-change event, which then causes the broadcast, which then causes an update to the trix content as the image before it gets rendered, then the image gets rendered and the cycle continues.

The easy solution is only watching for trix-blur but it would be great to be able to save individual keystrokes with trix-change.

Hopefully that makes sense, I'll post an update if I'm able to find a workaround

evanshabsove avatar Dec 06 '23 01:12 evanshabsove