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

mobile: fix notebook icons + redesign home/notebooks + inline MD parser in WebView

Browse Source 
- 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>
This commit is contained in:
Antigravity
2026-05-29 16:49:55 +00:00
parent 0ef12f7399
commit 45877db706
4 changed files with 186 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,6 @@ 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'
@@ -20,10 +19,11 @@ interface Note {
notebookName?: string
}
// Le markdown est parsé côté WebView (JS natif) — évite tout problème Metro bundler
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
// 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>
@@ -46,12 +46,9 @@ function buildHtml(content: string, title: string) {
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-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; }
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); }
@@ -59,17 +56,9 @@ function buildHtml(content: string, title: string) {
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 { 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);
}
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; }
@@ -85,9 +74,68 @@ function buildHtml(content: string, title: string) {
</style>
</head>
<body>
<div class="note-title">${title || 'Sans titre'}</div>
<div class="note-meta">Note Momento</div>
<div id="content">${bodyHtml}</div>
<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>`
}
@@ -125,7 +173,13 @@ export default function NoteScreen() {
{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} />
? <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>
)