Markdown editor

docs/.vitepress/config.js

@@ -42,6 +42,7 @@ export default {
           { text: 'Toggle', link: '/components/toggle' },
           { text: 'Promotion', link: '/components/promotion' },
           { text: 'Markdown', link: '/components/markdown' },
+          { text: 'Markdown Editor', link: '/components/markdown-editor' },
           { text: 'Copy Code', link: '/components/copy-code' },
           { text: 'Notifications', link: '/components/notifications' },
           { text: 'Share Modal', link: '/components/share-modal' },

docs/components/markdown-editor.md

@@ -0,0 +1,37 @@
+# Markdown Editor
+<script setup>
+import { ref } from "vue";
+const description = ref(null)
+const description2 = ref(null)
+</script>
+
+The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as `CTRL+B` for bold, `CTRL+I` for italic, and more. 
+
+## Full editor
+<DemoContainer>
+  <MarkdownEditor v-model="description" />
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const description = ref(null)
+</script>
+
+<MarkdownEditor v-model="description" />
+```
+
+## Without heading buttons
+<DemoContainer>
+  <MarkdownEditor v-model="description2" :heading-buttons="false" />
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const description = ref(null)
+</script>
+
+<MarkdownEditor v-model="description" :heading-buttons="false" />
+```
+a

lib/assets/styles/classes.scss

@@ -895,6 +895,7 @@ a,
   video {
     aspect-ratio: 16 / 9;
     width: 850px;
+    max-width: 100%;
     height: auto;
   }