라이브 코드 블록 설정 패널 닫힘 수정

components/content/ContentMarkdownCalloutEditor.vue

@@ -37,7 +37,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['commit', 'delete-line', 'insert-above', 'insert-below', 'merge-with-previous', 'leave-block'])
+const emit = defineEmits(['commit', 'delete-line', 'insert-above', 'insert-below', 'merge-with-previous', 'leave-block', 'focus-line'])
 
 const bodyLines = computed(() => {
   const lines = String(props.modelValue ?? '').replace(/\r/g, '').split('\n')
@@ -122,6 +122,7 @@ const onBodyInput = (payload) => {
         @insert-below="emit('insert-below', $event)"
         @merge-with-previous="emit('merge-with-previous', bodySourceLine, $event)"
         @leave-block="emit('leave-block', $event)"
+        @focus-line="emit('focus-line', $event)"
       />
     </ProseCallout>
   </div>

components/content/ContentMarkdownCodeBlockEditor.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['commit', 'insert-above', 'insert-below', 'delete-line'])
+const emit = defineEmits(['commit', 'insert-above', 'insert-below', 'delete-line', 'focus-line'])
 
 const languageDraft = ref(props.language)
 const lineNumbersEnabled = ref(props.showLineNumbers)
@@ -123,6 +123,8 @@ const toggleLineNumbers = () => {
     class="content-markdown-code-block-editor"
     :show-line-numbers="lineNumbersEnabled"
     :line-numbers="gutterLines"
+    :data-source-line="bodySourceLine - 1"
+    :data-source-line-end="bodySourceLine + bodyLines.length"
   >
     <template #header-tools>
       <div
@@ -166,6 +168,7 @@ const toggleLineNumbers = () => {
       @insert-above="emit('insert-above', $event)"
       @insert-below="onExitBelow"
       @delete-line="emit('delete-line', $event)"
+      @focus-line="emit('focus-line', $event)"
     />
   </ProseCodeBlock>
 </template>

components/content/ContentMarkdownEditableInline.vue

@@ -120,7 +120,8 @@ const emit = defineEmits([
   'slash-end',
   'slash-apply',
   'enter-advance',
-  'leave-block'
+  'leave-block',
+  'focus-line'
 ])
 
 const rootRef = ref(null)
@@ -205,9 +206,26 @@ onBeforeUnmount(() => {
  */
 const onFocus = () => {
   isFocused.value = true
+  nextTick(emitFocusedSourceLine)
   syncSlashState()
 }
 
+/**
+ * 현재 커서가 있는 원본 줄을 부모에 알린다.
+ * @returns {void}
+ */
+const emitFocusedSourceLine = () => {
+  if (props.sourceLine === null) {
+    return
+  }
+
+  const lineContext = resolvedEnterMode.value === 'multiline'
+    ? getCaretLineContext()
+    : { lineIndex: 0 }
+
+  emit('focus-line', props.sourceLine + lineContext.lineIndex)
+}
+
 /**
  * 슬래시 명령 입력 상태를 부모에 알린다.
  * @returns {void}
@@ -241,6 +259,7 @@ const syncSlashState = () => {
  * @returns {void}
  */
 const onEditorInput = () => {
+  emitFocusedSourceLine()
   syncSlashState()
   emit('input', readEditorValue())
 }
@@ -1408,6 +1427,8 @@ const onCompositionEnd = () => {
  * @returns {void}
  */
 const onKeyup = (event) => {
+  emitFocusedSourceLine()
+
   const now = Date.now()
 
   if (
@@ -1473,6 +1494,7 @@ defineExpose({ focusEditor, readEditorValue })
     @focus="onFocus"
     @blur="onBlur"
     @input="onEditorInput"
+    @click="emitFocusedSourceLine"
     @paste="onPaste"
     @keydown="onKeydown"
     @keyup="onKeyup"

components/content/ContentMarkdownRenderer.vue

@@ -1637,6 +1637,19 @@ const onEditorFocusLine = (payload) => {
   pendingFocusOffset.value = typeof payload.offset === 'number' ? payload.offset : null
 }
 
+/**
+ * 자식 편집기의 현재 원본 줄을 상위 에디터에 알린다.
+ * @param {number} line - 원본 줄 번호
+ * @returns {void}
+ */
+const emitEditorFocusedLine = (line) => {
+  if (!Number.isInteger(line) || line < 0) {
+    return
+  }
+
+  emit('line-focus', line)
+}
+
 /**
  * 토글 편집 반영
  * @param {Object} block - 토글 블록
@@ -3102,7 +3115,7 @@ onBeforeUnmount(() => {
         @insert-above="onInsertAboveBlock(block)"
         @insert-below="onCalloutBlockInsertBelow(block, $event)"
         @merge-with-previous="onMergeWithPreviousLine"
-        @focus-line="onEditorFocusLine"
+        @focus-line="emitEditorFocusedLine"
       />
       <ProseCallout
         v-else-if="block.type === 'callout'"
@@ -3328,6 +3341,7 @@ onBeforeUnmount(() => {
         @insert-above="onInsertAboveBlock(block)"
         @insert-below="onCodeBlockInsertBelow(block, $event)"
         @delete-line="onDeleteLine"
+        @focus-line="emitEditorFocusedLine"
       />
       <ProseCodeBlock
         v-else-if="block.type === 'code'"