From dd7535b6962e9e18088f1b2a15d950e22e2b507d Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Fri, 12 Aug 2022 13:40:54 +0430
Subject: [PATCH 1/4] chore: deprecate Markdown component

---
 .../components/content/MarkdownBetween.vue    |  2 +-
 src/runtime/components/ContentRichSlot.vue    | 85 +++++++++++++++++++
 src/runtime/components/Markdown.vue           | 67 ++-------------
 3 files changed, 93 insertions(+), 61 deletions(-)
 create mode 100644 src/runtime/components/ContentRichSlot.vue

diff --git a/playground/shared/components/content/MarkdownBetween.vue b/playground/shared/components/content/MarkdownBetween.vue
index c6a7d685e..2edbd2e40 100644
--- a/playground/shared/components/content/MarkdownBetween.vue
+++ b/playground/shared/components/content/MarkdownBetween.vue
@@ -1,5 +1,5 @@
 <template>
-  <Markdown unwrap="ul li">
+  <Markdown :use="$slots.default" unwrap="ul li">
     <template #between>
       <br>
     </template>
diff --git a/src/runtime/components/ContentRichSlot.vue b/src/runtime/components/ContentRichSlot.vue
new file mode 100644
index 000000000..34c7a0995
--- /dev/null
+++ b/src/runtime/components/ContentRichSlot.vue
@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { Slot } from 'vue'
+import { defineComponent, getCurrentInstance, useSlots, computed, useUnwrap, h } from '#imports'
+
+/**
+ * ContentRichSlot component
+ */
+export default defineComponent({
+  name: 'ContentRichSlot',
+  functional: true,
+  props: {
+    /**
+      * A slot name or function
+     */
+    use: {
+      type: Function,
+      default: undefined
+    },
+    /**
+     * Tags to unwrap separated by spaces
+     * Example: 'ul li'
+     */
+    unwrap: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  setup (props) {
+    const { parent } = getCurrentInstance()
+    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, fallbackSlot, between, tags, parent }) {
+    try {
+      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 fallbackSlot ? fallbackSlot() : h('div') }
+
+      if (!unwrap) { return [slot()] }
+
+      const { flatUnwrap } = useUnwrap()
+
+      const unwrapped = flatUnwrap(slot(), tags)
+
+      if (between) {
+        return unwrapped.flatMap(
+          (vnode, index) => index === 0 ? [vnode] : [between(), vnode]
+        )
+      }
+
+      return unwrapped.reduce((acc, item) => {
+        if (typeof item.children === 'string') {
+          if (typeof acc[acc.length - 1] === 'string') {
+            acc[acc.length - 1] += item.children
+          } else {
+            acc.push(item.children)
+          }
+        } else {
+          acc.push(item)
+        }
+        return acc
+      }, [])
+    } catch (e) {
+      // Catching errors to allow content reactivity
+      return h('div')
+    }
+  }
+})
+</script>
diff --git a/src/runtime/components/Markdown.vue b/src/runtime/components/Markdown.vue
index 2f4091d78..63f1e2570 100644
--- a/src/runtime/components/Markdown.vue
+++ b/src/runtime/components/Markdown.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Slot } from 'vue'
-import { defineComponent, getCurrentInstance, useSlots, computed, useUnwrap, h } from '#imports'
+import ContentRichSlot from './ContentRichSlot'
+import { defineComponent, getCurrentInstance, useSlots, computed } from '#imports'
 
 /**
  * Markdown component
@@ -8,25 +8,12 @@ import { defineComponent, getCurrentInstance, useSlots, computed, useUnwrap, h }
 export default defineComponent({
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Markdown',
-  functional: true,
-  props: {
-    /**
-      * A slot name or function
-     */
-    use: {
-      type: Function,
-      default: undefined
-    },
-    /**
-     * Tags to unwrap separated by spaces
-     * Example: 'ul li'
-     */
-    unwrap: {
-      type: [Boolean, String],
-      default: false
-    }
-  },
+  extends: ContentRichSlot,
   setup (props) {
+    if (process.dev) {
+      // eslint-disable-next-line no-console
+      console.warn('[deprecation] <Markdown> component is deprecated. Please use <ContentRichSlot> instead.')
+    }
     const { parent } = getCurrentInstance()
     const { between, default: fallbackSlot } = useSlots()
 
@@ -41,46 +28,6 @@ export default defineComponent({
       between,
       parent
     }
-  },
-  render ({ use, unwrap, fallbackSlot, between, tags, parent }) {
-    try {
-      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 fallbackSlot ? fallbackSlot() : h('div') }
-
-      if (!unwrap) { return [slot()] }
-
-      const { flatUnwrap } = useUnwrap()
-
-      const unwrapped = flatUnwrap(slot(), tags)
-
-      if (between) {
-        return unwrapped.flatMap(
-          (vnode, index) => index === 0 ? [vnode] : [between(), vnode]
-        )
-      }
-
-      return unwrapped.reduce((acc, item) => {
-        if (typeof item.children === 'string') {
-          if (typeof acc[acc.length - 1] === 'string') {
-            acc[acc.length - 1] += item.children
-          } else {
-            acc.push(item.children)
-          }
-        } else {
-          acc.push(item)
-        }
-        return acc
-      }, [])
-    } catch (e) {
-      // Catching errors to allow content reactivity
-      return h('div')
-    }
   }
 })
 </script>

