Rules override

[kaharman]

Can we use rules override in QMarkdown v2? I don't find it in documentation.

[hawkeye64]

Can you explain exactly what it is you need to do?

[kaharman]

I mean extend property in QMarkdown v1 https://quasarframework.github.io/quasar-ui-qmarkdown/docs#extending

So we can override markdown rendering rules.

[nucle]

Hi, you can do it like this:

1. Create your own plugin with a function like this function rule(md)
2. Add the property plugins to qmarlkdown
3. Create an empty array and add your plugin

    <q-markdown
      :no-link="model"
      :no-linkify="model1"
      :plugins="[customRulePlugin]"
    >
....
    </q-markdown>

    const customRulePlugin = (md) => {
      md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
        const token = tokens[ idx ]
        const hrefIndex = token.attrIndex('href')
        if (token.attrs[ hrefIndex ][ 1 ][ 0 ] === '/') {
          token.attrSet('style', 'q-markdown--link q-markdown--link-local')
        } else {
          token.attrSet('class', 'q-markdown--link q-markdown--link-external')
          token.attrSet('target', '_blank')
        }
        return self.renderToken(tokens, idx, options)
      }
    }

I will update the docs.

BR, nucle

[zanzara]

@nucle Thx for ur example, but your customRulePlugin smh does not work. When i do a console.log(md.renderer.rules.link_open) before overwriting , I get this:

    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
      const token = tokens[ idx ]

      const hrefIndex = token.attrIndex('href')

      if (token.attrs[ hrefIndex ][ 1 ][ 0 ] === '#') {
        if (typeof location !== 'undefined') {
          token.attrs[ hrefIndex ][ 1 ] = location.pathname + token.attrs[ hrefIndex ][ 1 ]
        }
      }

      if (token.attrs[ hrefIndex ][ 1 ] === '') {
        token.attrSet('class', 'q-markdown--link q-markdown--link-local')
        if (tokens[ idx + 1 ] && tokens[ idx + 1 ].type === 'text' && tokens[ idx + 1 ].content) {
          token.attrSet('id', slugify(tokens[ idx + 1 ].content))
        }
      }
      else if (token.attrs[ hrefIndex ][ 1 ][ 0 ] === '/'
        || token.attrs[ hrefIndex ][ 1 ].startsWith('..')) {
        token.attrSet('class', 'q-markdown--link q-markdown--link-local')
      }
      else {
        token.attrSet('class', 'q-markdown--link q-markdown--link-external')
        token.attrSet('target', '_blank')
         if (noopener === true || noreferrer === true) {
           const rel = []
           noopener === true && rel.push('noopener')
           noreferrer === true && rel.push('noreferrer')
           token.attrSet('rel', rel.join(' '))
        }
      }
      return self.renderToken(tokens, idx, options)
    }

but obviously noopener and noreferrer are undefined then.

Want I want to achieve is to overwrite in the last else the call to href with an own openUrl Call for external hrefs. Smt as this:

token.attrSet('href', `javascript:window.electronAPI.openURL(${token.attrs[ hrefIndex ][ 1 ]})`)

but this doesn't work. Any ideas?

[zanzara]

nvm, got it now:

  const url = token.attrs[ hrefIndex ][ 1 ]

  token.attrSet('href', '#')
  token.attrSet('onclick', `window.electronAPI.openURL('${url}'); return false;`)