feat: admin editor markdown config overlay

ux/public/_assets/icons/ultraviolet-asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M17.5 38.5L17.5 24.315 5.195 31.371 2.708 27.033 14.974 20 2.708 12.967 5.195 8.629 17.5 15.685 17.5 1.5 22.5 1.5 22.5 15.685 34.805 8.629 37.292 12.967 25.026 20 37.292 27.033 34.805 31.371 22.5 24.315 22.5 38.5z"/><path fill="#4788c7" d="M22,2v12.822v1.726l1.497-0.859L34.62,9.312l1.99,3.47l-11.076,6.351L24.021,20l1.513,0.868 l11.076,6.351l-1.99,3.47l-11.123-6.378L22,23.452v1.726V38h-4V25.178v-1.726l-1.497,0.859L5.38,30.688l-1.99-3.47l11.076-6.351 L15.979,20l-1.513-0.868L3.39,12.782l1.99-3.47l11.123,6.378L18,16.548v-1.726V2H22 M23,1h-6v13.822L5.01,7.947l-2.985,5.205 L13.969,20L2.025,26.848l2.985,5.205L17,25.178V39h6V25.178l11.99,6.875l2.985-5.205L26.031,20l11.944-6.848L34.99,7.947L23,14.822 V1L23,1z"/></svg>

ux/public/_assets/icons/ultraviolet-data-sheet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#fff" d="M2.5 2.5H37.5V37.5H2.5z"/><path fill="#4788c7" d="M37,3v34H3V3H37 M38,2H2v36h36V2L38,2z"/><path fill="#98ccfd" d="M14 20H47V21H14z" transform="rotate(90 30.5 20.5)"/><path fill="#98ccfd" d="M7 20H40V21H7z" transform="rotate(90 23.5 20.5)"/><path fill="#98ccfd" d="M0 20H33V21H0z" transform="rotate(90 16.5 20.5)"/><path fill="#98ccfd" d="M4 16H37V17H4zM4 23H37V24H4zM4 30H37V31H4z"/><path fill="#b6dcfe" d="M30.5 2.5H37.5V9.5H30.5z"/><path fill="#4788c7" d="M37,3v6h-6V3H37 M38,2h-8v8h8V2L38,2z"/><path fill="#b6dcfe" d="M23.5 2.5H30.5V9.5H23.5z"/><path fill="#4788c7" d="M30,3v6h-6V3H30 M31,2h-8v8h8V2L31,2z"/><path fill="#b6dcfe" d="M16.5 2.5H23.5V9.5H16.5z"/><path fill="#4788c7" d="M23,3v6h-6V3H23 M24,2h-8v8h8V2L24,2z"/><path fill="#b6dcfe" d="M9.5 2.5H16.5V9.5H9.5z"/><path fill="#4788c7" d="M16,3v6h-6V3H16 M17,2H9v8h8V2L17,2z"/><g><path fill="#b6dcfe" d="M2.5 2.5H9.5V9.5H2.5z"/><path fill="#4788c7" d="M9,3v6H3V3H9 M10,2H2v8h8V2L10,2z"/></g><g><path fill="#b6dcfe" d="M2.5 9.5H9.5V16.5H2.5z"/><path fill="#4788c7" d="M9,10v6H3v-6H9 M10,9H2v8h8V9L10,9z"/></g><g><path fill="#b6dcfe" d="M2.5 16.5H9.5V23.5H2.5z"/><path fill="#4788c7" d="M9,17v6H3v-6H9 M10,16H2v8h8V16L10,16z"/></g><g><path fill="#b6dcfe" d="M2.5 23.5H9.5V30.5H2.5z"/><path fill="#4788c7" d="M9,24v6H3v-6H9 M10,23H2v8h8V23L10,23z"/></g><g><path fill="#b6dcfe" d="M2.5 30.5H9.5V37.5H2.5z"/><path fill="#4788c7" d="M9,31v6H3v-6H9 M10,30H2v8h8V30L10,30z"/></g></svg>

