From c835143adf269bca0fef80cbd1a77d3d732d7783 Mon Sep 17 00:00:00 2001
From: productdevbook <hi@productdevbook.com>
Date: Wed, 21 Sep 2022 11:31:55 +0300
Subject: [PATCH] fix: eslint

---
 apps/docs/docs/.vitepress/theme/index.ts      |   2 +-
 docs/components/content/Ellipsis.vue          |   7 +-
 .../components/content/ExampleMultiselect.vue |  10 +-
 docs/components/content/HeroAnnouncement.vue  |   5 +-
 docs/components/content/IconHeart.vue         |   7 +-
 docs/components/content/IconZap.vue           |   5 +-
 docs/components/content/Logo.vue              |  24 ++-
 docs/components/content/MyButton.vue          |  30 +--
 docs/components/content/PackageGrid.vue       |   3 +-
 docs/components/content/PropInspector.vue     |   9 +-
 docs/components/content/ReadMore.vue          |  34 ++--
 docs/editor/Editor.vue                        |  19 +-
 docs/editor/Monaco.vue                        |  62 ++++---
 docs/editor/mdc.tmLanguage.ts                 | 173 ++++++++++++++----
 docs/editor/useMonacoEditor.ts                |  47 +++--
 docs/editor/useShiki.ts                       |  51 ++++--
 packages/core/src/plugins/composer.ts         |   2 +-
 17 files changed, 345 insertions(+), 145 deletions(-)

diff --git a/apps/docs/docs/.vitepress/theme/index.ts b/apps/docs/docs/.vitepress/theme/index.ts
index 9c89908a..f56ab188 100644
--- a/apps/docs/docs/.vitepress/theme/index.ts
+++ b/apps/docs/docs/.vitepress/theme/index.ts
@@ -5,7 +5,7 @@ import { h } from 'vue'
 
 import Demo from '../../../components/Demo.vue'
 import GithubUrl from '../../../components/GithubUrl.vue'
-import Language from '../../../components/Language.vue'
+// import Language from '../../../components/Language.vue'
 import Tab from '../../../components/Tabs/Tab.vue'
 import Tabs from '../../../components/Tabs/Tabs.vue'
 import { extractFileNameFromPath } from '../../../utils'
diff --git a/docs/components/content/Ellipsis.vue b/docs/components/content/Ellipsis.vue
index 203e467b..193c72da 100644
--- a/docs/components/content/Ellipsis.vue
+++ b/docs/components/content/Ellipsis.vue
@@ -7,7 +7,12 @@
 <style lang="postcss" scoped>
 .ellipsis {
   @apply h-[160px] md:w-[600px];
-  background: linear-gradient(97.62deg, rgba(0, 71, 225, 0.22) 2.27%, rgba(26, 214, 255, 0.22) 50.88%, rgba(0, 220, 130, 0.22) 98.48%);
+  background: linear-gradient(
+    97.62deg,
+    rgba(0, 71, 225, 0.22) 2.27%,
+    rgba(26, 214, 255, 0.22) 50.88%,
+    rgba(0, 220, 130, 0.22) 98.48%
+  );
   filter: blur(169px);
   transform: matrix(-0.95, -0.3, -0.3, 0.95, 200, 250);
 }
