Make wrapper element customizable and/or add option to omit paragraph wrapper

[tofi86]

First of all, thanks for providing and maintaining this useful plugin!

Is your feature request related to a problem? Please describe. Currently, my Quasar 2 / Vue 3 application uses external i18n files where we occasionally use string arrays to iterate over when printing long text with multiple paragraphs:

export default {
  module: {
    heading: 'My Heading',
    blocktext: [
      'The first long paragraph. Lorem Ipsum dolor ...',
      'The second long paragraph. Lorem Ipsum dolor ...',
      'The third long paragraph. Lorem Ipsum dolor ...',
    ]
  }
}

<template>
  <h1>{{ t('module.heading') }}</h1>
  <p v-for="(p, index) in tm('module.blocktext')" :key="index">
    {{ t(`module.blocktext[${index}]`) }}
  </p>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';

const { t, tm } = useI18n({});

...
</script>

This generates a paragraph for every array item.

Now we started enriching the blocktext content with markdown and introduced latest next version of this plugin in our app.

We replaced the vue code with this:

<template>
  <h1>{{ t('module.heading') }}</h1>
  <p v-for="(p, index) in tm('module.blocktext')" :key="index">
    <q-markdown :src="t(`module.blocktext[${index}]`)" />
  </p>
</template>

However, this generates the following HTML structure:

<p>
  <div class="q-markdown">
    <p>The first long paragraph. Lorem Ipsum dolor ...</p>
  <div>
</p>

Describe the solution you'd like

We'd like to be able to omit the QMarkdown wrapper div or at least be able to replace it with a span.

Describe alternatives you've considered

For the moment, we changed our code to omit our p wrapper:

<template>
  <h1>{{ t('module.heading') }}</h1>
  <template v-for="(p, index) in tm('module.blocktext')" :key="index">
    <q-markdown :src="t(`module.blocktext[${index}]`)" />
  </p>
</template>

However, this still creates a wrapper div around every paragraph which isn't very nice in terms of semantics.

And it doesn't work for things like this, where we want to add line breaks after each entry:

export default {
  module: {
    support: [
      '**Support Hotline**',
      'mon-fri: +49 1234 56789',
      'weekends: +49 9876 54321',
    ]
  }
}

<template>
  <p>
    <template v-for="(p, index) in tm('module.support')" :key="index">
      {{ t(`module.support[${index}]`) }}<br/>
    </template>
  </p>
</template>

which generates the following HTML structure:

<p>
  <div class="q-markdown">
    <p><strong>Support Hotline</strong></p>
  <div>
  <br/>
  <div class="q-markdown">
    <p>mon-fri: +49 1234 56789</p>
  <div>
  <br/>
  <div class="q-markdown">
    <p>weekends: +49 9876 54321</p>
  <div>
  <br/>
</p>

Generally speaking, we'd like to have more flexibility on how the plugin generates wrapper elements.