6c92e375c2
- 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>
232 lines
8.3 KiB
Svelte
232 lines
8.3 KiB
Svelte
<script>
|
|
import { api, getAccessToken } from '$lib/api';
|
|
import { addToast } from '$lib/stores/ui';
|
|
import { marked } from 'marked';
|
|
import { ExternalLink, Save, RefreshCw } from 'lucide-svelte';
|
|
|
|
let { doc } = $props();
|
|
let fullDoc = $state(null);
|
|
let loading = $state(true);
|
|
let viewerType = $state('none');
|
|
|
|
// Markdown 편집
|
|
let editMode = $state(false);
|
|
let editContent = $state('');
|
|
let saving = $state(false);
|
|
let rawMarkdown = $state('');
|
|
|
|
function getViewerType(format) {
|
|
if (['md', 'txt'].includes(format)) return 'markdown';
|
|
if (format === 'pdf') return 'pdf';
|
|
if (['hwp', 'hwpx'].includes(format)) return 'preview-pdf';
|
|
if (['odoc', 'osheet', 'docx', 'xlsx', 'pptx', 'odt', 'ods', 'odp'].includes(format)) return 'preview-pdf';
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff'].includes(format)) return 'image';
|
|
if (['csv', 'json', 'xml', 'html'].includes(format)) return 'text';
|
|
if (['dwg', 'dxf'].includes(format)) return 'cad';
|
|
return 'unsupported';
|
|
}
|
|
|
|
const ODF_FORMATS = ['ods', 'odt', 'odp', 'odoc', 'osheet'];
|
|
|
|
function getEditInfo(doc) {
|
|
// DB에 저장된 편집 URL 우선
|
|
if (doc.edit_url) return { url: doc.edit_url, label: '편집' };
|
|
// ODF 포맷 → Synology Drive
|
|
if (ODF_FORMATS.includes(doc.file_format)) return { url: 'https://link.hyungi.net', label: 'Synology Drive에서 열기' };
|
|
// CAD
|
|
if (['dwg', 'dxf'].includes(doc.file_format)) return { url: 'https://web.autocad.com', label: 'AutoCAD Web' };
|
|
return null;
|
|
}
|
|
|
|
$effect(() => {
|
|
if (doc?.id) {
|
|
loadFullDoc(doc.id);
|
|
editMode = false;
|
|
}
|
|
});
|
|
|
|
async function loadFullDoc(id) {
|
|
loading = true;
|
|
try {
|
|
fullDoc = await api(`/documents/${id}`);
|
|
viewerType = getViewerType(fullDoc.file_format);
|
|
|
|
// Markdown: extracted_text 없으면 원본 파일 직접 가져오기
|
|
if (viewerType === 'markdown' && !fullDoc.extracted_text) {
|
|
try {
|
|
const resp = await fetch(`/api/documents/${id}/file?token=${getAccessToken()}`);
|
|
if (resp.ok) rawMarkdown = await resp.text();
|
|
} catch (e) { rawMarkdown = ''; }
|
|
} else {
|
|
rawMarkdown = '';
|
|
}
|
|
} catch (err) {
|
|
fullDoc = null;
|
|
viewerType = 'none';
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function startEdit() {
|
|
editContent = fullDoc?.extracted_text || rawMarkdown || '';
|
|
editMode = true;
|
|
editTab = 'edit';
|
|
}
|
|
|
|
let editTab = $state('edit'); // 'edit' | 'preview'
|
|
|
|
async function saveContent() {
|
|
saving = true;
|
|
try {
|
|
await api(`/documents/${fullDoc.id}/content`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ content: editContent }),
|
|
});
|
|
fullDoc.extracted_text = editContent;
|
|
editMode = false;
|
|
addToast('success', '저장됨');
|
|
} catch (err) {
|
|
addToast('error', '저장 실패');
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
function handleKeydown(e) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 's' && editMode) {
|
|
e.preventDefault();
|
|
saveContent();
|
|
}
|
|
}
|
|
|
|
let editInfo = $derived(fullDoc ? getEditInfo(fullDoc) : null);
|
|
</script>
|
|
|
|
<svelte:window on:keydown={handleKeydown} />
|
|
|
|
<div class="h-full flex flex-col bg-[var(--surface)] border-t border-[var(--border)]">
|
|
<!-- 뷰어 툴바 -->
|
|
{#if fullDoc && !loading}
|
|
<div class="flex items-center justify-between px-3 py-1.5 border-b border-[var(--border)] bg-[var(--sidebar-bg)] shrink-0">
|
|
<span class="text-xs text-[var(--text-dim)] truncate">{fullDoc.title || '제목 없음'}</span>
|
|
<div class="flex items-center gap-2">
|
|
{#if viewerType === 'markdown'}
|
|
{#if editMode}
|
|
<button
|
|
onclick={saveContent}
|
|
disabled={saving}
|
|
class="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50"
|
|
>
|
|
<Save size={12} /> {saving ? '저장 중...' : '저장'}
|
|
</button>
|
|
<button
|
|
onclick={() => editMode = false}
|
|
class="px-2 py-1 text-xs text-[var(--text-dim)] hover:text-[var(--text)]"
|
|
>취소</button>
|
|
{:else}
|
|
<button
|
|
onclick={startEdit}
|
|
class="px-2 py-1 text-xs text-[var(--text-dim)] hover:text-[var(--accent)] border border-[var(--border)] rounded"
|
|
>편집</button>
|
|
{/if}
|
|
{/if}
|
|
{#if editInfo}
|
|
<a
|
|
href={editInfo.url}
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="flex items-center gap-1 px-2 py-1 text-xs text-[var(--text-dim)] hover:text-[var(--accent)] border border-[var(--border)] rounded"
|
|
>
|
|
<ExternalLink size={12} /> {editInfo.label}
|
|
</a>
|
|
{/if}
|
|
<a
|
|
href="/documents/{fullDoc.id}"
|
|
class="px-2 py-1 text-xs text-[var(--text-dim)] hover:text-[var(--accent)] border border-[var(--border)] rounded"
|
|
>전체 보기</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- 뷰어 본문 -->
|
|
<div class="flex-1 overflow-auto min-h-0">
|
|
{#if loading}
|
|
<div class="flex items-center justify-center h-full">
|
|
<p class="text-sm text-[var(--text-dim)]">로딩 중...</p>
|
|
</div>
|
|
{:else if fullDoc}
|
|
{#if viewerType === 'markdown'}
|
|
{#if editMode}
|
|
<!-- 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 markdown-body">
|
|
{@html marked(fullDoc.extracted_text || rawMarkdown || '*텍스트 추출 대기 중*')}
|
|
</div>
|
|
{/if}
|
|
{:else if viewerType === 'pdf'}
|
|
<iframe
|
|
src="/api/documents/{fullDoc.id}/file?token={getAccessToken()}"
|
|
class="w-full h-full border-0"
|
|
title={fullDoc.title}
|
|
></iframe>
|
|
{:else if viewerType === 'preview-pdf'}
|
|
<iframe
|
|
src="/api/documents/{fullDoc.id}/preview?token={getAccessToken()}"
|
|
class="w-full h-full border-0"
|
|
title={fullDoc.title}
|
|
onerror={() => {}}
|
|
></iframe>
|
|
{:else if viewerType === 'image'}
|
|
<div class="flex items-center justify-center h-full p-4">
|
|
<img
|
|
src="/api/documents/{fullDoc.id}/file?token={getAccessToken()}"
|
|
alt={fullDoc.title}
|
|
class="max-w-full max-h-full object-contain rounded"
|
|
/>
|
|
</div>
|
|
{:else if viewerType === 'text'}
|
|
<div class="p-4">
|
|
<pre class="text-sm text-[var(--text)] whitespace-pre-wrap font-mono">{fullDoc.extracted_text || '텍스트 없음'}</pre>
|
|
</div>
|
|
{:else if viewerType === 'cad'}
|
|
<div class="flex flex-col items-center justify-center h-full gap-3">
|
|
<p class="text-sm text-[var(--text-dim)]">CAD 미리보기 (향후 지원 예정)</p>
|
|
<a
|
|
href="https://web.autocad.com"
|
|
target="_blank"
|
|
class="px-3 py-1.5 text-sm bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)]"
|
|
>AutoCAD Web에서 열기</a>
|
|
</div>
|
|
{:else}
|
|
<div class="flex items-center justify-center h-full">
|
|
<p class="text-sm text-[var(--text-dim)]">미리보기를 지원하지 않는 형식입니다 ({fullDoc.file_format})</p>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|