관리자 블록 에디터 입력 안정화

2026-05-01 18:28:26 +09:00
parent 10bf6b422e
commit c2b3e3a204
7 changed files with 89 additions and 24 deletions
--- a/components/admin/AdminBlockEditor.vue
+++ b/components/admin/AdminBlockEditor.vue
@@ -12,6 +12,7 @@ const editorBlocks = ref([])
 const blockRefs = ref([])
 const activeBlockId = ref('')
 const slashQuery = ref('')
+const slashMenuDirection = ref('down')
 const isApplyingExternalValue = ref(false)
 let blockIdSeed = 0

@@ -211,6 +212,10 @@ const emitContent = () => {
 const setBlockRef = (element, index) => {
  if (element) {
    blockRefs.value[index] = element
+
+    if (element.innerText !== editorBlocks.value[index]?.text) {
+      element.innerText = editorBlocks.value[index]?.text || ''
+    }
  }
 }

@@ -237,6 +242,28 @@ const focusBlock = (index) => {
  })
 }

+/**
+ * 슬래시 메뉴 표시 방향 갱신
+ * @param {number} index - 블록 인덱스
+ * @returns {void}
+ */
+const updateSlashMenuDirection = (index) => {
+  nextTick(() => {
+    const element = blockRefs.value[index]
+
+    if (!element) {
+      slashMenuDirection.value = 'down'
+      return
+    }
+
+    const rect = element.getBoundingClientRect()
+    const menuHeight = 280
+    slashMenuDirection.value = window.innerHeight - rect.bottom < menuHeight && rect.top > menuHeight
+      ? 'up'
+      : 'down'
+  })
+}
+
 /**
 * 블록 타입에 맞는 태그명 반환
 * @param {Object} block - 에디터 블록
@@ -291,6 +318,7 @@ const updateBlockText = (event, index) => {
  activeBlockId.value = block.id
  applyMarkdownShortcut(block, index)
  updateSlashQuery(block)
+  updateSlashMenuDirection(index)
  emitContent()
 }

@@ -378,6 +406,12 @@ const applyCommand = (command) => {
  block.type = command.type
  block.level = command.level || null
  block.text = ''
+  const element = blockRefs.value[index]
+
+  if (element) {
+    element.innerText = ''
+  }
+
  slashQuery.value = ''

  if (command.type === 'divider') {
@@ -406,6 +440,10 @@ const handleEnter = (event, index) => {

  event.preventDefault()

+  if (!currentBlock.text.trim() && currentBlock.type === 'paragraph') {
+    return
+  }
+
  if (currentBlock.type === 'divider') {
    editorBlocks.value.splice(index + 1, 0, createEditorBlock())
    emitContent()
@@ -452,10 +490,23 @@ const handleBackspace = (event, index) => {
 * @returns {void}
 */
 const activateBlock = (block) => {
+  const index = editorBlocks.value.findIndex((item) => item.id === block.id)
  activeBlockId.value = block.id
  updateSlashQuery(block)
+  updateSlashMenuDirection(index)
 }

