Save 36% for Black Friday! Learn more

Mylan Connolly

Joined

760 Experience
7 Lessons Completed
0 Questions Solved

Activity

Posted in A few issues with tidying up @mentions

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.

Posted in A few issues with tidying up @mentions

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

logo Created with Sketch.

Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

© 2020 GoRails, LLC. All rights reserved.