From 3a1821462d6c595d0e3a0e997367072f83f51580 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Fri, 12 Aug 2022 13:53:07 +0430
Subject: [PATCH 2/4] docs: update docs & examples

---
 docs/components/content/ExampleTheTitle.vue   |  2 +-
 docs/components/content/MyButton.vue          |  2 +-
 docs/content/3.guide/1.writing/3.mdc.md       | 14 ++++----
 docs/content/4.api/1.components/5.markdown.md |  4 +++
 .../4.api/1.components/content-rich-slot.md   | 32 +++++++++++++++++++
 docs/content/4.api/2.composables/3.unwrap.md  |  2 +-
 .../5.examples/3.mdc/2.nested-components.md   |  2 +-
 docs/content/6.blog/1.announcing-v2.md        |  2 +-
 .../components/AppNested.vue                  |  2 +-
 .../components/content/Alert.vue              |  4 +--
 .../components/content/List.vue               |  2 +-
 .../shared/components/content/Alert.vue       |  2 +-
 .../components/content/MarkdownBetween.vue    |  4 +--
 src/runtime/components/ContentRichSlot.vue    |  2 +-
 .../basic/components/content/Alert.vue        |  2 +-
 .../basic/components/content/TestMarkdown.vue |  8 ++---
 16 files changed, 61 insertions(+), 25 deletions(-)
 create mode 100644 docs/content/4.api/1.components/content-rich-slot.md

diff --git a/docs/components/content/ExampleTheTitle.vue b/docs/components/content/ExampleTheTitle.vue
index 9a942d655..b24ebc124 100644
--- a/docs/components/content/ExampleTheTitle.vue
+++ b/docs/components/content/ExampleTheTitle.vue
@@ -1,5 +1,5 @@
 <template>
   <h1 class="text-4xl">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentRichSlot :use="$slots.default" unwrap="p" />
   </h1>
 </template>
