인용 블록 색상과 라이브 설정 패널 정리

components/admin/AdminMarkdownEditor.vue

@@ -14,7 +14,7 @@ import {
   parseSlashInput,
   resolveSlashCommand
 } from '../../lib/markdown-slash-commands.js'
-import { buildCalloutOpenerLine, CALLOUT_BACKGROUND_OPTIONS } from '../../lib/markdown-callout.js'
+import { buildCalloutOpenerLine, CALLOUT_BACKGROUND_OPTIONS, QUOTE_BACKGROUND_OPTIONS } from '../../lib/markdown-callout.js'
 import { buildCodeFenceOpener } from '../../lib/markdown-code-block.js'
 import { buildToggleOpenerLine } from '../../lib/markdown-toggle.js'
 import { getTextareaCaretCoordinates } from '../../lib/textarea-caret-coordinates.js'
@@ -219,6 +219,49 @@ const syncBlockPanelState = () => {
   })
 }
 
+/**
+ * 라이브 모드 포커스 줄을 기준으로 블록 패널을 동기화한다.
+ * @param {number} sourceLine - 원본 마크다운 줄(0-based)
+ * @returns {void}
+ */
+const handleLiveLineFocus = async (sourceLine) => {
+  const nextLine = Number(sourceLine)
+
+  if (!Number.isInteger(nextLine) || nextLine < 0) {
+    return
+  }
+
+  activeLogicalLineIndex.value = nextLine
+  isTextareaFocused.value = false
+  isTextComposing.value = false
+
+  await nextTick()
+
+  if (activeBlockContext.value) {
+    lastStableBlockContext.value = activeBlockContext.value
+    isBlockPanelEngaged.value = true
+  } else {
+    isBlockPanelEngaged.value = false
+  }
+
+  syncBlockPanelState()
+}
+
+/**
+ * 라이브 모드 포커스가 블록·패널 밖으로 나가면 패널을 닫는다.
+ * @returns {void}
+ */
+const handleLiveLineBlur = () => {
+  blockPanelFocusTimer = window.setTimeout(() => {
+    if (isMediaPickerOpen.value || isFocusInBlockPanel() || isFocusInMediaPicker()) {
+      return
+    }
+
+    isBlockPanelEngaged.value = false
+    syncBlockPanelState()
+  }, 0)
+}
+
 watch(activeBlockContext, (context) => {
   if (context) {
     lastStableBlockContext.value = context
@@ -2136,7 +2179,7 @@ const updateActiveQuoteBackground = (background) => {
   ensureBlockPanelEngaged()
   const value = String(background || '').trim()
 
-  if (!CALLOUT_BACKGROUND_OPTIONS.includes(value)) {
+  if (!QUOTE_BACKGROUND_OPTIONS.includes(value)) {
     return
   }
 
@@ -2839,6 +2882,8 @@ const handleKeydown = (event) => {
         @delete-line="onPreviewDeleteLine"
         @merge-with-previous-line="onPreviewMergeWithPreviousLine"
         @edit-image="onPreviewEditImage"
+        @line-focus="handleLiveLineFocus"
+        @line-blur="handleLiveLineBlur"
         @slash-update="onLiveSlashUpdate"
         @slash-end="onLiveSlashEnd"
         @slash-apply="onLiveSlashApply"