John Harper

Add import Rails from "@rails/ujs"; to the top of your drag_controller.js file and it should work fine.

I believe Chris starts apps with his Jumpstart template, which includes this by default.

Maybe obvious to some, but I wanted to know why this is the case. My understanding now is that position comes from Trix and begins counting from the start of the rich text area, while startPos and endPos come from Tribute and begin counting from the start of the current line.

setSelectedRange is a Trix method, so it requires start and end position values relative to the beginning of the rich text area, which is why you need to find the length of the Tribute mention and subtract that from the current Trix position.

Another (verbose) way to write _pasteHtml:

_pasteHtml(html, startPos, endPos) {
  let position = this.editor.getPosition()
  let tributeLength = endPos - startPos
  let trixStartPos = position - tributeLength
  let trixEndPos = position
  this.editor.setSelectedRange([trixStartPos, trixEndPos])
  this.editor.deleteInDirection(“backward”)
}

That did the trick... thank you for sharing!

Hi all - I'm getting some unexpected behavior here, and I was hoping one of you might know of a way to fix it. The _pasteHtml function in mentions_controller.js is deleting more text than it should before the @mention. Here's what I'm seeing: https://streamable.com/ye7rni.

I'm using code that's identical to the tutorial.

Thanks for any insight.