12d1e3dfdd
- note/[id].tsx: contenu TipTap = HTML -> afficher directement dans WebView (plus d'inline MD parser - c'était la cause du contenu vide) + javaScriptEnabled=true explicite (requis Android) + gestion erreur avec message visible + hitSlop sur bouton retour pour meilleur tap area - home.tsx: quick actions uniques (Note du jour / Nouvelle note / Révision) - retiré Carnets et Recherche qui doublaient le tab bar du bas Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
160 lines
6.7 KiB
TypeScript
160 lines
6.7 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 { apiFetch } from '@/lib/api'
|
|
import { ENDPOINTS } from '@/lib/config'
|
|
import { C } from '@/lib/theme'
|
|
|
|
interface Note {
|
|
id: string
|
|
title: string
|
|
content: string
|
|
updatedAt: string
|
|
notebookName?: string
|
|
}
|
|
|
|
// Le contenu TipTap est stocké en HTML — on l'enveloppe dans un style CSS propre
|
|
function buildHtml(content: string, title: string) {
|
|
const safeTitle = title.replace(/</g, '<').replace(/>/g, '>')
|
|
// Détecter si le contenu est déjà du HTML ou du texte brut
|
|
const isHtml = content.trimStart().startsWith('<')
|
|
const body = isHtml ? content : `<p>${content.replace(/\n/g, '<br>')}</p>`
|
|
|
|
return `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
|
|
<style>
|
|
:root {
|
|
--brand: #A47148;
|
|
--ink: #1A1A18;
|
|
--paper: #FAFAF8;
|
|
--concrete: #8A8A82;
|
|
--border: #E8E6E0;
|
|
--code-bg: #f0ede8;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }
|
|
body {
|
|
font-family: -apple-system, 'Helvetica Neue', sans-serif;
|
|
font-size: 16px; line-height: 1.75; color: var(--ink);
|
|
background: var(--paper); padding: 20px 20px 80px;
|
|
word-break: break-word;
|
|
}
|
|
.note-title {
|
|
font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
|
|
color: var(--ink); margin-bottom: 4px; line-height: 1.3;
|
|
}
|
|
.note-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 20px; }
|
|
h1 { font-size: 22px; font-weight: 700; margin: 24px 0 10px; }
|
|
h2 { font-size: 19px; font-weight: 700; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
|
|
h3 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; }
|
|
p { margin: 0 0 12px; }
|
|
ul, ol { padding-left: 24px; margin: 0 0 12px; }
|
|
li { margin-bottom: 4px; }
|
|
li::marker { color: var(--brand); }
|
|
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: #1e1e1c; 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: 20px 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, b { font-weight: 700; }
|
|
em, i { font-style: italic; }
|
|
del, s { text-decoration: line-through; color: var(--concrete); }
|
|
mark { background: #fff3cd; padding: 1px 3px; border-radius: 3px; }
|
|
input[type=checkbox] { accent-color: var(--brand); margin-right: 6px; width: 16px; height: 16px; }
|
|
/* TipTap task list */
|
|
ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
|
|
ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
|
|
ul[data-type="taskList"] li > label { margin-top: 2px; }
|
|
/* TipTap nœuds spéciaux cachés sur mobile */
|
|
[data-type="liveBlock"], [data-type="structuredViewBlock"] {
|
|
border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
|
|
margin: 8px 0; background: #f8f6f2; color: var(--concrete); font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="note-title">${safeTitle}</div>
|
|
<hr class="note-sep">
|
|
<div id="content">${body}</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 [error, setError] = useState<string | null>(null)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
if (!id) return
|
|
apiFetch(ENDPOINTS.note(id as string))
|
|
.then((r) => {
|
|
if (!r.ok) throw new Error(`Erreur ${r.status}`)
|
|
return r.json()
|
|
})
|
|
.then((data) => setNote(data.note ?? null))
|
|
.catch((e) => setError(e.message))
|
|
.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} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<ArrowLeft size={22} color={C.ink} />
|
|
</TouchableOpacity>
|
|
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
|
|
{note && (
|
|
<TouchableOpacity onPress={handleShare} style={s.shareBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Share2 size={18} color={C.concrete} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
{loading && <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>}
|
|
{error && <View style={s.center}><Text style={{ color: C.rose }}>{error}</Text></View>}
|
|
{!loading && !error && !note && <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
|
|
{note && (
|
|
<WebView
|
|
source={{ html: buildHtml(note.content ?? '', note.title ?? '') }}
|
|
style={{ flex: 1, backgroundColor: C.paper }}
|
|
javaScriptEnabled={true}
|
|
scrollEnabled={true}
|
|
showsVerticalScrollIndicator={false}
|
|
originWhitelist={['*']}
|
|
/>
|
|
)}
|
|
</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, backgroundColor: C.paper },
|
|
backBtn: { padding: 4 },
|
|
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
|
|
shareBtn: { padding: 4 },
|
|
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
|
})
|