Link requires protocol and gives no feedback (error message or otherwise) about trix

[frenkel]

In case somebody is interested. I'm using this to help the user and insert https:// for them:

function prependProtocol(urlField) {
  if(urlField.value.indexOf('http') != 0) {
    urlField.value = "https://" + urlField.value
  }
}
document.addEventListener('trix-initialize', event => {
  let linkButton = event.target.toolbarElement.querySelector('input[value="Link"]')
  let urlField = event.target.toolbarElement.querySelector('input[name="href"]')
  urlField.addEventListener('keydown', (e) => {
    if(e.key == 'Enter') {
      prependProtocol(urlField)
    }
  })
  linkButton.addEventListener('click', () => {
    prependProtocol(urlField)
  })
})

[agraddy]

I think it's important to be able to create relative links. I was confused when testing the editor and tried entering "/contact-us" to see what happened and it wouldn't let me create a link.

[javan]

The link input is an <input type="url"> and is validated by the browser natively. The lack of feedback for invalid URLs is a result of our default styles. I'll make sure to fix them up, and in the meantime you're free to override them in your app or not include them at all.

Firefox doesn't appear to be affected and correctly highlights the field as invalid:

If you want to change the element to allow any input, you could change it to a text field:

input = Trix.config.toolbar.content.querySelector("input[type=url]")
input.type = "text"

Customizing the toolbar like this is undocumented currently because it's likely to change, but it should work fine for now.

[philfreo]

👍

[Kapunk]

I see the problem, the problem is the pattern, that is this:
matchingSelector = "a:not(#attachmentSelector})" in text_attributes.coffe

If you put a letter and then ":" always works. The pattern should be corrected

[tvanderpol]

I reproduced this when integrating Trix into a project of mine as well. Excellent project, btw - very easy to work with and does exactly what it says on the tin. 👍

[adamschwartz]

@javan thx!

[javan]

I fixed up the invalid link input styles in the latest release, 0.9.1.

[philfreo]

It's still bad UX for an editor to not allow someone to type something more friendly like google.com and have it auto-add the prefix.

[javan]

@philfreo, totally agree. I'd be happy to review a PR that improves things.

[mitar]

What about using autolinker.js. It seems to work pretty fine.

Maybe even easier would be to make this a plugin which makes links automatically as you type. So through the toolbar you have to enter a precise URL. But if you enter it in the text, like type it in, it auto-links it.

[nhk-gh]

When link created: clicking on it do nothing! Its possible to open link only via browser menu (right mouse click)

[Laassari]

since Trix has changed the suggested fix no longer works (the feedback works fine). here's how I did it

const { toolbarElement } = event.target;
const urlInput = toolbarElement.querySelector('input[name=href]');

urlInput.type = 'text';

// Beware the double escape. since we pass regex as a string we have to double escape the backslashes 
urlInput.pattern = '^((?:https?:\\/\\/)?[^./]+(?:\\.[^./]{2,})+(?:\\/.*)?)$';