Is there any plan to support basic markdown?

[existe-deja]

Hi,

I was wondering if it could be possible to support basic markdown like bold underline and italic to prevent translations to be polluted by too much interpolations?

[kazupon]

Probably, if you use markdown, you need to combine a parser like markdown-it with the Vue component.
At that time, I think that using Component interpolation can make your request come true.
https://vue-i18n.intlify.dev/guide/advanced/component.html

[existe-deja]

By combine a parser you think about creating a custom formater or putting markdown content inside my translations and directly inject it by a v-html attribute?
For now I use component interpolation or I prevent the design team to add too much styles for text contents.

[i4i4n]

@kazupon could you clarify your last post please?

I also think that it could be very convenient to have a way to easily add <strong>, <em> and other simple tags to our texts without having to use component interpolations which are quite cumbersome for these use cases.

99% of the component interpolations in my website are just there to add a <strong> tag around some keyword in the translation text. And so everytime I have at least 5 lines of code in templates and 2 lines in the translation JSONs for what seems to need just one each for a repetitive and trivial use case like this.

<i18n-t keypath="my-simple-text" tag="span">
  <template #strongKeyWorld>
    <strong>{{ $t('strong-keyword') }}</strong>
  </template>
</i18n-t>
…
i18n: {
  my-simple-text: 'This is a {strongKeyWorld} text.',
  strong-keyword: 'simple'
}

To get simply this:

This is a simple text.

Seems overkill.

Would be awesome to be able to write it somehow like this:

{{ $tmd('my-simple-text') }}
…
i18n: {
  my-simple-text: 'This is a **simple** text.'
}

Even if it is not markdown. Something like {{ $tsomething('text', { bold: {…}, italic, etc }) }} would be already helping a lot.

[iamandrewluca]

There are multiple ways to make an API that will solve this problem.

Option 1: using a map with vnodes (does not look ugly, supports named placeholders)

<template>
  <Translate keypath="my-message" tag="label" :nodes="nodes" />
</template>

<i18n>
{
  "my-message": "This is my <strong>message</strong>. And you can click this <link>text</link>"
}
</i18n>

<output>
  <label>
    This is my <strong>message</strong>. And you can click this <a href="https://vuejs.org">text</a>
  </label>
</output>

<script lang="ts">
import { defineComponent, h } from '@vue/runtime-core'
import { VNode } from 'vue'

export default defineComponent({
  setup() {
    const nodes: Record<string, VNode> = {
      link: h('a', { href: 'https://vuejs.org' }),
      strong: h('strong'),
    }

    return { nodes }
  },
})
</script>

Option 2: using each named slots single vnode (looks ugly, supports named placeholders)

<template>
  <Translate keypath="my-message" tag="label">
    <template #strong>
      <strong />
    </template>
    <template #link>
      <a href="https://vuejs.org" />
    </template>
  </Translate>
</template>

<i18n>
{
  "my-message": "This is my <strong>message</strong>. And you can click this <link>text</link>"
}
</i18n>

<output>
  <label>
    This is my <strong>message</strong>. And you can click this <a href="https://vuejs.org">text</a>
  </label>
</output>

Option 3: using default slot vnodes (looks nice but no named placeholders)

<template>
  <Translate keypath="my-message" tag="label">
    <strong />
    <a href="https://vuejs.org" />
  </Translate>
</template>

<i18n>
{
  "my-message": "This is my <0>message</0>. And you can click this <1>text</1>"
}
</i18n>

<output>
  <label>
    This is my <strong>message</strong>. And you can click this <a href="https://vuejs.org">text</a>
  </label>
</output>

Option 4: looks better but is impossible because of how slots work

<template>
  <Translate keypath="my-message" tag="label">
    <strong #strong />
    <a #link href="https://vuejs.org" />
  </Translate>
</template>

<i18n>
{
  "my-message": "This is my <strong>message</strong>. And you can click this <link>text</link>"
}
</i18n>

<output>
  <label>
    This is my <strong>message</strong>. And you can click this <a href="https://vuejs.org">text</a>
  </label>
</output>

• All the option should allow to use not only DOM VNodes, but also more complex components. e.g.
• None of the options should by default convert common basic nodes (h1, p) because it adds complexity. Let the developer map correct nodes

const FancyLink = defineComponent({ /* ... */ })
const nodes: Record<string, VNode> = {
  link: h(FancyLink, { href: 'https://vuejs.org' }),
  strong: h('strong'),
}

One can use basic interpolation to replace all simple placeholders ({msg}) then put it through this component that will replace element placeholders (<a>)

To be continued and brainstormed

https://react.i18next.com/latest/trans-component
https://github.com/Doist/react-interpolate

Maybe I will look soon into this feature request