에디터 블록 패널 상태 분리

components/admin/AdminMarkdownEditor.vue

@@ -70,6 +70,7 @@ import { useAdminMarkdownHistory } from '../../composables/useAdminMarkdownHisto
 import { useAdminMarkdownMediaPicker } from '../../composables/useAdminMarkdownMediaPicker.js'
 import { useAdminMarkdownFocusBridge } from '../../composables/useAdminMarkdownFocusBridge.js'
 import { useAdminMarkdownTextareaFocus } from '../../composables/useAdminMarkdownTextareaFocus.js'
+import { useAdminMarkdownBlockPanel } from '../../composables/useAdminMarkdownBlockPanel.js'
 import {
   buildDefaultUploadSizeLimits,
   DEFAULT_UPLOAD_MAX_FILE_COUNT,
@@ -244,57 +245,6 @@ watch(markdownValue, () => {
   }
 })
 
-/** textarea 포커스·블록 패널 상호작용 */
-const isTextareaFocused = ref(false)
-const isBlockPanelEngaged = ref(false)
-/** 한글 등 IME 조합 입력 중 여부 */
-const isTextComposing = ref(false)
-/** 조합 입력 중 패널 닫힘을 방지하기 위한 마지막 블록 컨텍스트 */
-const lastStableBlockContext = ref(null)
-/** @type {import('vue').Ref<{ kind: 'inline-color', mode: 'source'|'live', start?: number, end?: number, sourceLine?: number, startOffset?: number, endOffset?: number, bodyText?: string, text: string }|null>} 선택 텍스트 색상 패널 컨텍스트 */
-const inlineColorSelectionContext = ref(null)
-let blockPanelFocusTimer = null
-
-/**
- * 현재 포커스가 블록 설정 패널 안에 있는지 확인한다.
- * @returns {boolean}
- */
-const isFocusInBlockPanel = () => Boolean(
-  typeof document !== 'undefined'
-  && document.activeElement?.closest?.('.admin-editor-block-panel')
-)
-
-/**
- * 현재 포커스가 미디어 선택 모달 안에 있는지 확인한다.
- * @returns {boolean}
- */
-const isFocusInMediaPicker = () => Boolean(
-  typeof document !== 'undefined'
-  && document.activeElement?.closest?.('.admin-markdown-editor__media-modal')
-)
-
-/**
- * 블록 패널 편집 중 상태를 유지한다.
- * @returns {void}
- */
-const ensureBlockPanelEngaged = () => {
-  window.clearTimeout(blockPanelFocusTimer)
-  isBlockPanelEngaged.value = true
-  syncBlockPanelState()
-}
-
-/**
- * 블록 설정 패널을 닫는다.
- * @returns {void}
- */
-const closeBlockPanel = () => {
-  window.clearTimeout(blockPanelFocusTimer)
-  isBlockPanelEngaged.value = false
-  isTextareaFocused.value = false
-  inlineColorSelectionContext.value = null
-  syncBlockPanelState()
-}
-
 /**
  * 오프셋이 속한 마크다운 줄 번호를 반환한다.
  * @param {string} value - 마크다운 본문
@@ -424,152 +374,38 @@ const getLiveInlineColorSelectionContext = () => {
   }
 }
 
-/**
- * 현재 선택 범위를 기준으로 텍스트 색상 패널 컨텍스트를 갱신한다.
- * @returns {void}
- */
-const syncInlineColorSelectionContext = () => {
-  if (isFocusInBlockPanel() || isMediaPickerOpen.value) {
-    return
-  }
-
-  const nextContext = getSourceInlineColorSelectionContext() || getLiveInlineColorSelectionContext()
-  inlineColorSelectionContext.value = nextContext
-
-  if (nextContext) {
-    isBlockPanelEngaged.value = true
-  }
-}
-
-/**
- * 커서 줄 기준 활성 블록(이미지·갤러리·임베드·인용)
- * @returns {Object|null}
- */
-const activeBlockContext = computed(() => resolveActiveBlockContext(
-  writeModeContextValue.value ?? markdownValue.value,
-  activeLogicalLineIndex.value
-))
-
-/** @deprecated 내부 호환 alias */
-const activeMediaBlock = activeBlockContext
-
-/**
- * 지정 줄이 블록 컨텍스트 범위 안에 있는지 확인한다.
- * @param {Object|null} context - 블록 컨텍스트
- * @param {number} lineIndex - 현재 논리 줄
- * @returns {boolean}
- */
-const isLineInsideBlockContext = (context, lineIndex) => {
-  if (!context) {
-    return false
-  }
-
-  const startLine = Number(context.startLine)
-  const endLine = Number(context.endLine)
-
-  return Number.isInteger(startLine)
-    && Number.isInteger(endLine)
-    && lineIndex >= startLine
-    && lineIndex <= endLine
-}
-
-/**
- * IME 조합 중에는 일시적으로 블록 판별이 비어도 직전 패널을 유지한다.
- * @returns {Object|null} 패널 표시용 블록 컨텍스트
- */
-const visibleBlockContext = computed(() => {
-  if (inlineColorSelectionContext.value) {
-    return null
-  }
-
-  if (activeBlockContext.value) {
-    return activeBlockContext.value
-  }
-
-  if (isTextComposing.value
-    && isLineInsideBlockContext(lastStableBlockContext.value, activeLogicalLineIndex.value)) {
-    return lastStableBlockContext.value
-  }
-
-  return null
+const {
+  isBlockPanelEngaged,
+  inlineColorSelectionContext,
+  activeBlockContext,
+  activeMediaBlock,
+  activePanelContext,
+  isBlockPanelVisible,
+  ensureBlockPanelEngaged,
+  closeBlockPanel,
+  syncBlockPanelState,
+  syncInlineColorSelectionContext,
+  handleTextareaFocusIn,
+  handleTextareaFocusOut,
+  handleBlockPanelFocusIn,
+  handleBlockPanelFocusOut,
+  handleTextareaCompositionStart,
+  handleTextareaCompositionEnd: markTextareaCompositionEnd,
+  handleLiveLineFocus,
+  handleLiveLineBlur,
+  resetBlockPanelContext,
+  clearBlockPanelFocusTimer
+} = useAdminMarkdownBlockPanel({
+  activeMode,
+  value: markdownValue,
+  writeModeContextValue,
+  activeLogicalLineIndex,
+  isMediaPickerOpen,
+  resolveBlockContext: resolveActiveBlockContext,
+  getInlineColorSelectionContext: () => getSourceInlineColorSelectionContext() || getLiveInlineColorSelectionContext(),
+  emitBlockPanel: (payload) => emit('block-panel', payload)
 })
 
-/**
- * 오른쪽 설정 패널에 표시할 현재 컨텍스트를 반환한다.
- * @returns {Object|null} 패널 컨텍스트
- */
-const activePanelContext = computed(() => inlineColorSelectionContext.value || visibleBlockContext.value)
-
-/**
- * 블록 설정 패널 표시 여부
- * @returns {boolean}
- */
-const isBlockPanelVisible = computed(() => (activeMode.value === 'write' || isBlockPanelEngaged.value)
-  && Boolean(activePanelContext.value)
-  && (isTextareaFocused.value || isBlockPanelEngaged.value))
-
-/**
- * 부모(글 설정 사이드바 오버레이)에 패널 상태를 전달한다.
- * @returns {void}
- */
-const syncBlockPanelState = () => {
-  emit('block-panel', {
-    open: isBlockPanelVisible.value,
-    panel: activePanelContext.value
-  })
-}
-
-/**
- * 라이브 모드 포커스 줄을 기준으로 블록 패널을 동기화한다.
- * @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 || isBlockPanelEngaged.value || isFocusInBlockPanel() || isFocusInMediaPicker()) {
-      return
-    }
-
-    isBlockPanelEngaged.value = false
-    syncBlockPanelState()
-  }, 0)
-}
-
-watch(activeBlockContext, (context) => {
-  if (context) {
-    lastStableBlockContext.value = context
-  }
-}, { deep: true, immediate: true })
-
-watch([isBlockPanelVisible, activePanelContext], syncBlockPanelState, { deep: true })
-
 /**
  * 본문의 논리 줄(`\\n` 기준) 개수. 빈 본문은 1줄로 본다.
  * @returns {number}
@@ -680,8 +516,7 @@ const resolvePreviewFocusPosition = (line, offset) => {
  * @returns {void}
  */
 const onTextareaFocus = () => {
-  window.clearTimeout(blockPanelFocusTimer)
-  isTextareaFocused.value = true
+  handleTextareaFocusIn()
   refreshCaretLogicalLine()
 }
 
@@ -690,54 +525,7 @@ const onTextareaFocus = () => {
  * @returns {void}
  */
 const onTextareaBlur = () => {
-  blockPanelFocusTimer = window.setTimeout(() => {
-    if (isMediaPickerOpen.value || isBlockPanelEngaged.value || isFocusInBlockPanel() || isFocusInMediaPicker()) {
-      return
-    }
-
-    isTextareaFocused.value = false
-    syncBlockPanelState()
-  }, 0)
-}
-
-/**
- * 블록 패널 포커스 진입(AdminPostForm 오버레이에서 호출)
- * @returns {void}
- */
-const handleBlockPanelFocusIn = () => {
-  window.clearTimeout(blockPanelFocusTimer)
-  isBlockPanelEngaged.value = true
-  syncBlockPanelState()
-}
-
-/**
- * 블록 패널 포커스 이탈
- * @returns {void}
- */
-const handleBlockPanelFocusOut = () => {
-  blockPanelFocusTimer = window.setTimeout(() => {
-    if (isMediaPickerOpen.value || isFocusInBlockPanel() || isFocusInMediaPicker()) {
-      return
-    }
-
-    isBlockPanelEngaged.value = false
-
-    if (!isTextareaFocused.value) {
-      syncBlockPanelState()
-    }
-  }, 50)
-}
-
-/**
- * IME 조합 입력 시작 시 패널 컨텍스트를 유지한다.
- * @returns {void}
- */
-const handleTextareaCompositionStart = () => {
-  isTextComposing.value = true
-
-  if (activeBlockContext.value) {
-    lastStableBlockContext.value = activeBlockContext.value
-  }
+  handleTextareaFocusOut()
 }
 
 /**
@@ -745,7 +533,7 @@ const handleTextareaCompositionStart = () => {
  * @returns {void}
  */
 const handleTextareaCompositionEnd = () => {
-  isTextComposing.value = false
+  markTextareaCompositionEnd()
   refreshCaretLogicalLine()
   nextTick(syncBlockPanelState)
 }
@@ -1080,7 +868,7 @@ onMounted(() => {
   window.addEventListener('resize', syncGutterLineHeights)
 
   onBeforeUnmount(() => {
-    window.clearTimeout(blockPanelFocusTimer)
+    clearBlockPanelFocusTimer()
     stopLiveSlashKeyboardNavigation()
     removeLiveSlashRepositionListeners()
     document.removeEventListener('selectionchange', onSelectionChange)
@@ -1802,9 +1590,7 @@ const onPreviewInsertAfterLine = ({ afterLine, lines, focusLine }) => {
   ].join('\n')
 
   activeLogicalLineIndex.value = nextFocusLine
-  isBlockPanelEngaged.value = false
-  lastStableBlockContext.value = null
-  syncBlockPanelState()
+  resetBlockPanelContext()
 
   nextTick(() => {
     focusPreviewEditableAtLine(nextFocusLine, 0, 'start')