From 16a12d304d6048a5584821ec81089eab5da49722 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Fri, 5 Jun 2026 11:09:33 +0900
Subject: [PATCH] =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=20=EC=BD=9C?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B9=88=20=EC=A4=84=20=EB=B3=B4=EC=A1=B4?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content/ContentMarkdownEditableInline.vue      | 14 +++++++++-----
 docs/map.md                                        |  1 +
 docs/spec.md                                       |  2 +-
 docs/update.md                                     |  5 +++++
 package-lock.json                                  |  4 ++--
 package.json                                       |  2 +-
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/content/ContentMarkdownEditableInline.vue b/components/content/ContentMarkdownEditableInline.vue
index 273aeab..3e57556 100644
--- a/components/content/ContentMarkdownEditableInline.vue
+++ b/components/content/ContentMarkdownEditableInline.vue
@@ -1,6 +1,5 @@
 <script setup>
 import {
-  escapeHtml,
   getEditableCaretOffset,
   markdownInlineToHtml,
   readEditableTextFromElement,
@@ -133,11 +132,11 @@ const resolvedEnterMode = computed(() => {
 const toEditorHtml = () => markdownInlineToHtml(props.modelValue.replace(/\n/g, ' '))
 
 /**
- * plainText 모드용 편집 HTML을 만든다.
+ * plainText 모드용 편집 텍스트를 만든다.
  * @param {string} value - 본문
- * @returns {string} HTML
+ * @returns {string} 텍스트
  */
-const plainTextToEditorHtml = (value) => escapeHtml(String(value ?? '')).replace(/\n/g, '<br>')
+const plainTextToEditorText = (value) => String(value ?? '')
 
 /**
  * 편집 영역 HTML을 동기화한다.
@@ -154,7 +153,7 @@ const syncEditorHtml = () => {
   }
 
   if (props.plainText) {
-    rootRef.value.innerHTML = plainTextToEditorHtml(props.modelValue)
+    rootRef.value.textContent = plainTextToEditorText(props.modelValue)
     return
   }
 
@@ -1069,6 +1068,7 @@ defineExpose({ focusEditor, readEditorValue })
     :class="[
       blockClass,
       isFocused ? 'content-markdown-editable-inline--focused' : 'content-markdown-editable-inline--idle',
+      plainText ? 'content-markdown-editable-inline--plain' : '',
       showingRaw ? 'content-markdown-editable-inline--raw' : ''
     ]"
     :data-source-line="sourceLine ?? undefined"
@@ -1098,6 +1098,10 @@ defineExpose({ focusEditor, readEditorValue })
   background-color: transparent;
 }
 
+.content-markdown-editable-inline--plain {
+  white-space: pre-wrap;
+}
+
 .content-markdown-editable-inline--raw {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.92em;
diff --git a/docs/map.md b/docs/map.md
index 77baa73..a9fe69f 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -113,6 +113,7 @@
 |------|-----------|
 | components/content/ContentRenderer.vue | 게시물/페이지 본문 |
 | components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 문단 text-base(16px), 빈 줄 spacer 보존·hard break `<br>` 처리, 확장 블록 파싱, `:::` fenced 블록 원본 범위 보정, 닫히지 않은 코드 펜스 하위 콘텐츠 보호, 인용 막대 색상 옵션(`> [!bg=...]`), 라이브 문단 `>` 즉시 인용 변환과 ` ``` `·`!!!` Enter 코드 블록·콜아웃 단축 생성, 라이브 콜아웃·인용 포커스 기반 오른쪽 설정 패널 연결, 라이브 인용·콜아웃 멀티라인 편집 줄 범위 포커스와 위/아래 방향키 외부 문단 이탈, 인용 Backspace 문단 복귀, 라이브 방향키 이동 시 편집 가능한 줄·카드형 블록 탐색, 라이브 코드·콜아웃·토글 내부 줄 삭제와 마지막 줄 블록 삭제, 라이브 이미지·갤러리 드래그 병합·추가·분리 UI, 갤러리 비율 기반 행 레이아웃, 라이브 갤러리 개별 이미지 편집·삭제, 리스트 마커 파란 계열 통일 |
+| components/content/ContentMarkdownEditableInline.vue | 라이브 모드 공통 인라인 편집 영역, 일반 인라인 마크다운 렌더링과 plain text 멀티라인 본문 보존, 첫 줄 빈 줄 포함 줄바꿈 유지 |
 | components/content/ProseHeading.vue | h1~h6 제목, 기본 mt-12 제거 |
 | components/content/ProseImage.vue | 본문 내 이미지, 로드 실패·빈 URL placeholder |
 | components/content/ProseList.vue | 목록 |
diff --git a/docs/spec.md b/docs/spec.md
index b6ea43c..d1eda3e 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -628,7 +628,7 @@ components/content/
 - `ProseImage`는 URL이 비어 있거나 로드에 실패해도 최소 높이 placeholder와 「이미지를 불러올 수 없음」 안내를 표시해 라이브 모드에서 블록 선택·편집이 가능하다.
 - 인용(`>`) 블록은 첫 인용 줄에 `> [!bg=yellow]` 또는 `> {bg=yellow}` 옵션 줄을 두면 해당 줄은 숨기고 블록 배경을 바꾼다. 지원 배경 프리셋은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이며, 옵션이 없으면 회색 기본 인용 스타일을 쓴다.
 - 관리자 **라이브 모드**(미리보기) 인라인 편집: 문단·빈 줄·제목·인용·목록·코드 블록·콜아웃·토글을 렌더 스타일 그대로 contenteditable로 수정한다. blur·문단 이동(방향키) 시 편집 영역의 `<strong>`·`<em>` 등을 `**`·`*` 마크다운으로 다시 직렬화해 저장한다. **Enter**·**Shift+Enter** 모두 다음 문단(블록) 분리. 문단 안 `/`로 슬래시 명령 메뉴(`/image`+Enter 이미지 삽입 등). **소스(작성) 모드** textarea에서도 동일한 `/` 슬래시 메뉴를 사용하며, 상단 마크다운 툴바는 두지 않는다. 슬래시 기본 제목은 **h2·h3·h4**만 표시하며, 본문 **h1**은 `/h1` 검색 시에만 삽입한다(게시물 **제목 필드**가 페이지의 유일한 h1). `Cmd+Shift+K`는 소스 모드와 라이브 모드에서 현재 줄을 삭제하며, 소스 모드에서 여러 줄이 선택되어 있으면 선택 범위가 걸친 줄을 함께 삭제한다. 코드·콜아웃·토글 블록 내부에서는 커서가 있는 본문 줄을 삭제하고, 남은 본문 줄이 1개뿐이면 fenced 블록 전체를 삭제한다. 콜아웃 옵션은 첫 줄 `:::callout emoji=none bg=blue title="주의사항"`처럼 `emoji`·`bg`(gray|blue|green|yellow|red|purple)·`title`로 지정하며, 라이브 모드에서는 블록에 포커스가 들어오면 오른쪽 설정 패널에서 수정한다. 코드 블록은 ` ```언어`·`nolinenos`(줄 번호 숨김)를 지원한다. 라이브·공개 모두 `ProseCodeBlock`(`#15171a`, `px-4 py-3`, `text-sm leading-6`)으로 동일하게 표시한다. 라이브 모드 호버·포커스 시 Language 입력·줄번호 토글이 보인다. 공개 화면에는 언어 라벨 옆 **복사** 버튼으로 본문을 클립보드에 넣는다. 본문 하단 클릭으로 새 문단을 추가한다.
-- 라이브 모드 인용·콜아웃 내부 Enter는 한글 IME 조합 확정 뒤에도 한 번만 줄을 추가한다. 콜아웃 본문은 하나의 멀티라인 편집 영역으로 유지해 `Shift+방향키` 선택이 내부 여러 줄을 가로지를 수 있게 한다. 인용 마지막 줄에서 아래 방향키를 누르면 외부 빈 문단을 만들 수 있지만, 콜아웃 아래 방향키는 본문 줄을 새로 만들지 않는다.
+- 라이브 모드 인용·콜아웃 내부 Enter는 한글 IME 조합 확정 뒤에도 한 번만 줄을 추가한다. 콜아웃 본문은 하나의 멀티라인 편집 영역으로 유지해 `Shift+방향키` 선택이 내부 여러 줄을 가로지를 수 있게 한다. 라이브 멀티라인 블록은 첫 줄 빈 줄을 포함한 선행·후행 줄바꿈을 보존해 소스·라이브 모드 전환 시 본문이 유실되지 않게 한다. 인용 마지막 줄에서 아래 방향키를 누르면 외부 빈 문단을 만들 수 있지만, 콜아웃 아래 방향키는 본문 줄을 새로 만들지 않는다.
 - 라이브 모드 `:::` fenced 블록의 원본 범위는 여는 줄부터 닫는 `:::` 줄까지만 포함한다. 연속된 콜아웃·토글·갤러리 등은 앞 블록 편집 시 다음 블록의 선언 줄을 교체 범위에 포함하지 않는다.
 - 이미지 파일을 붙여넣거나 드롭하면 관리자 업로드 API로 저장한 뒤 현재 커서 위치에 이미지 또는 갤러리 마크다운을 삽입한다.
 - 툴바 `이미지`·`갤러리`는 미디어 모달을 연다. 모달 기본 탭은 **미디어 라이브러리**이며 **업로드** 탭에서 드래그·파일 선택 후 즉시 삽입한다.
diff --git a/docs/update.md b/docs/update.md
index 9134943..302d376 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.5.59
+
+- 게시물 글쓰기: 라이브 멀티라인 블록 편집 텍스트를 `<br>` HTML 대신 원문 텍스트와 `pre-wrap`으로 복원하도록 수정.
+- 게시물 글쓰기: 콜아웃 첫 줄이 빈 줄인 상태에서 소스·라이브 모드를 오가면 본문이 사라질 수 있던 문제 수정.
+
 ## v1.5.58
 
 - 게시물 글쓰기: 라이브 인용 첫 글자 앞 Backspace 시 인용 블록을 일반 문단으로 되돌리도록 수정.
diff --git a/package-lock.json b/package-lock.json
index 2441aa6..9593f3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.5.58",
+  "version": "1.5.59",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.5.58",
+      "version": "1.5.59",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index 13b7d78..387d6ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.5.58",
+  "version": "1.5.59",
   "private": true,
   "type": "module",
   "imports": {