0ef12f7399
- Install marked package (UMD, hors-ligne) - buildHtml: parse Markdown server-side avec marked, inject HTML statique - CSS: typographie soignée, blockquotes brandés, code dark, tables propres - Plus de CDN, fonctionne hors-ligne Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
142 lines
5.6 KiB
TypeScript
142 lines
5.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import {
|
|
View, Text, ActivityIndicator,
|
|
TouchableOpacity, Share, StyleSheet,
|
|
} from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useLocalSearchParams, useRouter } from 'expo-router'
|
|
import { ArrowLeft, Share2 } from 'lucide-react-native'
|
|
import { WebView } from 'react-native-webview'
|
|
import { marked } from 'marked'
|
|
import { apiFetch } from '@/lib/api'
|
|
import { ENDPOINTS } from '@/lib/config'
|
|
import { C } from '../_layout'
|
|
|
|
interface Note {
|
|
id: string
|
|
title: string
|
|
content: string
|
|
updatedAt: string
|
|
notebookName?: string
|
|
}
|
|
|
|
function buildHtml(content: string, title: string) {
|
|
// marked runs in Node/JS context — parse server-side, inject final HTML
|
|
marked.setOptions({ breaks: true, gfm: true })
|
|
const bodyHtml = marked.parse(content) as string
|
|
|
|
return `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
|
|
<style>
|
|
:root {
|
|
--brand: #A47148;
|
|
--ink: #1A1A18;
|
|
--paper: #FAFAF8;
|
|
--concrete: #8A8A82;
|
|
--border: #E8E6E0;
|
|
--code-bg: #f0ede8;
|
|
--dark-bg: #1e1e1c;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, 'Helvetica Neue', sans-serif;
|
|
font-size: 16px; line-height: 1.75; color: var(--ink);
|
|
background: var(--paper); padding: 8px 20px 64px;
|
|
word-break: break-word;
|
|
}
|
|
.note-title {
|
|
font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
|
|
color: var(--ink); margin: 20px 0 4px; line-height: 1.25;
|
|
}
|
|
.note-meta { font-size: 12px; color: var(--concrete); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
|
|
h1 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; line-height: 1.3; }
|
|
h2 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
|
|
h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
|
|
h4, h5, h6 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; color: var(--concrete); }
|
|
p { margin: 0 0 14px; }
|
|
ul, ol { padding-left: 24px; margin: 0 0 14px; }
|
|
li { margin-bottom: 6px; }
|
|
li::marker { color: var(--brand); }
|
|
li > ul, li > ol { margin-top: 4px; margin-bottom: 2px; }
|
|
input[type=checkbox] { accent-color: var(--brand); margin-right: 6px; }
|
|
blockquote {
|
|
border-left: 3px solid var(--brand); margin: 16px 0; padding: 10px 14px;
|
|
background: #f7f2ec; border-radius: 0 10px 10px 0; color: #5a5a52; font-style: italic;
|
|
}
|
|
blockquote p { margin: 0; }
|
|
code {
|
|
background: var(--code-bg); padding: 2px 7px; border-radius: 6px;
|
|
font-size: 13px; font-family: 'Menlo', 'Courier New', monospace; color: var(--brand);
|
|
}
|
|
pre { background: var(--dark-bg); padding: 16px; border-radius: 12px; overflow-x: auto; margin: 16px 0; }
|
|
pre code { background: none; padding: 0; color: #e8e6e0; font-size: 13px; line-height: 1.6; }
|
|
a { color: var(--brand); text-decoration: none; border-bottom: 1px solid #d4b896; }
|
|
img { max-width: 100%; border-radius: 12px; margin: 12px 0; display: block; }
|
|
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
|
|
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
|
|
th { background: var(--code-bg); font-weight: 700; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--border); }
|
|
td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
|
|
tr:last-child td { border-bottom: none; }
|
|
strong { font-weight: 700; }
|
|
em { font-style: italic; }
|
|
del { text-decoration: line-through; color: var(--concrete); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="note-title">${title || 'Sans titre'}</div>
|
|
<div class="note-meta">Note Momento</div>
|
|
<div id="content">${bodyHtml}</div>
|
|
</body>
|
|
</html>`
|
|
}
|
|
|
|
export default function NoteScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>()
|
|
const [note, setNote] = useState<Note | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
apiFetch(ENDPOINTS.note(id))
|
|
.then((r) => r.json())
|
|
.then((data) => setNote(data.note ?? null))
|
|
.finally(() => setLoading(false))
|
|
}, [id])
|
|
|
|
const handleShare = async () => {
|
|
if (!note) return
|
|
await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={s.safe}>
|
|
<View style={s.header}>
|
|
<TouchableOpacity onPress={() => router.back()} style={s.backBtn}>
|
|
<ArrowLeft size={22} color={C.ink} />
|
|
</TouchableOpacity>
|
|
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
|
|
<TouchableOpacity onPress={handleShare} style={s.shareBtn}>
|
|
<Share2 size={18} color={C.concrete} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{loading
|
|
? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>
|
|
: note
|
|
? <WebView source={{ html: buildHtml(note.content, note.title) }} style={{ flex: 1, backgroundColor: C.paper }} scrollEnabled showsVerticalScrollIndicator={false} />
|
|
: <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
safe: { flex: 1, backgroundColor: C.paper },
|
|
header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
|
|
backBtn: { padding: 4 },
|
|
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
|
|
shareBtn: { padding: 4 },
|
|
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
|
})
|