feat(<markdown>): support fallback default slot (#1405)

docs/components/content/ExampleTheTitle.vue

@@ -1,5 +1,5 @@
 <template>
   <h1 class="text-4xl">
-    <Markdown unwrap="p" />
+    <Markdown :use="$slots.default" unwrap="p" />
   </h1>
 </template>

docs/components/content/MyButton.vue

@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <button :class="type">
-    <Markdown unwrap="p" />
+    <Markdown :use="$slots.default" unwrap="p" />
   </button>
 </template>
 

docs/content/3.guide/1.writing/3.mdc.md

@@ -115,7 +115,7 @@ The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, u
   ```html [TheTitle.vue]
   <template>
     <h1 class="text-4xl">
-      <Markdown unwrap="p" />
+      <Markdown :use="$slots.default" unwrap="p" />
     </h1>
   </template>
   ```
@@ -189,7 +189,7 @@ defineProps(['type'])
 
 <template>
   <div :class="[type]">
-    <Markdown unwrap="p" />
+    <Markdown :use="$slots.default" unwrap="p" />
   </div>
 </template>
   ```

docs/content/4.api/1.components/5.markdown.md

@@ -10,9 +10,8 @@ It is useful when creating components that you want to use in your Markdown cont
 ## Props
 
 - `use`{lang=ts}: The slot to bind on, you must provide a `use`{lang=ts} via `$slots.{your_slot}`{lang=ts} in `<template>`{lang=html}.
-  - Type: `String`{lang=ts} or `Function`
+  - Type: Vue slot `Function`
   - Example: `$slots.default`{lang=ts}
-  - *Warning*: Using a plain string won't let you profit from reactivity for that component.
 - `unwrap`{lang=ts}: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
   - Type: `Boolean`{lang=ts} or `String`{lang=ts}
   - Default: `false`{lang=ts}

docs/content/6.blog/1.announcing-v2.md

@@ -205,7 +205,7 @@ MDC is Markdown, so nothing changes and you can keep using the `.md` extension.
 
   <template>
     <button :class="type">
-      <Markdown unwrap="p" />
+      <Markdown :use="$slots.default" unwrap="p" />
     </button>
   </template>
   ```

src/runtime/components/Markdown.vue

@@ -14,8 +14,8 @@ export default defineComponent({
       * A slot name or function
      */
     use: {
-      type: [String, Function],
-      default: 'default'
+      type: Function,
+      default: undefined
     },
     /**
      * Tags to unwrap separated by spaces
@@ -28,24 +28,30 @@ export default defineComponent({
   },
   setup (props) {
     const { parent } = getCurrentInstance()
-    const { between } = useSlots()
+    const { between, default: fallbackSlot } = useSlots()
 
     const tags = computed(() => {
       if (typeof props.unwrap === 'string') { return props.unwrap.split(' ') }
       return ['*']
     })
 
     return {
+      fallbackSlot,
       tags,
       between,
       parent
     }
   },
-  render ({ use, unwrap, between, tags, parent }) {
+  render ({ use, unwrap, fallbackSlot, between, tags, parent }) {
     try {
-      const slot: Slot = typeof use === 'string' ? parent?.slots[use] || parent?.parent?.slots[use] : use
+      let slot: Slot = use
+      if (typeof use === 'string') {
+        slot = parent?.slots[use] || parent?.parent?.slots[use]
+        // eslint-disable-next-line no-console
+        console.warn(`Please set :use="$slots.${use}" in <Markdown> component to enable reactivity`)
+      }
 
-      if (!slot) { return h('div') }
+      if (!slot) { return fallbackSlot ? fallbackSlot() : h('div') }
 
       if (!unwrap) { return [slot()] }
 

test/basic.test.ts

@@ -111,6 +111,12 @@ describe('Basic usage', async () => {
     expect(html).contains('Content (v2)')
   })
 
+  test('Partials specials chars', async () => {
+    const html = await $fetch('/_partial/markdown')
+    expect(html).contains('><!--[--> Default title <!--]--></h1>')
+    expect(html).contains('<p><!--[-->p1<!--]--></p>')
+  })
+
   test('Warning for invalid file name', () => {
     expect(spyConsoleWarn).toHaveBeenCalled()
     expect(spyConsoleWarn).toHaveBeenCalledWith('Ignoring [content:with-\'invalid\'-char.md]. File name should not contain any of the following characters: \', ", ?, #, /')

test/fixtures/basic/components/content/Alert.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <Markdown />
+    <Markdown :use="$slots.default" />
   </div>
 </template>

test/fixtures/basic/components/content/TestMarkdown.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
+      <Markdown :use="$slots.title" unwrap="p">
+        Default title
+      </Markdown>
+    </h1>
+    <p>
+      <Markdown :use="$slots.default" unwrap="p">
+        Default paragraph
+      </Markdown>
+    </p>
+  </div>
+</template>

test/fixtures/basic/content/_partial/markdown.md

@@ -0,0 +1,3 @@
+::test-markdown
+p1
+::