diff --git a/docs/components/content/MyButton.vue b/docs/components/content/MyButton.vue
index 0a190d70f..2e4862284 100644
--- a/docs/components/content/MyButton.vue
+++ b/docs/components/content/MyButton.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <button :class="type">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentRichSlot :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 0b18362da..d9aab0291 100755
--- a/docs/content/3.guide/1.writing/3.mdc.md
+++ b/docs/content/3.guide/1.writing/3.mdc.md
@@ -16,7 +16,7 @@ Any component in the `components/content/` directory or [made available globally
 The component must contain either:
 
 - A `<slot />`{lang="html"} to accept raw text or another component.
-- The `<Markdown />`{lang="html"} component to accept formatted text.
+- The `<ContentRichSlot />`{lang="html"} component to accept formatted text.
 
 In a markdown file, use the component with the **`::`** identifier.
 
@@ -107,7 +107,7 @@ You can add more `::::` when nesting components as a visual reminder.
 
 ### Markdown rendering
 
-The `<Markdown />`{lang="html"} component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
+The `<ContentRichSlot />`{lang="html"} component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
 
 The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, useful when using tags such as title tags (`<h1>`{lang="html"}, `<h2>`{lang="html"}, ...) or inline tags (`<button>`{lang="html"}, `<a>`{lang="html"}, ...).
 
@@ -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 :use="$slots.default" unwrap="p" />
+      <ContentRichSlot :use="$slots.default" unwrap="p" />
     </h1>
   </template>
   ```
@@ -131,15 +131,15 @@ The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, u
   ::
 ::
 
-The `<Markdown />` component can act as a named slot with the `use` property:
+The `<ContentRichSlot />` component can act as a named slot with the `use` property:
 
 ```html
-<Markdown :use="$slots.description" unwrap="p">
+<ContentRichSlot :use="$slots.description" unwrap="p">
 ```
 
 ## Inline components
 
-Inline components are components without slots or `<Markdown />`.
+Inline components are components without slots or `<ContentRichSlot />`.
 
 They can be used with the `:` identifier.
 
@@ -189,7 +189,7 @@ defineProps(['type'])
 
 <template>
   <div :class="[type]">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentRichSlot :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 fc8d57de9..923a40c8d 100644
--- a/docs/content/4.api/1.components/5.markdown.md
+++ b/docs/content/4.api/1.components/5.markdown.md
@@ -3,6 +3,10 @@ title: '<Markdown>'
 description: 'The fastest way to inject Markdown into your Vue components.'
 ---
 
+::alert{type=warn}
+As of Content@2.1.0 this component is deprecated and replaced by [`<ContentRichSlot>`]('./content-rich-slot').
+::
+
 The `<Markdown>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
 
 It is useful when creating components that you want to use in your Markdown content.
diff --git a/docs/content/4.api/1.components/content-rich-slot.md b/docs/content/4.api/1.components/content-rich-slot.md
new file mode 100644
index 000000000..9d578f0f7
--- /dev/null
+++ b/docs/content/4.api/1.components/content-rich-slot.md
@@ -0,0 +1,32 @@
+---
+title: '<ContentRichSlot>'
+description: 'The fastest way to inject Markdown into your Vue components.'
+---
+
+The `<ContentRichSlot>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
+
+It is useful when creating components that you want to use in your Markdown content.
+
+## 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: Vue slot `Function`
+  - Example: `$slots.default`{lang=ts}
+- `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}
+  - Example: `'ul li'`{lang=ts}
+
+## Example
+
+```html [components/FancyHeader.vue]
+<template>
+  <h2 class="fancy-header"><ContentRichSlot :use="$slots.default" unwrap="p" /></h2>
+</template>
+```
+
+```md [content/index.md]
+::fancy-header
+That text paragraph will be unwrapped.
+::
+```
diff --git a/docs/content/4.api/2.composables/3.unwrap.md b/docs/content/4.api/2.composables/3.unwrap.md
index 7e82c353a..646c190cd 100644
--- a/docs/content/4.api/2.composables/3.unwrap.md
+++ b/docs/content/4.api/2.composables/3.unwrap.md
@@ -2,4 +2,4 @@
 title: 'useUnwrap()'
 ---
 
-It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from `<Markdown>`{lang=html} component.
+It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from `<ContentRichSlot>`{lang=html} component.
diff --git a/docs/content/5.examples/3.mdc/2.nested-components.md b/docs/content/5.examples/3.mdc/2.nested-components.md
index 34d101647..cd9014c34 100644
--- a/docs/content/5.examples/3.mdc/2.nested-components.md
+++ b/docs/content/5.examples/3.mdc/2.nested-components.md
@@ -4,7 +4,7 @@ title: 'Nested components'
 description: 'The MDC syntax allow you to nest components within a parent slot using indentation and the :: syntax.'
 ---
 
-The `components/AppNested.vue` component uses the `<Markdown>` component as markdown-rendering slot.
+The `components/AppNested.vue` component uses the `<ContentRichSlot>` component as markdown-rendering slot.
 
 ::ReadMore{link="/guide/writing/mdc#nesting"}
 
