관리자 마크다운 미리보기 추가
This commit is contained in:
152
components/admin/AdminMarkdownPreview.vue
Normal file
152
components/admin/AdminMarkdownPreview.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* HTML 특수 문자 이스케이프
|
||||
* @param {string} value - 원본 문자열
|
||||
* @returns {string} 이스케이프된 문자열
|
||||
*/
|
||||
const escapeHtml = (value) => value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
|
||||
/**
|
||||
* 인라인 마크다운 변환
|
||||
* @param {string} value - 원본 문자열
|
||||
* @returns {string} 변환된 HTML
|
||||
*/
|
||||
const parseInlineMarkdown = (value) => escapeHtml(value)
|
||||
.replace(/`([^`]+)`/g, '<code class="admin-markdown-preview__inline-code">$1</code>')
|
||||
.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*([^*]+)\*/g, '<em>$1</em>')
|
||||
|
||||
/**
|
||||
* 목록 HTML 변환
|
||||
* @param {Array<string>} items - 목록 아이템
|
||||
* @param {'ul' | 'ol'} tagName - 목록 태그명
|
||||
* @returns {string} 목록 HTML
|
||||
*/
|
||||
const renderList = (items, tagName) => {
|
||||
const listItems = items
|
||||
.map((item) => `<li>${parseInlineMarkdown(item)}</li>`)
|
||||
.join('')
|
||||
|
||||
return `<${tagName}>${listItems}</${tagName}>`
|
||||
}
|
||||
|
||||
/**
|
||||
* 기본 마크다운을 미리보기 HTML로 변환
|
||||
* @param {string} markdown - 마크다운 문자열
|
||||
* @returns {string} 미리보기 HTML
|
||||
*/
|
||||
const renderMarkdown = (markdown) => {
|
||||
const lines = markdown.split('\n')
|
||||
const blocks = []
|
||||
let index = 0
|
||||
|
||||
while (index < lines.length) {
|
||||
const line = lines[index]
|
||||
const trimmedLine = line.trim()
|
||||
|
||||
if (!trimmedLine) {
|
||||
index += 1
|
||||
continue
|
||||
}
|
||||
|
||||
if (trimmedLine.startsWith('```')) {
|
||||
const codeLines = []
|
||||
index += 1
|
||||
|
||||
while (index < lines.length && !lines[index].trim().startsWith('```')) {
|
||||
codeLines.push(lines[index])
|
||||
index += 1
|
||||
}
|
||||
|
||||
blocks.push(`<pre><code>${escapeHtml(codeLines.join('\n'))}</code></pre>`)
|
||||
index += 1
|
||||
continue
|
||||
}
|
||||
|
||||
const headingMatch = trimmedLine.match(/^(#{1,3})\s+(.+)$/)
|
||||
|
||||
if (headingMatch) {
|
||||
const level = headingMatch[1].length
|
||||
blocks.push(`<h${level}>${parseInlineMarkdown(headingMatch[2])}</h${level}>`)
|
||||
index += 1
|
||||
continue
|
||||
}
|
||||
|
||||
if (trimmedLine.startsWith('> ')) {
|
||||
const quotes = []
|
||||
|
||||
while (index < lines.length && lines[index].trim().startsWith('> ')) {
|
||||
quotes.push(lines[index].trim().replace(/^>\s?/, ''))
|
||||
index += 1
|
||||
}
|
||||
|
||||
blocks.push(`<blockquote>${quotes.map((quote) => `<p>${parseInlineMarkdown(quote)}</p>`).join('')}</blockquote>`)
|
||||
continue
|
||||
}
|
||||
|
||||
if (/^- /.test(trimmedLine)) {
|
||||
const items = []
|
||||
|
||||
while (index < lines.length && /^- /.test(lines[index].trim())) {
|
||||
items.push(lines[index].trim().replace(/^- /, ''))
|
||||
index += 1
|
||||
}
|
||||
|
||||
blocks.push(renderList(items, 'ul'))
|
||||
continue
|
||||
}
|
||||
|
||||
if (/^\d+\. /.test(trimmedLine)) {
|
||||
const items = []
|
||||
|
||||
while (index < lines.length && /^\d+\. /.test(lines[index].trim())) {
|
||||
items.push(lines[index].trim().replace(/^\d+\. /, ''))
|
||||
index += 1
|
||||
}
|
||||
|
||||
blocks.push(renderList(items, 'ol'))
|
||||
continue
|
||||
}
|
||||
|
||||
const paragraphs = []
|
||||
|
||||
while (
|
||||
index < lines.length &&
|
||||
lines[index].trim() &&
|
||||
!lines[index].trim().startsWith('```') &&
|
||||
!lines[index].trim().match(/^(#{1,3})\s+(.+)$/) &&
|
||||
!lines[index].trim().startsWith('> ') &&
|
||||
!/^- /.test(lines[index].trim()) &&
|
||||
!/^\d+\. /.test(lines[index].trim())
|
||||
) {
|
||||
paragraphs.push(lines[index].trim())
|
||||
index += 1
|
||||
}
|
||||
|
||||
blocks.push(`<p>${parseInlineMarkdown(paragraphs.join(' '))}</p>`)
|
||||
}
|
||||
|
||||
return blocks.join('')
|
||||
}
|
||||
|
||||
const previewHtml = computed(() => renderMarkdown(props.content))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="admin-markdown-preview post-prose min-h-[28rem] rounded border border-line bg-white px-5 py-4 text-sm leading-7"
|
||||
v-html="previewHtml"
|
||||
/>
|
||||
</template>
|
||||
@@ -17,6 +17,8 @@ const props = defineProps({
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const slugTouched = ref(Boolean(props.initialPost.slug))
|
||||
const editorMode = ref('write')
|
||||
const contentTextarea = ref(null)
|
||||
|
||||
const form = reactive({
|
||||
title: props.initialPost.title || '',
|
||||
@@ -66,6 +68,77 @@ const parseTags = (value) => [...new Set(value
|
||||
.map((tag) => toSlug(tag))
|
||||
.filter(Boolean))]
|
||||
|
||||
/**
|
||||
* 본문 선택 영역에 마크다운 문법 삽입
|
||||
* @param {string} before - 선택 영역 앞에 넣을 문자열
|
||||
* @param {string} after - 선택 영역 뒤에 넣을 문자열
|
||||
* @param {string} fallback - 선택 영역이 없을 때 넣을 문자열
|
||||
* @returns {void}
|
||||
*/
|
||||
const insertMarkdown = (before, after = '', fallback = '') => {
|
||||
const textarea = contentTextarea.value
|
||||
|
||||
if (!textarea) {
|
||||
form.content += fallback || before
|
||||
return
|
||||
}
|
||||
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const selectedText = form.content.slice(start, end)
|
||||
const insertText = selectedText
|
||||
? `${before}${selectedText}${after}`
|
||||
: (fallback || `${before}${after}`)
|
||||
|
||||
form.content = `${form.content.slice(0, start)}${insertText}${form.content.slice(end)}`
|
||||
|
||||
nextTick(() => {
|
||||
textarea.focus()
|
||||
const cursor = start + insertText.length
|
||||
textarea.setSelectionRange(cursor, cursor)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 제목 문법 삽입
|
||||
* @returns {void}
|
||||
*/
|
||||
const insertHeading = () => {
|
||||
insertMarkdown('## ', '', '## 제목')
|
||||
}
|
||||
|
||||
/**
|
||||
* 굵게 문법 삽입
|
||||
* @returns {void}
|
||||
*/
|
||||
const insertBold = () => {
|
||||
insertMarkdown('**', '**', '**강조**')
|
||||
}
|
||||
|
||||
/**
|
||||
* 목록 문법 삽입
|
||||
* @returns {void}
|
||||
*/
|
||||
const insertList = () => {
|
||||
insertMarkdown('- ', '', '- 목록')
|
||||
}
|
||||
|
||||
/**
|
||||
* 인용 문법 삽입
|
||||
* @returns {void}
|
||||
*/
|
||||
const insertQuote = () => {
|
||||
insertMarkdown('> ', '', '> 인용')
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 블록 문법 삽입
|
||||
* @returns {void}
|
||||
*/
|
||||
const insertCodeBlock = () => {
|
||||
insertMarkdown('```\n', '\n```', '```\n코드\n```')
|
||||
}
|
||||
|
||||
/**
|
||||
* 게시물 입력값 제출
|
||||
* @returns {void}
|
||||
@@ -102,14 +175,57 @@ const submitPost = () => {
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">본문</span>
|
||||
<textarea
|
||||
v-model="form.content"
|
||||
class="admin-post-form__textarea min-h-[28rem] rounded border border-line bg-white px-3 py-3 font-mono text-sm leading-6"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<div class="admin-post-form__field grid gap-2 text-sm">
|
||||
<div class="admin-post-form__editor-header flex flex-wrap items-center justify-between gap-3">
|
||||
<span class="admin-post-form__label font-medium">본문</span>
|
||||
<div class="admin-post-form__mode flex rounded border border-line bg-white p-1 text-xs font-semibold">
|
||||
<button
|
||||
class="admin-post-form__mode-button rounded px-3 py-1"
|
||||
:class="editorMode === 'write' ? 'bg-[#15171a] text-white' : 'text-muted'"
|
||||
type="button"
|
||||
@click="editorMode = 'write'"
|
||||
>
|
||||
작성
|
||||
</button>
|
||||
<button
|
||||
class="admin-post-form__mode-button rounded px-3 py-1"
|
||||
:class="editorMode === 'preview' ? 'bg-[#15171a] text-white' : 'text-muted'"
|
||||
type="button"
|
||||
@click="editorMode = 'preview'"
|
||||
>
|
||||
미리보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="editorMode === 'write'" class="admin-post-form__editor grid gap-2">
|
||||
<div class="admin-post-form__toolbar flex flex-wrap gap-2">
|
||||
<button class="admin-post-form__tool rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold" type="button" @click="insertHeading">
|
||||
제목
|
||||
</button>
|
||||
<button class="admin-post-form__tool rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold" type="button" @click="insertBold">
|
||||
굵게
|
||||
</button>
|
||||
<button class="admin-post-form__tool rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold" type="button" @click="insertList">
|
||||
목록
|
||||
</button>
|
||||
<button class="admin-post-form__tool rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold" type="button" @click="insertQuote">
|
||||
인용
|
||||
</button>
|
||||
<button class="admin-post-form__tool rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold" type="button" @click="insertCodeBlock">
|
||||
코드
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
ref="contentTextarea"
|
||||
v-model="form.content"
|
||||
class="admin-post-form__textarea min-h-[28rem] rounded border border-line bg-white px-3 py-3 font-mono text-sm leading-6"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AdminMarkdownPreview v-else :content="form.content" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="admin-post-form__settings grid content-start gap-4">
|
||||
|
||||
Reference in New Issue
Block a user