공개 본문 fenced 블록 편집 분리

components/content/ContentMarkdownRenderer.vue

@@ -18,8 +18,7 @@ import {
   parseOrderedListMarker,
   stripListMarker
 } from '../../lib/markdown-live-edit.js'
-import { buildCodeBlockLines, buildCodeFenceOpener } from '../../lib/markdown-code-block.js'
-import { buildToggleBlockLines } from '../../lib/markdown-toggle.js'
+import { buildCodeFenceOpener } from '../../lib/markdown-code-block.js'
 import {
   buildCalloutOpenerLine,
   CALLOUT_BACKGROUND_OPTIONS
@@ -35,6 +34,7 @@ import { useContentMarkdownLightbox } from '../../composables/useContentMarkdown
 import { useContentMarkdownBlocks } from '../../composables/useContentMarkdownBlocks.js'
 import { useContentMarkdownImageDrag } from '../../composables/useContentMarkdownImageDrag.js'
 import { useContentMarkdownLiveSelection } from '../../composables/useContentMarkdownLiveSelection.js'
+import { useContentMarkdownFencedBlocks } from '../../composables/useContentMarkdownFencedBlocks.js'
 import ContentMarkdownCodeBlockEditor from './ContentMarkdownCodeBlockEditor.vue'
 import ProseCodeBlock from './ProseCodeBlock.vue'
 import ProseHtml from './ProseHtml.vue'
@@ -168,6 +168,23 @@ const {
   onContentReplace: (payload) => emit('content-replace', payload)
 })
 
+const {
+  getCodeLineNumbers,
+  onCodeBlockCommit,
+  onCodeBlockInsertBelow,
+  onCalloutBlockCommit,
+  onCalloutBlockInsertBelow,
+  onToggleBlockCommit,
+  onToggleBlockInsertBelow
+} = useContentMarkdownFencedBlocks({
+  content: computed(() => props.content),
+  interactive: computed(() => props.interactive),
+  pendingFocusPosition,
+  pendingFocusOffset,
+  commitInlineBlockLines: (block, replacementLines) => commitInlineBlockLines(block, replacementLines),
+  insertBelowBlock: (block, options) => onInsertBelowBlock(block, options)
+})
+
 /**
  * 빈 줄 공백 블록 높이를 반환한다.
  * @param {Object} block - 렌더링 블록
@@ -437,18 +454,6 @@ const createEmptyListMarkerLine = (block, itemIndex) => {
   return '- '
 }
 
-/**
- * 코드 블록 줄 번호 목록을 만든다.
- * @param {Object} block - 코드 블록
- * @returns {number[]} 줄 번호(1부터)
- */
-const getCodeLineNumbers = (block) => {
-  const text = String(block.text ?? '')
-  const lineCount = text.length ? text.split('\n').length : 1
-
-  return Array.from({ length: lineCount }, (_, index) => index + 1)
-}
-
 /**
  * 인라인 편집 결과를 마크다운 줄로 반영한다.
  * @param {Object} block - 블록
@@ -467,33 +472,6 @@ const commitInlineBlockLines = (block, replacementLines) => {
   })
 }
 
-/**
- * 코드 블록 편집 반영
- * @param {Object} block - 코드 블록
- * @param {string[]} replacementLines - 마크다운 줄
- * @returns {void}
- */
-const onCodeBlockCommit = (block, replacementLines) => {
-  commitInlineBlockLines(block, replacementLines)
-}
-
-/**
- * 코드 블록 마지막 줄에서 아래로 이탈 — 본문 저장 후 다음 문단 삽입
- * @param {Object} block - 코드 블록
- * @param {string|Object} payload - insert-below 페이로드
- * @returns {void}
- */
-const onCodeBlockInsertBelow = (block, payload) => {
-  const { value } = normalizeInsertBelowPayload(payload)
-
-  onCodeBlockCommit(block, buildCodeBlockLines({
-    language: block.codeLanguage,
-    showLineNumbers: block.codeShowLineNumbers,
-    body: value
-  }))
-  onInsertBelowBlock(block, { lines: [''] })
-}
-
 /**
  * 블록 위에 기본 문단을 삽입한다.
  * @param {Object} block - 기준 블록
@@ -511,65 +489,6 @@ const onInsertAboveBlock = (block) => {
   })
 }
 
-/**
- * 콜아웃 편집 반영
- * @param {Object} block - 콜아웃 블록
- * @param {string[]} replacementLines - 마크다운 줄
- * @returns {void}
- */
-const onCalloutBlockCommit = (block, replacementLines) => {
-  commitInlineBlockLines(block, replacementLines)
-}
-
-/**
- * 콜아웃 마지막 줄에서 아래로 이탈한다.
- * @param {Object} block - 콜아웃 블록
- * @param {string|Object} payload - insert-below 페이로드
- * @returns {void}
- */
-const onCalloutBlockInsertBelow = (block, payload) => {
-  const { value } = normalizeInsertBelowPayload(payload)
-  const openingLine = getMarkdownLine(block.meta.startLine)
-
-  onCalloutBlockCommit(block, [
-    openingLine,
-    ...String(value ?? '').replace(/\r/g, '').split('\n'),
-    ':::'
-  ])
-  pendingFocusPosition.value = 'start'
-  pendingFocusOffset.value = 0
-  onInsertBelowBlock(block, { lines: [''] })
-}
-
-/**
- * 토글 편집 반영
- * @param {Object} block - 토글 블록
- * @param {string[]} replacementLines - 마크다운 줄
- * @returns {void}
- */
-const onToggleBlockCommit = (block, replacementLines) => {
-  commitInlineBlockLines(block, replacementLines)
-}
-
-/**
- * 토글 본문 마지막 줄에서 아래로 이탈
- * @param {Object} block - 토글 블록
- * @param {string|Object} payload - insert-below 페이로드
- * @returns {void}
- */
-const onToggleBlockInsertBelow = (block, payload) => {
-  const { value } = normalizeInsertBelowPayload(payload)
-
-  onToggleBlockCommit(block, buildToggleBlockLines({
-    title: block.title,
-    defaultOpen: block.defaultOpen,
-    body: value
-  }))
-  pendingFocusPosition.value = 'start'
-  pendingFocusOffset.value = 0
-  onInsertBelowBlock(block, { lines: [''] })
-}
-
 const onParagraphInlineCommit = (block, text) => {
   const value = String(text ?? '').replace(/\r/g, '')
   const lines = value.split('\n').map((line) => line.trimEnd())