loadUrlPreview () {

      const urlRegex = /(https?):\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi

      const foundLinks = this.content.post.match(urlRegex)



      if (!foundLinks) {

        this.preview = null

        return

      }

      const link = foundLinks[foundLinks.length - 1]



      if (!this.preview || this.preview.link !== link) {

        chatAxios.post('/cards/preview', {

          url: encodeURI(link)

        }).then(res => {

          if (res.data.data.ogTitle) {

            this.preview = {

              url: link,

              provider: res.data.data.ogSiteName,

              domain: new URL(link).hostname,

              title: res.data.data.ogTitle,

              description: res.data.data.ogDescription,

              image: res.data.data.ogImage,

              video: res.data.data.ogVideo

            }

          }

        })

      }

    }

loadUrlPreview () {

      const urlRegex = /(https?):\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi

      const foundLinks = this.content.post.match(urlRegex)



      if (!foundLinks) {

        this.preview = null

        return

      }

      const link = foundLinks[foundLinks.length - 1]



      if (!this.preview || this.preview.link !== link) {

        chatAxios.post('/cards/preview', {

          url: encodeURI(link)

        }).then(res => {

          if (res.data.data.ogTitle) {

            this.preview = {

              url: link,

              provider: res.data.data.ogSiteName,

              domain: new URL(link).hostname,

              title: res.data.data.ogTitle,

              description: res.data.data.ogDescription,

              image: res.data.data.ogImage,

              video: res.data.data.ogVideo

            }

          }

        })

      }

    }

const mentionHoverAndClick = {

  bind (el, binding) {

    const spans = el.querySelectorAll('span[data-id]')



    spans.forEach(span => {

      span.addEventListener('click', (event) => {

        event.stopPropagation()

        if (binding.value && binding.value.onClick) {

          binding.value.onClick(span.getAttribute('data-id'))

        }

      })



      span.addEventListener('mouseover', (event) => {

        if (binding.value && binding.value.onHover) {

          binding.value.onHover(span.getAttribute('data-id'), event)

        }

      })



      span.addEventListener('mouseout', () => {

        if (binding.value && binding.value.onOut) {

          binding.value.onOut(span.getAttribute('data-id'), event)

        }

      })

    })

  }

}



export default mentionHoverAndClick

const mentionHoverAndClick = {

  bind (el, binding) {

    const spans = el.querySelectorAll('span[data-id]')



    spans.forEach(span => {

      span.addEventListener('click', (event) => {

        event.stopPropagation()

        if (binding.value && binding.value.onClick) {

          binding.value.onClick(span.getAttribute('data-id'))

        }

      })



      span.addEventListener('mouseover', (event) => {

        if (binding.value && binding.value.onHover) {

          binding.value.onHover(span.getAttribute('data-id'), event)

        }

      })



      span.addEventListener('mouseout', () => {

        if (binding.value && binding.value.onOut) {

          binding.value.onOut(span.getAttribute('data-id'), event)

        }

      })

    })

  }

}



export default mentionHoverAndClick

.code-block {

  background-color: #f4f4f4;

  border-radius: 4px;

  font-family: 'Courier New', Courier, monospace;

  padding: 10px;

  margin: 10px 0;

}