diff --git a/docs/content/6.blog/1.announcing-v2.md b/docs/content/6.blog/1.announcing-v2.md
index cfdbe4650..419dd50d1 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 :use="$slots.default" unwrap="p" />
+      <ContentRichSlot :use="$slots.default" unwrap="p" />
     </button>
   </template>
   ```
diff --git a/examples/mdc/nested-components/components/AppNested.vue b/examples/mdc/nested-components/components/AppNested.vue
index 61e9e0360..1215793a6 100644
--- a/examples/mdc/nested-components/components/AppNested.vue
+++ b/examples/mdc/nested-components/components/AppNested.vue
@@ -1,6 +1,6 @@
 <template>
   <aside>
     <h2>Nested component</h2>
-    <Markdown unwrap="p" />
+    <ContentRichSlot unwrap="p" />
   </aside>
 </template>
diff --git a/playground/document-driven/components/content/Alert.vue b/playground/document-driven/components/content/Alert.vue
index cbf53b133..a872d047c 100644
--- a/playground/document-driven/components/content/Alert.vue
+++ b/playground/document-driven/components/content/Alert.vue
@@ -6,10 +6,10 @@
       </div>
       <div>
         <h3 style="margin: 0">
-          <Markdown :use="$slots.title" unwrap="p" />
+          <ContentRichSlot :use="$slots.title" unwrap="p" />
         </h3>
         <div>
-          <Markdown :use="$slots.default" unwrap="p" />
+          <ContentRichSlot :use="$slots.default" unwrap="p" />
         </div>
       </div>
     </div>
diff --git a/playground/document-driven/components/content/List.vue b/playground/document-driven/components/content/List.vue
index 8142fde89..377800203 100644
--- a/playground/document-driven/components/content/List.vue
+++ b/playground/document-driven/components/content/List.vue
@@ -8,7 +8,7 @@ const { flatUnwrap } = useUnwrap()
   <ul>
     <li v-for="(item, index) of flatUnwrap($slots.default(), ['ul'])" :key="index">
       ☑︎
-      <span><Markdown :use="() => item" unwrap="li" /></span>
+      <span><ContentRichSlot :use="() => item" unwrap="li" /></span>
     </li>
   </ul>
 </template>
diff --git a/playground/shared/components/content/Alert.vue b/playground/shared/components/content/Alert.vue
index 8a45c3207..de85de518 100644
--- a/playground/shared/components/content/Alert.vue
+++ b/playground/shared/components/content/Alert.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="alert">
-    <Markdown :use="$slots.default" unwrap="p" />
+    <ContentRichSlot :use="$slots.default" unwrap="p" />
   </div>
 </template>
 
diff --git a/playground/shared/components/content/MarkdownBetween.vue b/playground/shared/components/content/MarkdownBetween.vue
index 2edbd2e40..884059f18 100644
--- a/playground/shared/components/content/MarkdownBetween.vue
+++ b/playground/shared/components/content/MarkdownBetween.vue
@@ -1,7 +1,7 @@
 <template>
-  <Markdown :use="$slots.default" unwrap="ul li">
+  <ContentRichSlot :use="$slots.default" unwrap="ul li">
     <template #between>
       <br>
     </template>
-  </Markdown>
+  </ContentRichSlot>
 </template>
diff --git a/src/runtime/components/ContentRichSlot.vue b/src/runtime/components/ContentRichSlot.vue
index 34c7a0995..dcac982eb 100644
--- a/src/runtime/components/ContentRichSlot.vue
+++ b/src/runtime/components/ContentRichSlot.vue
@@ -47,7 +47,7 @@ export default defineComponent({
       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`)
+        console.warn(`Please set :use="$slots.${use}" in <ContentRichSlot> component to enable reactivity`)
       }
 
       if (!slot) { return fallbackSlot ? fallbackSlot() : h('div') }
diff --git a/test/fixtures/basic/components/content/Alert.vue b/test/fixtures/basic/components/content/Alert.vue
index cf88a3379..f084ae550 100644
--- a/test/fixtures/basic/components/content/Alert.vue
+++ b/test/fixtures/basic/components/content/Alert.vue
@@ -1,5 +1,5 @@
 <template>
   <div>
-    <Markdown :use="$slots.default" />
+    <ContentRichSlot :use="$slots.default" />
   </div>
 </template>
diff --git a/test/fixtures/basic/components/content/TestMarkdown.vue b/test/fixtures/basic/components/content/TestMarkdown.vue
index 2ddeaec2e..a4ccff007 100644
--- a/test/fixtures/basic/components/content/TestMarkdown.vue
+++ b/test/fixtures/basic/components/content/TestMarkdown.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
-      <Markdown :use="$slots.title" unwrap="p">
+      <ContentRichSlot :use="$slots.title" unwrap="p">
         Default title
