All threads / A few issues with tidying up @mentions
Ask A Question


You’re not receiving notifications from this thread.

A few issues with tidying up @mentions

Mylan Connolly asked in Rails

Hello, I was following along with the mentions episode here

I made a few tweaks to help suit my application a bit better, and one that I thought of was utilizing the contentType field for Trix.Attachment type in JS.

I modified the replaced method to look like this:

  replaced(e) {
    let mention = e.detail.item.original;
    let attachment = new Trix.Attachment({
      sgid: mention.sgid,
      content: mention.content,
      contentType: "x-application/user",
    this.editor.insertString(" ");

When adding new mentions, the data-trix-content-type attribute of the figure is now available, so I can style mentions specifically (nice!). However, when I go to edit a record, that content type is not persisted; instead it is replaced with application/octet-stream (not quite as nice!). First question is, is there a way to make this content type persisted somehow? If not, I'll figure out another way to style figures properly. My issue is that there's a lot of vertical margin in figures that I would probably want for an image or video, but not for mentions.

The second issue is that if I add a mention, everything is deleted from the mention to the beginning of the line in the editor. I suspect there may be a bug in the _pasteHtml method here:

  // Original version
  _pasteHtml(html, startPos, endPos) {
    let position = this.editor.getPosition();
    this.editor.setSelectedRange([position - endPos, position]);

  // Tweaked version
  _pasteHtml(html, startPos, endPos) {
    let position = this.editor.getPosition();
    this.editor.setSelectedRange([startPos, position]);

When I use the tweaked version it works fine for one mention, but when I try to mention multiple people, it starts deleting too much text again. Has anyone encountered this and/or have a solution that might work better?

Thanks a bunch, these resources have been awesome

Answering the second half of my question from a response Benjamin Hargett made in the video. Fixing the _pasteHtml method with:

this.editor.setSelectedRange([position - endPos + startPos, position + 1]);

fixes the paste issue. Still curious about the content-type though.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 66,029+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.