sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
45877db7067d7738738afe8ca8fc1a5096cd286d
Momento/memento-mobile/app/note/[id].tsx
Antigravity 45877db706 mobile: fix notebook icons + redesign home/notebooks + inline MD parser in WebView 
- notebooks.tsx: detect Lucide icon names (folder, book, etc.) vs emoji
  -> render <Folder> component instead of raw string 'folder'
  -> colored icon wrap using notebook color
- home.tsx: full redesign — header greeting + quick actions + recent list
  -> section-based layout, dense note rows with chevron
- note/[id].tsx: remove 'marked' import (Metro bundler issue)
  -> inline minimal MD→HTML parser runs inside WebView JS context
  -> handles headings, lists, blockquotes, code blocks, inline styles
  -> zero external dependency, works 100% offline
- package.json: remove 'marked' dependency

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-29 16:49:55 +00:00

196 lines
8.5 KiB
TypeScript
Raw Blame History

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 '../_layout'
interface Note {
id: string
title: string
content: string
updatedAt: string
notebookName?: string
}
// Le markdown est parsé côté WebView (JS natif) — évite tout problème Metro bundler
function buildHtml(content: string, title: string) {
// On passe le contenu comme JSON pour éviter les problèmes d'échappement
const safeContent = JSON.stringify(content)
const safeTitle = JSON.stringify(title || 'Sans titre')
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; }
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); }
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" id="title"></div>
<div class="note-meta" id="meta"></div>
<div id="content"></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>
</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}
originWhitelist={['*']}
/>
: <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' },
})
Reference in New Issue View Git Blame Copy Permalink