nuxt-modules / mdc

MDC supercharges regular Markdown to write documents interacting deeply with any Vue component.
MIT License
202 stars 23 forks source link

Client side render: parseMarkdown returns null on Safari for iOS 16 and below #280

Open JayChuan opened 1 week ago

JayChuan commented 1 week ago

app.vue

<template>
  <div>
    <nuxt-link to="/">Home</nuxt-link>
    <br />
    <nuxt-link href="/article">Article</nuxt-link>
    <NuxtPage />
  </div>
</template>

/pages/article

<template>
  <section class="article">
<!--    <MDC :value="`# heading 1`" tag="article" />-->  <! -- not work -->
    <MDCRenderer :data="ast?.data" :body="ast?.body" />
  </section>
</template>
<script lang="ts" setup>
import { parseMarkdown } from '@nuxtjs/mdc/runtime'
const props = defineProps({
  content: { type: String, required: true },
})
const { data: ast } = await useAsyncData('markdown', () => parseMarkdown(`# heading 1`))
console.log('AST: ', ast) // returns null  on Safari for iOS 16

</script>

Client side: click to article page,returns null on Safari for iOS 16 and below

farnabaz commented 2 days ago

Unfortunately, I don't have access to iOS 16 to reproduce it.

Do you have ay error log in the console? What error do you get in asyndata?

const { data: last, error } = await useAsyncData('markdown', () => parseMarkdown(`# heading 1`))

console.log(error)
JayChuan commented 1 day ago

Thanks for your help!

I got this error: Error: Invalid regular expression: invalid group specifier name

I guess some regex patterns of MDC are not supported on Safari for iOS 16 and below.

Looking forward to your reply.

Thank you again!