Ask A Question

Notifications

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 https://gorails.com/episodes/at-mentions-with-actiontext?autoplay=1

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.insertAttachment(attachment);
    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]);
    this.editor.deleteInDirection("backward");
  }

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

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

Reply

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.

Reply
Join the discussion
Create an account Log in

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

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

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