zenn
47620ab24c
게시물 설정 사이드바 오버레이로 이미지·갤러리·임베드를 편집하고, 파일명 alt 토글과 패널 입력 중 닫힘 문제를 해결했다. Co-authored-by: Cursor <cursoragent@cursor.com>
1464 lines
44 KiB
Vue
1464 lines
44 KiB
Vue
<script setup>
|
|
import { normalizeMarkdownContent } from '../../lib/markdown-content-normalizer.js'
|
|
import { resolveActiveBlockContext } from '../../lib/markdown-block-context.js'
|
|
import { serializeImageMarkdown } from '../../lib/markdown-image.js'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Array, Object],
|
|
default: ''
|
|
},
|
|
/** 헤더 아래 고정 툴바 슬롯(AdminPostForm `#admin-post-form-editor-toolbar-host`) */
|
|
toolbarTeleportTo: {
|
|
type: String,
|
|
default: '#admin-post-form-editor-toolbar-host'
|
|
},
|
|
/** 작성/미리보기 토글 버튼 Teleport 대상(AdminPostForm 헤더) */
|
|
modeToggleTeleportTo: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'block-panel'])
|
|
const activeMode = defineModel('editorMode', {
|
|
type: String,
|
|
default: 'write'
|
|
})
|
|
|
|
const editorRootRef = ref(null)
|
|
const textareaRef = ref(null)
|
|
const previewRef = ref(null)
|
|
const gutterRef = ref(null)
|
|
/** 커서가 있는 논리 줄(0-based, `\\n` 기준) */
|
|
const activeLogicalLineIndex = ref(0)
|
|
const mediaItems = ref([])
|
|
const isMediaPickerOpen = ref(false)
|
|
const isLoadingMedia = ref(false)
|
|
const isUploading = ref(false)
|
|
const mediaPickerTarget = ref('image')
|
|
const activeMediaPickerTab = ref('library')
|
|
const mediaSearchQuery = ref('')
|
|
const selectedMediaUrls = ref([])
|
|
const lastSelectionState = ref({
|
|
start: 0,
|
|
end: 0,
|
|
scrollTop: 0
|
|
})
|
|
|
|
const markdownValue = computed({
|
|
get: () => normalizeMarkdownContent(props.modelValue),
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
/** textarea 포커스·블록 패널 상호작용 */
|
|
const isTextareaFocused = ref(false)
|
|
const isBlockPanelEngaged = ref(false)
|
|
let blockPanelFocusTimer = null
|
|
|
|
/**
|
|
* 현재 포커스가 블록 설정 패널 안에 있는지 확인한다.
|
|
* @returns {boolean}
|
|
*/
|
|
const isFocusInBlockPanel = () => Boolean(
|
|
typeof document !== 'undefined'
|
|
&& document.activeElement?.closest?.('.admin-editor-block-panel')
|
|
)
|
|
|
|
/**
|
|
* 블록 패널 편집 중 상태를 유지한다.
|
|
* @returns {void}
|
|
*/
|
|
const ensureBlockPanelEngaged = () => {
|
|
window.clearTimeout(blockPanelFocusTimer)
|
|
isBlockPanelEngaged.value = true
|
|
syncBlockPanelState()
|
|
}
|
|
|
|
/**
|
|
* 커서 줄 기준 활성 블록(이미지·갤러리·임베드)
|
|
* @returns {Object|null}
|
|
*/
|
|
const activeBlockContext = computed(() => resolveActiveBlockContext(
|
|
markdownValue.value,
|
|
activeLogicalLineIndex.value
|
|
))
|
|
|
|
/** @deprecated 내부 호환 alias */
|
|
const activeMediaBlock = activeBlockContext
|
|
|
|
/**
|
|
* 블록 설정 패널 표시 여부
|
|
* @returns {boolean}
|
|
*/
|
|
const isBlockPanelVisible = computed(() => activeMode.value === 'write'
|
|
&& Boolean(activeBlockContext.value)
|
|
&& (isTextareaFocused.value || isBlockPanelEngaged.value))
|
|
|
|
/**
|
|
* 부모(글 설정 사이드바 오버레이)에 패널 상태를 전달한다.
|
|
* @returns {void}
|
|
*/
|
|
const syncBlockPanelState = () => {
|
|
emit('block-panel', {
|
|
open: isBlockPanelVisible.value,
|
|
panel: activeBlockContext.value
|
|
})
|
|
}
|
|
|
|
watch([isBlockPanelVisible, activeBlockContext], syncBlockPanelState, { deep: true })
|
|
|
|
/**
|
|
* 본문의 논리 줄(`\\n` 기준) 개수. 빈 본문은 1줄로 본다.
|
|
* @returns {number}
|
|
*/
|
|
const gutterLineCount = computed(() => {
|
|
const raw = markdownValue.value ?? ''
|
|
const n = raw.split('\n').length
|
|
|
|
return Math.max(1, n)
|
|
})
|
|
|
|
/**
|
|
* textarea와 줄 번호 거터의 세로 스크롤을 맞춘다.
|
|
* @returns {void}
|
|
*/
|
|
const syncGutterScroll = () => {
|
|
const gutter = gutterRef.value
|
|
const textarea = textareaRef.value
|
|
|
|
if (gutter && textarea) {
|
|
gutter.scrollTop = textarea.scrollTop
|
|
}
|
|
}
|
|
|
|
/**
|
|
* textarea 포커스 진입
|
|
* @returns {void}
|
|
*/
|
|
const onTextareaFocus = () => {
|
|
window.clearTimeout(blockPanelFocusTimer)
|
|
isTextareaFocused.value = true
|
|
refreshCaretLogicalLine()
|
|
}
|
|
|
|
/**
|
|
* textarea 포커스 이탈(블록 패널으로 이동 시 유지)
|
|
* @returns {void}
|
|
*/
|
|
const onTextareaBlur = () => {
|
|
blockPanelFocusTimer = window.setTimeout(() => {
|
|
if (isBlockPanelEngaged.value || isFocusInBlockPanel()) {
|
|
return
|
|
}
|
|
|
|
isTextareaFocused.value = false
|
|
syncBlockPanelState()
|
|
}, 0)
|
|
}
|
|
|
|
/**
|
|
* 블록 패널 포커스 진입(AdminPostForm 오버레이에서 호출)
|
|
* @returns {void}
|
|
*/
|
|
const handleBlockPanelFocusIn = () => {
|
|
window.clearTimeout(blockPanelFocusTimer)
|
|
isBlockPanelEngaged.value = true
|
|
syncBlockPanelState()
|
|
}
|
|
|
|
/**
|
|
* 블록 패널 포커스 이탈
|
|
* @returns {void}
|
|
*/
|
|
const handleBlockPanelFocusOut = () => {
|
|
blockPanelFocusTimer = window.setTimeout(() => {
|
|
if (isFocusInBlockPanel()) {
|
|
return
|
|
}
|
|
|
|
isBlockPanelEngaged.value = false
|
|
|
|
if (!isTextareaFocused.value) {
|
|
syncBlockPanelState()
|
|
}
|
|
}, 50)
|
|
}
|
|
|
|
/**
|
|
* 커서 위치 기준으로 활성 논리 줄 인덱스를 갱신하고 거터 스크롤을 맞춘다.
|
|
* @returns {void}
|
|
*/
|
|
const refreshCaretLogicalLine = () => {
|
|
nextTick(() => {
|
|
const textarea = textareaRef.value
|
|
|
|
if (!textarea) {
|
|
return
|
|
}
|
|
|
|
const value = markdownValue.value ?? ''
|
|
const pos = Math.min(textarea.selectionStart, value.length)
|
|
const lineIndex = value.slice(0, pos).split('\n').length - 1
|
|
|
|
lastSelectionState.value = {
|
|
start: Math.min(textarea.selectionStart, value.length),
|
|
end: Math.min(textarea.selectionEnd, value.length),
|
|
scrollTop: textarea.scrollTop
|
|
}
|
|
activeLogicalLineIndex.value = Math.max(0, lineIndex)
|
|
syncGutterScroll()
|
|
syncBlockPanelState()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* textarea 스크롤 시 선택 위치를 기억하고 거터 스크롤을 맞춘다.
|
|
* @returns {void}
|
|
*/
|
|
const onTextareaScroll = () => {
|
|
rememberTextareaSelection()
|
|
syncGutterScroll()
|
|
}
|
|
|
|
/**
|
|
* textarea의 선택 영역과 스크롤 위치를 기억한다.
|
|
* @returns {void}
|
|
*/
|
|
const rememberTextareaSelection = () => {
|
|
const textarea = textareaRef.value
|
|
const value = markdownValue.value ?? ''
|
|
|
|
if (!textarea) {
|
|
lastSelectionState.value = {
|
|
start: value.length,
|
|
end: value.length,
|
|
scrollTop: 0
|
|
}
|
|
return
|
|
}
|
|
|
|
lastSelectionState.value = {
|
|
start: Math.min(textarea.selectionStart, value.length),
|
|
end: Math.min(textarea.selectionEnd, value.length),
|
|
scrollTop: textarea.scrollTop
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 기억한 선택 영역과 스크롤 위치로 작성 textarea 포커스를 복원한다.
|
|
* @returns {void}
|
|
*/
|
|
const restoreTextareaFocus = () => {
|
|
nextTick(() => {
|
|
const textarea = textareaRef.value
|
|
const value = markdownValue.value ?? ''
|
|
|
|
if (!textarea) {
|
|
return
|
|
}
|
|
|
|
const start = Math.min(lastSelectionState.value.start, value.length)
|
|
const end = Math.min(lastSelectionState.value.end, value.length)
|
|
|
|
textarea.focus()
|
|
textarea.setSelectionRange(start, end)
|
|
textarea.scrollTop = lastSelectionState.value.scrollTop
|
|
refreshCaretLogicalLine()
|
|
})
|
|
}
|
|
|
|
watch(() => props.modelValue, () => {
|
|
if (isBlockPanelEngaged.value) {
|
|
syncBlockPanelState()
|
|
return
|
|
}
|
|
|
|
refreshCaretLogicalLine()
|
|
})
|
|
|
|
watch(activeMode, (mode) => {
|
|
if (mode === 'write') {
|
|
restoreTextareaFocus()
|
|
return
|
|
}
|
|
|
|
nextTick(() => {
|
|
previewRef.value?.focus()
|
|
})
|
|
})
|
|
|
|
/**
|
|
* 작성 모드와 미리보기 모드를 전환한다.
|
|
* @returns {void}
|
|
*/
|
|
const toggleEditorMode = () => {
|
|
if (activeMode.value === 'write') {
|
|
rememberTextareaSelection()
|
|
}
|
|
|
|
activeMode.value = activeMode.value === 'write' ? 'preview' : 'write'
|
|
}
|
|
|
|
/**
|
|
* 작성/미리보기 모드를 지정한다.
|
|
* @param {'write'|'preview'} mode - 전환할 모드
|
|
* @returns {void}
|
|
*/
|
|
const setEditorMode = (mode) => {
|
|
if (activeMode.value === mode) {
|
|
return
|
|
}
|
|
|
|
if (activeMode.value === 'write') {
|
|
rememberTextareaSelection()
|
|
}
|
|
|
|
activeMode.value = mode
|
|
}
|
|
|
|
onMounted(() => {
|
|
/**
|
|
* document selectionchange에서 작성 textarea가 포커스일 때만 활성 줄을 갱신한다.
|
|
* @returns {void}
|
|
*/
|
|
const onSelectionChange = () => {
|
|
if (activeMode.value !== 'write') {
|
|
return
|
|
}
|
|
|
|
const textarea = textareaRef.value
|
|
|
|
if (!textarea || document.activeElement !== textarea) {
|
|
return
|
|
}
|
|
|
|
refreshCaretLogicalLine()
|
|
}
|
|
|
|
/**
|
|
* 에디터 안에서 Cmd/Ctrl+E를 누르면 작성/미리보기 모드를 전환한다.
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const onDocumentKeydown = (event) => {
|
|
const root = editorRootRef.value
|
|
|
|
if (!root || !root.contains(document.activeElement)) {
|
|
return
|
|
}
|
|
|
|
if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'e') {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
toggleEditorMode()
|
|
}
|
|
|
|
document.addEventListener('selectionchange', onSelectionChange)
|
|
document.addEventListener('keydown', onDocumentKeydown)
|
|
|
|
onBeforeUnmount(() => {
|
|
window.clearTimeout(blockPanelFocusTimer)
|
|
document.removeEventListener('selectionchange', onSelectionChange)
|
|
document.removeEventListener('keydown', onDocumentKeydown)
|
|
})
|
|
|
|
refreshCaretLogicalLine()
|
|
syncBlockPanelState()
|
|
})
|
|
|
|
/**
|
|
* 본문 에디터에 포커스한다.
|
|
* @returns {void}
|
|
*/
|
|
const focusFirstBlock = () => {
|
|
if (activeMode.value !== 'write') {
|
|
activeMode.value = 'write'
|
|
}
|
|
|
|
nextTick(() => {
|
|
textareaRef.value?.focus()
|
|
refreshCaretLogicalLine()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* textarea 선택 영역 정보를 반환한다.
|
|
* @returns {{ start: number, end: number, value: string }} 선택 정보
|
|
*/
|
|
const getSelectionState = () => {
|
|
const textarea = textareaRef.value
|
|
const value = markdownValue.value
|
|
|
|
if (!textarea) {
|
|
return {
|
|
start: value.length,
|
|
end: value.length,
|
|
value
|
|
}
|
|
}
|
|
|
|
return {
|
|
start: textarea.selectionStart,
|
|
end: textarea.selectionEnd,
|
|
value
|
|
}
|
|
}
|
|
|
|
/**
|
|
* textarea 커서 위치를 갱신한다.
|
|
* @param {number} start - 시작 위치
|
|
* @param {number} end - 끝 위치
|
|
* @returns {void}
|
|
*/
|
|
const setTextareaSelection = (start, end = start) => {
|
|
nextTick(() => {
|
|
const textarea = textareaRef.value
|
|
if (!textarea) {
|
|
return
|
|
}
|
|
|
|
textarea.focus()
|
|
textarea.setSelectionRange(start, end)
|
|
refreshCaretLogicalLine()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 선택 영역을 지정 문자열로 교체한다.
|
|
* @param {string} replacement - 대체 문자열
|
|
* @param {number} cursorOffset - 교체 문자열 안 커서 위치
|
|
* @param {number|null} selectionLength - 선택 길이
|
|
* @returns {void}
|
|
*/
|
|
const replaceSelection = (replacement, cursorOffset = replacement.length, selectionLength = null) => {
|
|
const { start, end, value } = getSelectionState()
|
|
markdownValue.value = `${value.slice(0, start)}${replacement}${value.slice(end)}`
|
|
const nextStart = start + cursorOffset
|
|
setTextareaSelection(nextStart, nextStart + (selectionLength ?? 0))
|
|
}
|
|
|
|
/**
|
|
* Enter 입력을 문단/줄바꿈 규칙에 맞게 처리한다.
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {boolean} 직접 처리했는지 여부
|
|
*/
|
|
const handleParagraphEnter = (event) => {
|
|
if (event.key !== 'Enter' || event.metaKey || event.ctrlKey || event.altKey || event.isComposing) {
|
|
return false
|
|
}
|
|
|
|
if (!event.shiftKey) {
|
|
return false
|
|
}
|
|
|
|
event.preventDefault()
|
|
replaceSelection('\\\n')
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* 블록형 마크다운 조각을 커서 위치에 삽입한다.
|
|
* @param {string} snippet - 삽입할 마크다운
|
|
* @returns {void}
|
|
*/
|
|
const insertBlockSnippet = (snippet) => {
|
|
const { start, end, value } = getSelectionState()
|
|
const needsBeforeLine = start > 0 && value[start - 1] !== '\n'
|
|
const needsAfterLine = end < value.length && value[end] !== '\n'
|
|
const replacement = `${needsBeforeLine ? '\n\n' : ''}${snippet}${needsAfterLine ? '\n\n' : ''}`
|
|
replaceSelection(replacement)
|
|
}
|
|
|
|
/**
|
|
* 선택 텍스트를 인라인 마크다운으로 감싼다.
|
|
* @param {string} prefix - 앞 표식
|
|
* @param {string} suffix - 뒤 표식
|
|
* @param {string} placeholder - 선택이 없을 때 들어갈 텍스트
|
|
* @returns {void}
|
|
*/
|
|
const wrapInline = (prefix, suffix, placeholder) => {
|
|
const { start, end, value } = getSelectionState()
|
|
const selected = value.slice(start, end)
|
|
const inner = selected || placeholder
|
|
const replacement = `${prefix}${inner}${suffix}`
|
|
markdownValue.value = `${value.slice(0, start)}${replacement}${value.slice(end)}`
|
|
const selectionStart = start + prefix.length
|
|
setTextareaSelection(selectionStart, selectionStart + inner.length)
|
|
}
|
|
|
|
/**
|
|
* 선택된 줄을 변환한다.
|
|
* @param {(line: string) => string} transformLine - 줄 변환 함수
|
|
* @returns {void}
|
|
*/
|
|
const transformSelectedLines = (transformLine) => {
|
|
const { start, end, value } = getSelectionState()
|
|
const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1
|
|
const nextLineBreak = value.indexOf('\n', end)
|
|
const lineEnd = nextLineBreak === -1 ? value.length : nextLineBreak
|
|
const selectedBlock = value.slice(lineStart, lineEnd)
|
|
const replacement = selectedBlock.split('\n').map(transformLine).join('\n')
|
|
|
|
markdownValue.value = `${value.slice(0, lineStart)}${replacement}${value.slice(lineEnd)}`
|
|
setTextareaSelection(lineStart, lineStart + replacement.length)
|
|
}
|
|
|
|
/**
|
|
* 제목 마크다운을 적용한다.
|
|
* @param {number} level - 제목 레벨
|
|
* @returns {void}
|
|
*/
|
|
const applyHeading = (level) => {
|
|
transformSelectedLines((line) => {
|
|
const text = line.replace(/^#{1,6}\s+/, '').trimStart()
|
|
return `${'#'.repeat(level)} ${text || '제목'}`
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 인용 마크다운을 적용한다.
|
|
* @returns {void}
|
|
*/
|
|
const applyQuote = () => {
|
|
transformSelectedLines((line) => line.startsWith('> ') ? line : `> ${line}`)
|
|
}
|
|
|
|
/**
|
|
* 목록 마크다운을 적용한다.
|
|
* @returns {void}
|
|
*/
|
|
const applyList = () => {
|
|
transformSelectedLines((line) => line.startsWith('- ') ? line : `- ${line}`)
|
|
}
|
|
|
|
/**
|
|
* 코드 블록을 삽입한다.
|
|
* @returns {void}
|
|
*/
|
|
const insertCodeBlock = () => {
|
|
const { start, end, value } = getSelectionState()
|
|
const selected = value.slice(start, end) || 'code'
|
|
const snippet = `\`\`\`\n${selected}\n\`\`\``
|
|
replaceSelection(snippet, 4, selected.length)
|
|
}
|
|
|
|
/**
|
|
* 이미지 마크다운 문자열을 생성한다.
|
|
* @param {{ url: string, alt?: string, width?: string }} image - 이미지 정보
|
|
* @returns {string} 이미지 마크다운
|
|
*/
|
|
const createImageMarkdown = (image) => serializeImageMarkdown(image)
|
|
|
|
/**
|
|
* 지정 줄 범위를 새 줄 목록으로 교체한다.
|
|
* @param {number} startLine - 시작 줄
|
|
* @param {number} endLine - 끝 줄
|
|
* @param {string[]} replacementLines - 대체 줄 목록
|
|
* @param {boolean} focusEditor - 교체 후 textarea에 포커스를 돌릴지 여부
|
|
* @returns {void}
|
|
*/
|
|
const replaceLineRange = (startLine, endLine, replacementLines, focusEditor = true) => {
|
|
const lines = (markdownValue.value || '').split('\n')
|
|
const nextLines = [
|
|
...lines.slice(0, startLine),
|
|
...replacementLines,
|
|
...lines.slice(endLine + 1)
|
|
]
|
|
|
|
markdownValue.value = nextLines.join('\n')
|
|
|
|
if (focusEditor) {
|
|
setTextareaSelection(nextLines.slice(0, startLine + replacementLines.length).join('\n').length)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 현재 미디어 블록을 이미지 목록 기준으로 다시 작성한다.
|
|
* @param {Array<{ alt: string, url: string, width?: string }>} images - 이미지 목록
|
|
* @returns {void}
|
|
*/
|
|
const replaceActiveMediaImages = (images) => {
|
|
const block = activeMediaBlock.value
|
|
|
|
if (!block) {
|
|
return
|
|
}
|
|
|
|
if (block.kind === 'image') {
|
|
if (!images[0]) {
|
|
replaceLineRange(block.startLine, block.endLine, [], false)
|
|
return
|
|
}
|
|
|
|
replaceLineRange(block.startLine, block.endLine, [createImageMarkdown(images[0])], false)
|
|
return
|
|
}
|
|
|
|
if (!images.length) {
|
|
replaceLineRange(block.startLine, block.endLine, [], false)
|
|
return
|
|
}
|
|
|
|
replaceLineRange(block.startLine, block.endLine, [
|
|
':::gallery',
|
|
...images.map(createImageMarkdown),
|
|
':::'
|
|
], false)
|
|
}
|
|
|
|
/**
|
|
* 현재 미디어 블록의 특정 이미지를 수정한다.
|
|
* @param {number} imageIndex - 이미지 인덱스
|
|
* @param {Partial<{ alt: string, url: string, width: string }>} patch - 변경 값
|
|
* @returns {void}
|
|
*/
|
|
const updateActiveMediaImage = (imageIndex, patch) => {
|
|
const block = activeMediaBlock.value
|
|
|
|
if (!block) {
|
|
return
|
|
}
|
|
|
|
ensureBlockPanelEngaged()
|
|
const images = block.images.map((image, index) => index === imageIndex ? { ...image, ...patch } : image)
|
|
replaceActiveMediaImages(images)
|
|
}
|
|
|
|
/**
|
|
* 현재 미디어 이미지의 파일명 대체 텍스트 사용 여부를 바꾼다.
|
|
* @param {number} imageIndex - 이미지 인덱스
|
|
* @param {boolean} enabled - 파일명 사용 여부
|
|
* @returns {void}
|
|
*/
|
|
const setActiveMediaUseAlt = (imageIndex, enabled) => {
|
|
updateActiveMediaImage(imageIndex, { useAlt: enabled })
|
|
}
|
|
|
|
/**
|
|
* 현재 갤러리 이미지 순서를 바꾼다.
|
|
* @param {number} imageIndex - 이동할 이미지 인덱스
|
|
* @param {-1|1} direction - 이동 방향
|
|
* @returns {void}
|
|
*/
|
|
const moveActiveGalleryImage = (imageIndex, direction) => {
|
|
const block = activeMediaBlock.value
|
|
|
|
if (!block || block.kind !== 'gallery') {
|
|
return
|
|
}
|
|
|
|
const nextIndex = imageIndex + direction
|
|
|
|
if (nextIndex < 0 || nextIndex >= block.images.length) {
|
|
return
|
|
}
|
|
|
|
const images = [...block.images]
|
|
const [target] = images.splice(imageIndex, 1)
|
|
images.splice(nextIndex, 0, target)
|
|
replaceActiveMediaImages(images)
|
|
}
|
|
|
|
/**
|
|
* 현재 미디어 블록에서 이미지를 삭제한다.
|
|
* @param {number} imageIndex - 삭제할 이미지 인덱스
|
|
* @returns {void}
|
|
*/
|
|
const removeActiveMediaImage = (imageIndex) => {
|
|
const block = activeMediaBlock.value
|
|
|
|
if (!block) {
|
|
return
|
|
}
|
|
|
|
replaceActiveMediaImages(block.images.filter((_, index) => index !== imageIndex))
|
|
}
|
|
|
|
/**
|
|
* 현재 갤러리에 이미지를 추가한다.
|
|
* @param {Array<{ url: string, alt?: string, width?: string }>} images - 추가 이미지 목록
|
|
* @returns {void}
|
|
*/
|
|
const appendImagesToActiveGallery = (images) => {
|
|
const block = activeMediaBlock.value
|
|
|
|
if (!block || block.kind !== 'gallery') {
|
|
insertGallery(images)
|
|
return
|
|
}
|
|
|
|
replaceActiveMediaImages([...block.images, ...images])
|
|
}
|
|
|
|
/**
|
|
* 현재 임베드 URL을 수정한다.
|
|
* @param {string} url - 임베드 URL
|
|
* @returns {void}
|
|
*/
|
|
const updateActiveEmbedUrl = (url) => {
|
|
const block = activeBlockContext.value
|
|
|
|
if (!block || block.kind !== 'embed') {
|
|
return
|
|
}
|
|
|
|
ensureBlockPanelEngaged()
|
|
const trimmed = String(url || '').trim()
|
|
|
|
if (!trimmed) {
|
|
replaceLineRange(block.startLine, block.endLine, [], false)
|
|
return
|
|
}
|
|
|
|
replaceLineRange(block.startLine, block.endLine, [
|
|
':::embed',
|
|
trimmed,
|
|
':::'
|
|
], false)
|
|
}
|
|
|
|
/**
|
|
* 이미지 마크다운을 삽입한다.
|
|
* @param {{ url: string, alt?: string, width?: string }} image - 이미지 정보
|
|
* @returns {void}
|
|
*/
|
|
const insertImage = (image) => {
|
|
insertBlockSnippet(createImageMarkdown(image))
|
|
}
|
|
|
|
/**
|
|
* 갤러리 마크다운을 삽입한다.
|
|
* @param {Array<{ url: string, alt?: string, width?: string }>} images - 이미지 목록
|
|
* @returns {void}
|
|
*/
|
|
const insertGallery = (images) => {
|
|
if (!images.length) {
|
|
return
|
|
}
|
|
|
|
insertBlockSnippet([':::gallery', ...images.map(createImageMarkdown), ':::'].join('\n'))
|
|
}
|
|
|
|
/**
|
|
* 미디어 목록을 불러온다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const fetchMediaItems = async () => {
|
|
isLoadingMedia.value = true
|
|
|
|
try {
|
|
mediaItems.value = await $fetch('/admin/api/media')
|
|
} finally {
|
|
isLoadingMedia.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 미디어 선택 창을 연다.
|
|
* @param {'image'|'gallery'|'active-gallery'} target - 삽입 대상
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const openMediaPicker = async (target) => {
|
|
mediaPickerTarget.value = target
|
|
activeMediaPickerTab.value = 'library'
|
|
mediaSearchQuery.value = ''
|
|
selectedMediaUrls.value = []
|
|
isMediaPickerOpen.value = true
|
|
await fetchMediaItems()
|
|
}
|
|
|
|
defineExpose({
|
|
focusFirstBlock,
|
|
toggleEditorMode,
|
|
activeMode,
|
|
handleBlockPanelFocusIn,
|
|
handleBlockPanelFocusOut,
|
|
updateActiveMediaImage,
|
|
setActiveMediaUseAlt,
|
|
moveActiveGalleryImage,
|
|
removeActiveMediaImage,
|
|
appendImagesToActiveGallery,
|
|
updateActiveEmbedUrl,
|
|
openMediaPicker
|
|
})
|
|
|
|
/**
|
|
* 미디어 선택 창을 닫는다.
|
|
* @returns {void}
|
|
*/
|
|
const closeMediaPicker = () => {
|
|
isMediaPickerOpen.value = false
|
|
selectedMediaUrls.value = []
|
|
activeMediaPickerTab.value = 'library'
|
|
mediaSearchQuery.value = ''
|
|
}
|
|
|
|
/**
|
|
* 미디어 항목이 검색어와 일치하는지 확인한다.
|
|
* @param {Object} item - 미디어 항목
|
|
* @param {string} query - 소문자 검색어
|
|
* @returns {boolean} 일치 여부
|
|
*/
|
|
const mediaItemMatchesQuery = (item, query) => {
|
|
if (!query) {
|
|
return true
|
|
}
|
|
|
|
return [item.name, item.title, item.url]
|
|
.some((value) => String(value || '').toLowerCase().includes(query))
|
|
}
|
|
|
|
/**
|
|
* 검색어로 필터링된 미디어 목록
|
|
* @returns {Array<Object>} 필터링된 미디어 목록
|
|
*/
|
|
const filteredMediaItems = computed(() => {
|
|
const query = mediaSearchQuery.value.trim().toLowerCase()
|
|
|
|
if (!query) {
|
|
return mediaItems.value
|
|
}
|
|
|
|
return mediaItems.value.filter((item) => mediaItemMatchesQuery(item, query))
|
|
})
|
|
|
|
/**
|
|
* 미디어 선택 상태를 토글한다.
|
|
* @param {Object} mediaItem - 미디어 항목
|
|
* @returns {void}
|
|
*/
|
|
const toggleMediaSelection = (mediaItem) => {
|
|
if (mediaPickerTarget.value === 'image') {
|
|
selectedMediaUrls.value = [mediaItem.url]
|
|
return
|
|
}
|
|
|
|
selectedMediaUrls.value = selectedMediaUrls.value.includes(mediaItem.url)
|
|
? selectedMediaUrls.value.filter((url) => url !== mediaItem.url)
|
|
: [...selectedMediaUrls.value, mediaItem.url]
|
|
}
|
|
|
|
/**
|
|
* 선택한 미디어를 마크다운에 삽입한다.
|
|
* @returns {void}
|
|
*/
|
|
const applyMediaSelection = () => {
|
|
const selectedItems = selectedMediaUrls.value
|
|
.map((url) => mediaItems.value.find((item) => item.url === url))
|
|
.filter(Boolean)
|
|
|
|
if (mediaPickerTarget.value === 'image') {
|
|
const [item] = selectedItems
|
|
if (item) {
|
|
insertImage({
|
|
url: item.url,
|
|
useAlt: false,
|
|
caption: ''
|
|
})
|
|
}
|
|
} else if (mediaPickerTarget.value === 'active-gallery') {
|
|
appendImagesToActiveGallery(selectedItems.map((item) => ({
|
|
url: item.url,
|
|
useAlt: false,
|
|
caption: ''
|
|
})))
|
|
} else {
|
|
insertGallery(selectedItems.map((item) => ({
|
|
url: item.url,
|
|
useAlt: false,
|
|
caption: ''
|
|
})))
|
|
}
|
|
|
|
closeMediaPicker()
|
|
}
|
|
|
|
/**
|
|
* 이미지 파일을 업로드한다.
|
|
* @param {FileList|Array<File>} files - 업로드 파일 목록
|
|
* @returns {Promise<Array<Object>>} 업로드된 파일 목록
|
|
*/
|
|
const uploadImages = async (files) => {
|
|
const formData = new FormData()
|
|
Array.from(files).forEach((file) => {
|
|
formData.append('files', file)
|
|
})
|
|
|
|
const result = await $fetch('/admin/api/uploads', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
|
|
return result.files || []
|
|
}
|
|
|
|
/**
|
|
* 업로드 파일을 현재 커서 위치에 삽입한다.
|
|
* @param {FileList|Array<File>} files - 파일 목록
|
|
* @param {'image'|'gallery'} target - 삽입 대상
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadAndInsert = async (files, target = 'image') => {
|
|
if (!files?.length) {
|
|
return
|
|
}
|
|
|
|
isUploading.value = true
|
|
|
|
try {
|
|
const uploadedFiles = await uploadImages(files)
|
|
const images = uploadedFiles.map((file) => ({
|
|
url: file.url,
|
|
useAlt: false,
|
|
caption: ''
|
|
}))
|
|
|
|
if (target === 'gallery') {
|
|
insertGallery(images)
|
|
} else if (images[0]) {
|
|
insertImage(images[0])
|
|
}
|
|
|
|
mediaItems.value = await $fetch('/admin/api/media').catch(() => mediaItems.value)
|
|
} finally {
|
|
isUploading.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 인라인 HTML 노드를 마크다운 문자열로 변환한다.
|
|
* @param {Node} node - HTML 노드
|
|
* @returns {string} 마크다운 문자열
|
|
*/
|
|
const convertHtmlInlineNodeToMarkdown = (node) => {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
return node.textContent || ''
|
|
}
|
|
|
|
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
return ''
|
|
}
|
|
|
|
const element = /** @type {HTMLElement} */ (node)
|
|
const tagName = element.tagName.toLowerCase()
|
|
const childText = Array.from(element.childNodes).map(convertHtmlInlineNodeToMarkdown).join('')
|
|
|
|
if (tagName === 'strong' || tagName === 'b') {
|
|
return `**${childText}**`
|
|
}
|
|
|
|
if (tagName === 'em' || tagName === 'i') {
|
|
return `*${childText}*`
|
|
}
|
|
|
|
if (tagName === 'code') {
|
|
return `\`${childText}\``
|
|
}
|
|
|
|
if (tagName === 'a') {
|
|
const href = element.getAttribute('href')
|
|
return href ? `[${childText || href}](${href})` : childText
|
|
}
|
|
|
|
if (tagName === 'img') {
|
|
const src = element.getAttribute('src')
|
|
const alt = element.getAttribute('alt') || ''
|
|
return src ? `` : ''
|
|
}
|
|
|
|
if (tagName === 'br') {
|
|
return '\n'
|
|
}
|
|
|
|
return childText
|
|
}
|
|
|
|
/**
|
|
* HTML 블록 노드를 마크다운 문자열로 변환한다.
|
|
* @param {Node} node - HTML 노드
|
|
* @param {number} listIndex - 순서 목록 번호
|
|
* @returns {string} 마크다운 문자열
|
|
*/
|
|
const convertHtmlBlockNodeToMarkdown = (node, listIndex = 1) => {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
return (node.textContent || '').trim()
|
|
}
|
|
|
|
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
return ''
|
|
}
|
|
|
|
const element = /** @type {HTMLElement} */ (node)
|
|
const tagName = element.tagName.toLowerCase()
|
|
const inlineText = Array.from(element.childNodes).map(convertHtmlInlineNodeToMarkdown).join('').trim()
|
|
|
|
if (/^h[1-6]$/.test(tagName)) {
|
|
return `${'#'.repeat(Number(tagName.slice(1)))} ${inlineText}`
|
|
}
|
|
|
|
if (tagName === 'p') {
|
|
return inlineText
|
|
}
|
|
|
|
if (tagName === 'blockquote') {
|
|
return inlineText.split('\n').map((line) => `> ${line}`).join('\n')
|
|
}
|
|
|
|
if (tagName === 'pre') {
|
|
return `\`\`\`\n${element.textContent?.trim() || ''}\n\`\`\``
|
|
}
|
|
|
|
if (tagName === 'li') {
|
|
return `${listIndex}. ${inlineText}`
|
|
}
|
|
|
|
if (tagName === 'ul' || tagName === 'ol') {
|
|
return Array.from(element.children)
|
|
.filter((child) => child.tagName.toLowerCase() === 'li')
|
|
.map((child, index) => {
|
|
const marker = tagName === 'ol' ? `${index + 1}.` : '-'
|
|
const text = Array.from(child.childNodes).map(convertHtmlInlineNodeToMarkdown).join('').trim()
|
|
return `${marker} ${text}`
|
|
})
|
|
.join('\n')
|
|
}
|
|
|
|
if (tagName === 'div' || tagName === 'section' || tagName === 'article') {
|
|
const childBlocks = Array.from(element.childNodes)
|
|
.map(convertHtmlBlockNodeToMarkdown)
|
|
.filter(Boolean)
|
|
|
|
return childBlocks.length ? childBlocks.join('\n\n') : inlineText
|
|
}
|
|
|
|
return inlineText
|
|
}
|
|
|
|
/**
|
|
* 클립보드 HTML을 마크다운 문서 조각으로 변환한다.
|
|
* @param {string} html - HTML 문자열
|
|
* @returns {string} 마크다운 문자열
|
|
*/
|
|
const convertHtmlToMarkdown = (html) => {
|
|
const document = new DOMParser().parseFromString(html, 'text/html')
|
|
|
|
return Array.from(document.body.childNodes)
|
|
.map(convertHtmlBlockNodeToMarkdown)
|
|
.filter(Boolean)
|
|
.join('\n\n')
|
|
.replace(/\n{3,}/g, '\n\n')
|
|
.trim()
|
|
}
|
|
|
|
/**
|
|
* 파일 입력 변경 처리
|
|
* @param {Event} event - 파일 입력 이벤트
|
|
* @param {'image'|'gallery'} target - 삽입 대상
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const handleFileInput = async (event, target) => {
|
|
await uploadAndInsert(event.target.files, target)
|
|
event.target.value = ''
|
|
}
|
|
|
|
/**
|
|
* 미디어 모달 업로드 탭에서 파일을 삽입한다.
|
|
* @param {FileList|Array<File>} files - 업로드 파일 목록
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadFromMediaModal = async (files) => {
|
|
if (!files?.length) {
|
|
return
|
|
}
|
|
|
|
const target = mediaPickerTarget.value === 'gallery' || mediaPickerTarget.value === 'active-gallery'
|
|
? 'gallery'
|
|
: 'image'
|
|
|
|
await uploadAndInsert(files, target)
|
|
closeMediaPicker()
|
|
}
|
|
|
|
/**
|
|
* 미디어 모달 업로드 영역에 파일을 드롭한다.
|
|
* @param {DragEvent} event - 드롭 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const handleMediaModalDrop = async (event) => {
|
|
const files = Array.from(event.dataTransfer?.files || []).filter((file) => file.type.startsWith('image/'))
|
|
|
|
if (!files.length) {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
await uploadFromMediaModal(files)
|
|
}
|
|
|
|
/**
|
|
* 미디어 모달의 삽입 대상 라벨을 반환한다.
|
|
* @returns {string} 모달 제목
|
|
*/
|
|
const mediaPickerTitle = computed(() => {
|
|
if (mediaPickerTarget.value === 'gallery' || mediaPickerTarget.value === 'active-gallery') {
|
|
return '갤러리 이미지 선택'
|
|
}
|
|
|
|
return '이미지 선택'
|
|
})
|
|
|
|
/**
|
|
* 미디어 모달에서 다중 선택 여부를 반환한다.
|
|
* @returns {boolean} 다중 선택 여부
|
|
*/
|
|
const isGalleryMediaPicker = computed(() => mediaPickerTarget.value === 'gallery'
|
|
|| mediaPickerTarget.value === 'active-gallery')
|
|
|
|
/**
|
|
* 붙여넣은 이미지 파일을 업로드한다.
|
|
* @param {ClipboardEvent} event - 붙여넣기 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const handlePaste = async (event) => {
|
|
const imageFiles = Array.from(event.clipboardData?.files || []).filter((file) => file.type.startsWith('image/'))
|
|
|
|
if (!imageFiles.length) {
|
|
const html = event.clipboardData?.getData('text/html')
|
|
|
|
if (html) {
|
|
const markdown = convertHtmlToMarkdown(html)
|
|
|
|
if (markdown) {
|
|
event.preventDefault()
|
|
replaceSelection(markdown)
|
|
}
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
await uploadAndInsert(imageFiles, imageFiles.length > 1 ? 'gallery' : 'image')
|
|
}
|
|
|
|
/**
|
|
* 드롭한 이미지 파일을 업로드한다.
|
|
* @param {DragEvent} event - 드롭 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const handleDrop = async (event) => {
|
|
const imageFiles = Array.from(event.dataTransfer?.files || []).filter((file) => file.type.startsWith('image/'))
|
|
|
|
if (!imageFiles.length) {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
await uploadAndInsert(imageFiles, imageFiles.length > 1 ? 'gallery' : 'image')
|
|
}
|
|
|
|
/**
|
|
* 키보드 단축키를 처리한다.
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const handleKeydown = (event) => {
|
|
if (handleParagraphEnter(event)) {
|
|
return
|
|
}
|
|
|
|
if (!(event.metaKey || event.ctrlKey)) {
|
|
return
|
|
}
|
|
|
|
const key = event.key.toLowerCase()
|
|
|
|
if (key === 'b') {
|
|
event.preventDefault()
|
|
wrapInline('**', '**', '굵은 글씨')
|
|
} else if (key === 'i') {
|
|
event.preventDefault()
|
|
wrapInline('*', '*', '기울임')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="editorRootRef" class="admin-markdown-editor grid gap-3">
|
|
<Teleport v-if="activeMode === 'write'" :to="toolbarTeleportTo">
|
|
<div class="admin-markdown-editor__toolbar flex w-full min-h-[40px] items-center gap-1.5 border-b border-[#e3e6e8] bg-white px-8 py-1.5">
|
|
<div class="admin-markdown-editor__toolbar-tools flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="applyHeading(1)">
|
|
H1
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="applyHeading(2)">
|
|
H2
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="applyHeading(3)">
|
|
H3
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-bold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="wrapInline('**', '**', '굵은 글씨')">
|
|
B
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm italic text-[#394047] hover:bg-[#eff1f2]" type="button" @click="wrapInline('*', '*', '기울임')">
|
|
I
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 font-mono text-sm text-[#394047] hover:bg-[#eff1f2]" type="button" @click="wrapInline('`', '`', 'code')">
|
|
Code
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="applyQuote">
|
|
인용
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="applyList">
|
|
목록
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="insertCodeBlock">
|
|
코드블록
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="insertBlockSnippet('---')">
|
|
구분선
|
|
</button>
|
|
<span class="admin-markdown-editor__divider mx-1 h-6 w-px bg-[#e3e6e8]" aria-hidden="true" />
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="openMediaPicker('image')">
|
|
이미지
|
|
</button>
|
|
<button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="openMediaPicker('gallery')">
|
|
갤러리
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
|
|
<Teleport v-if="modeToggleTeleportTo" :to="modeToggleTeleportTo">
|
|
<button
|
|
class="admin-markdown-editor__mode-toggle inline-flex size-8 shrink-0 items-center justify-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8e9cac]"
|
|
type="button"
|
|
:aria-label="activeMode === 'write' ? '미리보기로 전환' : '작성 모드로 전환'"
|
|
@click="toggleEditorMode"
|
|
>
|
|
<svg
|
|
v-if="activeMode === 'write'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="admin-markdown-editor__mode-icon lucide-book-open"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M12 7v14" />
|
|
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="admin-markdown-editor__mode-icon lucide-edit-3"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M13 21h8" />
|
|
<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
|
|
</svg>
|
|
</button>
|
|
</Teleport>
|
|
|
|
<div v-if="activeMode === 'write'" class="admin-markdown-editor__write relative">
|
|
<div class="admin-markdown-editor__editor-surface min-h-[620px]">
|
|
<div
|
|
ref="gutterRef"
|
|
class="admin-markdown-editor__gutter absolute bottom-0 left-[-40px] top-0 w-10 select-none overflow-y-hidden overflow-x-hidden py-5 font-mono text-[13px] leading-7 text-[#a0a8b0]"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
v-for="ln in gutterLineCount"
|
|
:key="`gutter-line-${ln}`"
|
|
class="admin-markdown-editor__gutter-line min-h-[28px] pr-2 text-right tabular-nums"
|
|
>
|
|
{{ ln }}
|
|
</div>
|
|
</div>
|
|
<textarea
|
|
ref="textareaRef"
|
|
v-model="markdownValue"
|
|
class="admin-markdown-editor__textarea min-h-[620px] w-full resize-y border-0 bg-transparent py-5 pl-0 pr-5 text-[15px] leading-7 text-[#15171a] outline-none transition-colors placeholder:text-[#8e9cac] focus:ring-0"
|
|
placeholder="마크다운으로 글을 작성하세요."
|
|
spellcheck="false"
|
|
@keydown="handleKeydown"
|
|
@paste="handlePaste"
|
|
@drop="handleDrop"
|
|
@dragover.prevent
|
|
@scroll="onTextareaScroll"
|
|
@input="refreshCaretLogicalLine"
|
|
@click="refreshCaretLogicalLine"
|
|
@keyup="refreshCaretLogicalLine"
|
|
@select="refreshCaretLogicalLine"
|
|
@focus="onTextareaFocus"
|
|
@blur="onTextareaBlur"
|
|
/>
|
|
</div>
|
|
<div v-if="isUploading" class="admin-markdown-editor__uploading absolute right-3 top-3 rounded bg-[#15171a] px-3 py-1.5 text-xs font-semibold text-white">
|
|
업로드 중
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
ref="previewRef"
|
|
class="admin-markdown-editor__preview min-h-[620px] px-0 py-5 text-[#15171a] outline-none"
|
|
style="--site-text: #15171a; --site-muted: #6b7280; --site-panel: #f6f7f8; --site-line: #e3e6e8; --site-accent: #2eb6ea;"
|
|
tabindex="0"
|
|
>
|
|
<ContentMarkdownRenderer v-if="markdownValue.trim()" :content="markdownValue" />
|
|
<p v-else class="admin-markdown-editor__preview-empty text-sm text-[#8e9cac]">
|
|
미리보기할 본문이 없습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="isMediaPickerOpen" class="admin-markdown-editor__media-modal fixed inset-0 z-50 grid place-items-center bg-black/40 px-4 py-6" @click.self="closeMediaPicker">
|
|
<div class="admin-markdown-editor__media-panel flex max-h-[86vh] w-full max-w-5xl flex-col overflow-hidden rounded bg-white shadow-2xl">
|
|
<header class="admin-markdown-editor__media-header flex items-center justify-between border-b border-[#e3e6e8] px-5 py-4">
|
|
<div>
|
|
<h2 class="admin-markdown-editor__media-title text-lg font-bold text-black">
|
|
{{ mediaPickerTitle }}
|
|
</h2>
|
|
<p v-if="activeMediaPickerTab === 'library'" class="admin-markdown-editor__media-count mt-1 text-sm text-[#6b7280]">
|
|
{{ selectedMediaUrls.length }}개 선택됨
|
|
</p>
|
|
</div>
|
|
<button class="admin-markdown-editor__media-close rounded px-3 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="closeMediaPicker">
|
|
닫기
|
|
</button>
|
|
</header>
|
|
|
|
<div class="admin-markdown-editor__media-tabs flex items-center gap-3 border-b border-[#e3e6e8] px-5">
|
|
<div class="flex min-w-0 flex-1 items-center">
|
|
<button
|
|
class="admin-markdown-editor__media-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
|
|
:class="activeMediaPickerTab === 'library' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-[#6b7280] hover:text-[#15171a]'"
|
|
type="button"
|
|
@click="activeMediaPickerTab = 'library'"
|
|
>
|
|
미디어 라이브러리
|
|
</button>
|
|
<button
|
|
class="admin-markdown-editor__media-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
|
|
:class="activeMediaPickerTab === 'upload' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-[#6b7280] hover:text-[#15171a]'"
|
|
type="button"
|
|
@click="activeMediaPickerTab = 'upload'"
|
|
>
|
|
업로드
|
|
</button>
|
|
</div>
|
|
<label class="admin-markdown-editor__media-search mb-px flex w-full max-w-xs shrink-0 items-center py-2">
|
|
<span class="sr-only">파일명 검색</span>
|
|
<input
|
|
v-model="mediaSearchQuery"
|
|
class="admin-markdown-editor__media-search-input w-full rounded border border-[#d7dde2] bg-white px-3 py-1.5 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]/20"
|
|
type="search"
|
|
placeholder="파일명 검색"
|
|
autocomplete="off"
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="admin-markdown-editor__media-body flex-1 overflow-y-auto p-5">
|
|
<template v-if="activeMediaPickerTab === 'library'">
|
|
<div v-if="isLoadingMedia" class="admin-markdown-editor__media-loading py-12 text-center text-sm text-[#8e9cac]">
|
|
불러오는 중
|
|
</div>
|
|
<div v-else-if="filteredMediaItems.length" class="admin-markdown-editor__media-grid grid grid-cols-2 gap-3 md:grid-cols-4">
|
|
<button
|
|
v-for="item in filteredMediaItems"
|
|
:key="item.url"
|
|
class="admin-markdown-editor__media-item group overflow-hidden rounded border bg-white text-left transition"
|
|
:class="selectedMediaUrls.includes(item.url) ? 'border-[3px] border-[#ff7a00] ring-2 ring-[#ff7a00]/40' : 'border border-[#e3e6e8] hover:border-[#8e9cac]'"
|
|
type="button"
|
|
@click="toggleMediaSelection(item)"
|
|
>
|
|
<img class="admin-markdown-editor__media-thumb aspect-[4/3] w-full bg-[#f6f7f8] object-cover" :src="item.url" :alt="item.name || ''">
|
|
<span class="admin-markdown-editor__media-name block truncate px-3 py-2 text-xs font-semibold text-[#394047]">
|
|
{{ item.name || item.url }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div v-else class="admin-markdown-editor__media-empty py-12 text-center text-sm text-[#8e9cac]">
|
|
<template v-if="mediaSearchQuery.trim()">
|
|
「{{ mediaSearchQuery.trim() }}」에 맞는 미디어가 없습니다.
|
|
</template>
|
|
<template v-else>
|
|
선택할 미디어가 없습니다. 업로드 탭에서 이미지를 추가할 수 있습니다.
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<div
|
|
v-else
|
|
class="admin-markdown-editor__media-upload-zone grid min-h-[420px] place-items-center rounded border border-dashed border-[#cfd5da] bg-[#fafafa] text-center"
|
|
@dragover.prevent
|
|
@drop.prevent="handleMediaModalDrop"
|
|
>
|
|
<div class="admin-markdown-editor__media-upload-inner grid gap-3 px-6">
|
|
<p class="admin-markdown-editor__media-upload-title text-lg font-semibold text-[#15171a]">
|
|
파일을 끌어 업로드
|
|
</p>
|
|
<p class="admin-markdown-editor__media-upload-or text-sm text-[#6b7280]">
|
|
또는
|
|
</p>
|
|
<label class="admin-markdown-editor__media-upload-button mx-auto inline-flex h-10 cursor-pointer items-center justify-center rounded border border-[#2b78d0] px-8 text-sm font-semibold text-[#1f6fbf] transition-colors hover:bg-blue-50">
|
|
{{ isUploading ? '업로드 중' : '파일 선택' }}
|
|
<input
|
|
class="sr-only"
|
|
type="file"
|
|
accept="image/*"
|
|
:multiple="isGalleryMediaPicker"
|
|
@change="uploadFromMediaModal($event.target.files); $event.target.value = ''"
|
|
>
|
|
</label>
|
|
<p class="admin-markdown-editor__media-upload-hint text-xs text-[#8e9cac]">
|
|
{{ isGalleryMediaPicker ? '여러 이미지를 한 번에 선택할 수 있습니다.' : '단일 이미지가 본문에 삽입됩니다.' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer v-if="activeMediaPickerTab === 'library'" class="admin-markdown-editor__media-footer flex items-center justify-end gap-2 border-t border-[#e3e6e8] px-5 py-4">
|
|
<button class="admin-markdown-editor__media-cancel rounded px-4 py-2 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="closeMediaPicker">
|
|
취소
|
|
</button>
|
|
<button
|
|
class="admin-markdown-editor__media-apply rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40"
|
|
type="button"
|
|
:disabled="selectedMediaUrls.length === 0"
|
|
@click="applyMediaSelection"
|
|
>
|
|
삽입
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.admin-markdown-editor__gutter {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.admin-markdown-editor__gutter::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|