에디터 소스 선택 실행 분리

components/admin/AdminMarkdownEditor.vue

@@ -12,15 +12,9 @@ import {
   getSelectionOffsetInElement
 } from '../../lib/markdown-live-selection.js'
 import {
-  deleteMarkdownSelectedLines,
   getMarkdownLineIndexAtOffset,
   getMarkdownLineStartOffset,
-  getMarkdownSelectionState,
-  insertMarkdownBlockSnippet,
-  insertMarkdownInlineLink,
-  replaceMarkdownSelection,
-  transformMarkdownSelectedLines,
-  wrapMarkdownInlineSelection
+  getMarkdownSelectionState
 } from '../../lib/markdown-source-selection.js'
 import {
   getEditorHistoryKeyboardAction,
@@ -50,6 +44,7 @@ import { useAdminMarkdownSlashMenuPosition } from '../../composables/useAdminMar
 import { useAdminMarkdownSlashCommandActions } from '../../composables/useAdminMarkdownSlashCommandActions.js'
 import { useAdminMarkdownHistory } from '../../composables/useAdminMarkdownHistory.js'
 import { useAdminMarkdownEditorFocusActions } from '../../composables/useAdminMarkdownEditorFocusActions.js'
+import { useAdminMarkdownSourceActions } from '../../composables/useAdminMarkdownSourceActions.js'
 import { useAdminMarkdownMediaPicker } from '../../composables/useAdminMarkdownMediaPicker.js'
 import { useAdminMarkdownFocusBridge } from '../../composables/useAdminMarkdownFocusBridge.js'
 import { useAdminMarkdownPreviewFocus } from '../../composables/useAdminMarkdownPreviewFocus.js'
@@ -843,156 +838,17 @@ const {
   restoreFocusAfterHistory: restoreEditorFocusAfterHistory
 })
 
-/**
- * 선택 영역을 지정 문자열로 교체한다.
- * @param {string} replacement - 대체 문자열
- * @param {number} cursorOffset - 교체 문자열 안 커서 위치
- * @param {number|null} selectionLength - 선택 길이
- * @returns {void}
- */
-const replaceSelection = (replacement, cursorOffset = replacement.length, selectionLength = null) => {
-  const { start, end, value } = getSelectionState()
-  const result = replaceMarkdownSelection({
-    value,
-    start,
-    end,
-    replacement,
-    cursorOffset,
-    selectionLength
-  })
-
-  markdownValue.value = result.value
-  setTextareaSelection(result.selectionStart, result.selectionEnd)
-}
-
-/**
- * 블록형 마크다운 조각을 커서 위치에 삽입한다.
- * @param {string} snippet - 삽입할 마크다운
- * @returns {void}
- */
-const insertBlockSnippet = (snippet) => {
-  const { start, end, value } = getSelectionState()
-  const result = insertMarkdownBlockSnippet({
-    value,
-    start,
-    end,
-    snippet
-  })
-
-  markdownValue.value = result.value
-  setTextareaSelection(result.selectionStart, result.selectionEnd)
-}
-
-/**
- * 선택 텍스트를 인라인 마크다운으로 감싼다.
- * @param {string} prefix - 앞 표식
- * @param {string} suffix - 뒤 표식
- * @param {string} placeholder - 선택이 없을 때 들어갈 텍스트
- * @returns {void}
- */
-const wrapInline = (prefix, suffix, placeholder) => {
-  const { start, end, value } = getSelectionState()
-  const result = wrapMarkdownInlineSelection({
-    value,
-    start,
-    end,
-    prefix,
-    suffix,
-    placeholder
-  })
-
-  markdownValue.value = result.value
-  setTextareaSelection(result.selectionStart, result.selectionEnd)
-}
-
-/**
- * 선택 텍스트를 링크 마크다운으로 바꾼다.
- * @returns {void}
- */
-const insertInlineLink = () => {
-  const { start, end, value } = getSelectionState()
-  const result = insertMarkdownInlineLink({
-    value,
-    start,
-    end
-  })
-
-  markdownValue.value = result.value
-  setTextareaSelection(result.selectionStart, result.selectionEnd)
-}
-
-/**
- * 선택된 줄을 변환한다.
- * @param {(line: string) => string} transformLine - 줄 변환 함수
- * @returns {void}
- */
-const transformSelectedLines = (transformLine) => {
-  const { start, end, value } = getSelectionState()
-  const result = transformMarkdownSelectedLines({
-    value,
-    start,
-    end,
-    transformLine
-  })
-
-  markdownValue.value = result.value
-  setTextareaSelection(result.selectionStart, result.selectionEnd)
-}
-
-/**
- * 소스 모드에서 현재 선택 범위가 걸친 줄을 삭제한다.
- * @returns {void}
- */
-const deleteSelectedSourceLines = () => {
-  const { start, end, value } = getSelectionState()
-  const result = deleteMarkdownSelectedLines({
-    value,
-    start,
-    end
-  })
-
-  markdownValue.value = result.value
-  setTextareaSelection(result.selectionStart, result.selectionEnd)
-}
-
-/**
- * 제목 마크다운을 적용한다.
- * @param {number} level - 제목 레벨
- * @returns {void}
- */
-const applyHeading = (level) => {
-  transformSelectedLines((line) => {
-    const text = line.replace(/^#{1,6}\s+/, '').trimStart()
-    return `${'#'.repeat(level)} ${text || '제목'}`
-  })
-}
-
-/**
- * 인용 마크다운을 적용한다.
- * @returns {void}
- */
-const applyQuote = () => {
-  transformSelectedLines((line) => line.startsWith('> ') ? line : `> ${line}`)
-}
-
-/**
- * 목록 마크다운을 적용한다.
- * @returns {void}
- */
-const applyList = () => {
-  transformSelectedLines((line) => line.startsWith('- ') ? line : `- ${line}`)
-}
-
-/**
- * 코드 블록을 삽입한다.
- * @returns {void}
- */
-const insertCodeBlock = () => {
-  const { start, end, value } = getSelectionState()
-  const selected = value.slice(start, end) || 'code'
-  const snippet = `\`\`\`\n${selected}\n\`\`\``
-  replaceSelection(snippet, 4, selected.length)
-}
+const {
+  replaceSelection,
+  insertBlockSnippet,
+  wrapInline,
+  insertInlineLink,
+  deleteSelectedSourceLines
+} = useAdminMarkdownSourceActions({
+  value: markdownValue,
+  getSelectionState,
+  setTextareaSelection
+})
 
 /**
  * 이미지 마크다운 문자열을 생성한다.