diff --git a/docs/components/content/ExampleMultiselect.vue b/docs/components/content/ExampleMultiselect.vue
index 755f37d4..09811c8a 100644
--- a/docs/components/content/ExampleMultiselect.vue
+++ b/docs/components/content/ExampleMultiselect.vue
@@ -1,7 +1,3 @@
-<template>
-  <div>Not working on content v2 docs!</div>
-</template>
-
 <script>
 export default {
   props: {
@@ -10,10 +6,14 @@ export default {
       default: () => []
     }
   },
-  data () {
+  data() {
     return {
       value: null
     }
   }
 }
 </script>
+
+<template>
+  <div>Not working on content v2 docs!</div>
+</template>
diff --git a/docs/components/content/HeroAnnouncement.vue b/docs/components/content/HeroAnnouncement.vue
index 8a48dad4..f9d8f556 100644
--- a/docs/components/content/HeroAnnouncement.vue
+++ b/docs/components/content/HeroAnnouncement.vue
@@ -12,7 +12,10 @@ defineProps({
 </script>
 
 <template>
-  <NuxtLink :to="to" class="hover:bg-primary-200 text-primary-900 bg-primary-100 transition dark:bg-transparent hover:dark:bg-primary-900 dark:border-primary-700 dark:text-primary-100 border border-primary-400 mb-8 px-4 py-2 rounded-md flex gap-x-1 inline-flex items-center justify-center">
+  <NuxtLink
+    :to="to"
+    class="hover:bg-primary-200 text-primary-900 bg-primary-100 transition dark:bg-transparent hover:dark:bg-primary-900 dark:border-primary-700 dark:text-primary-100 border border-primary-400 mb-8 px-4 py-2 rounded-md flex gap-x-1 inline-flex items-center justify-center"
+  >
     <Icon name="heroicons-solid:sparkles" class="h-4 w-4" />
     <span class="font-medium text-sm">{{ label }}</span>
   </NuxtLink>
diff --git a/docs/components/content/IconHeart.vue b/docs/components/content/IconHeart.vue
index 849f002e..2789660e 100644
--- a/docs/components/content/IconHeart.vue
+++ b/docs/components/content/IconHeart.vue
@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+  >
     <path
       class="icon"
       fill="currentColor"
diff --git a/docs/components/content/IconZap.vue b/docs/components/content/IconZap.vue
index 6b7ac0a4..99da4f3c 100644
--- a/docs/components/content/IconZap.vue
+++ b/docs/components/content/IconZap.vue
@@ -7,6 +7,9 @@
     width="64"
     height="64"
   >
-    <polygon fill="currentColor" points="16.828,5.828 29.966,5.828 25.172,19.414 33.966,19.414 18.621,43.138 21.034,26.379 12.828,26.379" />
+    <polygon
+      fill="currentColor"
+      points="16.828,5.828 29.966,5.828 25.172,19.414 33.966,19.414 18.621,43.138 21.034,26.379 12.828,26.379"
+    />
   </svg>
 </template>
diff --git a/docs/components/content/Logo.vue b/docs/components/content/Logo.vue
index 81bb82f8..ae01a590 100644
--- a/docs/components/content/Logo.vue
+++ b/docs/components/content/Logo.vue
@@ -1,7 +1,23 @@
 <template>
-  <svg class="text-gray-900 dark:text-white h-5 sm:h-6" viewBox="0 0 126 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6009 1.34267c-.9666-1.65485-3.3832-1.65485-4.3499 0L.71619 19.3781c-.96664 1.6549.24165 3.7234 2.17494 3.7234h8.22407c-.8261-.7188-1.13199-1.9623-.5068-3.0293L18.587 6.45475l-2.9861-5.11208Z" fill="#80EEC0" />
-    <path d="M22.276 5.29879c.8-1.35398 2.7999-1.35398 3.5999 0L34.5944 20.055c.8 1.354-.2 3.0465-1.7999 3.0465h-17.437c-1.5999 0-2.6-1.6925-1.8-3.0465L22.276 5.29879Z" fill="#00DC82" />
-    <path d="M49.5744 23.0432c3.8655 0 6.7421-2.2261 7.0567-5.4866h-2.9665c-.2697 1.7089-1.9327 2.9007-4.0902 2.9007-2.7418 0-4.8094-1.8888-4.8094-5.4641 0-3.5753 2.0676-5.48663 4.8094-5.48663 2.1125 0 3.7756 1.19173 4.0003 2.92323h3.1014c-.427-3.26053-3.3036-5.48664-7.1017-5.48664-4.1127 0-7.7984 2.6983-7.7984 8.05004 0 5.3517 3.6183 8.05 7.7984 8.05Zm14.2834 0c3.4385 0 5.9104-2.4735 5.9104-5.8464s-2.4719-5.8464-5.9104-5.8464c-3.461 0-5.9329 2.4735-5.9329 5.8464s2.4719 5.8464 5.9329 5.8464Zm0-2.3836c-1.8878 0-3.1464-1.4166-3.1464-3.4628 0-2.0463 1.2586-3.4628 3.1464-3.4628 1.8653 0 3.124 1.4165 3.124 3.4628 0 2.0462-1.2587 3.4628-3.124 3.4628Zm10.5403 2.2037v-6.1837c0-1.664 1.0787-2.8782 2.6295-2.8782 1.4156 0 2.3598 1.0794 2.3598 2.6309v6.431h2.764v-7.0157c0-2.6533-1.6629-4.4972-4.2251-4.4972-1.618 0-2.8991.6971-3.5282 1.9338v-1.7539h-2.764v11.333h2.764Zm11.2487-11.333h-2.2252v2.3161h2.2252v5.0594c0 2.5184 1.6181 3.9575 4.09 3.9575h1.8205v-2.3386h-1.506c-1.0332 0-1.6404-.5846-1.6404-1.7314v-4.9469h3.1464v-2.3161h-3.1464V8.11242h-2.7641v3.41788Zm15.2492 7.5553c-.292 1.0793-1.2134 1.664-2.629 1.664-1.7532 0-2.9216-1.1693-3.124-2.9906h8.36c.023-.2249.045-.5622.045-.9445 0-2.6983-1.707-5.4641-5.5059-5.4641-3.7082 0-5.551 2.8108-5.551 5.8014 0 2.9682 2.0677 5.8914 5.7759 5.8914 2.787 0 4.899-1.5516 5.326-3.9576h-2.697Zm-2.8539-5.6664c1.6405 0 2.6299 1.0793 2.7419 2.5184h-5.5732c.2921-1.709 1.2805-2.5184 2.8313-2.5184Zm10.1759 9.4441v-6.1837c0-1.664 1.079-2.8782 2.63-2.8782 1.416 0 2.36 1.0794 2.36 2.6309v6.431h2.764v-7.0157c0-2.6533-1.663-4.4972-4.225-4.4972-1.618 0-2.899.6971-3.529 1.9338v-1.7539h-2.764v11.333h2.764Zm11.249-11.333h-2.225v2.3161h2.225v5.0594c0 2.5184 1.618 3.9575 4.09 3.9575h1.821v-2.3386h-1.506c-1.034 0-1.641-.5846-1.641-1.7314v-4.9469h3.147v-2.3161h-3.147V8.11242h-2.764v3.41788Z" fill="currentColor" />
+  <svg
+    class="text-gray-900 dark:text-white h-5 sm:h-6"
+    viewBox="0 0 126 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.6009 1.34267c-.9666-1.65485-3.3832-1.65485-4.3499 0L.71619 19.3781c-.96664 1.6549.24165 3.7234 2.17494 3.7234h8.22407c-.8261-.7188-1.13199-1.9623-.5068-3.0293L18.587 6.45475l-2.9861-5.11208Z"
+      fill="#80EEC0"
+    />
+    <path
+      d="M22.276 5.29879c.8-1.35398 2.7999-1.35398 3.5999 0L34.5944 20.055c.8 1.354-.2 3.0465-1.7999 3.0465h-17.437c-1.5999 0-2.6-1.6925-1.8-3.0465L22.276 5.29879Z"
+      fill="#00DC82"
+    />
+    <path
+      d="M49.5744 23.0432c3.8655 0 6.7421-2.2261 7.0567-5.4866h-2.9665c-.2697 1.7089-1.9327 2.9007-4.0902 2.9007-2.7418 0-4.8094-1.8888-4.8094-5.4641 0-3.5753 2.0676-5.48663 4.8094-5.48663 2.1125 0 3.7756 1.19173 4.0003 2.92323h3.1014c-.427-3.26053-3.3036-5.48664-7.1017-5.48664-4.1127 0-7.7984 2.6983-7.7984 8.05004 0 5.3517 3.6183 8.05 7.7984 8.05Zm14.2834 0c3.4385 0 5.9104-2.4735 5.9104-5.8464s-2.4719-5.8464-5.9104-5.8464c-3.461 0-5.9329 2.4735-5.9329 5.8464s2.4719 5.8464 5.9329 5.8464Zm0-2.3836c-1.8878 0-3.1464-1.4166-3.1464-3.4628 0-2.0463 1.2586-3.4628 3.1464-3.4628 1.8653 0 3.124 1.4165 3.124 3.4628 0 2.0462-1.2587 3.4628-3.124 3.4628Zm10.5403 2.2037v-6.1837c0-1.664 1.0787-2.8782 2.6295-2.8782 1.4156 0 2.3598 1.0794 2.3598 2.6309v6.431h2.764v-7.0157c0-2.6533-1.6629-4.4972-4.2251-4.4972-1.618 0-2.8991.6971-3.5282 1.9338v-1.7539h-2.764v11.333h2.764Zm11.2487-11.333h-2.2252v2.3161h2.2252v5.0594c0 2.5184 1.6181 3.9575 4.09 3.9575h1.8205v-2.3386h-1.506c-1.0332 0-1.6404-.5846-1.6404-1.7314v-4.9469h3.1464v-2.3161h-3.1464V8.11242h-2.7641v3.41788Zm15.2492 7.5553c-.292 1.0793-1.2134 1.664-2.629 1.664-1.7532 0-2.9216-1.1693-3.124-2.9906h8.36c.023-.2249.045-.5622.045-.9445 0-2.6983-1.707-5.4641-5.5059-5.4641-3.7082 0-5.551 2.8108-5.551 5.8014 0 2.9682 2.0677 5.8914 5.7759 5.8914 2.787 0 4.899-1.5516 5.326-3.9576h-2.697Zm-2.8539-5.6664c1.6405 0 2.6299 1.0793 2.7419 2.5184h-5.5732c.2921-1.709 1.2805-2.5184 2.8313-2.5184Zm10.1759 9.4441v-6.1837c0-1.664 1.079-2.8782 2.63-2.8782 1.416 0 2.36 1.0794 2.36 2.6309v6.431h2.764v-7.0157c0-2.6533-1.663-4.4972-4.225-4.4972-1.618 0-2.899.6971-3.529 1.9338v-1.7539h-2.764v11.333h2.764Zm11.249-11.333h-2.225v2.3161h2.225v5.0594c0 2.5184 1.618 3.9575 4.09 3.9575h1.821v-2.3386h-1.506c-1.034 0-1.641-.5846-1.641-1.7314v-4.9469h3.147v-2.3161h-3.147V8.11242h-2.764v3.41788Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/docs/components/content/MyButton.vue b/docs/components/content/MyButton.vue
index be09d283..dd855f1a 100644
--- a/docs/components/content/MyButton.vue
+++ b/docs/components/content/MyButton.vue
@@ -14,19 +14,19 @@ defineProps({
 </template>
 
 <style scoped>
-  button {
-    padding: .5rem;
-    border-radius: 4px;
-    color: #000;
-  }
-  .info {
-    background-color: blue
-  }
-  .warning {
-    background-color: orange
-  }
-  .success {
-    background-color: rgb(209, 250, 229);
-    border: 1px solid rgb(52, 211, 153)
-  }
+button {
+  padding: 0.5rem;
+  border-radius: 4px;
+  color: #000;
+}
+.info {
+  background-color: blue;
+}
+.warning {
+  background-color: orange;
+}
+.success {
+  background-color: rgb(209, 250, 229);
+  border: 1px solid rgb(52, 211, 153);
+}
 </style>
diff --git a/docs/components/content/PackageGrid.vue b/docs/components/content/PackageGrid.vue
index f16926e4..02e3a124 100644
--- a/docs/components/content/PackageGrid.vue
+++ b/docs/components/content/PackageGrid.vue
@@ -1,5 +1,4 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div>
diff --git a/docs/components/content/PropInspector.vue b/docs/components/content/PropInspector.vue
index 16092ce6..49bfe2a6 100644
--- a/docs/components/content/PropInspector.vue
+++ b/docs/components/content/PropInspector.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { computed } from 'vue'
-// eslint-disable-next-line vue/require-prop-types
+
 const props = defineProps(['prop'])
-const propType = computed(() => Array.isArray(props.prop) ? 'array' : typeof props.prop)
+const propType = computed(() =>
+  Array.isArray(props.prop) ? 'array' : typeof props.prop
+)
 </script>
 
 <template>
@@ -10,7 +12,8 @@ const propType = computed(() => Array.isArray(props.prop) ? 'array' : typeof pro
 Type: {{ propType }}
 Value:
 {{ prop }}
-    </pre>
+    </pre
+  >
 </template>
 
 <style scoped>
diff --git a/docs/components/content/ReadMore.vue b/docs/components/content/ReadMore.vue
index f17f9085..9c89e982 100644
--- a/docs/components/content/ReadMore.vue
+++ b/docs/components/content/ReadMore.vue
@@ -1,13 +1,3 @@
-<template>
-  <Alert>
-    <Icon class="inline-block w-5 h-5" name="heroicons-outline:information-circle" />
-    Read more in
-    <NuxtLink :to="link">
-      {{ computedTitle }}
-    </NuxtLink>.
-  </Alert>
-</template>
-
 <script setup lang="ts">
 import { splitByCase, upperFirst } from 'scule'
 
@@ -23,7 +13,29 @@ const props = defineProps({
   }
 })
 
-const createTitle = (title, link) => (title || link.split('/').filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > ').replace('Api', 'API'))
+const createTitle = (title, link) =>
+  title ||
+  link
+    .split('/')
+    .filter(Boolean)
+    .map((part) =>
+      splitByCase(part)
+        .map((p) => upperFirst(p))
+        .join(' ')
+    )
+    .join(' > ')
+    .replace('Api', 'API')
 
 const computedTitle = computed(() => createTitle(props.title, props.link))
 </script>
+
+<template>
+  <Alert>
+    <Icon
+      class="inline-block w-5 h-5"
+      name="heroicons-outline:information-circle"
+    />
+    Read more in
+    <NuxtLink :to="link"> {{ computedTitle }} </NuxtLink>.
+  </Alert>
+</template>
diff --git a/docs/editor/Editor.vue b/docs/editor/Editor.vue
index 3384d0c2..326ed6f7 100644
--- a/docs/editor/Editor.vue
+++ b/docs/editor/Editor.vue
@@ -1,7 +1,3 @@
-<template>
-  <Monaco :value="readOnly? modelValue : raw" :language="language" :read-only="readOnly" @change="update" />
-</template>
-
 <script setup lang="ts">
 import Monaco from './Monaco.vue'
 
@@ -20,11 +16,20 @@ const props = defineProps({
   }
 })
 
-const raw = ref(props.modelValue)
-
 const emit = defineEmits(['update:modelValue'])
 
-function update (content) {
+const raw = ref(props.modelValue)
+
+function update(content) {
   emit('update:modelValue', content)
 }
 </script>
+
+<template>
+  <Monaco
+    :value="readOnly ? modelValue : raw"
+    :language="language"
+    :read-only="readOnly"
+    @change="update"
+  />
+</template>
diff --git a/docs/editor/Monaco.vue b/docs/editor/Monaco.vue
index 28a27e79..11c856d3 100644
--- a/docs/editor/Monaco.vue
+++ b/docs/editor/Monaco.vue
@@ -1,49 +1,57 @@
 <script setup lang="ts">
+const props = defineProps<{
+  language: string
+  value: string
+  readOnly: boolean
+}>()
 const emit = defineEmits<(e: 'change', content: string) => void>()
 const editorState = ref('loading')
-const props = defineProps<{ language: string; value: string, readOnly: boolean }>()
 const target = ref()
 
-onMounted(
-  async () => {
-    try {
-      const { useMonaco } = await import('./useMonacoEditor')
+onMounted(async () => {
+  try {
+    const { useMonaco } = await import('./useMonacoEditor')
 
-      const { setContent } = useMonaco(target, {
-        language: props.language,
-        code: props.value,
-        readOnly: props.readOnly,
-        onChanged (content: string) {
-          emit('change', content)
-        },
-        onDidCreateEditor () {
-          editorState.value = 'ready'
-        }
-      })
+    const { setContent } = useMonaco(target, {
+      language: props.language,
+      code: props.value,
+      readOnly: props.readOnly,
+      onChanged(content: string) {
+        emit('change', content)
+      },
+      onDidCreateEditor() {
+        editorState.value = 'ready'
+      }
+    })
 
-      watch(
-        () => props.value,
-        () => setContent(props.value)
-      )
+    watch(
+      () => props.value,
+      () => setContent(props.value)
+    )
 
-      emit('change', props.value)
-    } catch (_) {
-      editorState.value = 'error'
-    }
+    emit('change', props.value)
+  } catch (_) {
+    editorState.value = 'error'
   }
-)
+})
 </script>
 
 <template>
   <div class="relative h-full w-full">
-    <div v-if="editorState === 'loading'" class="absolute left-0 top-0 h-full w-full flex justify-center items-center">
+    <div
+      v-if="editorState === 'loading'"
+      class="absolute left-0 top-0 h-full w-full flex justify-center items-center"
+    >
       <Alert type="primary">
         <span>Editor is loading...</span>
         <Icon name="file-icons:sandbox" class="ml-2 inline" />
       </Alert>
     </div>
 
-    <div v-else-if="editorState === 'error'" class="absolute left-0 top-0 h-full w-full flex justify-center items-center">
+    <div
+      v-else-if="editorState === 'error'"
+      class="absolute left-0 top-0 h-full w-full flex justify-center items-center"
+    >
       <Alert type="warning">
         <span>Error while loading editor!</span>
         <Icon name="heroicons-outline:cog" class="inline ml-2" />
diff --git a/docs/editor/mdc.tmLanguage.ts b/docs/editor/mdc.tmLanguage.ts
index 59b2dc4b..e235375c 100644
--- a/docs/editor/mdc.tmLanguage.ts
+++ b/docs/editor/mdc.tmLanguage.ts
@@ -1,4 +1,3 @@
-/* eslint-disable */
 /**
  * MDC language
  * Based on official markdown language
@@ -27,7 +26,9 @@ export const conf: languages.LanguageConfiguration = {
   ],
   folding: {
     markers: {
+      // eslint-disable-next-line prefer-regex-literals
       start: new RegExp('^\\s*<!--\\s*#?region\\b.*-->'),
+      // eslint-disable-next-line prefer-regex-literals
       end: new RegExp('^\\s*<!--\\s*#?endregion\\b.*-->')
     }
   }
@@ -47,8 +48,19 @@ export const language = <languages.IMonarchLanguage>{
 
   // non matched elements
   empty: [
-    'area', 'base', 'basefont', 'br', 'col', 'frame',
-    'hr', 'img', 'input', 'isindex', 'link', 'meta', 'param'
+    'area',
+    'base',
+    'basefont',
+    'br',
+    'col',
+    'frame',
+    'hr',
+    'img',
+    'input',
+    'isindex',
+    'link',
+    'meta',
+    'param'
   ],
 
   tokenizer: {
@@ -58,14 +70,24 @@ export const language = <languages.IMonarchLanguage>{
     ],
 
     frontmatter: [
-      [/^\s*---\s*$/, { token: '', next: '@markdown', nextEmbedded: '@pop', bracket: '@close' }],
+      [
+        /^\s*---\s*$/,
+        {
+          token: '',
+          next: '@markdown',
+          nextEmbedded: '@pop',
+          bracket: '@close'
+        }
+      ],
       [/.*$/, 'variable.source']
     ],
 
     markdown: [
-
       // headers (with #)
-      [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ['white', 'keyword', 'keyword', 'keyword']],
+      [
+        /^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/,
+        ['white', 'keyword', 'keyword', 'keyword']
+      ],
 
       // headers (with =)
       [/^\s*(=+|\-+)\s*$/, 'keyword'],
@@ -83,10 +105,16 @@ export const language = <languages.IMonarchLanguage>{
       [/^(\t|[ ]{4})[^ ].*$/, 'string'],
 
       // code block (3 tilde)
-      [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }],
+      [
+        /^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/,
+        { token: 'string', next: '@codeblock' }
+      ],
 
       // github style code blocks (with backticks and language)
-      [/^\s*```\s*((?:\w|[\/\-#])+)\s*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }],
+      [
+        /^\s*```\s*((?:\w|[\/\-#])+)\s*$/,
+        { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }
+      ],
 
       // github style code blocks (with backticks but no language)
       [/^\s*```\s*$/, { token: 'string', next: '@codeblock' }],
@@ -96,12 +124,14 @@ export const language = <languages.IMonarchLanguage>{
 
       // markup within lines
       { include: '@linecontent' }
-
     ],
 
     componentWithData: [
       [/{/, 'tag', '@attributes'],
-      [/^\s*---\s*$/, { token: '', next: '@componentData', nextEmbedded: 'yaml' }],
+      [
+        /^\s*---\s*$/,
+        { token: '', next: '@componentData', nextEmbedded: 'yaml' }
+      ],
       [/^\s*::+\s*$/, 'tag', '@pop'],
       { include: '@component' }
     ],
@@ -113,14 +143,20 @@ export const language = <languages.IMonarchLanguage>{
     ],
 
     componentData: [
-      [/^\s*---\s*$/, { token: '', next: '@pop', nextEmbedded: '@pop', bracket: '@close' }],
+      [
+        /^\s*---\s*$/,
+        { token: '', next: '@pop', nextEmbedded: '@pop', bracket: '@close' }
+      ],
       [/.*$/, 'variable.source']
     ],
 
     attributes: [
       // class|id
       [/[^}=][^\s=}]*[\s.#]*/, 'attribute.name.html'],
-      [/[^}=][^\s=}]*(})/, ['attribute.name.html', { token: 'tag', next: '@pop' }]],
+      [
+        /[^}=][^\s=}]*(})/,
+        ['attribute.name.html', { token: 'tag', next: '@pop' }]
+      ],
       [/(=)("[^"]*"|[^"\s=]*)/, ['', 'string.html']],
       [/}/, 'tag', '@pop']
     ],
