sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile: fix note rendering (HTML direct) + quick actions sans doublons
Some checks failed
CI / Lint, Unit Tests & Build (push) Failing after 1m7s
Details
CI / Deploy production (on server) (push) Has been skipped
Details

Browse Source 
- 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>
This commit is contained in:
Antigravity
2026-05-29 17:14:48 +00:00
parent d06ea93f11
commit 12d1e3dfdd
2 changed files with 73 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
memento-mobile/app/(tabs)/home.tsx
View File

@@ -5,7 +5,7 @@ import {
} from 'react-native' } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context' import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router' import { useRouter } from 'expo-router'
import { CalendarDays, Search, BookOpen, Clock, ChevronRight } from 'lucide-react-native' import { CalendarDays, PenLine, GraduationCap, Clock, ChevronRight } from 'lucide-react-native'
import { apiFetch } from '@/lib/api' import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config' import { ENDPOINTS } from '@/lib/config'
import { useAuthStore } from '@/lib/store' import { useAuthStore } from '@/lib/store'
@@ -71,7 +71,7 @@ export default function HomeScreen() {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* Quick actions */} {/* Quick actions — actions uniques, pas de doublons avec le tab bar */}
<View style={s.quickRow}> <View style={s.quickRow}>
<TouchableOpacity onPress={handleDailyNote} style={s.quickCard} activeOpacity={0.7}> <TouchableOpacity onPress={handleDailyNote} style={s.quickCard} activeOpacity={0.7}>
<View style={[s.quickIcon, { backgroundColor: '#f3ece4' }]}> <View style={[s.quickIcon, { backgroundColor: '#f3ece4' }]}>
@@ -79,17 +79,17 @@ export default function HomeScreen() {
</View> </View>
<Text style={s.quickLabel}>Note du jour</Text> <Text style={s.quickLabel}>Note du jour</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickCard} activeOpacity={0.7}> <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickCard} activeOpacity={0.7}>
<View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}> <View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}>
<BookOpen size={20} color="#5b7ec7" /> <PenLine size={20} color="#5b7ec7" />
</View> </View>
<Text style={s.quickLabel}>Carnets</Text> <Text style={s.quickLabel}>Nouvelle note</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickCard} activeOpacity={0.7}> <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickCard} activeOpacity={0.7}>
<View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}> <View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}>
<Search size={20} color="#4a9b61" /> <GraduationCap size={20} color="#4a9b61" />
</View> </View>
<Text style={s.quickLabel}>Recherche</Text> <Text style={s.quickLabel}>Révision</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>

156
memento-mobile/app/note/[id].tsx
View File

