어나운스 바 설정 확장 v1.5.38

components/admin/AdminMarkdownEditor.vue

@@ -131,6 +131,10 @@ const markdownValue = computed({
 /** textarea 포커스·블록 패널 상호작용 */
 const isTextareaFocused = ref(false)
 const isBlockPanelEngaged = ref(false)
+/** 한글 등 IME 조합 입력 중 여부 */
+const isTextComposing = ref(false)
+/** 조합 입력 중 패널 닫힘을 방지하기 위한 마지막 블록 컨텍스트 */
+const lastStableBlockContext = ref(null)
 let blockPanelFocusTimer = null
 
 /**
@@ -184,12 +188,24 @@ const activeBlockContext = computed(() => resolveActiveBlockContext(
 /** @deprecated 내부 호환 alias */
 const activeMediaBlock = activeBlockContext
 
+/**
+ * IME 조합 중에는 일시적으로 블록 판별이 비어도 직전 패널을 유지한다.
+ * @returns {Object|null} 패널 표시용 블록 컨텍스트
+ */
+const visibleBlockContext = computed(() => {
+  if (activeBlockContext.value) {
+    return activeBlockContext.value
+  }
+
+  return isTextComposing.value ? lastStableBlockContext.value : null
+})
+
 /**
  * 블록 설정 패널 표시 여부
  * @returns {boolean}
  */
 const isBlockPanelVisible = computed(() => (activeMode.value === 'write' || isBlockPanelEngaged.value)
-  && Boolean(activeBlockContext.value)
+  && Boolean(visibleBlockContext.value)
   && (isTextareaFocused.value || isBlockPanelEngaged.value))
 
 /**
@@ -199,11 +215,17 @@ const isBlockPanelVisible = computed(() => (activeMode.value === 'write' || isBl
 const syncBlockPanelState = () => {
   emit('block-panel', {
     open: isBlockPanelVisible.value,
-    panel: activeBlockContext.value
+    panel: visibleBlockContext.value
   })
 }
 
-watch([isBlockPanelVisible, activeBlockContext], syncBlockPanelState, { deep: true })
+watch(activeBlockContext, (context) => {
+  if (context) {
+    lastStableBlockContext.value = context
+  }
+}, { deep: true, immediate: true })
+
+watch([isBlockPanelVisible, visibleBlockContext], syncBlockPanelState, { deep: true })
 
 /**
  * 본문의 논리 줄(`\\n` 기준) 개수. 빈 본문은 1줄로 본다.
@@ -400,6 +422,28 @@ const handleBlockPanelFocusOut = () => {
   }, 50)
 }
 
+/**
+ * IME 조합 입력 시작 시 패널 컨텍스트를 유지한다.
+ * @returns {void}
+ */
+const handleTextareaCompositionStart = () => {
+  isTextComposing.value = true
+
+  if (activeBlockContext.value) {
+    lastStableBlockContext.value = activeBlockContext.value
+  }
+}
+
+/**
+ * IME 조합 입력 종료 후 실제 커서 줄 기준으로 패널을 다시 동기화한다.
+ * @returns {void}
+ */
+const handleTextareaCompositionEnd = () => {
+  isTextComposing.value = false
+  refreshCaretLogicalLine()
+  nextTick(syncBlockPanelState)
+}
+
 /**
  * 커서 위치 기준으로 활성 논리 줄 인덱스를 갱신하고 거터 스크롤을 맞춘다.
  * @returns {void}
@@ -2756,6 +2800,8 @@ const handleKeydown = (event) => {
             @drop="handleDrop"
             @dragover.prevent
             @input="refreshCaretLogicalLine"
+            @compositionstart="handleTextareaCompositionStart"
+            @compositionend="handleTextareaCompositionEnd"
             @click="refreshCaretLogicalLine"
             @keyup="refreshCaretLogicalLine"
             @select="refreshCaretLogicalLine"