diff --git a/components/admin/AdminMarkdownEditor.vue b/components/admin/AdminMarkdownEditor.vue index 06d7599..4df844e 100644 --- a/components/admin/AdminMarkdownEditor.vue +++ b/components/admin/AdminMarkdownEditor.vue @@ -78,6 +78,7 @@ import { useAdminMarkdownSlashMenu } from '../../composables/useAdminMarkdownSla import { useAdminMarkdownHistory } from '../../composables/useAdminMarkdownHistory.js' import { useAdminMarkdownMediaPicker } from '../../composables/useAdminMarkdownMediaPicker.js' import { useAdminMarkdownFocusBridge } from '../../composables/useAdminMarkdownFocusBridge.js' +import { useAdminMarkdownPreviewFocus } from '../../composables/useAdminMarkdownPreviewFocus.js' import { useAdminMarkdownTextareaFocus } from '../../composables/useAdminMarkdownTextareaFocus.js' import { useAdminMarkdownBlockPanel } from '../../composables/useAdminMarkdownBlockPanel.js' import { @@ -209,35 +210,16 @@ let liveSlashTextareaScrollElement = null */ const getWriteTextareaElement = () => writeSurfaceRef.value?.getTextareaElement?.() ?? null -/** - * 미리보기 표면 DOM을 반환한다. - * @returns {HTMLElement|null} 미리보기 DOM - */ -const getPreviewSurfaceElement = () => previewSurfaceRef.value?.getPreviewElement?.() ?? null - -/** - * 미리보기 표면 안의 지정 줄 DOM을 반환한다. - * @param {number|string|null} sourceLine - 원본 줄 번호 - * @returns {Element|null} 줄 DOM - */ -const getPreviewSourceLineElement = (sourceLine) => previewSurfaceRef.value?.getSourceLineElement?.(sourceLine) ?? null - -/** - * 라이브 편집 줄에 포커스를 이동한다. - * @param {...unknown} args - 포커스 인자 - * @returns {void} - */ -const focusPreviewEditableAtLine = (...args) => { - previewSurfaceRef.value?.focusEditableAtLine?.(...args) -} - -/** - * 라이브 문서 전체를 선택한다. - * @returns {void} - */ -const selectAllPreviewDocument = () => { - previewSurfaceRef.value?.selectAllLiveDocument?.() -} +const { + focusPreviewEditableAtLine, + getCurrentPreviewSourceLine, + getPreviewSourceLineElement, + getPreviewSurfaceElement, + scrollPreviewToTop, + selectAllPreviewDocument +} = useAdminMarkdownPreviewFocus({ + previewSurfaceRef +}) const markdownValue = computed({ get: () => normalizeMarkdownContent(props.modelValue), @@ -603,50 +585,6 @@ watch(markdownValue, (nextValue, previousValue) => { recordEditorHistory(previousValue) }) -/** - * 라이브 미리보기 스크롤을 맨 위로 맞춘다. - * @returns {void} - */ -const scrollPreviewToTop = () => { - if (getPreviewSurfaceElement()) { - getPreviewSurfaceElement().scrollTop = 0 - } -} - -/** - * 라이브 미리보기에서 현재 포커스 또는 화면 상단에 가까운 원본 줄을 찾는다. - * @returns {number|null} 원본 줄 번호 - */ -const getCurrentPreviewSourceLine = () => { - if (!import.meta.client || !getPreviewSurfaceElement()) { - return null - } - - const activeElement = document.activeElement - const focusedLineElement = getPreviewSurfaceElement().contains(activeElement) - ? activeElement?.closest?.('[data-source-line]') - : null - const focusedLine = Number(focusedLineElement?.getAttribute?.('data-source-line')) - - if (Number.isFinite(focusedLine)) { - return focusedLine - } - - const previewRect = getPreviewSurfaceElement().getBoundingClientRect() - const anchorTop = Math.max(previewRect.top, 0) + 24 - const candidates = [...getPreviewSurfaceElement().querySelectorAll('[data-source-line]')] - .map((element) => { - const rect = element.getBoundingClientRect() - const line = Number(element.getAttribute('data-source-line')) - - return { rect, line } - }) - .filter(({ rect, line }) => Number.isFinite(line) && rect.height > 0 && rect.bottom >= anchorTop) - .sort((a, b) => Math.abs(a.rect.top - anchorTop) - Math.abs(b.rect.top - anchorTop)) - - return candidates[0]?.line ?? null -} - const { rememberWritePositionForPreview, rememberPreviewPosition, diff --git a/composables/useAdminMarkdownPreviewFocus.js b/composables/useAdminMarkdownPreviewFocus.js new file mode 100644 index 0000000..fcb7eb9 --- /dev/null +++ b/composables/useAdminMarkdownPreviewFocus.js @@ -0,0 +1,124 @@ +/** + * 관리자 Markdown 라이브 미리보기 포커스 실행 함수를 만든다. + * @param {Object} options - 미리보기 포커스 옵션 + * @param {import('vue').Ref} options.previewSurfaceRef - 미리보기 표면 컴포넌트 ref + * @param {boolean} [options.isClient] - 클라이언트 실행 여부 테스트 값 + * @param {() => Element|null} [options.getActiveElement] - 현재 포커스 요소 반환 함수 + * @returns {Object} 미리보기 포커스 실행 함수 + */ +export const useAdminMarkdownPreviewFocus = (options) => { + /** + * 클라이언트 런타임 여부를 반환한다. + * @returns {boolean} 클라이언트 여부 + */ + const isClientRuntime = () => options.isClient ?? import.meta.client + + /** + * 미리보기 표면 컴포넌트 인스턴스를 반환한다. + * @returns {Object|null} 미리보기 표면 컴포넌트 + */ + const getPreviewSurfaceApi = () => options.previewSurfaceRef.value ?? null + + /** + * 미리보기 표면 DOM을 반환한다. + * @returns {HTMLElement|null} 미리보기 DOM + */ + const getPreviewSurfaceElement = () => getPreviewSurfaceApi()?.getPreviewElement?.() ?? null + + /** + * 미리보기 표면 안의 지정 줄 DOM을 반환한다. + * @param {number|string|null} sourceLine - 원본 줄 번호 + * @returns {Element|null} 줄 DOM + */ + const getPreviewSourceLineElement = (sourceLine) => getPreviewSurfaceApi()?.getSourceLineElement?.(sourceLine) ?? null + + /** + * 라이브 편집 줄에 포커스를 이동한다. + * @param {...unknown} args - 포커스 인자 + * @returns {void} + */ + const focusPreviewEditableAtLine = (...args) => { + getPreviewSurfaceApi()?.focusEditableAtLine?.(...args) + } + + /** + * 라이브 문서 전체를 선택한다. + * @returns {void} + */ + const selectAllPreviewDocument = () => { + getPreviewSurfaceApi()?.selectAllLiveDocument?.() + } + + /** + * 라이브 미리보기 스크롤을 맨 위로 맞춘다. + * @returns {void} + */ + const scrollPreviewToTop = () => { + const surface = getPreviewSurfaceElement() + + if (surface) { + surface.scrollTop = 0 + } + } + + /** + * 포커스된 라이브 줄에서 원본 줄 번호를 읽는다. + * @param {HTMLElement} surface - 미리보기 표면 DOM + * @returns {number|null} 원본 줄 번호 + */ + const getFocusedPreviewSourceLine = (surface) => { + const activeElement = typeof options.getActiveElement === 'function' + ? options.getActiveElement() + : document.activeElement + const focusedLineElement = surface.contains?.(activeElement) + ? activeElement?.closest?.('[data-source-line]') + : null + const focusedLine = Number(focusedLineElement?.getAttribute?.('data-source-line')) + + return Number.isFinite(focusedLine) ? focusedLine : null + } + + /** + * 화면 상단에 가까운 라이브 줄에서 원본 줄 번호를 읽는다. + * @param {HTMLElement} surface - 미리보기 표면 DOM + * @returns {number|null} 원본 줄 번호 + */ + const getNearestPreviewSourceLine = (surface) => { + const previewRect = surface.getBoundingClientRect() + const anchorTop = Math.max(previewRect.top, 0) + 24 + const candidates = [...surface.querySelectorAll('[data-source-line]')] + .map((element) => { + const rect = element.getBoundingClientRect() + const line = Number(element.getAttribute('data-source-line')) + + return { rect, line } + }) + .filter(({ rect, line }) => Number.isFinite(line) && rect.height > 0 && rect.bottom >= anchorTop) + .sort((a, b) => Math.abs(a.rect.top - anchorTop) - Math.abs(b.rect.top - anchorTop)) + + return candidates[0]?.line ?? null + } + + /** + * 라이브 미리보기에서 현재 포커스 또는 화면 상단에 가까운 원본 줄을 찾는다. + * @returns {number|null} 원본 줄 번호 + */ + const getCurrentPreviewSourceLine = () => { + const surface = getPreviewSurfaceElement() + + if (!isClientRuntime() || !surface) { + return null + } + + return getFocusedPreviewSourceLine(surface) ?? getNearestPreviewSourceLine(surface) + } + + return { + focusPreviewEditableAtLine, + getCurrentPreviewSourceLine, + getPreviewSourceLineElement, + getPreviewSurfaceElement, + scrollPreviewToTop, + selectAllPreviewDocument + } +} diff --git a/docs/history.md b/docs/history.md index af3986e..54315e9 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,3 +1,7 @@ +## 2026-07-28 v1.11.118 — 라이브 미리보기 DOM 실행부는 전용 composable이 맡는다 + +관리자 Markdown 에디터의 라이브 미리보기 포커스 실행은 미리보기 표면 컴포넌트 ref, 실제 DOM 줄 조회, 현재 포커스 줄 계산, 화면 상단 기준 줄 탐색, 전체 선택·스크롤 실행이 함께 필요하다. 이 DOM 실행 세부사항이 에디터 본체에 남으면 모드 전환 브리지와 블록 패널 정책을 볼 때 실제 정책보다 DOM 접근 코드가 먼저 보인다. 따라서 `useAdminMarkdownPreviewFocus`가 미리보기 표면 접근과 현재 source line 계산을 맡고, 에디터는 composable이 제공하는 실행 함수만 연결한다. + ## 2026-07-28 v1.11.116 — 블록 옵션 문자열 계산은 에디터 밖에서 만든다 관리자 Markdown 에디터의 오른쪽 패널은 이미지 캡션·갤러리 순서·임베드 URL·콜아웃/코드/토글 선언 줄·인라인 색상처럼 서로 다른 마크다운 문자열을 직접 조립하고 있었다. 이 계산이 컴포넌트 안에 남으면 패널 포커스 유지나 DOM 포커스 복원과 실제 저장 문법이 한 파일에서 계속 얽힌다. 따라서 `markdown-editor-block-options` helper가 줄 교체 계획과 새 본문 값을 만들고, 에디터는 계산 결과를 현재 문서에 적용하는 역할만 맡게 한다. diff --git a/docs/map.md b/docs/map.md index f91ff10..667dcea 100644 --- a/docs/map.md +++ b/docs/map.md @@ -28,6 +28,7 @@ | composables/useAdminMarkdownSlashMenu.js | 관리자 Markdown 에디터 슬래시 메뉴 상태·검색 결과·취소 당시 줄 내용 기준 억제·키보드 탐색 타이머 관리 | | composables/useAdminMarkdownHistory.js | 관리자 Markdown 에디터 undo/redo 스택·기록 그룹화·복원 중 상태 관리 | | composables/useAdminMarkdownFocusBridge.js | 관리자 Markdown 에디터 작성/라이브 모드 전환의 pending 포커스 상태, 위치 기억, 전환 후 textarea·라이브 편집 줄 복원 콜백 실행 순서 관리 | +| composables/useAdminMarkdownPreviewFocus.js | 관리자 Markdown 에디터 라이브 미리보기 표면 DOM 접근, 현재 source line 계산, 상단 스크롤, 전체 선택, 줄 포커스 실행 관리 | | composables/useAdminMarkdownTextareaFocus.js | 관리자 Markdown 에디터 textarea 높이·거터 줄 높이·선택 기억·커서 줄 갱신·지정 줄 포커스·스크롤 실행 관리 | | composables/useAdminMarkdownBlockPanel.js | 관리자 Markdown 에디터 블록 설정 패널 표시 상태·포커스 유지·IME 조합 중 직전 컨텍스트 유지·인라인 색상 패널 우선순위 관리 | | composables/useAdminMarkdownMediaPicker.js | 관리자 Markdown 에디터 미디어 선택 모달 열기·닫기·탭·검색어·페이지·선택 상태·표시 계산, 서버 미디어 목록 조회, 업로드 한도 검증·전송, 업로드 후 라이브러리 탭 전환·선택 상태 갱신 관리 | @@ -143,6 +144,7 @@ | tests/markdown-editor-history.test.js | 관리자 Markdown 에디터 undo/redo 히스토리 항목과 선택 범위 보정 단위 회귀 테스트 | | tests/markdown-editor-keyboard.test.js | 관리자 Markdown 에디터 전역 단축키 판별 단위 회귀 테스트 | | tests/useAdminMarkdownFocusBridge.test.js | 관리자 Markdown 에디터 작성/라이브 모드 전환 포커스 대기 상태와 복원 콜백 단위 테스트 | +| tests/useAdminMarkdownPreviewFocus.test.js | 관리자 Markdown 에디터 라이브 미리보기 표면 위임·현재 source line 계산·상단 스크롤 단위 테스트 | | tests/markdown-source-selection.test.js | 관리자 Markdown 에디터 소스 textarea 선택·치환·줄 변환 helper 단위 테스트 | | tests/admin-post-settings-sidebar-events.test.js | 관리자 글쓰기 설정 사이드바가 블록 패널의 다중 인자 이벤트를 그대로 전달하는지 확인하는 회귀 테스트 | | tests/markdown-editor-block-options.test.js | 관리자 Markdown 에디터 블록 옵션 줄 교체 계획과 인라인 색상 본문 변경 helper 단위 테스트 | diff --git a/docs/spec.md b/docs/spec.md index 36c76da..a75b838 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -112,7 +112,7 @@ - Markdown 리스트 마커는 항목이 여러 줄로 줄바꿈되어도 항목 전체 높이 중앙이 아니라 첫 줄 기준으로 정렬한다. - 표준 마크다운 표(`| 헤더 | ... |`, `| --- | ... |`)는 본문에서 가로 스크롤 가능한 HTML table로 렌더링한다. 정렬 구분선(`:---`, `:---:`, `---:`)은 각각 좌/중앙/우 정렬로 반영한다. 표 헤더와 셀 내부의 인라인 링크·굵게·기울임·인라인 코드를 렌더링하고, 셀 내부 `
` 또는 `
`은 줄바꿈으로 표시한다. 링크 텍스트 안의 `**굵게**` 같은 중첩 인라인 문법도 렌더링한다. - 인용문(`>`)은 왼쪽 세로 막대형 기본 스타일로 표시한다. 기본 인용 텍스트는 라이트·다크 모드 모두 사이트 본문 텍스트 색상(`--site-text`)을 따른다. 첫 줄 옵션 `> [!bg=blue]` 또는 `> {bg=blue}`는 인용 막대 색상으로 반영하며, 지원 값은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이다. 인용 본문 안의 `::red[**텍스트**]` 같은 색상·굵게·링크 등 인라인 문법은 일반 문단과 같은 규칙으로 렌더링한다. -- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 단일 이미지는 전체 너비(자동)·갤러리 2장 1칸(356px)·갤러리 3장 1칸(235px)·갤러리 3장 2칸(477px)·직접 입력 셀렉트로 표시 너비를 고를 수 있으며 저장 시 이미지 마크다운 뒤에 `{size=숫자}` 옵션을 붙인다. 공개 본문은 이 값을 최대 너비로 적용하고 원본 비율은 유지한다. 직접 입력은 120~1600px 범위로 저장하되 입력 중에는 범위 보정을 즉시 강제하지 않는다. 콜아웃은 제목·아이콘 표시 ON/OFF 토글·아이콘·배경색, 코드 블록은 언어 셀렉트·줄번호 표시 ON/OFF 토글, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 콜아웃 아이콘 입력·프리셋은 아이콘 표시가 꺼진 상태에서 흐린 비활성 영역으로 표시하고, 토글을 켠 뒤에만 조작한다. 코드 블록 줄번호는 기본 숨김이며, 켠 경우에만 선언 줄에 `line-numbers`를 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 인용·콜아웃·토글 본문은 라이브 모드에서 굵게·링크·색상 같은 인라인 문법과 기본 불릿/번호 목록을 표시한다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. `/html`은 `:::html`, `/link`는 `:::link`, `/iframe`은 `:::iframe` fenced 블록을 삽입한다. 소스·라이브 모드 모두 텍스트를 선택한 뒤 `Cmd/Ctrl+K`를 누르면 `[선택 텍스트](https://)` 인라인 링크 마크다운을 삽입하고 URL 부분을 선택한다. 소스 textarea의 선택 치환·인라인 감싸기·링크 삽입·줄 변환 계산은 `markdown-source-selection` helper가 담당하고, 라이브 전환 포커스 대상 보정과 코드 펜스 본문 줄 판별은 `markdown-editor-focus` helper가 담당한다. 슬래시 명령의 미디어 모달·마크다운 줄 삽입 적용 계획과 적용 후 에디터 효과 계획은 `markdown-slash-commands` helper가 계산한다. 미디어 선택 모달의 상태·표시 계산, 서버 목록 조회, 업로드 실행과 업로드 후 선택 상태 갱신은 `useAdminMarkdownMediaPicker`가 관리하고, 선택 미디어 삽입 계획과 업로드 입력·응답 정규화는 `markdown-editor-media` helper가 계산한다. 오른쪽 블록 패널의 미디어·임베드·인용·콜아웃·코드·토글 옵션 줄 교체와 인라인 색상 본문 변경 계산은 `markdown-editor-block-options` helper가 담당한다. 에디터는 선택·업로드·옵션 변경 결과의 본문 반영과 실제 포커스·스크롤 실행만 처리한다. 작성/라이브 모드 전환의 pending 포커스 상태와 복원 순서는 `useAdminMarkdownFocusBridge`가 관리한다. 에디터 되돌리기·다시 실행은 `useAdminMarkdownHistory`에서 본문 값과 선택 위치를 함께 복원해 줄 앞 이동을 줄인다. 라이브 모드에서 위·아래 방향키로 인접 블록을 이동하면 커서가 화면 밖으로 벗어날 때 편집 스크롤 영역도 함께 이동한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다. 인용 편집 중 브라우저 자동 목록 보정으로 `>. ` 접두가 섞이면 커밋 시 정리한다. +- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 단일 이미지는 전체 너비(자동)·갤러리 2장 1칸(356px)·갤러리 3장 1칸(235px)·갤러리 3장 2칸(477px)·직접 입력 셀렉트로 표시 너비를 고를 수 있으며 저장 시 이미지 마크다운 뒤에 `{size=숫자}` 옵션을 붙인다. 공개 본문은 이 값을 최대 너비로 적용하고 원본 비율은 유지한다. 직접 입력은 120~1600px 범위로 저장하되 입력 중에는 범위 보정을 즉시 강제하지 않는다. 콜아웃은 제목·아이콘 표시 ON/OFF 토글·아이콘·배경색, 코드 블록은 언어 셀렉트·줄번호 표시 ON/OFF 토글, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 콜아웃 아이콘 입력·프리셋은 아이콘 표시가 꺼진 상태에서 흐린 비활성 영역으로 표시하고, 토글을 켠 뒤에만 조작한다. 코드 블록 줄번호는 기본 숨김이며, 켠 경우에만 선언 줄에 `line-numbers`를 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 인용·콜아웃·토글 본문은 라이브 모드에서 굵게·링크·색상 같은 인라인 문법과 기본 불릿/번호 목록을 표시한다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. `/html`은 `:::html`, `/link`는 `:::link`, `/iframe`은 `:::iframe` fenced 블록을 삽입한다. 소스·라이브 모드 모두 텍스트를 선택한 뒤 `Cmd/Ctrl+K`를 누르면 `[선택 텍스트](https://)` 인라인 링크 마크다운을 삽입하고 URL 부분을 선택한다. 소스 textarea의 선택 치환·인라인 감싸기·링크 삽입·줄 변환 계산은 `markdown-source-selection` helper가 담당하고, 라이브 전환 포커스 대상 보정과 코드 펜스 본문 줄 판별은 `markdown-editor-focus` helper가 담당한다. 슬래시 명령의 미디어 모달·마크다운 줄 삽입 적용 계획과 적용 후 에디터 효과 계획은 `markdown-slash-commands` helper가 계산한다. 미디어 선택 모달의 상태·표시 계산, 서버 목록 조회, 업로드 실행과 업로드 후 선택 상태 갱신은 `useAdminMarkdownMediaPicker`가 관리하고, 선택 미디어 삽입 계획과 업로드 입력·응답 정규화는 `markdown-editor-media` helper가 계산한다. 오른쪽 블록 패널의 미디어·임베드·인용·콜아웃·코드·토글 옵션 줄 교체와 인라인 색상 본문 변경 계산은 `markdown-editor-block-options` helper가 담당한다. 에디터는 선택·업로드·옵션 변경 결과의 본문 반영과 실제 포커스·스크롤 실행만 처리한다. 작성/라이브 모드 전환의 pending 포커스 상태와 복원 순서는 `useAdminMarkdownFocusBridge`가 관리하고, 라이브 미리보기 표면 DOM 접근·현재 source line 계산·줄 포커스 실행은 `useAdminMarkdownPreviewFocus`가 관리한다. 에디터 되돌리기·다시 실행은 `useAdminMarkdownHistory`에서 본문 값과 선택 위치를 함께 복원해 줄 앞 이동을 줄인다. 라이브 모드에서 위·아래 방향키로 인접 블록을 이동하면 커서가 화면 밖으로 벗어날 때 편집 스크롤 영역도 함께 이동한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다. 인용 편집 중 브라우저 자동 목록 보정으로 `>. ` 접두가 섞이면 커밋 시 정리한다. - 게시물 상세의 오른쪽 사이드바는 데스크톱에서 블로그 소개·Follow 대신 본문 H1~H3 제목 기반 목차를 최상단에 표시한다. 목차는 별도 최대 높이와 내부 스크롤을 두지 않고 전체 목록이 먼저 펼쳐지며, 왼쪽 기준선과 브랜드 컬러 활성 항목 표시선을 둔다. 목차 항목은 최소 24px 높이와 세로 중앙 정렬을 사용하며, 2줄 이상 제목에서는 항목 높이에 맞춰 활성 표시선도 함께 늘어난다. 활성 표시선은 항목의 가상 요소 배경 막대로 그려 텍스트 시작점이 밀리지 않게 한다. 목차 링크는 본문 제목에 부여된 앵커 ID로 부드럽게 이동하며, 고정 상단 헤더 높이와 여백을 반영해 제목이 화면 밖에 걸리지 않게 한다. 본문 스크롤 중에는 현재 제목에 해당하는 목차 항목을 강조하고, 목차 항목이 많으면 오른쪽 사이드바 스크롤이 활성 항목을 따라간다. 본문 제목이 없으면 목차 없음 문구를 표시한다. 오른쪽 사이드바가 본문 아래로 내려가는 모바일 폭에서는 목차를 숨긴다. 게시물 상세에서는 일반 오른쪽 사이드 광고 대신 게시물 사이드 광고 코드를 목차 아래에 표시하고, 왼쪽 사이드바에는 게시물 광고를 표시하지 않는다. 게시물 상세 목차와 게시물 사이드 광고 슬롯은 하단 구분선을 표시하지 않는다. - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다. - 공개 회원 로그인 세션의 회원 ID가 게시물 `author_id`와 같으면 제목 우측 공유 버튼 옆에 수정 아이콘을 표시하며, 클릭 시 `/admin/posts/:id` 편집 화면을 새 탭으로 연다. 별도 관리자 세션만 있거나 비로그인 상태에서는 표시하지 않는다. diff --git a/docs/todo.md b/docs/todo.md index 7fe1d0e..a147af3 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -3,7 +3,7 @@ ## v1.11 내부 개선 - 거대 컴포넌트 책임 분리 진행. - - `components/admin/AdminMarkdownEditor.vue`: 라이브 편집 줄 포커스 실행과 남은 블록 이벤트 연결을 단계적으로 composable 또는 하위 컴포넌트로 분리. + - `components/admin/AdminMarkdownEditor.vue`: 남은 블록 이벤트 연결을 단계적으로 composable 또는 하위 컴포넌트로 분리. - 미디어 카탈로그 전환 코드 수명 정리. - 운영 `MEDIA_CATALOG_MODE=database` 안정화 후 `shadow`/`filesystem` 런타임 분기 축소 가능 여부 검토. - fallback은 운영 안정성에 필요하므로 제거 전 reconcile·로그·테스트 기준을 먼저 정리. diff --git a/docs/update.md b/docs/update.md index 6c37beb..ab9f4b0 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,11 @@ # 업데이트 이력 +## v1.11.118 + +- 관리자 Markdown 에디터의 라이브 미리보기 DOM 접근·현재 source line 계산·상단 스크롤·전체 선택·줄 포커스 실행을 `useAdminMarkdownPreviewFocus` composable로 분리. +- 에디터 컴포넌트는 미리보기 표면 ref만 주입하고 라이브 포커스 실행 함수를 재사용하도록 정리. +- 미리보기 포커스 composable의 표면 위임·현재 줄 계산·상단 스크롤 단위 테스트 추가. + ## v1.11.117 - 관리자 글쓰기 오른쪽 블록 패널에서 단일 이미지 표시 너비 변경 이벤트의 `imageIndex`와 `patch`가 사이드바를 거치며 누락되던 문제 수정. diff --git a/package-lock.json b/package-lock.json index 75fa93b..ea1709b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sori.studio", - "version": "1.11.117", + "version": "1.11.118", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sori.studio", - "version": "1.11.117", + "version": "1.11.118", "hasInstallScript": true, "dependencies": { "@nuxtjs/tailwindcss": "^6.14.0", diff --git a/package.json b/package.json index 3f44afd..e61bc18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "1.11.117", + "version": "1.11.118", "private": true, "type": "module", "imports": { diff --git a/tests/useAdminMarkdownPreviewFocus.test.js b/tests/useAdminMarkdownPreviewFocus.test.js new file mode 100644 index 0000000..5abb7d5 --- /dev/null +++ b/tests/useAdminMarkdownPreviewFocus.test.js @@ -0,0 +1,144 @@ +import assert from 'node:assert/strict' +import test from 'node:test' +import { ref } from 'vue' +import { useAdminMarkdownPreviewFocus } from '../composables/useAdminMarkdownPreviewFocus.js' + +/** + * 테스트용 source line DOM 대역을 만든다. + * @param {Object} options - 줄 옵션 + * @returns {Object} 줄 DOM 대역 + */ +const createSourceLineStub = (options) => { + return { + line: options.line, + rect: options.rect, + closest: (selector) => selector === '[data-source-line]' ? options.closestResult ?? null : null, + getAttribute: (name) => name === 'data-source-line' ? String(options.line) : null, + getBoundingClientRect: () => options.rect + } +} + +/** + * 테스트용 미리보기 표면 상태를 만든다. + * @param {Object} options - 테스트 옵션 + * @returns {Object} 테스트 상태 + */ +const createPreviewFocusState = (options = {}) => { + const calls = { + focusEditableAtLine: [], + selectAllLiveDocument: 0 + } + const sourceLines = options.sourceLines ?? [] + const surface = { + scrollTop: options.scrollTop ?? 80, + contains: (element) => options.containedElements?.includes(element) ?? false, + querySelectorAll: (selector) => selector === '[data-source-line]' ? sourceLines : [], + getBoundingClientRect: () => options.surfaceRect ?? { + top: 10, + bottom: 600, + height: 590 + } + } + const previewSurfaceRef = ref({ + getPreviewElement: () => surface, + getSourceLineElement: (sourceLine) => sourceLines.find((line) => line.line === sourceLine) ?? null, + focusEditableAtLine: (...args) => { + calls.focusEditableAtLine.push(args) + }, + selectAllLiveDocument: () => { + calls.selectAllLiveDocument += 1 + } + }) + const focusState = useAdminMarkdownPreviewFocus({ + previewSurfaceRef, + isClient: true, + getActiveElement: () => options.activeElement ?? null + }) + + return { + calls, + focusState, + previewSurfaceRef, + sourceLines, + surface + } +} + +test('미리보기 표면 함수 호출을 표면 컴포넌트로 위임한다', () => { + const line = createSourceLineStub({ + line: 3, + rect: { top: 40, bottom: 70, height: 30 } + }) + const state = createPreviewFocusState({ + sourceLines: [line] + }) + + assert.equal(state.focusState.getPreviewSurfaceElement(), state.surface) + assert.equal(state.focusState.getPreviewSourceLineElement(3), line) + + state.focusState.focusPreviewEditableAtLine(3, 0, 'start') + state.focusState.selectAllPreviewDocument() + + assert.deepEqual(state.calls.focusEditableAtLine, [[3, 0, 'start']]) + assert.equal(state.calls.selectAllLiveDocument, 1) +}) + +test('미리보기 상단 스크롤을 0으로 되돌린다', () => { + const state = createPreviewFocusState() + + state.focusState.scrollPreviewToTop() + + assert.equal(state.surface.scrollTop, 0) +}) + +test('현재 포커스가 미리보기 줄 안에 있으면 해당 source line을 반환한다', () => { + const focusedLine = createSourceLineStub({ + line: 7, + rect: { top: 240, bottom: 270, height: 30 } + }) + const activeElement = { + closest: (selector) => selector === '[data-source-line]' ? focusedLine : null + } + const state = createPreviewFocusState({ + activeElement, + containedElements: [activeElement], + sourceLines: [focusedLine] + }) + + assert.equal(state.focusState.getCurrentPreviewSourceLine(), 7) +}) + +test('포커스 줄이 없으면 화면 상단 기준으로 가까운 source line을 반환한다', () => { + const firstLine = createSourceLineStub({ + line: 1, + rect: { top: 4, bottom: 20, height: 16 } + }) + const secondLine = createSourceLineStub({ + line: 2, + rect: { top: 40, bottom: 70, height: 30 } + }) + const thirdLine = createSourceLineStub({ + line: 3, + rect: { top: 120, bottom: 150, height: 30 } + }) + const state = createPreviewFocusState({ + sourceLines: [thirdLine, firstLine, secondLine], + surfaceRect: { + top: 10, + bottom: 500, + height: 490 + } + }) + + assert.equal(state.focusState.getCurrentPreviewSourceLine(), 2) +}) + +test('클라이언트가 아니거나 표면이 없으면 현재 줄을 반환하지 않는다', () => { + const previewSurfaceRef = ref(null) + const focusState = useAdminMarkdownPreviewFocus({ + previewSurfaceRef, + isClient: false + }) + + assert.equal(focusState.getCurrentPreviewSourceLine(), null) +})