@@ -19,16 +19,17 @@ interface Note {
notebookName?: string notebookName?: string
} }
// Le markdown est parsé côté WebView (JS natif) — évite tout problème Metro bundler // Le contenu TipTap est stocké en HTML — on l'enveloppe dans un style CSS propre
function buildHtml(content: string, title: string) { function buildHtml(content: string, title: string) {
// On passe le contenu comme JSON pour éviter les problèmes d'échappement const safeTitle = title.replace(/</g, '&lt;').replace(/>/g, '&gt;')
const safeContent = JSON.stringify(content) // Détecter si le contenu est déjà du HTML ou du texte brut
const safeTitle = JSON.stringify(title || 'Sans titre') const isHtml = content.trimStart().startsWith('<')
const body = isHtml ? content : `<p>${content.replace(/\n/g, '<br>')}</p>`
return `<!DOCTYPE html> return `<!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
<style> <style>
:root { :root {
--brand: #A47148; --brand: #A47148;
@@ -37,105 +38,58 @@ function buildHtml(content: string, title: string) {
--concrete: #8A8A82; --concrete: #8A8A82;
--border: #E8E6E0; --border: #E8E6E0;
--code-bg: #f0ede8; --code-bg: #f0ede8;
--dark-bg: #1e1e1c;
} }
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }
body { body {
font-family: -apple-system, 'Helvetica Neue', sans-serif; font-family: -apple-system, 'Helvetica Neue', sans-serif;
font-size: 16px; line-height: 1.75; color: var(--ink); font-size: 16px; line-height: 1.75; color: var(--ink);
background: var(--paper); padding: 8px 20px 64px; background: var(--paper); padding: 20px 20px 80px;
word-break: break-word; 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-title {
.note-meta { font-size: 12px; color: var(--concrete); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
h1 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; } color: var(--ink); margin-bottom: 4px; 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; } .note-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 20px; }
h4, h5, h6 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; color: var(--concrete); } h1 { font-size: 22px; font-weight: 700; margin: 24px 0 10px; }
p { margin: 0 0 14px; } h2 { font-size: 19px; font-weight: 700; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
ul, ol { padding-left: 24px; margin: 0 0 14px; } h3 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; }
li { margin-bottom: 6px; } p { margin: 0 0 12px; }
ul, ol { padding-left: 24px; margin: 0 0 12px; }
li { margin-bottom: 4px; }
li::marker { color: var(--brand); } 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 { 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; } 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); } 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 { 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; } 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; } a { color: var(--brand); text-decoration: none; border-bottom: 1px solid #d4b896; }
img { max-width: 100%; border-radius: 12px; margin: 12px 0; display: block; } img { max-width: 100%; border-radius: 12px; margin: 12px 0; display: block; }
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; } hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; } 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); } 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); } td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; } tr:last-child td { border-bottom: none; }
strong { font-weight: 700; } strong, b { font-weight: 700; }
em { font-style: italic; } em, i { font-style: italic; }
del { text-decoration: line-through; color: var(--concrete); } 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> </style>
</head> </head>
<body> <body>
<div class="note-title" id="title"></div> <div class="note-title">${safeTitle}</div>
<div class="note-meta" id="meta"></div> <hr class="note-sep">
<div id="content"></div> <div id="content">${body}</div>
<script>
(function() {
function esc(s) {
return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
}
function inline(s) {
return s
.replace(/\*\*\*(.+?)\*\*\*/g,'<strong><em>$1</em></strong>')
.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
.replace(/__(.+?)__/g,'<strong>$1</strong>')
.replace(/\*(.+?)\*/g,'<em>$1</em>')
.replace(/_(.+?)_/g,'<em>$1</em>')
.replace(/~~(.+?)~~/g,'<del>$1</del>')
.replace(/\`([^\`]+)\`/g,'<code>'+esc('$1')+'</code>')
.replace(/\[(.+?)\]\((.+?)\)/g,'<a href="$2">$1</a>')
}
function mdToHtml(md) {
var lines = md.split('\n')
var html = ''
var inCode = false, codeLang = '', codeLines = []
var inList = false, listType = '', listItems = []
function flushList() {
if (!inList) return
var tag = listType === 'ul' ? 'ul' : 'ol'
html += '<'+tag+'>' + listItems.map(function(l){return '<li>'+inline(l)+'</li>'}).join('') + '</'+tag+'>'
inList = false; listItems = []
}
for (var i = 0; i < lines.length; i++) {
var line = lines[i]
if (/^\`\`\`/.test(line)) {
if (!inCode) { flushList(); inCode=true; codeLang=line.slice(3).trim(); codeLines=[]; continue }
else { inCode=false; html+='<pre><code>'+esc(codeLines.join('\n'))+'</code></pre>'; continue }
}
if (inCode) { codeLines.push(line); continue }
if (/^> /.test(line)) { flushList(); html+='<blockquote><p>'+inline(line.slice(2))+'</p></blockquote>'; continue }
if (/^#{6} /.test(line)) { flushList(); html+='<h6>'+inline(line.slice(7))+'</h6>'; continue }
if (/^#{5} /.test(line)) { flushList(); html+='<h5>'+inline(line.slice(6))+'</h5>'; continue }
if (/^#{4} /.test(line)) { flushList(); html+='<h4>'+inline(line.slice(5))+'</h4>'; continue }
if (/^### /.test(line)) { flushList(); html+='<h3>'+inline(line.slice(4))+'</h3>'; continue }
if (/^## /.test(line)) { flushList(); html+='<h2>'+inline(line.slice(3))+'</h2>'; continue }
if (/^# /.test(line)) { flushList(); html+='<h1>'+inline(line.slice(2))+'</h1>'; continue }
if (/^---+$/.test(line.trim()) || /^\*\*\*+$/.test(line.trim())) { flushList(); html+='<hr>'; continue }
var ulM = line.match(/^[-*+] (.*)/)
if (ulM) { if (inList&&listType!=='ul') flushList(); inList=true; listType='ul'; listItems.push(ulM[1]); continue }
var olM = line.match(/^\d+\. (.*)/)
if (olM) { if (inList&&listType!=='ol') flushList(); inList=true; listType='ol'; listItems.push(olM[1]); continue }
if (line.trim()==='') { flushList(); if (html && !html.endsWith('<br>')) html+='<br>'; continue }
flushList()
html += '<p>'+inline(line)+'</p>'
}
flushList()
return html
}
var md = ${safeContent}
var title = ${safeTitle}
document.getElementById('title').textContent = title
document.getElementById('content').innerHTML = mdToHtml(md)
})()
</script>
</body> </body>
</html>` </html>`
} }
@@ -144,12 +98,18 @@ export default function NoteScreen() {
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [note, setNote] = useState<Note | null>(null) const [note, setNote] = useState<Note | null>(null)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const router = useRouter() const router = useRouter()
useEffect(() => { useEffect(() => {
apiFetch(ENDPOINTS.note(id)) if (!id) return
.then((r) => r.json()) 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)) .then((data) => setNote(data.note ?? null))
.catch((e) => setError(e.message))
.finally(() => setLoading(false)) .finally(() => setLoading(false))
}, [id]) }, [id])
@@ -161,33 +121,37 @@ export default function NoteScreen() {
return ( return (
<SafeAreaView style={s.safe}> <SafeAreaView style={s.safe}>
<View style={s.header}> <View style={s.header}>
<TouchableOpacity onPress={() => router.back()} style={s.backBtn}> <TouchableOpacity onPress={() => router.back()} style={s.backBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<ArrowLeft size={22} color={C.ink} /> <ArrowLeft size={22} color={C.ink} />
</TouchableOpacity> </TouchableOpacity>
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text> <Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
<TouchableOpacity onPress={handleShare} style={s.shareBtn}> {note && (
<TouchableOpacity onPress={handleShare} style={s.shareBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Share2 size={18} color={C.concrete} /> <Share2 size={18} color={C.concrete} />
</TouchableOpacity> </TouchableOpacity>
)}
</View> </View>
{loading {loading && <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>}
? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View> {error && <View style={s.center}><Text style={{ color: C.rose }}>{error}</Text></View>}
: note {!loading && !error && !note && <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
? <WebView {note && (
source={{ html: buildHtml(note.content, note.title) }} <WebView
source={{ html: buildHtml(note.content ?? '', note.title ?? '') }}
style={{ flex: 1, backgroundColor: C.paper }} style={{ flex: 1, backgroundColor: C.paper }}
scrollEnabled javaScriptEnabled={true}
scrollEnabled={true}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
originWhitelist={['*']} originWhitelist={['*']}
/> />
: <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>} )}
</SafeAreaView> </SafeAreaView>
) )
} }
const s = StyleSheet.create({ const s = StyleSheet.create({
safe: { flex: 1, backgroundColor: C.paper }, safe: { flex: 1, backgroundColor: C.paper },
header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border }, header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: C.paper },
backBtn: { padding: 4 }, backBtn: { padding: 4 },
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink }, headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
shareBtn: { padding: 4 }, shareBtn: { padding: 4 },