Link without target - how to?

[maku]

How can I add an additional link behaviour with no target '_blank':

Do I have to develop my own "Blot"?
Can anybody give a hint?

[benbro]

You can override the link format with a custom format that doesn't create the target attribute.

You can't have two formats acting on the same A tag name.

[maku]

@benbro thank you for the hint. But I would really need two kind of links:

1. inner app links (-> the html is for a SPA and the link should be with no target)
2. external links (which should be opened in a new tab)

What about inserting the html programmatically? Is this the way to go? (and how would I do this?)

[benbro]

Remove the target attribute only from you inner app links:
http://codepen.io/anon/pen/GNMXZa

[maku]

@benbro great - now I get it how I can do it basically.

The only one remaining problem is how to translate this in typescript (because of MyLink extends Link which is imported in a non module specific manner)

[benbro]

The link is exported as a normal Javascript class.
Should be possible to use the Quill Typescript definitions.

[maku]

@benbro in this Typescript definition there is no Link definition. So I do not know how to use this and I have also no idea how tho write one (at least in this constellation)

The problem, from my point of view, is the import of the Link class which acts as base class for the sublclass.

var Link = Quill.import('formats/link');
class MyLink extends Link {
  ...
} 

I would rather expect something like:

import {Link} from 'quill';

I had to go the "hard" way. Which means translation of the es6 source code with babel and manually inserting the result in my typescript project. (135 lines of ugly code )

[jhchen]

We have to use ES5 exports at that moment since if we use ES6, you can't do import Quill from 'quill'; in an ES5 environment, and importing Quill is the most important import. I don't believe any browser has implemented ES6 imports yet either. So for now it's Quill.import('formats/link');

[maku]

@jhchen yes you are right, browsers don't suppport import. But that's why we have to use babel / typescript and so on...

[jhchen]

Yes not everyone is using Babel or Typescript. Many build systems are just using ES5 style imports.

[letanure]

Something like this

const Link = Quill.import('formats/link')
class linkType extends Link {
  static create (value) {
    let node = super.create(value)
    value = this.sanitize(value)
    if (validations.isNumeric(value)) {
      node.setAttribute('href', 'tel:' + value)
      node.className = 'link--tel'
    }
    if (validations.isEmail(value)) {
      node.setAttribute('href', 'mailto:' + value)
      node.className = 'link--mail'
    }
    if (value.startsWith('https://') || value.startsWith('http://')) {
      node.className = 'link--external'
    } else {
      node.removeAttribute('target')
    }
    return node
  }
}
Quill.register(linkType)

[Poky85]

In Link extension you have to add format() method. So link editing (not only creation) works https://codepen.io/Poky85/pen/PQoPrV

[nereuseng]

I used a tricky way, to support dynamic way adding target="_blank", by adding parameters in URL:

// after adding url in custom way
this.editor.focus()
this.editor.updateContents([
      { retain: this.editor.getSelection().index },
      {
        // An image link
        insert: 'quill',
        attributes: {
          link: 'https://quilljs.com?isBlank=true',
          target: '_blank'
        }
      }
    ])

and in setup: (which is *.js file under plugins, that I used Nuxt.js)

import Vue from 'vue'
import VueQuillEditor, { Quill } from './vue-quill/ssr'

const isTargetBlankRegex = /\?isBlank=true/
const Link = Quill.import('formats/link')

class MyLink extends Link {
  static create(value) {
    const isTargetBlank = isTargetBlankRegex.test(value)
    let node = Link.create(value)
    value = Link.sanitize(value).replace('?isBlank=true', '')

    node.setAttribute('href', value)
    if (!isTargetBlank) {
      node.removeAttribute('target')
    }
    return node
  }

  format(name, value) {
    super.format(name, value)

    if (name !== this.statics.blotName || !value) {
      return
    }

    if (!isTargetBlank) {
      node.removeAttribute('target')
    }
  }
}

Quill.register(MyLink)

Vue.use(VueQuillEditor)

I edited @Poky85 's code from codepens, check url from constructor and set target="_blank" if "isBlank=true" exist.

Hope someone will think useful 😄

[loonydevil]

Something like this

const Link = Quill.import('formats/link')
class linkType extends Link {
  static create (value) {
    let node = super.create(value)
    value = this.sanitize(value)
    if (validations.isNumeric(value)) {
      node.setAttribute('href', 'tel:' + value)
      node.className = 'link--tel'
    }
    if (validations.isEmail(value)) {
      node.setAttribute('href', 'mailto:' + value)
      node.className = 'link--mail'
    }
    if (value.startsWith('https://') || value.startsWith('http://')) {
      node.className = 'link--external'
    } else {
      node.removeAttribute('target')
    }
    return node
  }
}
Quill.register(linkType)

hey @letanure , this one looks great. do you know how to do that in ES5 environment? :)

[Gladskih]

@Poky85

In Link extension you have to add format() method. So link editing (not only creation) works

Could you explain please what exactly case will not work without format override?

[webberig]

I got this working in Typescript by simply using this:

const Link = Quill.import("formats/link");

class MyLink extends Link {
    static create(value) {
        const node = Link.create(value);
        value = Link.sanitize(value);
        node.setAttribute('href', value);
        node.removeAttribute('target');
        return node;
    }

    format(name, value) {
        super.format(name, value);
        this["domNode"].removeAttribute("target");
    }
}

Quill.register(MyLink);