DEV Community

Arnaud Joubay
Arnaud Joubay

Posted on • Originally published at on

Auto-linking URLs with Trix Editor and StimulusJS

The 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)) {

  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)

Enter fullscreen mode Exit fullscreen mode

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" }

Enter fullscreen mode Exit fullscreen mode

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)

emilianolch profile image
Emiliano López

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.