ux/public/_assets/icons/ultraviolet-enter-key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#b6dcfe" d="M6,37.5c-1.93,0-3.5-1.57-3.5-3.5V18c0-1.93,1.57-3.5,3.5-3.5h9.5V6c0-1.93,1.57-3.5,3.5-3.5h15 c1.93,0,3.5,1.57,3.5,3.5v28c0,1.93-1.57,3.5-3.5,3.5H6z"/><path fill="#4788c7" d="M34,3c1.654,0,3,1.346,3,3v11.429v5.143V34c0,1.654-1.346,3-3,3H6c-1.654,0-3-1.346-3-3V18 c0-1.654,1.346-3,3-3h9h1v-1V6c0-1.654,1.346-3,3-3H34 M34,2H19c-2.209,0-4,1.791-4,4v8H6c-2.209,0-4,1.791-4,4v16 c0,2.209,1.791,4,4,4h28c2.209,0,4-1.791,4-4V22.571v-5.143V6C38,3.8,36.2,2,34,2L34,2z"/><path fill="#dff0fe" d="M34,3H19c-1.657,0-3,1.343-3,3v9H6c-1.657,0-3,1.343-3,3v13c0,1.657,1.343,3,3,3h28 c1.657,0,3-1.343,3-3V6C37,4.343,35.657,3,34,3z"/><path fill="#4788c7" d="M26,11.5V23H15v-5l-6.5,6.5L15,31v-5h14V11.5c0-0.828-0.672-1.5-1.5-1.5h0 C26.672,10,26,10.672,26,11.5z"/></svg>

ux/public/_assets/icons/ultraviolet-quote-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M1.5,33.5V18c0-6.604,4.497-11.265,11-11.491v3.115c-4.421,1.371-5,5.181-5,8.376v0.5h9v15H1.5z"/><path fill="#4788c7" d="M12,7.037v2.226C7.537,10.846,7,14.969,7,18v1h1h8v14H2V18C2,11.862,6.062,7.479,12,7.037 M13,6 C6.004,6,1,11.004,1,18v16h16V18H8c0-3.498,0.759-6.869,5-8V6L13,6z"/><g><path fill="#dff0fe" d="M23.5,33.5V18c0-6.604,4.497-11.265,11-11.491v3.115c-4.421,1.371-5,5.181-5,8.376v0.5h9v15H23.5z"/><path fill="#4788c7" d="M34,7.037v2.226c-4.463,1.583-5,5.706-5,8.737v1h1h8v14H24V18C24,11.862,28.062,7.479,34,7.037 M35,6c-6.996,0-12,5.004-12,12v16h16V18h-9c0-3.498,0.759-6.869,5-8V6L35,6z"/></g></svg>

