From 406fcedfc1278fef6a0f6f065e2d0c51834a926a Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Tue, 2 Aug 2022 20:01:40 +0430
Subject: [PATCH] feat(`<markdown>`): support fallback default slot (#1405)

---
 docs/components/content/ExampleTheTitle.vue    |  2 +-
 docs/components/content/MyButton.vue           |  2 +-
 docs/content/3.guide/1.writing/3.mdc.md        |  4 ++--
 docs/content/4.api/1.components/5.markdown.md  |  3 +--
 docs/content/6.blog/1.announcing-v2.md         |  2 +-
 src/runtime/components/Markdown.vue            | 18 ++++++++++++------
 test/basic.test.ts                             |  6 ++++++
 .../basic/components/content/Alert.vue         |  2 +-
 .../basic/components/content/TestMarkdown.vue  | 14 ++++++++++++++
 .../basic/content/_partial/markdown.md         |  3 +++
 10 files changed, 42 insertions(+), 14 deletions(-)
 create mode 100644 test/fixtures/basic/components/content/TestMarkdown.vue
 create mode 100644 test/fixtures/basic/content/_partial/markdown.md

diff --git a/docs/components/content/ExampleTheTitle.vue b/docs/components/content/ExampleTheTitle.vue
index eac4512a0..9a942d655 100644
--- a/docs/components/content/ExampleTheTitle.vue
+++ b/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>
diff --git a/docs/components/content/MyButton.vue b/docs/components/content/MyButton.vue
index 56f5f142b..0a190d70f 100644
--- a/docs/components/content/MyButton.vue
+++ b/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>
 
diff --git a/docs/content/3.guide/1.writing/3.mdc.md b/docs/content/3.guide/1.writing/3.mdc.md
index e4d6b697f..0b18362da 100755
--- a/docs/content/3.guide/1.writing/3.mdc.md
+++ b/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>
   ```
diff --git a/docs/content/4.api/1.components/5.markdown.md b/docs/content/4.api/1.components/5.markdown.md
index ea1f3464a..fc8d57de9 100644
--- a/docs/content/4.api/1.components/5.markdown.md
+++ b/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}
diff --git a/docs/content/6.blog/1.announcing-v2.md b/docs/content/6.blog/1.announcing-v2.md
index c779d97e4..cfdbe4650 100644
--- a/docs/content/6.blog/1.announcing-v2.md
+++ b/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>
   ```
diff --git a/src/runtime/components/Markdown.vue b/src/runtime/components/Markdown.vue
index 5bd66aec0..2f4091d78 100644
--- a/src/runtime/components/Markdown.vue
+++ b/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,7 +28,7 @@ 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(' ') }
@@ -36,16 +36,22 @@ export default defineComponent({
     })
 
     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()] }
 
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 3e2c8b907..f9f7d11cd 100644
--- a/test/basic.test.ts
+++ b/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: \', ", ?, #, /')
diff --git a/test/fixtures/basic/components/content/Alert.vue b/test/fixtures/basic/components/content/Alert.vue
index 0903994ee..cf88a3379 100644
--- a/test/fixtures/basic/components/content/Alert.vue
+++ b/test/fixtures/basic/components/content/Alert.vue
@@ -1,5 +1,5 @@
 <template>
   <div>
-    <Markdown />
+    <Markdown :use="$slots.default" />
   </div>
 </template>
diff --git a/test/fixtures/basic/components/content/TestMarkdown.vue b/test/fixtures/basic/components/content/TestMarkdown.vue
new file mode 100644
index 000000000..2ddeaec2e
--- /dev/null
+++ b/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>
diff --git a/test/fixtures/basic/content/_partial/markdown.md b/test/fixtures/basic/content/_partial/markdown.md
new file mode 100644
index 000000000..098bab047
--- /dev/null
+++ b/test/fixtures/basic/content/_partial/markdown.md
@@ -0,0 +1,3 @@
+::test-markdown
+p1
+::
\ No newline at end of file