[Question] How do you handle marks with empty text?

[mornir]

Hi! By accident and without realizing it, one of my client added a mark (internal link) to an empty space, resulting in a empty and, in my case, invisible <a href="/about"></a> on the front-end. However it is still focusable when tabbing.

Ideally, I don't want that link to be rendered at all. I was able to solve the problem with functional template components by checking for children[0] && children[0].text. Example:

<template functional>
  <nuxt-link
    v-if="props.slug && children[0] && children[0].text"
    :to="props.slug + '/'"
    class="underline"
  >
    <slot />
  </nuxt-link>
</template>

However, for normal vue components, I only found convoluted ways and not clean and easy ways to check for empty slot. From what I understood "this.$slots.default[0]" is "false" at first and then "true", but it can't be track in a computed property because it's not reactive.

I was thinking, maybe we could add an option to this library for automatically hiding marks with empty text property?