The https://trix-editor.org is fantastic, but there's one simple thing I expected to be built-in that isn't: copy/pasting a URL should create a link automatically instead of inserting the link as plain text.
Thinking of it, it's not so surprising because there are many things one could want to do instead, like embedding a video or a tweet. But it's a common request, and the GitHub issue includes a solution with jQuery that I used to build my Stimulus controller.
So, without further ado, here's a simple 2 steps rails tutorial to add URL auto-linking to your forms.
The controller
Create a /app/javascript/controller/trix_paste_controller.js file and copy/paste the code below.
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
document.addEventListener("paste", this.pasteHandler.bind(this));
}
disconnect() {
document.removeEventListener("paste", this.pasteHandler.bind(this))
}
pasteHandler(event) {
const pastedText = event.clipboardData?.getData?.("Text")
if (!!pastedText && !!pastedText.match(/^(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})$/ig)) {
this.pasteUrl(pastedText)
}
}
pasteUrl(pastedText) {
const editor = this.element.editor
let currentText = editor.getDocument().toString()
let currentSelection = editor.getSelectedRange()
let textWeAreInterestedIn = currentText.substring(0, currentSelection[0])
let startOfPastedText = textWeAreInterestedIn.lastIndexOf(pastedText)
editor.recordUndoEntry("Auto Link Paste")
editor.setSelectedRange([startOfPastedText, currentSelection[0]])
editor.activateAttribute('href', pastedText)
editor.setSelectedRange(currentSelection)
}
}
Your forms
And now, anytime you want need this auto-linking feature, just reference the controller like so:
= f.rich_text_area :content, data: { controller: "trix-paste" }
That's it, and it's "trix-paste" and not "trix-autolink" because I have further plans for this controller.
That's it! Follow me here or @sowenjub on twitter for more
Top comments (1)
Thanks for this post.
I made a little change to your code. Instead of adding and removing the event listeners in the javascript code, you can put
data: { action: 'paste->trix-paste#pasteHandler' }into rich_text_area options.