librodrome/app/components/admin/AdminMarkdownEditor.vue

<template>
  <div class="md-editor">
    <div class="md-toolbar">
      <div class="md-tabs">
        <button
          class="md-tab"
          :class="{ 'md-tab--active': tab === 'edit' }"
          @click="tab = 'edit'"
        >
          <div class="i-lucide-pencil h-3.5 w-3.5" />
          Édition
        </button>
        <button
          class="md-tab"
          :class="{ 'md-tab--active': tab === 'split' }"
          @click="tab = 'split'"
        >
          <div class="i-lucide-columns-2 h-3.5 w-3.5" />
          Split
        </button>
        <button
          class="md-tab"
          :class="{ 'md-tab--active': tab === 'preview' }"
          @click="tab = 'preview'"
        >
          <div class="i-lucide-eye h-3.5 w-3.5" />
          Aperçu
        </button>
      </div>
      <button
        class="md-fullscreen"
        :class="{ 'md-fullscreen--active': fullscreen }"
        @click="fullscreen = !fullscreen"
      >
        <div :class="fullscreen ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'" class="h-3.5 w-3.5" />
      </button>
    </div>

    <div class="md-body" :class="{ 'md-body--split': tab === 'split', 'md-body--fullscreen': fullscreen }">
      <textarea
        v-if="tab === 'edit' || tab === 'split'"
        ref="textareaRef"
        :value="modelValue"
        class="md-textarea"
        :rows="rows"
        @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
        @keydown.tab.prevent="insertTab"
      />
      <div
        v-if="tab === 'preview' || tab === 'split'"
        class="md-preview prose"
        v-html="renderedHtml"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: string
  rows?: number
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const tab = ref<'edit' | 'preview' | 'split'>('split')
const fullscreen = ref(false)
const textareaRef = ref<HTMLTextAreaElement>()

function insertTab(e: KeyboardEvent) {
  const ta = e.target as HTMLTextAreaElement
  const start = ta.selectionStart
  const end = ta.selectionEnd
  const val = ta.value
  const newVal = val.substring(0, start) + '  ' + val.substring(end)
  emit('update:modelValue', newVal)
  nextTick(() => {
    ta.selectionStart = ta.selectionEnd = start + 2
  })
}

const renderedHtml = computed(() => {
  return props.modelValue
    .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/^- (.+)$/gm, '<li>$1</li>')
    .replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/^(?!<[hpulob])(.+)/gm, '<p>$1</p>')
})
</script>

<style scoped>
.md-editor {
  border: 1px solid hsl(20 8% 18%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.md-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: hsl(20 8% 6%);
  border-bottom: 1px solid hsl(20 8% 14%);
}

.md-tabs {
  display: flex;
}

.md-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: none;
  background: none;
  color: hsl(20 8% 50%);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.md-tab--active {
  color: white;
  background: hsl(20 8% 10%);
}

.md-fullscreen {
  padding: 0.5rem 0.75rem;
  color: hsl(20 8% 40%);
  transition: color 0.2s;
}
.md-fullscreen:hover,
.md-fullscreen--active { color: white; }

.md-body {
  display: flex;
}

.md-body--split .md-textarea,
.md-body--split .md-preview {
  width: 50%;
}

.md-body--split .md-preview {
  border-left: 1px solid hsl(20 8% 14%);
}

.md-body--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: hsl(20 8% 4%);
}

.md-body--fullscreen .md-textarea,
.md-body--fullscreen .md-preview {
  height: 100vh;
}

.md-textarea {
  width: 100%;
  padding: 1rem;
  border: none;
  background: hsl(20 8% 4%);
  color: white;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  line-height: 1.7;
  resize: vertical;
  min-height: 24rem;
  tab-size: 2;
}

.md-textarea:focus {
  outline: none;
}

.md-preview {
  padding: 1rem;
  min-height: 24rem;
  max-height: 70vh;
  overflow-y: auto;
  background: hsl(20 8% 4%);
}
</style>