본문 문단과 줄바꿈 처리 정리

This commit is contained in:
2026-05-14 16:33:30 +09:00
parent f5bfb560e2
commit 113c974ee5
9 changed files with 200 additions and 31 deletions

View File

@@ -180,9 +180,12 @@ components/content/
- 이미지 갤러리
- `:::gallery` ~ `:::` fenced block 내부에 이미지 마크다운 행을 여러 개 작성
- 렌더링: `ContentMarkdownRenderer.vue` (그리드 + 라이트박스)
- 빈 줄
- 본문 중간의 내용 없는 줄은 줄 수만큼 spacer 블록으로 렌더링해 작성자가 의도한 세로 간격을 보존
- 레거시 빈 문단 마커(`<!--sori:blank-paragraph-->`)도 같은 spacer로 렌더링
- 문단과 줄바꿈
- 관리자 Markdown-first 에디터에서 일반 Enter는 새 문단을 만들기 위해 빈 줄 포함 `\\n\\n`을 삽입한다.
- Shift+Enter는 같은 문단 안 줄바꿈을 위해 단일 `\\n`을 삽입한다.
- 공개 본문 렌더러는 연속된 텍스트 줄을 하나의 문단으로 묶고 단일 줄바꿈은 `<br>`로 표시한다.
- 빈 줄과 레거시 빈 문단 마커(`<!--sori:blank-paragraph-->`)는 별도 간격 블록이 아니라 문단 경계로만 사용한다.
- 문단 하단 간격은 24px 기준으로 유지한다.
- 카드류
- Callout: `:::callout` ~ `:::` (왼쪽 강조선은 `var(--site-accent)`)
- Toggle: `:::toggle 제목` ~ `:::`
@@ -448,11 +451,12 @@ components/content/
- 저장 데이터는 기존 `content` 필드의 마크다운 문자열을 그대로 유지한다.
- 관리자 게시물/페이지 저장 API는 레거시 블록 배열·객체 본문 값이 들어와도 마크다운 문자열로 정규화한 뒤 저장한다.
- 본문 작성 모드는 textarea 기반으로 범위 선택, 다중 문단 복사/붙여넣기, 외부 마크다운 붙여넣기를 브라우저 기본 동작에 가깝게 처리한다.
- 본문 작성 모드에서 일반 Enter는 새 문단, Shift+Enter는 같은 문단 안 줄바꿈으로 처리한다.
- 클립보드에 `text/html`이 있으면 제목, 문단, 목록, 인용, 코드, 링크, 굵게, 기울임, 이미지를 기본 마크다운 조각으로 변환해 삽입한다.
- 본문 미리보기 모드는 공개 본문과 같은 `ContentMarkdownRenderer`를 사용한다.
- 툴바는 제목 1/2/3, 굵게, 기울임, 인라인 코드, 인용, 목록, 코드 블록, 구분선 삽입을 제공한다.
- `Cmd/Ctrl+B`, `Cmd/Ctrl+I`는 현재 선택 텍스트에 각각 굵게, 기울임 마크다운을 적용한다.
- `Cmd/Ctrl+E`는 작성 모드와 미리보기 모드를 전환한다.
- `Cmd/Ctrl+E`는 작성 모드와 미리보기 모드를 전환하며, 미리보기에서 작성 모드로 돌아올 때 기존 커서 위치와 textarea 스크롤을 복원한다.
- 관리자 미리보기 패널은 공개 렌더러를 쓰되 밝은 관리자 배경 기준의 본문 색상 변수를 별도로 지정한다.
- 이미지 파일을 붙여넣거나 드롭하면 관리자 업로드 API로 저장한 뒤 현재 커서 위치에 이미지 또는 갤러리 마크다운을 삽입한다.
- 미디어 라이브러리에서 단일 이미지를 선택하면 `![alt](url){width=...}` 형식으로 삽입한다.