-      </Markdown>
+      </ContentRichSlot>
     </h1>
     <p>
-      <Markdown :use="$slots.default" unwrap="p">
+      <ContentRichSlot :use="$slots.default" unwrap="p">
         Default paragraph
-      </Markdown>
+      </ContentRichSlot>
     </p>
   </div>
 </template>

From f7d1d17976f852e51950fc19250730b9018e6c6d Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Fri, 12 Aug 2022 14:06:08 +0430
Subject: [PATCH 3/4] docs: update order

---
 docs/content/4.api/1.components/5.markdown.md                 | 4 ++--
 .../{content-rich-slot.md => 6.content-rich-slot.md}          | 0
 docs/content/4.api/1.components/{6.prose.md => 7.prose.md}    | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename docs/content/4.api/1.components/{content-rich-slot.md => 6.content-rich-slot.md} (100%)
 rename docs/content/4.api/1.components/{6.prose.md => 7.prose.md} (100%)

diff --git a/docs/content/4.api/1.components/5.markdown.md b/docs/content/4.api/1.components/5.markdown.md
index 923a40c8d..50da41fbd 100644
--- a/docs/content/4.api/1.components/5.markdown.md
+++ b/docs/content/4.api/1.components/5.markdown.md
@@ -3,8 +3,8 @@ title: '<Markdown>'
 description: 'The fastest way to inject Markdown into your Vue components.'
 ---
 
-::alert{type=warn}
-As of Content@2.1.0 this component is deprecated and replaced by [`<ContentRichSlot>`]('./content-rich-slot').
+::alert{type=danger}
+**NOTE**: As of Content@2.1.0 this component is deprecated and replaced by [`<ContentRichSlot>`](./content-rich-slot).
 ::
 
 The `<Markdown>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
diff --git a/docs/content/4.api/1.components/content-rich-slot.md b/docs/content/4.api/1.components/6.content-rich-slot.md
similarity index 100%
rename from docs/content/4.api/1.components/content-rich-slot.md
rename to docs/content/4.api/1.components/6.content-rich-slot.md
diff --git a/docs/content/4.api/1.components/6.prose.md b/docs/content/4.api/1.components/7.prose.md
similarity index 100%
rename from docs/content/4.api/1.components/6.prose.md
rename to docs/content/4.api/1.components/7.prose.md

From cc63f5aac020a4fed55729da320b46bc8f9e1687 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Tue, 16 Aug 2022 11:07:36 +0200
Subject: [PATCH 4/4] chore: rename components

---
 docs/components/content/ExampleTheTitle.vue        |  2 +-
 docs/components/content/MyButton.vue               |  2 +-
 docs/content/3.guide/1.writing/3.mdc.md            | 14 +++++++-------
 docs/content/4.api/1.components/5.markdown.md      |  2 +-
 .../{6.content-rich-slot.md => 6.content-slot.md}  |  6 +++---
 docs/content/4.api/2.composables/3.unwrap.md       |  2 +-
 .../5.examples/3.mdc/2.nested-components.md        |  2 +-
 docs/content/6.blog/1.announcing-v2.md             |  2 +-
 .../mdc/nested-components/components/AppNested.vue |  2 +-
 .../document-driven/components/content/Alert.vue   |  4 ++--
 .../document-driven/components/content/List.vue    |  2 +-
 playground/shared/components/content/Alert.vue     |  2 +-
 .../shared/components/content/MarkdownBetween.vue  |  4 ++--
 .../{ContentRichSlot.vue => ContentSlot.vue}       |  6 +++---
 src/runtime/components/Markdown.vue                |  6 +++---
 test/fixtures/basic/components/content/Alert.vue   |  2 +-
 .../basic/components/content/TestMarkdown.vue      |  8 ++++----
 17 files changed, 34 insertions(+), 34 deletions(-)
 rename docs/content/4.api/1.components/{6.content-rich-slot.md => 6.content-slot.md} (79%)
 rename src/runtime/components/{ContentRichSlot.vue => ContentSlot.vue} (95%)

diff --git a/docs/components/content/ExampleTheTitle.vue b/docs/components/content/ExampleTheTitle.vue
index b24ebc124..e2fb02318 100644
--- a/docs/components/content/ExampleTheTitle.vue
+++ b/docs/components/content/ExampleTheTitle.vue
@@ -1,5 +1,5 @@
 <template>
   <h1 class="text-4xl">
-    <ContentRichSlot :use="$slots.default" unwrap="p" />
+    <ContentSlot :use="$slots.default" unwrap="p" />
   </h1>
 </template>
diff --git a/docs/components/content/MyButton.vue b/docs/components/content/MyButton.vue
index 2e4862284..be09d2831 100644
--- a/docs/components/content/MyButton.vue
+++ b/docs/components/content/MyButton.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <button :class="type">
-    <ContentRichSlot :use="$slots.default" unwrap="p" />
+    <ContentSlot :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 d9aab0291..835cee602 100755
--- a/docs/content/3.guide/1.writing/3.mdc.md
+++ b/docs/content/3.guide/1.writing/3.mdc.md
@@ -16,7 +16,7 @@ Any component in the `components/content/` directory or [made available globally
 The component must contain either:
 
 - A `<slot />`{lang="html"} to accept raw text or another component.
-- The `<ContentRichSlot />`{lang="html"} component to accept formatted text.
+- The `<ContentSlot />`{lang="html"} component to accept formatted text.
 
 In a markdown file, use the component with the **`::`** identifier.
 
@@ -107,7 +107,7 @@ You can add more `::::` when nesting components as a visual reminder.
 
 ### Markdown rendering
 
-The `<ContentRichSlot />`{lang="html"} component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
+The `<ContentSlot />`{lang="html"} component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
 
 The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, useful when using tags such as title tags (`<h1>`{lang="html"}, `<h2>`{lang="html"}, ...) or inline tags (`<button>`{lang="html"}, `<a>`{lang="html"}, ...).
 
@@ -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">
-      <ContentRichSlot :use="$slots.default" unwrap="p" />
+      <ContentSlot :use="$slots.default" unwrap="p" />
     </h1>
   </template>
   ```
