Typing animation with markdown

Hi! I am trying to test my Nuxt skills in more complex scenario. I want to create typing animation - it sounds simple, but I want to support markdown and I want to do that without sending no markdown related libraries to the client! I managed to implement component like this:

<template>
  <div ref="typeInput">
    <slot class="hidden">
      <h2>Hello <span style="color:red;">World</span></h2>
      <p>This is <strong>animated</strong> typing!</p>
    </slot>
  </div>

  <div ref="typeTarget" style="white-space: pre-wrap;" />
</template>

... typing logic ...

<template>
  <div ref="typeInput">
    <slot class="hidden">
      <h2>Hello <span style="color:red;">World</span></h2>
      <p>This is <strong>animated</strong> typing!</p>
    </slot>
  </div>

  <div ref="typeTarget" style="white-space: pre-wrap;" />
</template>

... typing logic ...

And In parent i am trying to pass rendered markdown and refresh it:

<AnimatedText ref="animatedText">
  <!-- This is a server component -->
  <MarkdownContent :text="currentMessage.message" class="text-xl md:text-2xl font-semibold" />
</AnimatedText>

<AnimatedText ref="animatedText">
  <!-- This is a server component -->
  <MarkdownContent :text="currentMessage.message" class="text-xl md:text-2xl font-semibold" />
</AnimatedText>

Problem is that I am using server components and I have to wait until it finishes rendering, sending to client and then run animation. But I have no idea how to do that,

nextTick

nextTick

won't work...
I really don't want to use

markdown-it

markdown-it

, because I managed to use mdc (from nuxt content) everywhere, so I don't want to add it only for this simple thing

Typing animation with markdown

<template>
  <div ref="typeInput">
    <slot class="hidden">
      <h2>Hello <span style="color:red;">World</span></h2>
      <p>This is <strong>animated</strong> typing!</p>
    </slot>
  </div>

  <div ref="typeTarget" style="white-space: pre-wrap;" />
</template>

... typing logic ...

<template>
  <div ref="typeInput">
    <slot class="hidden">
      <h2>Hello <span style="color:red;">World</span></h2>
      <p>This is <strong>animated</strong> typing!</p>
    </slot>
  </div>

  <div ref="typeTarget" style="white-space: pre-wrap;" />
</template>

... typing logic ...

And In parent i am trying to pass rendered markdown and refresh it:

<AnimatedText ref="animatedText">
  <!-- This is a server component -->
  <MarkdownContent :text="currentMessage.message" class="text-xl md:text-2xl font-semibold" />
</AnimatedText>

<AnimatedText ref="animatedText">
  <!-- This is a server component -->
  <MarkdownContent :text="currentMessage.message" class="text-xl md:text-2xl font-semibold" />
</AnimatedText>

Problem is that I am using server components and I have to wait until it finishes rendering, sending to client and then run animation. But I have no idea how to do that,

nextTick

nextTick

won't work...
I really don't want to use

markdown-it

markdown-it

, because I managed to use mdc (from nuxt content) everywhere, so I don't want to add it only for this simple thing

Typing animation with markdown

Similar Threads

Typing animation with markdown

Similar Threads

Similar Threads

Similar Threads