블록 패널 액션 적용 분리

components/admin/AdminMarkdownEditor.vue

@@ -37,21 +37,6 @@ import {
   resolveImageUploadInsertTarget,
   resolveUploadFetchErrorMessage
 } from '../../lib/markdown-editor-media.js'
-import {
-  createCalloutOptionsReplacementPlan,
-  createCodeOptionsReplacementPlan,
-  createEmbedUrlReplacementPlan,
-  createGalleryImageMovePlan,
-  createGalleryImagesAppendPlan,
-  createLiveInlineColorValue,
-  createMediaImageRemovePlan,
-  createMediaImagesReplacementPlan,
-  createMediaImageUpdatePlan,
-  createMediaUseAltPatch,
-  createQuoteBackgroundValue,
-  createSourceInlineColorValue,
-  createToggleOptionsReplacementPlan
-} from '../../lib/markdown-editor-block-options.js'
 import {
   createPreviewAppendParagraphValue,
   createPreviewDeleteLineValue,
@@ -91,6 +76,7 @@ import { useAdminMarkdownFocusBridge } from '../../composables/useAdminMarkdownF
 import { useAdminMarkdownPreviewFocus } from '../../composables/useAdminMarkdownPreviewFocus.js'
 import { useAdminMarkdownTextareaFocus } from '../../composables/useAdminMarkdownTextareaFocus.js'
 import { useAdminMarkdownBlockPanel } from '../../composables/useAdminMarkdownBlockPanel.js'
+import { useAdminMarkdownBlockActions } from '../../composables/useAdminMarkdownBlockActions.js'
 import {
   buildDefaultUploadSizeLimits,
   DEFAULT_UPLOAD_MAX_FILE_COUNT,
@@ -1181,52 +1167,6 @@ const resolveCurrentFencedBlockEndLine = (startLine, fallbackEndLine) => {
   return fallbackEndLine
 }
 
-/**
- * 현재 미디어 블록을 이미지 목록 기준으로 다시 작성한다.
- * @param {Array<{ alt: string, url: string, width?: string }>} images - 이미지 목록
- * @returns {void}
- */
-const replaceActiveMediaImages = (images) => {
-  applyLineReplacementPlan(
-    createMediaImagesReplacementPlan(activeMediaBlock.value, images),
-    false
-  )
-}
-
-/**
- * 현재 미디어 블록의 특정 이미지를 수정한다.
- * @param {number} imageIndex - 이미지 인덱스
- * @param {Partial<{ alt: string, url: string, width: string, pixelWidth: number|null }>} patch - 변경 값
- * @returns {void}
- */
-const updateActiveMediaImage = (imageIndex, patch) => {
-  const plan = createMediaImageUpdatePlan(activeMediaBlock.value, imageIndex, patch)
-
-  if (!plan) {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 미디어 이미지의 파일명 캡션 사용 여부를 바꾼다.
- * @param {number} imageIndex - 이미지 인덱스
- * @param {boolean} enabled - 파일명 캡션 사용 여부
- * @returns {void}
- */
-const setActiveMediaUseAlt = (imageIndex, enabled) => {
-  const image = activeMediaBlock.value?.images[imageIndex]
-  const patch = createMediaUseAltPatch(image, enabled)
-
-  if (!patch) {
-    return
-  }
-
-  updateActiveMediaImage(imageIndex, patch)
-}
-
 /**
  * 미리보기에서 갤러리 순서 변경
  * @param {{ startLine: number, endLine: number, images: Array<Object> }} payload - 갤러리 줄 범위·이미지 목록
@@ -1863,188 +1803,6 @@ const onPreviewMergeWithPreviousLine = ({ lineIndex, mergedLine }) => {
   }
 }
 
-/**
- * 현재 갤러리 이미지 순서를 바꾼다.
- * @param {number} imageIndex - 이동할 이미지 인덱스
- * @param {-1|1} direction - 이동 방향
- * @returns {void}
- */
-const moveActiveGalleryImage = (imageIndex, direction) => {
-  const plan = createGalleryImageMovePlan(activeMediaBlock.value, imageIndex, direction)
-
-  if (!plan) {
-    return
-  }
-
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 미디어 블록에서 이미지를 삭제한다.
- * @param {number} imageIndex - 삭제할 이미지 인덱스
- * @returns {void}
- */
-const removeActiveMediaImage = (imageIndex) => {
-  applyLineReplacementPlan(
-    createMediaImageRemovePlan(activeMediaBlock.value, imageIndex),
-    false
-  )
-}
-
-/**
- * 현재 갤러리에 이미지를 추가한다.
- * @param {Array<{ url: string, alt?: string, width?: string }>} images - 추가 이미지 목록
- * @returns {void}
- */
-const appendImagesToActiveGallery = (images) => {
-  const plan = createGalleryImagesAppendPlan(activeMediaBlock.value, images)
-
-  if (!plan) {
-    insertGallery(images)
-    return
-  }
-
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 링크·iframe·HTML 블록 값을 수정한다.
- * @param {string} url - 블록 값
- * @returns {void}
- */
-const updateActiveEmbedUrl = (url) => {
-  const plan = createEmbedUrlReplacementPlan(activeBlockContext.value, url)
-
-  if (!plan) {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 인용 블록 배경색을 수정한다.
- * @param {string} background - 배경색 옵션
- * @returns {void}
- */
-const updateActiveQuoteBackground = (background) => {
-  const nextValue = createQuoteBackgroundValue({
-    value: markdownValue.value,
-    block: activeBlockContext.value,
-    background
-  })
-
-  if (nextValue === null) {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-  markdownValue.value = nextValue
-}
-
-/**
- * 현재 콜아웃 블록 옵션을 수정한다.
- * @param {Partial<{ calloutEmojiEnabled: boolean, calloutEmoji: string, calloutBackground: string, title: string }>} patch - 변경 옵션
- * @returns {void}
- */
-const updateActiveCalloutOptions = (patch = {}) => {
-  const plan = createCalloutOptionsReplacementPlan(activeBlockContext.value, patch)
-
-  if (!plan) {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 코드 블록 옵션을 수정한다.
- * @param {Partial<{ language: string, showLineNumbers: boolean }>} patch - 변경 옵션
- * @returns {void}
- */
-const updateActiveCodeOptions = (patch = {}) => {
-  const plan = createCodeOptionsReplacementPlan(activeBlockContext.value, patch)
-
-  if (!plan) {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 토글 블록 옵션을 수정한다.
- * @param {Partial<{ defaultOpen: boolean }>} patch - 변경 옵션
- * @returns {void}
- */
-const updateActiveToggleOptions = (patch = {}) => {
-  const plan = createToggleOptionsReplacementPlan(activeBlockContext.value, patch)
-
-  if (!plan) {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-  applyLineReplacementPlan(plan, false)
-}
-
-/**
- * 현재 선택된 텍스트에 인라인 색상을 적용한다.
- * @param {string} color - 색상 이름
- * @returns {void}
- */
-const updateActiveInlineColor = (color) => {
-  const context = inlineColorSelectionContext.value
-
-  if (!context || context.kind !== 'inline-color') {
-    return
-  }
-
-  ensureBlockPanelEngaged()
-
-  const sourceResult = createSourceInlineColorValue({
-    value: markdownValue.value,
-    context,
-    color
-  })
-
-  if (sourceResult) {
-    markdownValue.value = sourceResult.value
-    inlineColorSelectionContext.value = null
-    setTextareaSelection(sourceResult.selectionStart, sourceResult.selectionEnd, { preserveScroll: true })
-    return
-  }
-
-  const liveResult = createLiveInlineColorValue({
-    value: markdownValue.value,
-    context,
-    color
-  })
-
-  if (!liveResult) {
-    return
-  }
-
-  markdownValue.value = liveResult.value
-  inlineColorSelectionContext.value = null
-  requestPreviewFocus({
-    line: liveResult.focusLine,
-    offset: liveResult.focusOffset
-  })
-  nextTick(() => {
-    focusPreviewEditableAtLine(
-      liveResult.focusLine,
-      0,
-      'auto',
-      liveResult.focusOffset,
-      'nearest'
-    )
-  })
-}
-
 /**
  * 이미지 마크다운을 삽입한다.
  * @param {{ url: string, alt?: string, width?: string }} image - 이미지 정보
@@ -2067,6 +1825,31 @@ const insertGallery = (images) => {
   insertBlockSnippet([':::gallery', ...images.map(createImageMarkdown), ':::'].join('\n'))
 }
 
+const {
+  appendImagesToActiveGallery,
+  moveActiveGalleryImage,
+  removeActiveMediaImage,
+  setActiveMediaUseAlt,
+  updateActiveCalloutOptions,
+  updateActiveCodeOptions,
+  updateActiveEmbedUrl,
+  updateActiveInlineColor,
+  updateActiveMediaImage,
+  updateActiveQuoteBackground,
+  updateActiveToggleOptions
+} = useAdminMarkdownBlockActions({
+  value: markdownValue,
+  activeMediaBlock,
+  activeBlockContext,
+  inlineColorSelectionContext,
+  applyLineReplacementPlan,
+  ensureBlockPanelEngaged,
+  insertGallery,
+  setTextareaSelection,
+  requestPreviewFocus,
+  focusPreviewEditableAtLine
+})
+
 /**
  * 미디어 선택 창을 연다.
  * @param {'image'|'gallery'|'active-gallery'} target - 삽입 대상