@@ -131,15 +131,15 @@ The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, u
   ::
 ::
 
-The `<ContentRichSlot />` component can act as a named slot with the `use` property:
+The `<ContentSlot />` component can act as a named slot with the `use` property:
 
 ```html
-<ContentRichSlot :use="$slots.description" unwrap="p">
+<ContentSlot :use="$slots.description" unwrap="p">
 ```
 
 ## Inline components
 
-Inline components are components without slots or `<ContentRichSlot />`.
+Inline components are components without slots or `<ContentSlot />`.
 
 They can be used with the `:` identifier.
 
@@ -189,7 +189,7 @@ defineProps(['type'])
 
 <template>
   <div :class="[type]">
-    <ContentRichSlot :use="$slots.default" unwrap="p" />
+    <ContentSlot :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 50da41fbd..2a9a6768d 100644
--- a/docs/content/4.api/1.components/5.markdown.md
+++ b/docs/content/4.api/1.components/5.markdown.md
@@ -4,7 +4,7 @@ description: 'The fastest way to inject Markdown into your Vue components.'
 ---
 
 ::alert{type=danger}
-**NOTE**: As of Content@2.1.0 this component is deprecated and replaced by [`<ContentRichSlot>`](./content-rich-slot).
+**NOTE**: As of Content@2.1.0 this component is deprecated and replaced by [`<ContentSlot>`](./content-slot).
 ::
 
 The `<Markdown>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
diff --git a/docs/content/4.api/1.components/6.content-rich-slot.md b/docs/content/4.api/1.components/6.content-slot.md
similarity index 79%
rename from docs/content/4.api/1.components/6.content-rich-slot.md
rename to docs/content/4.api/1.components/6.content-slot.md
index 9d578f0f7..aa209611f 100644
--- a/docs/content/4.api/1.components/6.content-rich-slot.md
+++ b/docs/content/4.api/1.components/6.content-slot.md
@@ -1,9 +1,9 @@
 ---
-title: '<ContentRichSlot>'
+title: '<ContentSlot>'
 description: 'The fastest way to inject Markdown into your Vue components.'
 ---
 
-The `<ContentRichSlot>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
+The `<ContentSlot>`{lang=html} component makes it easier to use Markdown syntax in your Vue components.
 
 It is useful when creating components that you want to use in your Markdown content.
 