+/**
+ * 블록 placeholder 표시 여부 반환
+ * @param {Object} block - 에디터 블록
+ * @param {number} index - 블록 인덱스
+ * @returns {boolean} placeholder 표시 여부
+ */
+const shouldShowPlaceholder = (block, index) => !block.text && (
+  activeBlockId.value === block.id ||
+  (index === 0 && editorBlocks.value.length === 1)
+)
+
 watch(() => props.modelValue, (value) => {
  if (isApplyingExternalValue.value) {
    return
@@ -479,7 +530,7 @@ watch(editorBlocks, () => {
 </script>

 <template>
-  <div class="admin-block-editor rounded border border-line bg-white px-5 py-5">
+  <div class="admin-block-editor min-h-[32rem] bg-transparent py-4">
    <div class="admin-block-editor__surface post-prose grid gap-1">
      <div
        v-for="(block, index) in editorBlocks"
@@ -495,13 +546,12 @@ watch(editorBlocks, () => {
          contenteditable="true"
          spellcheck="true"
          :data-placeholder="index === 0 ? '본문을 입력하거나 / 를 눌러 블록을 선택하세요' : '/ 를 눌러 블록 선택'"
+          :data-show-placeholder="shouldShowPlaceholder(block, index)"
          @focus="activateBlock(block)"
          @input="updateBlockText($event, index)"
          @keydown.enter="handleEnter($event, index)"
          @keydown.backspace="handleBackspace($event, index)"
-        >
-          {{ block.text }}
-        </component>
+        />

        <button
          v-if="block.type === 'divider'"
@@ -515,7 +565,8 @@ watch(editorBlocks, () => {

        <div
          v-if="visibleCommands.length && activeBlockId === block.id"
-          class="admin-block-editor__slash-menu absolute left-0 top-full z-20 mt-2 w-72 overflow-hidden rounded border border-line bg-white shadow-lg"
+          class="admin-block-editor__slash-menu absolute left-0 z-20 w-72 overflow-hidden rounded border border-line bg-white shadow-lg"
+          :class="slashMenuDirection === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'"
        >
          <button
            v-for="command in visibleCommands"
@@ -534,7 +585,7 @@ watch(editorBlocks, () => {
 </template>

 <style scoped>
-.admin-block-editor__block:empty::before {
+.admin-block-editor__block:empty[data-show-placeholder="true"]::before {
  color: var(--site-soft);
  content: attr(data-placeholder);
 }
--- a/components/admin/AdminPostForm.vue
+++ b/components/admin/AdminPostForm.vue
@@ -92,22 +92,15 @@ const submitPost = () => {
  <form class="admin-post-form grid gap-6" @submit.prevent="submitPost">
    <div class="admin-post-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]">
      <section class="admin-post-form__content grid gap-4">
-        <label class="admin-post-form__field grid gap-2 text-sm">
-          <span class="admin-post-form__label font-medium">제목</span>
-          <input
-            v-model="form.title"
-            class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
-            type="text"
-            required
-          >
-        </label>
+        <input
+          v-model="form.title"
+          class="admin-post-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight outline-none placeholder:text-soft"
+          type="text"
+          placeholder="제목"
+          required
+        >

        <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>
-            <span class="admin-post-form__editor-note text-xs text-muted">/ 명령과 마크다운 단축 입력 지원</span>
-          </div>
-
          <AdminBlockEditor v-model="form.content" />
        </div>
      </section>
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,15 @@
 # 의사결정 이력

+## 2026-05-01 v0.0.10
+
+### 블록 에디터 입력 안정화 결정
+
+관리자 블록 에디터는 `contenteditable` 요소 안의 텍스트를 Vue 템플릿 보간으로 직접 렌더링하지 않고 DOM 참조를 통해 동기화한다. Vue의 렌더 패치와 브라우저의 조합 입력이 동시에 같은 텍스트 노드를 수정하면 `/` 입력이나 한글 필터 입력이 중복되는 문제가 생기기 때문이다.
+
+슬래시 메뉴는 고정적으로 아래에 열지 않고 활성 블록 위치와 화면 높이를 기준으로 위 또는 아래에 표시한다. 글 하단에서 블록을 추가할 때 메뉴가 화면 밖으로 밀리는 문제를 줄이기 위해서다.
+
+제목은 별도 폼 영역이 아니라 에디터 상단의 큰 제목 입력으로 유지한다. Ghost 작성 화면처럼 제목과 본문이 하나의 흐름으로 보이는 편이 글쓰기 집중도와 결과 화면 예측에 더 가깝기 때문이다.
+
 ## 2026-05-01 v0.0.9

 ### 관리자 블록형 글쓰기 방식 결정
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -204,8 +204,11 @@ components/content/
 - 글 작성/수정 화면은 Ghost 스타일을 참고한 블록형 에디터를 사용한다.
 - 저장 데이터는 기존 `content` 필드의 마크다운 문자열을 유지한다.
 - `/` 입력 시 블록 선택 메뉴를 표시한다.
+- `/` 명령 메뉴는 화면 하단 공간이 부족하면 현재 블록 위쪽으로 표시한다.
 - 블록 메뉴는 문단, 제목 2, 제목 3, 인용, 목록, 코드, 구분선을 제공한다.
 - `#`, `##`, `###`, `>`, `-` 입력 후 공백을 누르면 현재 블록 타입을 즉시 변환한다.
+- 빈 블록 placeholder는 현재 활성 블록 또는 첫 빈 블록에만 표시한다.
+- 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
 - 관리자 작성 화면과 공개 본문은 같은 마크다운 렌더링 기준을 사용한다.

 ### 관리자 인증
@@ -285,6 +288,6 @@ APP_PORT=43118

 ## 버전 관리

- 현재 버전: v0.0.9
+- 현재 버전: v0.0.10
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,13 @@
 # 업데이트 이력

+## v0.0.10
+
+- 관리자 블록 에디터의 `contenteditable` 입력 중복 문제 수정.
+- 관리자 블록 에디터의 `/` 명령 메뉴가 화면 하단에서 위로 열리도록 수정.
+- 빈 블록 placeholder가 활성 블록에만 표시되도록 수정.
+- 관리자 글 제목 입력을 본문 흐름 안의 큰 제목 필드로 변경.
+- 패키지 버전을 0.0.10으로 갱신.
+
 ## v0.0.9

 - 관리자 글 작성/수정 폼을 textarea 방식에서 블록형 에디터 방식으로 변경.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "0.0.9",
+  "version": "0.0.10",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "0.0.9",
+      "version": "0.0.10",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "0.0.9",
+  "version": "0.0.10",
  "private": true,
  "type": "module",
  "scripts": {