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>

lib/components/search/SearchFilter.vue

@@ -1,24 +1,25 @@
 <template>
   <Checkbox
     class="filter"
-    :model-value="activeFilters.includes(facetName)"
+    :model-value="isActive"
     :description="displayName"
-    @update:model-value="toggle()"
+    @update:model-value="toggle"
   >
     <div class="filter-text">
-      <div v-if="icon" aria-hidden="true" class="icon" v-html="icon" />
+      <div v-if="props.icon" aria-hidden="true" class="icon" v-html="props.icon" />
       <div v-else class="icon">
         <slot />
       </div>
-      <span aria-hidden="true"> {{ displayName }}</span>
+      <span aria-hidden="true"> {{ props.displayName }}</span>
     </div>
   </Checkbox>
 </template>
 
 <script setup>
+import { ref, defineProps, defineEmits, watchEffect } from 'vue'
 import { Checkbox } from '@'
 
-defineProps({
+const props = defineProps({
   facetName: {
     type: String,
     default: '',
@@ -39,10 +40,15 @@ defineProps({
   },
 })
 
+const isActive = ref(props.activeFilters.value.includes(props.facetName))
 const emit = defineEmits(['toggle'])
 
-function toggle() {
-  emit('toggle', this.facetName)
+watchEffect(() => {
+  isActive.value = props.activeFilters.value.includes(props.facetName)
+})
+
+const toggle = () => {
+  emit('toggle', props.facetName)
 }
 </script>