@@ -21,7 +21,7 @@ It is useful when creating components that you want to use in your Markdown cont
 
 ```html [components/FancyHeader.vue]
 <template>
-  <h2 class="fancy-header"><ContentRichSlot :use="$slots.default" unwrap="p" /></h2>
+  <h2 class="fancy-header"><ContentSlot :use="$slots.default" unwrap="p" /></h2>
 </template>
 ```
 
diff --git a/docs/content/4.api/2.composables/3.unwrap.md b/docs/content/4.api/2.composables/3.unwrap.md
index 646c190cd..c95722fad 100644
--- a/docs/content/4.api/2.composables/3.unwrap.md
+++ b/docs/content/4.api/2.composables/3.unwrap.md
@@ -2,4 +2,4 @@
 title: 'useUnwrap()'
 ---
 
-It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from `<ContentRichSlot>`{lang=html} component.
+It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from `<ContentSlot>`{lang=html} component.
diff --git a/docs/content/5.examples/3.mdc/2.nested-components.md b/docs/content/5.examples/3.mdc/2.nested-components.md
index cd9014c34..b949544cf 100644
--- a/docs/content/5.examples/3.mdc/2.nested-components.md
+++ b/docs/content/5.examples/3.mdc/2.nested-components.md
@@ -4,7 +4,7 @@ title: 'Nested components'
 description: 'The MDC syntax allow you to nest components within a parent slot using indentation and the :: syntax.'
 ---
 
-The `components/AppNested.vue` component uses the `<ContentRichSlot>` component as markdown-rendering slot.
+The `components/AppNested.vue` component uses the `<ContentSlot>` component as markdown-rendering slot.
 
 ::ReadMore{link="/guide/writing/mdc#nesting"}
 
diff --git a/docs/content/6.blog/1.announcing-v2.md b/docs/content/6.blog/1.announcing-v2.md
index 419dd50d1..5fce59eef 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">
-      <ContentRichSlot :use="$slots.default" unwrap="p" />
+      <ContentSlot :use="$slots.default" unwrap="p" />
     </button>
   </template>
   ```
diff --git a/examples/mdc/nested-components/components/AppNested.vue b/examples/mdc/nested-components/components/AppNested.vue
index 1215793a6..ed1f1cd9a 100644
--- a/examples/mdc/nested-components/components/AppNested.vue
+++ b/examples/mdc/nested-components/components/AppNested.vue
@@ -1,6 +1,6 @@
 <template>
   <aside>
     <h2>Nested component</h2>
-    <ContentRichSlot unwrap="p" />
+    <ContentSlot unwrap="p" />
   </aside>
 </template>
diff --git a/playground/document-driven/components/content/Alert.vue b/playground/document-driven/components/content/Alert.vue
index a872d047c..68ed37208 100644
--- a/playground/document-driven/components/content/Alert.vue
+++ b/playground/document-driven/components/content/Alert.vue
@@ -6,10 +6,10 @@
       </div>
       <div>
         <h3 style="margin: 0">
-          <ContentRichSlot :use="$slots.title" unwrap="p" />
+          <ContentSlot :use="$slots.title" unwrap="p" />
         </h3>
         <div>
-          <ContentRichSlot :use="$slots.default" unwrap="p" />
+          <ContentSlot :use="$slots.default" unwrap="p" />
         </div>
       </div>
     </div>
diff --git a/playground/document-driven/components/content/List.vue b/playground/document-driven/components/content/List.vue
index 377800203..0115bdfd5 100644
--- a/playground/document-driven/components/content/List.vue
+++ b/playground/document-driven/components/content/List.vue
@@ -8,7 +8,7 @@ const { flatUnwrap } = useUnwrap()
   <ul>
     <li v-for="(item, index) of flatUnwrap($slots.default(), ['ul'])" :key="index">
       ☑︎
-      <span><ContentRichSlot :use="() => item" unwrap="li" /></span>
+      <span><ContentSlot :use="() => item" unwrap="li" /></span>
     </li>
   </ul>
 </template>
diff --git a/playground/shared/components/content/Alert.vue b/playground/shared/components/content/Alert.vue
index de85de518..2d2b1332d 100644
--- a/playground/shared/components/content/Alert.vue
+++ b/playground/shared/components/content/Alert.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="alert">
-    <ContentRichSlot :use="$slots.default" unwrap="p" />
+    <ContentSlot :use="$slots.default" unwrap="p" />
   </div>
 </template>
 
diff --git a/playground/shared/components/content/MarkdownBetween.vue b/playground/shared/components/content/MarkdownBetween.vue
index 884059f18..b0ddca65e 100644
--- a/playground/shared/components/content/MarkdownBetween.vue
+++ b/playground/shared/components/content/MarkdownBetween.vue
@@ -1,7 +1,7 @@
 <template>
-  <ContentRichSlot :use="$slots.default" unwrap="ul li">
+  <ContentSlot :use="$slots.default" unwrap="ul li">
     <template #between>
       <br>
     </template>
-  </ContentRichSlot>
+  </ContentSlot>
 </template>
diff --git a/src/runtime/components/ContentRichSlot.vue b/src/runtime/components/ContentSlot.vue
similarity index 95%
rename from src/runtime/components/ContentRichSlot.vue
rename to src/runtime/components/ContentSlot.vue
index dcac982eb..d558bd6de 100644
--- a/src/runtime/components/ContentRichSlot.vue
+++ b/src/runtime/components/ContentSlot.vue
@@ -3,10 +3,10 @@ import type { Slot } from 'vue'
 import { defineComponent, getCurrentInstance, useSlots, computed, useUnwrap, h } from '#imports'
 
 /**
- * ContentRichSlot component
+ * ContentSlot component
  */
 export default defineComponent({
-  name: 'ContentRichSlot',
+  name: 'ContentSlot',
   functional: true,
   props: {
     /**
@@ -47,7 +47,7 @@ export default defineComponent({
       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 <ContentRichSlot> component to enable reactivity`)
