111 lines
2.1 KiB
Vue
111 lines
2.1 KiB
Vue
<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>
|