ux/public/_assets/icons/ultraviolet-sigma.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#dff0fe" d="M6.047,37.5c2.17-2.729,4.038-5.506,5.85-8.198c1.99-2.958,4.047-6.017,6.49-8.984l0.258-0.313 l-0.255-0.317C14.279,14.575,7.834,5.249,5.948,2.5H32.5v7.889c-0.058-0.11-0.14-0.327-0.235-0.751 C31.423,6.501,30.074,5.5,26.704,5.5H16.592c-0.861,0-0.904,0.65-0.904,0.781v0.153l0.085,0.126 c1.045,1.549,1.917,2.941,2.76,4.287c1.434,2.289,2.791,4.456,4.828,7.14c-3.965,4.848-10.716,15.637-10.785,15.748L12.098,34.5H27 c2.664,0,5.1-2.43,6.041-4.716c0.119-0.289,0.285-0.806,0.376-1.139c0.197-0.715,0.595-1.003,0.979-1.102L32.583,37.5H6.047z"/><path fill="#4788c7" d="M32,3v4.522C30.897,5.451,29.192,5,26.704,5H16.592c-0.965,0-1.404,0.664-1.404,1.281v0.306 l0.171,0.254c1.041,1.542,1.911,2.931,2.752,4.274c1.383,2.209,2.696,4.304,4.616,6.861c-3.997,4.981-10.297,15.05-10.575,15.494 L11.196,35H13h14c2.79,0,5.334-2.428,6.403-4.794L32.166,37H7.074c1.915-2.48,3.599-4.984,5.237-7.419 c1.983-2.948,4.034-5.996,6.461-8.946l0.517-0.628l-0.51-0.634C15.009,14.684,9.262,6.43,6.898,3H32 M33,2H5 c0,0,8.098,11.903,13,18c-4.903,5.958-8.105,12.041-13,18c0.375,0,28,0,28,0l2-10.983c0,0-0.093-0.017-0.241-0.017 c-0.46,0-1.451,0.164-1.824,1.513c-0.095,0.343-0.253,0.829-0.357,1.081C31.781,31.531,29.535,34,27,34c-5.029,0-14,0-14,0 s7.054-11.292,11-16c-3.4-4.43-4.936-7.456-7.813-11.719C16.188,6.004,16.456,6,16.592,6c0.134,0,6.037,0,10.112,0 c2.995,0,4.258,0.708,5.073,3.748c0.2,0.884,0.403,1.252,0.81,1.252C32.827,11,33,10.812,33,10.588V2L33,2z"/></svg>

ux/public/_assets/icons/ultraviolet-underline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="none" stroke="#4788c7" stroke-linecap="round" stroke-miterlimit="10" d="M3.5 37.5L36.5 37.5"/><path fill="#dff0fe" d="M20,33.5c-6.893,0-12.5-5.607-12.5-12.5V5.109l-2-0.5V2.5h10v2.109l-2,0.5V21 c0,3.584,2.916,6.5,6.5,6.5s6.5-2.916,6.5-6.5V5.109l-2-0.5V2.5h10v2.109l-2,0.5V21C32.5,27.893,26.893,33.5,20,33.5z"/><path fill="#4788c7" d="M34,3v1.219L32.757,4.53L32,4.719V5.5V21c0,6.617-5.383,12-12,12S8,27.617,8,21V5.5V4.719 L7.243,4.53L6,4.219V3h1h7h1v1.219L13.757,4.53L13,4.719V5.5V21c0,3.86,3.14,7,7,7s7-3.14,7-7V5.5V4.719L26.243,4.53L25,4.219V3 H34 M35,2H24v3l2,0.5V21c0,3.314-2.686,6-6,6s-6-2.686-6-6V5.5L16,5V2h-2H7H5v3l2,0.5V21c0,7.18,5.82,13,13,13s13-5.82,13-13V5.5 L35,5V2L35,2z"/></svg>

