initiation librodrome

app/components/admin/AdminMarkdownEditor.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="md-editor">
+    <div class="md-tabs">
+      <button
+        class="md-tab"
+        :class="{ 'md-tab--active': tab === 'edit' }"
+        @click="tab = 'edit'"
+      >
+        Édition
+      </button>
+      <button
+        class="md-tab"
+        :class="{ 'md-tab--active': tab === 'preview' }"
+        @click="tab = 'preview'"
+      >
+        Aperçu
+      </button>
+    </div>
+
+    <textarea
+      v-if="tab === 'edit'"
+      :value="modelValue"
+      class="md-textarea"
+      :rows="rows"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+    <div
+      v-else
+      class="md-preview prose"
+      v-html="renderedHtml"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+  rows?: number
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const tab = ref<'edit' | 'preview'>('edit')
+
+const renderedHtml = computed(() => {
+  // Simple markdown rendering for preview
+  return props.modelValue
+    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/\n\n/g, '</p><p>')
+    .replace(/^(?!<[hp])(.+)/gm, '<p>$1</p>')
+})
+</script>
+
+<style scoped>
+.md-editor {
+  border: 1px solid hsl(20 8% 18%);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.md-tabs {
+  display: flex;
+  background: hsl(20 8% 6%);
+  border-bottom: 1px solid hsl(20 8% 14%);
+}
+
+.md-tab {
+  padding: 0.5rem 1rem;
+  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-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: 20rem;
+}
+
+.md-textarea:focus {
+  outline: none;
+}
+
+.md-preview {
+  padding: 1rem;
+  min-height: 20rem;
+  background: hsl(20 8% 4%);
+}
+</style>