Auto-linking URLs with Trix Editor and StimulusJS

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.

Arnaud Joubay

Arnaud Joubay

Swift & Rails Indie Maker. Original Parasider. Time Knight. 11y Remote/WFH. Half of @teambkry. Creator of cows in App Store featured @nomeat_today. Scuba diver.👨‍💻🐕🐋🥐🐮🍉🌱.