+        console.warn(`Please set :use="$slots.${use}" in <ContentSlot> component to enable reactivity`)
       }
 
       if (!slot) { return fallbackSlot ? fallbackSlot() : h('div') }
diff --git a/src/runtime/components/Markdown.vue b/src/runtime/components/Markdown.vue
index 63f1e2570..58b3f572d 100644
--- a/src/runtime/components/Markdown.vue
+++ b/src/runtime/components/Markdown.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import ContentRichSlot from './ContentRichSlot'
+import ContentSlot from './ContentSlot'
 import { defineComponent, getCurrentInstance, useSlots, computed } from '#imports'
 
 /**
@@ -8,11 +8,11 @@ import { defineComponent, getCurrentInstance, useSlots, computed } from '#import
 export default defineComponent({
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Markdown',
-  extends: ContentRichSlot,
+  extends: ContentSlot,
   setup (props) {
     if (process.dev) {
       // eslint-disable-next-line no-console
-      console.warn('[deprecation] <Markdown> component is deprecated. Please use <ContentRichSlot> instead.')
+      console.warn('[deprecation] <Markdown> component is deprecated. Please use <ContentSlot> instead.')
     }
     const { parent } = getCurrentInstance()
     const { between, default: fallbackSlot } = useSlots()
diff --git a/test/fixtures/basic/components/content/Alert.vue b/test/fixtures/basic/components/content/Alert.vue
index f084ae550..b282a4c1a 100644
--- a/test/fixtures/basic/components/content/Alert.vue
+++ b/test/fixtures/basic/components/content/Alert.vue
@@ -1,5 +1,5 @@
 <template>
   <div>
-    <ContentRichSlot :use="$slots.default" />
+    <ContentSlot :use="$slots.default" />
   </div>
 </template>
diff --git a/test/fixtures/basic/components/content/TestMarkdown.vue b/test/fixtures/basic/components/content/TestMarkdown.vue
index a4ccff007..594be336a 100644
--- a/test/fixtures/basic/components/content/TestMarkdown.vue
+++ b/test/fixtures/basic/components/content/TestMarkdown.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
-      <ContentRichSlot :use="$slots.title" unwrap="p">
+      <ContentSlot :use="$slots.title" unwrap="p">
         Default title
-      </ContentRichSlot>
+      </ContentSlot>
     </h1>
     <p>
-      <ContentRichSlot :use="$slots.default" unwrap="p">
+      <ContentSlot :use="$slots.default" unwrap="p">
         Default paragraph
-      </ContentRichSlot>
+      </ContentSlot>
     </p>
   </div>
 </template>