feat: Markdown 뷰어/편집기 개선

- startEdit(): extracted_text || rawMarkdown fallback
- split editor → 편집/미리보기 탭 전환 방식
- GitHub Dark 스타일 markdown-body CSS (테이블/코드/인용/리스트)
- prose 클래스 → markdown-body로 교체

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-03 15:48:41 +09:00
parent 06da098eab
commit 6c92e375c2
2 changed files with 55 additions and 11 deletions

View File

@@ -69,10 +69,13 @@
}
function startEdit() {
editContent = fullDoc?.extracted_text || '';
editContent = fullDoc?.extracted_text || rawMarkdown || '';
editMode = true;
editTab = 'edit';
}
let editTab = $state('edit'); // 'edit' | 'preview'
async function saveContent() {
saving = true;
try {
@@ -155,19 +158,32 @@
{:else if fullDoc}
{#if viewerType === 'markdown'}
{#if editMode}
<!-- Markdown split editor -->
<div class="flex h-full">
<textarea
bind:value={editContent}
class="w-1/2 h-full p-4 bg-[var(--bg)] text-[var(--text)] text-sm font-mono resize-none outline-none border-r border-[var(--border)]"
spellcheck="false"
></textarea>
<div class="w-1/2 h-full p-4 overflow-auto prose prose-invert prose-sm max-w-none">
{@html marked(editContent)}
<!-- Markdown 편집 (탭 전환) -->
<div class="flex flex-col h-full">
<div class="flex gap-1 px-3 py-1 border-b border-[var(--border)] shrink-0">
<button
onclick={() => editTab = 'edit'}
class="px-3 py-1 text-xs rounded-t {editTab === 'edit' ? 'bg-[var(--surface)] text-[var(--text)]' : 'text-[var(--text-dim)]'}"
>편집</button>
<button
onclick={() => editTab = 'preview'}
class="px-3 py-1 text-xs rounded-t {editTab === 'preview' ? 'bg-[var(--surface)] text-[var(--text)]' : 'text-[var(--text-dim)]'}"
>미리보기</button>
</div>
{#if editTab === 'edit'}
<textarea
bind:value={editContent}
class="flex-1 w-full p-4 bg-[var(--bg)] text-[var(--text)] text-sm font-mono resize-none outline-none"
spellcheck="false"
></textarea>
{:else}
<div class="flex-1 overflow-auto p-4 markdown-body">
{@html marked(editContent)}
</div>
{/if}
</div>
{:else}
<div class="p-4 prose prose-invert prose-sm max-w-none">
<div class="p-4 markdown-body">
{@html marked(fullDoc.extracted_text || rawMarkdown || '*텍스트 추출 대기 중*')}
</div>
{/if}