ux/public/_assets/icons/ultraviolet-workflow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#98ccfd" d="M1.5 26.5H13.5V38.5H1.5z"/><path fill="#4788c7" d="M13,27v11H2V27H13 M14,26H1v13h13V26L14,26z"/><path fill="#fff" d="M27.77 2.77H37.230000000000004V12.23H27.77z" transform="rotate(-45.001 32.5 7.5)"/><path fill="#4788c7" d="M32.5,1.518L38.482,7.5L32.5,13.482L26.518,7.5L32.5,1.518 M32.5,0.103L25.103,7.5l7.397,7.397 L39.897,7.5L32.5,0.103L32.5,0.103z"/><path fill="#dff0fe" d="M7.5 1.5A6 6 0 1 0 7.5 13.5A6 6 0 1 0 7.5 1.5Z"/><path fill="#4788c7" d="M7.5,2C10.533,2,13,4.467,13,7.5S10.533,13,7.5,13S2,10.533,2,7.5S4.467,2,7.5,2 M7.5,1 C3.91,1,1,3.91,1,7.5S3.91,14,7.5,14S14,11.09,14,7.5S11.09,1,7.5,1L7.5,1z"/><path fill="#b6dcfe" d="M32.5 26.5A6 6 0 1 0 32.5 38.5A6 6 0 1 0 32.5 26.5Z"/><path fill="#4788c7" d="M32.5 27c3.033 0 5.5 2.467 5.5 5.5S35.533 38 32.5 38 27 35.533 27 32.5 29.467 27 32.5 27M32.5 26c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5 6.5-2.91 6.5-6.5S36.09 26 32.5 26L32.5 26zM7.5 17L7.5 17C7.224 17 7 17.224 7 17.5v6C7 23.776 7.224 24 7.5 24h0C7.776 24 8 23.776 8 23.5v-6C8 17.224 7.776 17 7.5 17z"/><path fill="#4788c7" d="M7.5 15.6L5.5 18 9.5 18zM22 7.5L22 7.5C22 7.224 21.776 7 21.5 7h-5C16.224 7 16 7.224 16 7.5v0C16 7.776 16.224 8 16.5 8h5C21.776 8 22 7.776 22 7.5z"/><path fill="#4788c7" d="M23.4 7.5L21 5.5 21 9.5zM32.5 23L32.5 23c.276 0 .5-.224.5-.5v-6c0-.276-.224-.5-.5-.5l0 0c-.276 0-.5.224-.5.5v6C32 22.776 32.224 23 32.5 23z"/><path fill="#4788c7" d="M32.5 24.4L34.5 22 30.5 22z"/></svg>

ux/src/components/EditorMarkdownConfigDialog.vue

@@ -1,69 +0,0 @@
-<template lang="pug">
-q-dialog(ref='dialogRef', @hide='onDialogHide')
-  q-card(style='min-width: 850px;')
-    q-card-section.card-header
-      q-icon(name='img:/_assets/icons/ultraviolet-markdown.svg', left, size='sm')
-      span {{t(`admin.editors.markdownName`)}}
-    q-card-section.q-pa-none
-      span Test
-    q-card-actions.card-actions
-      q-space
-      q-btn.acrylic-btn(
-        flat
-        :label='t(`common.actions.cancel`)'
-        color='grey'
-        padding='xs md'
-        @click='onDialogCancel'
-        )
-      q-btn(
-        unelevated
-        :label='t(`common.actions.save`)'
-        color='primary'
-        padding='xs md'
-        @click='save'
-        :loading='state.loading > 0'
-        )
-
-    q-inner-loading(:showing='state.loading > 0')
-      q-spinner(color='accent', size='lg')
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { useDialogPluginComponent, useQuasar } from 'quasar'
-import { reactive, ref } from 'vue'
-
-import { useAdminStore } from '../stores/admin'
-
-// EMITS
-
-defineEmits([
-  ...useDialogPluginComponent.emits
-])
-
-// QUASAR
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
-const $q = useQuasar()
-
-// STORES
-
-const adminStore = useAdminStore()
-
-// I18N
-
-const { t } = useI18n()
-
-// DATA
-
-const state = reactive({
-  config: [],
-  loading: 0
-})
-
-// METHODS
-
-async function save () {
-
-}
-</script>

ux/src/components/EditorMarkdownConfigOverlay.vue

