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
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.