zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

글쓰기 문단 입력과 편집 영역 정리

Browse Source
This commit is contained in:
zenn
2026-05-14 16:51:30 +09:00
parent 113c974ee5
commit 5da93b9aa4
10 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/admin/AdminMarkdownEditor.vue
View File

@@ -391,17 +391,21 @@ const replaceSelection = (replacement, cursorOffset = replacement.length, select
}
/**
* Enter 입력을 문단 분리 규칙에 맞게 처리한다.
* Enter 입력을 문단/줄바꿈 규칙에 맞게 처리한다.
* @param {KeyboardEvent} event - 키보드 이벤트
* @returns {boolean} 직접 처리했는지 여부
*/
const handleParagraphEnter = (event) => {
if (event.key !== 'Enter' || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey || event.isComposing) {
if (event.key !== 'Enter' || event.metaKey || event.ctrlKey || event.altKey || event.isComposing) {
return false
}
if (!event.shiftKey) {
return false
}
event.preventDefault()
replaceSelection('\n\n')
replaceSelection(' \n')
return true
}
@@ -1069,18 +1073,17 @@ const handleKeydown = (event) => {
</div>
</div>
<div v-if="activeMode === 'write'" class="admin-markdown-editor__write relative">
<div class="admin-markdown-editor__editor-surface flex min-h-[620px] overflow-hidden rounded border border-[#e3e6e8] bg-white">
<div v-if="activeMode === 'write'" class="admin-markdown-editor__write relative pl-12">
<div class="admin-markdown-editor__editor-surface min-h-[620px]">
<div
ref="gutterRef"
class="admin-markdown-editor__gutter min-w-[2.75rem] shrink-0 select-none overflow-y-auto overflow-x-hidden border-r border-[#e3e6e8] bg-[#f6f7f8] py-5 font-mono text-[13px] leading-7 text-[#8e9cac]"
class="admin-markdown-editor__gutter absolute bottom-0 left-0 top-0 w-10 select-none overflow-y-auto 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"
:class="{ 'admin-markdown-editor__gutter-line--active': ln - 1 === activeLogicalLineIndex }"
>
{{ ln }}
</div>
@@ -1088,7 +1091,7 @@ const handleKeydown = (event) => {
<textarea
ref="textareaRef"
v-model="markdownValue"
class="admin-markdown-editor__textarea min-h-[620px] flex-1 resize-y border-0 bg-transparent py-5 pl-2 pr-5 font-mono text-[15px] leading-7 text-[#15171a] outline-none transition-colors placeholder:text-[#8e9cac] focus:ring-0"
class="admin-markdown-editor__textarea min-h-[620px] w-full resize-y border-0 bg-transparent py-5 pl-0 pr-5 font-mono text-[15px] leading-7 text-[#15171a] outline-none transition-colors placeholder:text-[#8e9cac] focus:ring-0"
placeholder="마크다운으로 글을 작성하세요."
spellcheck="false"
@keydown="handleKeydown"
@@ -1272,11 +1275,3 @@ const handleKeydown = (event) => {
</div>
</div>
</template>
<style scoped>
.admin-markdown-editor__gutter-line--active {
background-color: rgba(46, 182, 234, 0.16);
color: #15171a;
font-weight: 600;
}
</style>