@@ -0,0 +1,316 @@
+<template lang="pug">
+q-layout(view='hHh lpR fFf', container)
+  q-header.card-header.q-px-md.q-py-sm
+    q-icon(name='img:/_assets/icons/ultraviolet-markdown.svg', left, size='md')
+    span {{t(`admin.editors.markdownName`)}}
+    q-space
+    q-btn.q-mr-sm(
+      flat
+      rounded
+      color='white'
+      :aria-label='t(`common.actions.refresh`)'
+      icon='las la-question-circle'
+      :href='siteStore.docsBase + `/admin/editors/markdown`'
+      target='_blank'
+      type='a'
+    )
+    q-btn-group(push)
+      q-btn(
+        push
+        color='white'
+        text-color='grey-7'
+        :label='t(`common.actions.cancel`)'
+        :aria-label='t(`common.actions.cancel`)'
+        icon='las la-times'
+        @click='close'
+      )
+      q-btn(
+        push
+        color='positive'
+        text-color='white'
+        :label='t(`common.actions.save`)'
+        :aria-label='t(`common.actions.save`)'
+        icon='las la-check'
+        @click='save'
+        :disabled='state.loading > 0'
+      )
+  q-page-container
+    q-page.q-pa-md
+      q-card.shadow-1.q-pb-sm
+        q-card-section
+          .text-subtitle1 {{t('admin.editors.markdown.general')}}
+        q-item(tag='label')
+          blueprint-icon(icon='html')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.allowHTML`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.allowHTMLHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.allowHTML'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.allowHTML`)'
+              )
+        q-separator.q-my-sm(inset)
+        q-item(tag='label')
+          blueprint-icon(icon='link')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.linkify`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.linkifyHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.linkify'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.linkify`)'
+              )
+        q-separator.q-my-sm(inset)
+        q-item(tag='label')
+          blueprint-icon(icon='enter-key')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.lineBreaks`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.lineBreaksHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.lineBreaks'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.lineBreaks`)'
+              )
+        q-separator.q-my-sm(inset)
+        q-item
+          blueprint-icon(icon='width')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.tabWidth`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.tabWidthHint`)}}
+          q-item-section(side)
+            q-input(
+              type='number'
+              min='1'
+              max='8'
+              style='width: 100px;'
+              outlined
+              v-model='state.config.tabWidth'
+              dense
+              :aria-label='t(`admin.editors.markdown.tabWidth`)'
+              )
+        q-separator.q-my-sm(inset)
+        q-item
+          blueprint-icon(icon='sigma')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.latexEngine`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.latexEngineHint`)}}
+          q-item-section.col-auto
+            q-btn-toggle(
+              v-model='state.config.latexEngine'
+              push
+              glossy
+              no-caps
+              toggle-color='primary'
+              :options='latexEngines'
+            )
+        q-separator.q-my-sm(inset)
+        q-item
+          blueprint-icon(icon='data-sheet')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.multimdTable`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.multimdTableHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.multimdTable'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.multimdTable`)'
+              )
+        q-separator.q-my-sm(inset)
+        q-item(tag='label')
+          blueprint-icon(icon='asterisk')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.typographer`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.typographerHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.typographer'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.typographer`)'
+              )
+        template(v-if='state.config.typographer')
+          q-separator.q-my-sm(inset)
+          q-item(tag='label')
+            blueprint-icon(icon='quote-left')
+            q-item-section
+              q-item-label {{t(`admin.editors.markdown.quotes`)}}
+              q-item-label(caption) {{t(`admin.editors.markdown.quotesHint`)}}
+            q-item-section(avatar)
+              q-select(
+                style='width: 200px;'
+                outlined
+                v-model='state.config.quotes'
+                :options='quoteStyles'
+                emit-value
+                map-options
+                dense
+                options-dense
+                :aria-label='t(`admin.editors.markdown.quotes`)'
+              )
+        q-separator.q-my-sm(inset)
+        q-item(tag='label')
+          blueprint-icon(icon='underline')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.underline`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.underlineHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.underline'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.underline`)'
+              )
+
+      q-card.shadow-1.q-pb-sm.q-mt-md
+        q-card-section
+          .text-subtitle1 {{t('admin.editors.markdown.plantuml')}}
+        q-item(tag='label')
+          blueprint-icon(icon='workflow')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.plantuml`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.plantumlHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.plantuml'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.plantuml`)'
+              )
+        template(v-if='state.config.plantuml')
+          q-separator.q-my-sm(inset)
+          q-item
+            blueprint-icon(icon='website')
+            q-item-section
+              q-item-label {{t(`admin.editors.markdown.plantumlServerUrl`)}}
+              q-item-label(caption) {{t(`admin.editors.markdown.plantumlServerUrlHint`)}}
+            q-item-section(side)
+              q-input(
+                style='width: 450px;'
+                outlined
+                v-model='state.config.plantumlServerUrl'
+                dense
+                :aria-label='t(`admin.editors.markdown.plantumlServerUrl`)'
+                )
+
+      q-card.shadow-1.q-pb-sm.q-mt-md
+        q-card-section
+          .text-subtitle1 {{t('admin.editors.markdown.kroki')}}
+        q-item(tag='label')
+          blueprint-icon(icon='workflow')
+          q-item-section
+            q-item-label {{t(`admin.editors.markdown.kroki`)}}
+            q-item-label(caption) {{t(`admin.editors.markdown.krokiHint`)}}
+          q-item-section(avatar)
+            q-toggle(
+              v-model='state.config.kroki'
+              color='primary'
+              checked-icon='las la-check'
+              unchecked-icon='las la-times'
+              :aria-label='t(`admin.editors.markdown.kroki`)'
+              )
+        template(v-if='state.config.kroki')
+          q-separator.q-my-sm(inset)
+          q-item
+            blueprint-icon(icon='website')
+            q-item-section
+              q-item-label {{t(`admin.editors.markdown.krokiServerUrl`)}}
+              q-item-label(caption) {{t(`admin.editors.markdown.krokiServerUrlHint`)}}
+            q-item-section(side)
+              q-input(
+                style='width: 450px;'
+                outlined
+                v-model='state.config.krokiServerUrl'
+                dense
+                :aria-label='t(`admin.editors.markdown.krokiServerUrl`)'
+                )
+
+      q-inner-loading(:showing='state.loading > 0')
+        q-spinner(color='accent', size='lg')
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useQuasar } from 'quasar'
+import { reactive, ref } from 'vue'
+
+import { useAdminStore } from '../stores/admin'
+import { useSiteStore } from 'src/stores/site'
+
+// QUASAR
+
+const $q = useQuasar()
+
+// STORES
+
+const adminStore = useAdminStore()
+const siteStore = useSiteStore()
+
+// I18N
+
+const { t } = useI18n()
+
+// DATA
+
+const state = reactive({
+  config: {
+    allowHTML: false,
+    linkify: false,
+    lineBreaks: false,
+    typographer: false,
+    quotes: 'english',
+    underline: false,
+    tabWidth: 2,
+    latexEngine: 'katex',
+    multimdTable: false,
+    plantuml: false,
+    plantumlServerUrl: 'https://',
+    kroki: false,
+    krokiServerUrl: 'https://'
+  },
+  loading: 0
+})
+
+const latexEngines = [
+  { value: 'katex', label: 'KaTeX' },
+  { value: 'mathjax', label: 'Mathjax' }
+]
+
+const quoteStyles = [
+  { value: 'chinese', label: 'Chinese' },
+  { value: 'english', label: 'English' },
+  { value: 'french', label: 'French' },
+  { value: 'german', label: 'German' },
+  { value: 'greek', label: 'Greek' },
+  { value: 'japanese', label: 'Japanese' },
+  { value: 'hungarian', label: 'Hungarian' },
+  { value: 'polish', label: 'Polish' },
+  { value: 'portuguese', label: 'Portuguese' },
+  { value: 'russian', label: 'Russian' },
+  { value: 'spanish', label: 'Spanish' },
+  { value: 'swedish', label: 'Swedish' }
+]
+
+// METHODS
+
+function close () {
+  adminStore.$patch({ overlay: '' })
+}
+
+async function save () {
+
+}
+</script>