@@ -133,7 +169,10 @@ export const language = <languages.IMonarchLanguage>{
 
     // github style code blocks
     codeblockgh: [
-      [/```\s*$/, { token: 'variable.source', next: '@pop', nextEmbedded: '@pop' }],
+      [
+        /```\s*$/,
+        { token: 'variable.source', next: '@pop', nextEmbedded: '@pop' }
+      ],
       [/[^`]+/, 'variable.source']
     ],
 
@@ -153,7 +192,10 @@ export const language = <languages.IMonarchLanguage>{
       // links
       [/^{+[^}]*\}+/, 'string.link'],
       [/[^\*\_\)\]]\{+[^}]*\}+/, 'string.link'],
-      [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ['string.link', '', 'string.link']],
+      [
+        /(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/,
+        ['string.link', '', 'string.link']
+      ],
       // [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, 'string.link'],
 
       [/\{/, { token: 'tag', next: '@attributes' }],
@@ -164,7 +206,15 @@ export const language = <languages.IMonarchLanguage>{
       [/(:)([\w-]+)/, ['tag', 'tag']],
 
       // [span]
-      [/(\[)([^\]]*)(\])({)/, ['string.link', '', 'string.link', { token: 'tag', next: '@attributes' }]],
+      [
+        /(\[)([^\]]*)(\])({)/,
+        [
+          'string.link',
+          '',
+          'string.link',
+          { token: 'tag', next: '@attributes' }
+        ]
+      ],
       [/(\[)([^\]]*)(\])/, ['string.link', '', 'string.link']],
 
       // or html
@@ -179,12 +229,15 @@ export const language = <languages.IMonarchLanguage>{
     html: [
       // html tags
       [/<(\w+)\/>/, 'tag'],
-      [/<(\w+)/, {
-        cases: {
-          '@empty': { token: 'tag', next: '@tag.$1' },
-          '@default': { token: 'tag', next: '@tag.$1' }
+      [
+        /<(\w+)/,
+        {
+          cases: {
+            '@empty': { token: 'tag', next: '@tag.$1' },
+            '@default': { token: 'tag', next: '@tag.$1' }
+          }
         }
-      }],
+      ],
       [/<\/(\w+)\s*>/, { token: 'tag' }],
 
       [/<!--/, 'comment', '@comment']
@@ -200,38 +253,78 @@ export const language = <languages.IMonarchLanguage>{
     // Almost full HTML tag matching, complete with embedded scripts & styles
     tag: [
       [/[ \t\r\n]+/, 'white'],
-      [/(type)(\s*=\s*)(")([^"]+)(")/, ['attribute.name.html', 'delimiter.html', 'string.html',
-        { token: 'string.html', switchTo: '@tag.$S2.$4' },
-        'string.html']],
-      [/(type)(\s*=\s*)(')([^']+)(')/, ['attribute.name.html', 'delimiter.html', 'string.html',
-        { token: 'string.html', switchTo: '@tag.$S2.$4' },
-        'string.html']],
-      [/(\w+)(\s*=\s*)("[^"]*"|'[^']*')/, ['attribute.name.html', 'delimiter.html', 'string.html']],
+      [
+        /(type)(\s*=\s*)(")([^"]+)(")/,
+        [
+          'attribute.name.html',
+          'delimiter.html',
+
+          'string.html',
+          { token: 'string.html', switchTo: '@tag.$S2.$4' },
+          'string.html'
+        ]
+      ],
+      [
+        /(type)(\s*=\s*)(')([^']+)(')/,
+        [
+          'attribute.name.html',
+          'delimiter.html',
+
+          'string.html',
+          { token: 'string.html', switchTo: '@tag.$S2.$4' },
+          'string.html'
+        ]
+      ],
+      [
+        /(\w+)(\s*=\s*)("[^"]*"|'[^']*')/,
+        ['attribute.name.html', 'delimiter.html', 'string.html']
+      ],
       [/\w+/, 'attribute.name.html'],
       [/\/>/, 'tag', '@pop'],
-      [/>/, {
-        cases: {
-          '$S2==style': { token: 'tag', switchTo: 'embeddedStyle', nextEmbedded: 'text/css' },
-          '$S2==script': {
-            cases: {
-              $S3: { token: 'tag', switchTo: 'embeddedScript', nextEmbedded: '$S3' },
-              '@default': { token: 'tag', switchTo: 'embeddedScript', nextEmbedded: 'text/javascript' }
-            }
-          },
-          '@default': { token: 'tag', next: '@pop' }
+      [
+        />/,
+        {
+          cases: {
+            '$S2==style': {
+              token: 'tag',
+              switchTo: 'embeddedStyle',
+              nextEmbedded: 'text/css'
+            },
+            '$S2==script': {
+              cases: {
+                $S3: {
+                  token: 'tag',
+                  switchTo: 'embeddedScript',
+                  nextEmbedded: '$S3'
+                },
+                '@default': {
+                  token: 'tag',
+                  switchTo: 'embeddedScript',
+                  nextEmbedded: 'text/javascript'
+                }
+              }
+            },
+            '@default': { token: 'tag', next: '@pop' }
+          }
         }
-      }]
+      ]
     ],
 
     embeddedStyle: [
       [/[^<]+/, ''],
-      [/<\/style\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+      [
+        /<\/style\s*>/,
+        { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }
+      ],
       [/</, '']
     ],
 
     embeddedScript: [
       [/[^<]+/, ''],
-      [/<\/script\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+      [
+        /<\/script\s*>/,
+        { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }
+      ],
       [/</, '']
     ]
   }
diff --git a/docs/editor/useMonacoEditor.ts b/docs/editor/useMonacoEditor.ts
index 10bda44b..f50c2aaa 100644
--- a/docs/editor/useMonacoEditor.ts
+++ b/docs/editor/useMonacoEditor.ts
@@ -1,6 +1,7 @@
-import { watch, Ref, unref, ref } from 'vue'
-import type { editor as Editor } from 'monaco-editor-core'
 import { createSingletonPromise } from '@vueuse/core'
+import type { editor as Editor } from 'monaco-editor-core'
+import { Ref, ref, unref, watch } from 'vue'
+
 import { language as mdcLanguage } from './mdc.tmLanguage'
 
 declare global {
@@ -11,7 +12,8 @@ declare global {
     }
   }
 }
-const MONACO_CDN_BASE = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/'
+const MONACO_CDN_BASE =
+  'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/'
 
 const loadMonacoScript = (src: string) => {
   return new Promise((resolve, reject) => {
@@ -27,16 +29,17 @@ const loadMonacoScript = (src: string) => {
 const setupMonaco = createSingletonPromise(async () => {
   await loadMonacoScript('vs/loader.min.js')
   window.require.config({ paths: { vs: `${MONACO_CDN_BASE}/vs` } })
-  const monaco = await new Promise<any>(resolve => window.require(['vs/editor/editor.main'], resolve))
+  const monaco = await new Promise<any>((resolve) =>
+    window.require(['vs/editor/editor.main'], resolve)
+  )
 
   window.MonacoEnvironment = {
-    getWorkerUrl: function () {
+    getWorkerUrl() {
       return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
         self.MonacoEnvironment = {
           baseUrl: '${MONACO_CDN_BASE}'
         };
-        importScripts('${MONACO_CDN_BASE}vs/base/worker/workerMain.js');`
-      )}`
+        importScripts('${MONACO_CDN_BASE}vs/base/worker/workerMain.js');`)}`
     }
   }
 
@@ -56,16 +59,26 @@ const setupMonaco = createSingletonPromise(async () => {
   return { monaco }
 })
 
-export function useMonaco (
+export function useMonaco(
   target: Ref,
-  options: { readOnly?: boolean, code: string; language: string; onChanged?: (content: string) => void, onDidCreateEditor?: () => void }
+  options: {
+    readOnly?: boolean
+    code: string
+    language: string
+    onChanged?: (content: string) => void
+    onDidCreateEditor?: () => void
+  }
 ) {
   const isSetup = ref(false)
   let editor: Editor.IStandaloneCodeEditor
 
   const setContent = (content: string) => {
-    if (!isSetup.value) { return }
-    if (editor) { editor.setValue(content) }
+    if (!isSetup.value) {
+      return
+    }
+    if (editor) {
+      editor.setValue(content)
+    }
   }
 
   const init = async () => {
@@ -76,10 +89,18 @@ export function useMonaco (
       () => {
         const el = unref(target)
 
-        if (!el) { return }
+        if (!el) {
+          return
+        }
 
         const extension = () => {
-          if (options.language === 'typescript') { return 'ts' } else if (options.language === 'javascript') { return 'js' } else if (options.language === 'html') { return 'html' }
+          if (options.language === 'typescript') {
+            return 'ts'
+          } else if (options.language === 'javascript') {
+            return 'js'
+          } else if (options.language === 'html') {
+            return 'html'
+          }
         }
 
         const model = monaco.editor.createModel(
diff --git a/docs/editor/useShiki.ts b/docs/editor/useShiki.ts
index 2cec800c..41097690 100644
--- a/docs/editor/useShiki.ts
+++ b/docs/editor/useShiki.ts
@@ -1,8 +1,20 @@
-import { getHighlighter, BUNDLED_LANGUAGES, BUNDLED_THEMES, Lang, Theme } from 'shiki-es'
-import { useRuntimeConfig } from '#imports'
+import {
+  BUNDLED_LANGUAGES,
+  BUNDLED_THEMES,
+  Lang,
+  Theme,
+  getHighlighter
+} from 'shiki-es'
 import { visit } from 'unist-util-visit'
-import type { HighlightParams, HighlightThemedToken, ParsedContent } from '../../src/runtime/types'
+
 import mdcTMLanguage from '../../src/runtime/assets/mdc.tmLanguage.json'
+import type {
+  HighlightParams,
+  HighlightThemedToken,
+  ParsedContent
+} from '../../src/runtime/types'
+
+import { useRuntimeConfig } from '#imports'
 
 /**
  * Resolve Shiki compatible lang from string.
@@ -10,18 +22,21 @@ import mdcTMLanguage from '../../src/runtime/assets/mdc.tmLanguage.json'
  * Used to resolve lang from both languages id's and aliases.
  */
 const resolveLang = (lang: string): Lang | undefined =>
-  BUNDLED_LANGUAGES.find(l => l.id === lang || l.aliases?.includes(lang))?.id as Lang
+  BUNDLED_LANGUAGES.find((l) => l.id === lang || l.aliases?.includes(lang))
+    ?.id as Lang
 
 /**
  * Resolve Shiki compatible theme from string.
  */
 const resolveTheme = (theme: string): Theme | undefined =>
-  BUNDLED_THEMES.find(t => t === theme)
+  BUNDLED_THEMES.find((t) => t === theme)
 
 /**
  * Resolve Shiki highlighter compatible payload from request body.
  */
-const resolveBody = (body: Partial<HighlightParams>): { code: string, lang?: Lang, theme?: Theme } => {
+const resolveBody = (
+  body: Partial<HighlightParams>
+): { code: string; lang?: Lang; theme?: Theme } => {
   return {
     // Remove trailing carriage returns
     code: body.code.replace(/\n+$/, ''),
@@ -55,7 +70,9 @@ export const useShiki = async () => {
     ] as any[]
   })
 
-  async function highlightCode (params: Partial<HighlightParams>): Promise<HighlightThemedToken[][]> {
+  async function highlightCode(
+    params: Partial<HighlightParams>
+  ): Promise<HighlightThemedToken[][]> {
     const { code, lang, theme } = resolveBody(params)
     if (!cache[`${code}-${lang}-${theme}`]) {
       // Skip highlight if lang is not supported
@@ -121,26 +138,36 @@ export const useShiki = async () => {
     innerCodeNode.children = lines.map((line, lineIndex) => ({
       type: 'element',
       tag: 'span',
-      props: { class: ['line', highlights.includes(lineIndex + 1) ? 'highlight' : ''].join(' ').trim() },
+      props: {
+        class: ['line', highlights.includes(lineIndex + 1) ? 'highlight' : '']
+          .join(' ')
+          .trim()
+      },
       children: line.map(tokenSpan)
     }))
     return node
   }
 
-  return async function highlight (content: ParsedContent) {
+  return async function highlight(content: ParsedContent) {
     const codeBlocks = []
     visit(
       content.body,
       (node: any) => node.tag === 'code' && node?.props.code,
-      (node) => { codeBlocks.push(node) }
+      (node) => {
+        codeBlocks.push(node)
+      }
     )
     await Promise.all(codeBlocks.map(highlightBlock))
 
     const inlineCodes = []
     visit(
       content.body,
-      (node: any) => node.tag === 'code-inline' && (node.props?.lang || node.props?.language),
-      (node) => { inlineCodes.push(node) }
+      (node: any) =>
+        node.tag === 'code-inline' &&
+        (node.props?.lang || node.props?.language),
+      (node) => {
+        inlineCodes.push(node)
+      }
     )
 
     await Promise.all(inlineCodes.map(highlightInline))
diff --git a/packages/core/src/plugins/composer.ts b/packages/core/src/plugins/composer.ts
index d0cd4f5b..b932306e 100644
--- a/packages/core/src/plugins/composer.ts
+++ b/packages/core/src/plugins/composer.ts
@@ -4,7 +4,7 @@
  * @internal
  */
 
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 
 import { IhuntersofbookPlugins } from '.'
 import { loadDateFNSLocale } from '../utils'