Modrinth/docs/components/markdown-editor.md
Prospector c296597427
Markdown editor (#92)
* Markdown editor

* use nocookie YT iframes

Co-authored-by: Emma Alexia Triphora <emma@modrinth.com>

* Fix line prefix-related Markdown editor bugs and add auto-lists

* Fix a couple codeblock issues

* address SearchFilter composition

* standardize code and patternize editor

* make editor typesafe

* adjust imports

* simplify key press handler

* Codemirror markdown implementation (#106)

* demo

* custom newline logic

* basic editor styling and buttons

* propogate styles

* validate and command structure for modals

* mobile safari event fix

* remove url field causing remount

* browser & mobile fix for link insertion

* override event passthrough to fix mobile

* fix modal state & disallow invalid url submission

* override paste behavior

* remove block flag in favor of newline insert

* cleanup before pr

* emit value from editor

* remove "a"

---------

Co-authored-by: Emma Alexia Triphora <emma@modrinth.com>
Co-authored-by: Carter <safe@fea.st>
2023-10-20 16:55:38 -07:00

37 lines
856 B
Markdown

# 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" />
```