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

2026-06-09 14:19:26 +09:00
parent b69039c7ff
commit 34b2d0a4c0
11 changed files with 64 additions and 10 deletions
--- a/components/content/ContentMarkdownCalloutEditor.vue
+++ b/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>
--- a/components/content/ContentMarkdownCodeBlockEditor.vue
+++ b/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>
--- a/components/content/ContentMarkdownEditableInline.vue
+++ b/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"
--- a/components/content/ContentMarkdownRenderer.vue
+++ b/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'"
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,9 @@
 # 업데이트 요약

+## v1.5.87
+
+- 라이브 글쓰기에서 코드블럭을 벗어난 뒤에도 오른쪽 코드블럭 설정 패널이 남아 있던 문제를 수정했다.
+
 ## v1.5.86

 - 다크 모드에서 인용문 글자가 검게 표시되어 읽기 어려운 문제를 수정했다.
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
 # 배포 가이드

-> 로컬 기준 v1.5.86에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.5.87에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.

 ## 빌드 유형

@@ -16,6 +16,11 @@

 ## 로컬 개발

+### v1.5.87 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 게시물 작성 라이브 모드에서 코드 블록에 커서를 두면 코드 설정 패널이 열리고, 일반 문단으로 커서를 옮기면 패널이 닫히는지 확인한다.
+
 ### v1.5.86 참고

 - 추가 DB 마이그레이션은 없다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -101,7 +101,7 @@
 | components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 |
 | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(왼쪽 상태 텍스트·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약·멤버십·비공개 상태 저장, 발행 모달(중앙 배치), 좌우 설정 패널(작은 화면은 오른쪽 고정 오버레이), 오른쪽 `View Post` 링크, 오른쪽 하단 본문 통계(단어·문자·공백·읽기 시간·블록·이미지), 미리보기 emit·미저장 이탈 가드, 대표 이미지 본문 상단 표시 토글, 추천 글 토글, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, 페이지 공개 상태 선택, HTML 문서 기본 모드, 빈 본문/`!`+Tab HTML 골격 자동 완성, 항상 보이는 일반 텍스트/HTML 모드 선택, 한글 제목 영문 슬러그 자동 변환, HTML textarea 커서 위치 파일 URL 삽입 |
-| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령·미디어 모달(이미지·갤러리·비디오·오디오·파일), 커서 블록 컨텍스트·`block-panel` emit, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 소스·라이브 `Cmd+Shift+K` 줄 삭제, 소스·라이브 `Cmd/Ctrl+K` 링크 삽입, 코드·콜아웃·토글 내부 줄 삭제, 라이브 fenced 블록 현재 닫는 줄 기준 교체, 블록 패널 바깥 클릭 닫기·미디어 모달 중 유지, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원(코드·콜아웃·토글 선언 줄은 본문 줄로 보정), 라이브 슬래시 명령 후 포커스 복원 지연 |
+| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령·미디어 모달(이미지·갤러리·비디오·오디오·파일), 커서 블록 컨텍스트·`block-panel` emit, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 소스·라이브 `Cmd+Shift+K` 줄 삭제, 소스·라이브 `Cmd/Ctrl+K` 링크 삽입, 코드·콜아웃·토글 내부 줄 삭제, 라이브 fenced 블록 현재 닫는 줄 기준 교체, 블록 패널 바깥 클릭·지원 블록 밖 커서 이동 시 닫기·미디어 모달 중 유지, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원(코드·콜아웃·토글 선언 줄은 본문 줄로 보정), 라이브 슬래시 명령 후 포커스 복원 지연 |
 | components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(이미지·갤러리·임베드·인용 배경색·콜아웃 제목·아이콘·배경색·코드·토글), 갤러리 선택 이미지 강조 |
 | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·인용과 같은 배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼(이름/슬러그/설명/색상만 편집) |
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -661,7 +661,7 @@ components/content/
 - 툴바 `이미지`·`갤러리`는 미디어 모달을 연다. 모달 기본 탭은 **미디어 라이브러리**이며 **업로드** 탭에서 드래그·파일 선택 후 즉시 삽입한다.
 - 미디어 라이브러리에서 단일 이미지를 선택하면 `![alt](url)` 형식으로 삽입한다.
 - 미디어 라이브러리에서 여러 이미지를 선택하면 `:::gallery` fenced block으로 삽입한다.
- 작성 모드에서 커서가 이미지 마크다운 줄, `:::gallery`, 단독 URL 임베드 줄, 기존 `:::embed`, 인용문, `:::callout`, 코드 fenced 블록, `:::toggle` 블록 안에 있고 textarea(또는 블록 패널)에 포커스가 있으면 게시물 설정 사이드바(420px) 위에 **블록 설정 패널**(`AdminEditorBlockPanel`)이 오른쪽에서 슬라이드 인한다. 본문·패널 바깥을 클릭하면 슬라이드 아웃한다. 갤러리 이미지 추가 미디어 모달을 여는 동안에는 활성 갤러리 컨텍스트와 패널 상태를 유지한다.
+- 작성 모드에서 커서가 이미지 마크다운 줄, `:::gallery`, 단독 URL 임베드 줄, 기존 `:::embed`, 인용문, `:::callout`, 코드 fenced 블록, `:::toggle` 블록 안에 있고 textarea(또는 블록 패널)에 포커스가 있으면 게시물 설정 사이드바(420px) 위에 **블록 설정 패널**(`AdminEditorBlockPanel`)이 오른쪽에서 슬라이드 인한다. 본문·패널 바깥을 클릭하면 슬라이드 아웃한다. 라이브 모드 멀티라인 편집기는 실제 커서가 있는 원본 줄을 패널 상태에 반영하며, 커서가 지원 블록 밖으로 이동하면 직전 코드·콜아웃·인용 설정 패널을 닫는다. 갤러리 이미지 추가 미디어 모달을 여는 동안에는 활성 갤러리 컨텍스트와 패널 상태를 유지한다.
 - 블록 설정 패널: 이미지·갤러리(캡션, **파일명을 캡션으로 사용** 토글·기본 끔, URL, 갤러리 순서·삭제·추가), 임베드(URL), 인용 배경색, 콜아웃 제목·아이콘·배경색, 코드 언어·줄번호, 토글 기본 펼침 상태. `AdminMarkdownEditor`는 `block-panel` 이벤트로 상태를 `AdminPostForm`에 전달한다.
 - 미디어 라이브러리 갤러리 다중 선택 시 선택 항목은 **주황(`#ff7a00`) 굵은 테두리**로 표시한다.
 - 옵시디언식 토큰 숨김/백스페이스 복원 Live Preview는 후속 단계로 둔다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 이력

+## v1.5.87
+
+- 게시물 글쓰기: 라이브 모드 코드 블록 밖으로 커서가 이동하면 오른쪽 코드 블록 설정 패널이 닫히도록 수정.
+- 라이브 편집기: 멀티라인 편집 영역의 실제 커서 원본 줄을 블록 패널 상태에 반영하도록 보강.
+
 ## v1.5.86

 - 공개 본문: 기본 인용문 텍스트가 다크 모드에서 사이트 텍스트 색상을 따르도록 수정.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.5.86",
+  "version": "1.5.87",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.5.86",
+      "version": "1.5.87",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.5.86",
+  "version": "1.5.87",
  "private": true,
  "type": "module",
  "imports": {