ux/src/i18n/locales/en.json

@@ -1678,5 +1678,32 @@
   "welcome.createHome": "Create the homepage",
   "welcome.subtitle": "Let's get started...",
   "welcome.title": "Welcome to Wiki.js!",
-  "admin.editors.useRenderingPipeline": "Uses the rendering pipeline."
+  "admin.editors.useRenderingPipeline": "Uses the rendering pipeline.",
+  "admin.editors.markdown.allowHTML": "Allow HTML",
+  "admin.editors.markdown.allowHTMLHint": "Allow HTML tags in content.",
+  "admin.editors.markdown.linkify": "Auto-linking",
+  "admin.editors.markdown.linkifyHint": "Automatically convert URLs into clickable links.",
+  "admin.editors.markdown.lineBreaks": "Auto Line Breaks",
+  "admin.editors.markdown.lineBreaksHint": "Automatically add linebreaks within paragraphs.",
+  "admin.editors.markdown.typographer": "Typographer",
+  "admin.editors.markdown.typographerHint": "Enable some language-neutral replacement + quotes beautification.",
+  "admin.editors.markdown.underline": "Underline Emphasis",
+  "admin.editors.markdown.underlineHint": "Enable text underlining by using _underline_ syntax.",
+  "admin.editors.markdown.tabWidth": "Code Block Tab Width",
+  "admin.editors.markdown.tabWidthHint": "Amount of spaces for each tab in code blocks.",
+  "admin.editors.markdown.latexEngine": "LaTeX Engine",
+  "admin.editors.markdown.latexEngineHint": "Which engine to use to process TeX/LaTeX expressions.",
+  "admin.editors.markdown.general": "General",
+  "admin.editors.markdown.plantuml": "PlantUML",
+  "admin.editors.markdown.kroki": "Kroki",
+  "admin.editors.markdown.multimdTable": "MultiMarkdown Table",
+  "admin.editors.markdown.multimdTableHint": "Enable support for MultiMarkdown Table features.",
+  "admin.editors.markdown.plantumlHint": "Enable PlantUML Parser",
+  "admin.editors.markdown.krokiHint": "Enable Kroki Diagrams Parser",
+  "admin.editors.markdown.krokiServerUrl": "Kroki Server URL",
+  "admin.editors.markdown.krokiServerUrlHint": "URL to the Kroki server used for image generation.",
+  "admin.editors.markdown.plantumlServerUrl": "PlantUML Server URL",
+  "admin.editors.markdown.plantumlServerUrlHint": "URL to the PlantUML server used for image generation.",
+  "admin.editors.markdown.quotes": "Quotes Style",
+  "admin.editors.markdown.quotesHint": "When typographer is enabled. Double + single quotes replacement pairs. e.g. «»„“ for Russian, „“‚‘ for German, etc."
 }

ux/src/layouts/AdminLayout.vue

@@ -228,6 +228,7 @@ import { useSiteStore } from 'src/stores/site'
 import AccountMenu from '../components/AccountMenu.vue'
 import FooterNav from 'src/components/FooterNav.vue'
 const overlays = {
+  EditorMarkdownConfig: defineAsyncComponent(() => import('../components/EditorMarkdownConfigOverlay.vue')),
   GroupEditOverlay: defineAsyncComponent(() => import('../components/GroupEditOverlay.vue')),
   UserEditOverlay: defineAsyncComponent(() => import('../components/UserEditOverlay.vue'))
 }

ux/src/pages/AdminEditors.vue

@@ -218,8 +218,9 @@ async function refresh () {
 function openConfig (editorId) {
   switch (editorId) {
     case 'markdown': {
-      $q.dialog({
-        component: defineAsyncComponent(() => import('../components/EditorMarkdownConfigDialog.vue'))
+      adminStore.$patch({
+        overlayOpts: { },
+        overlay: 'EditorMarkdownConfig'
       })
       break
     }