Link popup on edit

[paigeflourin]

i tried this and it works https://github.com/zenoamaro/react-quill/issues/203 and here https://github.com/zenoamaro/react-quill/issues/131 . but how do i get the same behavior when editing a link?

to this:

[MaxRazen]

@paigeflourin Seems I've found some solution, I hope it will helpful for you You can look how it realized in source, for example check a theme file ./node_modules/quill/themes/snow.js Then implement something like this with your logic

handlers: {
    link (value) {
        if (value) {
            let range = this.quill.getSelection()
            if (range == null || range.length === 0) {
                return
            }

            let tooltip = this.quill.theme.tooltip
            tooltip.edit('link', '')
        } else {
            this.quill.format('link', false)
        }
    },
// ...
}

I needed also allow enter only valid links, so I changed base behavior of link creation (maybe more better solution exists)

const LinkInstance = Quill.import('formats/link')
const baseLinkCreate = LinkInstance.create

LinkInstance.create = function (value) {
    if (value) {
        if (!/^https?:\/\/(\S+)\.(\S+)$/.test(value)) {
            return document.createElement('a')
        }
    }

    return baseLinkCreate.call(this, value)
}

[Hndry]

did you already got the solution?

i wonder about this as well

[Hoomanmsh]

@MaxRazen this solution wroks for create link , but user can edit that link without any validation.

you should change "edit" function in "base.js" file too handle that