에디터 보조 UI 컴포넌트 분리
This commit is contained in:
@@ -63,7 +63,9 @@ import {
|
||||
normalizeUploadMaxFileCount,
|
||||
normalizeUploadMaxTotalSize
|
||||
} from '../../lib/upload-size-limit.js'
|
||||
import AdminMarkdownModeToggle from './AdminMarkdownModeToggle.vue'
|
||||
import AdminMarkdownSlashMenu from './AdminMarkdownSlashMenu.vue'
|
||||
import AdminMarkdownUploadingBadge from './AdminMarkdownUploadingBadge.vue'
|
||||
|
||||
const { toast, showToast } = useAdminToast()
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
@@ -3485,50 +3487,11 @@ const handleKeydown = (event) => {
|
||||
|
||||
<template>
|
||||
<div ref="editorRootRef" class="admin-markdown-editor grid gap-3">
|
||||
|
||||
<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>
|
||||
<AdminMarkdownModeToggle
|
||||
:active-mode="activeMode"
|
||||
:teleport-to="modeToggleTeleportTo"
|
||||
@toggle="toggleEditorMode"
|
||||
/>
|
||||
|
||||
<div v-if="activeMode === 'write'" class="admin-markdown-editor__write relative">
|
||||
<div class="admin-markdown-editor__editor-surface min-h-[620px]">
|
||||
@@ -3568,9 +3531,7 @@ const handleKeydown = (event) => {
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
<AdminMarkdownUploadingBadge v-if="isUploading" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -3662,48 +3623,4 @@ const handleKeydown = (event) => {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-markdown-editor__media-upload-zone--uploading::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 45%, transparent 72%);
|
||||
transform: translateX(-100%);
|
||||
animation: admin-markdown-editor-upload-sheen 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.admin-markdown-editor__media-upload-spinner {
|
||||
animation: admin-markdown-editor-upload-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.admin-markdown-editor__media-upload-skeleton::before {
|
||||
display: block;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
|
||||
animation: admin-markdown-editor-upload-skeleton 1.15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes admin-markdown-editor-upload-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes admin-markdown-editor-upload-sheen {
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes admin-markdown-editor-upload-skeleton {
|
||||
from {
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(260%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -313,3 +313,50 @@ const handleFileChange = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-markdown-media-picker__upload-zone--uploading::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 45%, transparent 72%);
|
||||
transform: translateX(-100%);
|
||||
animation: admin-markdown-media-picker-upload-sheen 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.admin-markdown-media-picker__upload-spinner {
|
||||
animation: admin-markdown-media-picker-upload-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.admin-markdown-media-picker__upload-skeleton::before {
|
||||
display: block;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
|
||||
animation: admin-markdown-media-picker-upload-skeleton 1.15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes admin-markdown-media-picker-upload-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes admin-markdown-media-picker-upload-sheen {
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes admin-markdown-media-picker-upload-skeleton {
|
||||
from {
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(260%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
60
components/admin/AdminMarkdownModeToggle.vue
Normal file
60
components/admin/AdminMarkdownModeToggle.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
activeMode: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
teleportTo: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['toggle'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="teleportTo" :to="teleportTo">
|
||||
<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="emit('toggle')"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
5
components/admin/AdminMarkdownUploadingBadge.vue
Normal file
5
components/admin/AdminMarkdownUploadingBadge.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div 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>
|
||||
</template>
|
||||
Reference in New Issue
Block a user