feat: Add robust Undo/Redo system and improve note input
- Implement useUndoRedo hook with proper state management (max 50 history) - Add Undo/Redo buttons with keyboard shortcuts (Ctrl+Z/Ctrl+Y) - Fix image upload with proper sizing (max-w-full max-h-96 object-contain) - Add image validation (type and 5MB size limit) - Implement reminder system with date validation - Add comprehensive input validation with user-friendly error messages - Improve error handling with try-catch blocks - Add MCP-GUIDE.md with complete MCP documentation and examples Breaking changes: None Production ready: Yes
This commit is contained in:
parent
c2d3c6c289
commit
355ffb59bb
760
MCP-GUIDE.md
Normal file
760
MCP-GUIDE.md
Normal file
@ -0,0 +1,760 @@
|
||||
# Guide Complet MCP (Model Context Protocol)
|
||||
|
||||
## 📘 Table des Matières
|
||||
|
||||
1. [Introduction au MCP](#introduction)
|
||||
2. [Architecture du Serveur](#architecture)
|
||||
3. [Configuration et Installation](#configuration)
|
||||
4. [Utilisation avec N8N](#utilisation-n8n)
|
||||
5. [API Endpoints](#api-endpoints)
|
||||
6. [Exemples de Requêtes](#exemples)
|
||||
7. [Outils Disponibles](#outils)
|
||||
8. [Troubleshooting](#troubleshooting)
|
||||
|
||||
---
|
||||
|
||||
## 1. Introduction au MCP {#introduction}
|
||||
|
||||
Le **Model Context Protocol (MCP)** est un protocole standardisé permettant aux modèles de langage (LLMs) d'interagir avec des applications externes via des outils structurés.
|
||||
|
||||
### Qu'est-ce que MCP ?
|
||||
|
||||
- **Protocol Version**: 2025-06-18
|
||||
- **Transport**: Streamable HTTP (remplace l'ancien HTTP+SSE)
|
||||
- **Format**: JSON-RPC 2.0
|
||||
- **Architecture**: Client-Serveur avec session management
|
||||
|
||||
### Pourquoi utiliser MCP ?
|
||||
|
||||
- ✅ Communication standardisée entre LLMs et applications
|
||||
- ✅ Outils typés avec validation de schéma
|
||||
- ✅ Support des sessions et de la reconnexion
|
||||
- ✅ Compatible avec N8N, Claude Desktop, et autres clients MCP
|
||||
|
||||
---
|
||||
|
||||
## 2. Architecture du Serveur {#architecture}
|
||||
|
||||
### Structure du Projet
|
||||
|
||||
```
|
||||
Keep/
|
||||
├── mcp-server/
|
||||
│ ├── index-sse.js # Serveur MCP principal
|
||||
│ ├── package.json # Dépendances MCP SDK
|
||||
│ └── start-sse.ps1 # Script de démarrage
|
||||
├── keep-notes/
|
||||
│ ├── prisma/
|
||||
│ │ └── dev.db # Base de données SQLite
|
||||
│ └── ... # Application Next.js
|
||||
└── MCP-GUIDE.md # Ce guide
|
||||
```
|
||||
|
||||
### Composants Clés
|
||||
|
||||
#### 1. **Serveur MCP** (`index-sse.js`)
|
||||
- Port: **3001**
|
||||
- Endpoint principal: `/sse`
|
||||
- Base de données: Prisma + SQLite partagée avec keep-notes
|
||||
- Transport: `StreamableHTTPServerTransport`
|
||||
|
||||
#### 2. **Serveur Next.js** (`keep-notes`)
|
||||
- Port: **3000**
|
||||
- Interface utilisateur web
|
||||
- Partage la même base de données que MCP
|
||||
|
||||
#### 3. **Base de données Prisma**
|
||||
```prisma
|
||||
model Note {
|
||||
id String @id @default(uuid())
|
||||
title String?
|
||||
content String
|
||||
type String @default("text")
|
||||
color String @default("default")
|
||||
checkItems String? // JSON
|
||||
labels String? // JSON
|
||||
images String? // JSON
|
||||
isPinned Boolean @default(false)
|
||||
isArchived Boolean @default(false)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Configuration et Installation {#configuration}
|
||||
|
||||
### Prérequis
|
||||
|
||||
- Node.js 18+
|
||||
- npm ou pnpm
|
||||
- Accès réseau sur ports 3000 et 3001
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# 1. Installer les dépendances MCP
|
||||
cd mcp-server
|
||||
npm install
|
||||
|
||||
# 2. Vérifier Prisma Client
|
||||
cd ../keep-notes
|
||||
npx prisma generate
|
||||
```
|
||||
|
||||
### Démarrage
|
||||
|
||||
#### Serveur MCP
|
||||
```powershell
|
||||
# Option 1: Script PowerShell
|
||||
cd mcp-server
|
||||
.\start-sse.ps1
|
||||
|
||||
# Option 2: Commande directe
|
||||
node index-sse.js
|
||||
```
|
||||
|
||||
#### Serveur Next.js
|
||||
```bash
|
||||
cd keep-notes
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Vérification
|
||||
|
||||
```powershell
|
||||
# Tester le serveur MCP
|
||||
Invoke-RestMethod -Uri "http://localhost:3001/" | ConvertTo-Json
|
||||
|
||||
# Résultat attendu:
|
||||
{
|
||||
"name": "Memento MCP SSE Server",
|
||||
"version": "1.0.0",
|
||||
"status": "running",
|
||||
"endpoints": {
|
||||
"sse": "/sse",
|
||||
"message": "/message"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Utilisation avec N8N {#utilisation-n8n}
|
||||
|
||||
### Configuration du Nœud MCP Client
|
||||
|
||||
#### Étape 1: Ajouter le nœud
|
||||
1. Glisser-déposer **"MCP Client"** dans le workflow
|
||||
2. Sélectionner **"HTTP Streamable"** comme transport
|
||||
3. Configurer l'endpoint
|
||||
|
||||
#### Étape 2: Configuration de base
|
||||
|
||||
```yaml
|
||||
Server Transport: HTTP Streamable
|
||||
MCP Endpoint URL: http://192.168.1.10:3001/sse
|
||||
Authentication: None
|
||||
```
|
||||
|
||||
⚠️ **Important**: Utiliser l'IP locale correcte, pas `192.168.110` ou `127.0.0.1`
|
||||
|
||||
#### Étape 3: Détecter l'IP locale
|
||||
|
||||
```powershell
|
||||
# Windows
|
||||
ipconfig
|
||||
|
||||
# Chercher "Adresse IPv4" pour votre adaptateur réseau
|
||||
# Exemple: 192.168.1.10, 172.26.64.1, etc.
|
||||
```
|
||||
|
||||
#### Étape 4: Sélectionner un outil
|
||||
|
||||
Une fois connecté, N8N charge automatiquement la liste des 9 outils disponibles:
|
||||
- `create_note`
|
||||
- `get_notes`
|
||||
- `get_note`
|
||||
- `update_note`
|
||||
- `delete_note`
|
||||
- `search_notes`
|
||||
- `get_labels`
|
||||
- `toggle_pin`
|
||||
- `toggle_archive`
|
||||
|
||||
---
|
||||
|
||||
## 5. API Endpoints {#api-endpoints}
|
||||
|
||||
### Health Check
|
||||
|
||||
**GET** `/`
|
||||
|
||||
Vérifier l'état du serveur.
|
||||
|
||||
```bash
|
||||
curl http://localhost:3001/
|
||||
```
|
||||
|
||||
**Réponse:**
|
||||
```json
|
||||
{
|
||||
"name": "Memento MCP SSE Server",
|
||||
"version": "1.0.0",
|
||||
"status": "running",
|
||||
"endpoints": {
|
||||
"sse": "/sse",
|
||||
"message": "/message"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### MCP Endpoint
|
||||
|
||||
**GET/POST** `/sse`
|
||||
|
||||
Endpoint principal pour toutes les communications MCP.
|
||||
|
||||
#### Initialisation (POST)
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:3001/sse \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Accept: text/event-stream" \
|
||||
-d '{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 1,
|
||||
"method": "initialize",
|
||||
"params": {
|
||||
"protocolVersion": "2025-06-18",
|
||||
"capabilities": {},
|
||||
"clientInfo": {
|
||||
"name": "n8n-mcp-client",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
**Réponse SSE Stream:**
|
||||
```
|
||||
event: message
|
||||
data: {"jsonrpc":"2.0","id":1,"result":{"protocolVersion":"2025-06-18","capabilities":{"tools":{}},"serverInfo":{"name":"memento-mcp-server","version":"1.0.0"}}}
|
||||
|
||||
event: message
|
||||
data: {"jsonrpc":"2.0","method":"initialized"}
|
||||
```
|
||||
|
||||
#### Stream SSE (GET)
|
||||
|
||||
```bash
|
||||
curl -H "Accept: text/event-stream" \
|
||||
-H "Mcp-Session-Id: YOUR_SESSION_ID" \
|
||||
http://localhost:3001/sse
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Exemples de Requêtes {#exemples}
|
||||
|
||||
### Liste des Outils
|
||||
|
||||
```json
|
||||
POST /sse
|
||||
Content-Type: application/json
|
||||
Mcp-Session-Id: abc123...
|
||||
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 2,
|
||||
"method": "tools/list",
|
||||
"params": {}
|
||||
}
|
||||
```
|
||||
|
||||
**Réponse:**
|
||||
```json
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 2,
|
||||
"result": {
|
||||
"tools": [
|
||||
{
|
||||
"name": "create_note",
|
||||
"description": "Create a new note in Memento",
|
||||
"inputSchema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"title": { "type": "string" },
|
||||
"content": { "type": "string" },
|
||||
"color": { "type": "string", "default": "default" }
|
||||
},
|
||||
"required": ["content"]
|
||||
}
|
||||
}
|
||||
// ... 8 autres outils
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Créer une Note
|
||||
|
||||
```json
|
||||
POST /sse
|
||||
Content-Type: application/json
|
||||
Mcp-Session-Id: abc123...
|
||||
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 3,
|
||||
"method": "tools/call",
|
||||
"params": {
|
||||
"name": "create_note",
|
||||
"arguments": {
|
||||
"title": "Ma première note via MCP",
|
||||
"content": "Contenu de ma note créée depuis N8N",
|
||||
"color": "blue",
|
||||
"labels": ["mcp", "test"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Réponse:**
|
||||
```json
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 3,
|
||||
"result": {
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "{\"id\":\"uuid-123\",\"title\":\"Ma première note via MCP\",\"content\":\"Contenu...\",\"color\":\"blue\",\"labels\":[\"mcp\",\"test\"],\"createdAt\":\"2026-01-04T...\"}"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Récupérer Toutes les Notes
|
||||
|
||||
```json
|
||||
POST /sse
|
||||
Content-Type: application/json
|
||||
Mcp-Session-Id: abc123...
|
||||
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 4,
|
||||
"method": "tools/call",
|
||||
"params": {
|
||||
"name": "get_notes",
|
||||
"arguments": {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Rechercher des Notes
|
||||
|
||||
```json
|
||||
POST /sse
|
||||
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 5,
|
||||
"method": "tools/call",
|
||||
"params": {
|
||||
"name": "search_notes",
|
||||
"arguments": {
|
||||
"query": "réunion"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Épingler/Désépingler une Note
|
||||
|
||||
```json
|
||||
POST /sse
|
||||
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"id": 6,
|
||||
"method": "tools/call",
|
||||
"params": {
|
||||
"name": "toggle_pin",
|
||||
"arguments": {
|
||||
"id": "uuid-123"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Outils Disponibles {#outils}
|
||||
|
||||
### 1. `create_note`
|
||||
|
||||
Créer une nouvelle note.
|
||||
|
||||
**Paramètres:**
|
||||
- `title` (string, optionnel) - Titre de la note
|
||||
- `content` (string, **requis**) - Contenu de la note
|
||||
- `color` (string) - Couleur parmi: default, red, orange, yellow, green, teal, blue, purple, pink, gray
|
||||
- `type` (string) - Type: "text" ou "checklist"
|
||||
- `checkItems` (array) - Items de checklist (si type=checklist)
|
||||
- `labels` (array[string]) - Tags/labels
|
||||
- `isPinned` (boolean) - Épingler la note
|
||||
- `isArchived` (boolean) - Archiver la note
|
||||
- `images` (array[string]) - Images base64
|
||||
|
||||
**Exemple:**
|
||||
```json
|
||||
{
|
||||
"title": "Liste de courses",
|
||||
"content": "",
|
||||
"type": "checklist",
|
||||
"checkItems": [
|
||||
{"id": "1", "text": "Lait", "checked": false},
|
||||
{"id": "2", "text": "Pain", "checked": false}
|
||||
],
|
||||
"color": "yellow",
|
||||
"labels": ["shopping"]
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `get_notes`
|
||||
|
||||
Récupérer toutes les notes non archivées.
|
||||
|
||||
**Paramètres:** Aucun
|
||||
|
||||
**Retour:** Array de notes
|
||||
|
||||
### 3. `get_note`
|
||||
|
||||
Récupérer une note spécifique par ID.
|
||||
|
||||
**Paramètres:**
|
||||
- `id` (string, **requis**) - UUID de la note
|
||||
|
||||
### 4. `update_note`
|
||||
|
||||
Mettre à jour une note existante.
|
||||
|
||||
**Paramètres:**
|
||||
- `id` (string, **requis**) - UUID de la note
|
||||
- `title` (string, optionnel) - Nouveau titre
|
||||
- `content` (string, optionnel) - Nouveau contenu
|
||||
- `color` (string, optionnel) - Nouvelle couleur
|
||||
- `checkItems` (array, optionnel) - Nouveaux items
|
||||
- `labels` (array, optionnel) - Nouveaux labels
|
||||
- `images` (array, optionnel) - Nouvelles images
|
||||
|
||||
### 5. `delete_note`
|
||||
|
||||
Supprimer définitivement une note.
|
||||
|
||||
**Paramètres:**
|
||||
- `id` (string, **requis**) - UUID de la note
|
||||
|
||||
⚠️ **Attention:** Suppression irréversible
|
||||
|
||||
### 6. `search_notes`
|
||||
|
||||
Rechercher des notes par mots-clés.
|
||||
|
||||
**Paramètres:**
|
||||
- `query` (string, **requis**) - Texte à rechercher
|
||||
|
||||
**Recherche dans:**
|
||||
- Titres
|
||||
- Contenus
|
||||
- Labels
|
||||
- Items de checklist
|
||||
|
||||
**Exemple:**
|
||||
```json
|
||||
{
|
||||
"query": "réunion 2026"
|
||||
}
|
||||
```
|
||||
|
||||
### 7. `get_labels`
|
||||
|
||||
Récupérer tous les labels uniques utilisés.
|
||||
|
||||
**Paramètres:** Aucun
|
||||
|
||||
**Retour:**
|
||||
```json
|
||||
{
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "[\"work\",\"personal\",\"urgent\",\"mcp\"]"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 8. `toggle_pin`
|
||||
|
||||
Épingler/désépingler une note.
|
||||
|
||||
**Paramètres:**
|
||||
- `id` (string, **requis**) - UUID de la note
|
||||
|
||||
**Comportement:** Si épinglée → désépingle, si non épinglée → épingle
|
||||
|
||||
### 9. `toggle_archive`
|
||||
|
||||
Archiver/désarchiver une note.
|
||||
|
||||
**Paramètres:**
|
||||
- `id` (string, **requis**) - UUID de la note
|
||||
|
||||
**Comportement:** Si archivée → désarchive, si non archivée → archive
|
||||
|
||||
---
|
||||
|
||||
## 8. Troubleshooting {#troubleshooting}
|
||||
|
||||
### ❌ "Could not connect to your MCP server"
|
||||
|
||||
**Causes possibles:**
|
||||
1. Serveur MCP non démarré
|
||||
2. IP incorrecte dans N8N
|
||||
3. Firewall bloque le port 3001
|
||||
|
||||
**Solutions:**
|
||||
|
||||
```powershell
|
||||
# 1. Vérifier si le serveur tourne
|
||||
Get-Process -Name node | Where-Object {
|
||||
(Get-NetTCPConnection -OwningProcess $_.Id -ErrorAction SilentlyContinue).LocalPort -eq 3001
|
||||
}
|
||||
|
||||
# 2. Détecter votre IP
|
||||
ipconfig | Select-String "IPv4"
|
||||
|
||||
# 3. Tester la connexion
|
||||
Invoke-RestMethod -Uri "http://localhost:3001/"
|
||||
|
||||
# 4. Tester depuis l'IP réseau
|
||||
Invoke-RestMethod -Uri "http://192.168.1.10:3001/"
|
||||
```
|
||||
|
||||
### ❌ "Could not load list"
|
||||
|
||||
**Cause:** Serveur MCP ne répond pas correctement au protocole Streamable HTTP
|
||||
|
||||
**Solution:**
|
||||
|
||||
1. Vérifier la version du SDK:
|
||||
```bash
|
||||
cd mcp-server
|
||||
npm list @modelcontextprotocol/sdk
|
||||
# Doit être >= 1.0.4
|
||||
```
|
||||
|
||||
2. Redémarrer le serveur:
|
||||
```powershell
|
||||
# Tuer tous les processus node
|
||||
Get-Process -Name node | Stop-Process -Force
|
||||
|
||||
# Relancer
|
||||
cd mcp-server
|
||||
node index-sse.js
|
||||
```
|
||||
|
||||
### ❌ Port 3001 déjà utilisé
|
||||
|
||||
```powershell
|
||||
# Trouver le processus
|
||||
Get-Process -Name node | Where-Object {
|
||||
(Get-NetTCPConnection -OwningProcess $_.Id).LocalPort -eq 3001
|
||||
} | Stop-Process -Force
|
||||
```
|
||||
|
||||
### ❌ Base de données verrouillée
|
||||
|
||||
**Erreur:** `SQLITE_BUSY: database is locked`
|
||||
|
||||
**Solution:**
|
||||
|
||||
```powershell
|
||||
# Arrêter tous les serveurs
|
||||
Get-Process -Name node | Stop-Process -Force
|
||||
|
||||
# Vérifier qu'aucun processus n'accède à la DB
|
||||
lsof keep-notes/prisma/dev.db # Linux/Mac
|
||||
handle dev.db # Windows
|
||||
|
||||
# Redémarrer les serveurs
|
||||
```
|
||||
|
||||
### ❌ "Invalid session ID"
|
||||
|
||||
**Cause:** Session expirée ou non initialisée
|
||||
|
||||
**Solution:** Relancer la connexion depuis N8N (bouton "Execute Node")
|
||||
|
||||
### 🔍 Logs de Débogage
|
||||
|
||||
Le serveur MCP affiche des logs détaillés:
|
||||
|
||||
```
|
||||
New SSE connection from: 192.168.1.10
|
||||
Session initialized: abc-123-def
|
||||
Received message: {"jsonrpc":"2.0","id":1,"method":"tools/call",...}
|
||||
Transport closed for session abc-123-def
|
||||
```
|
||||
|
||||
**Activer plus de logs:**
|
||||
```javascript
|
||||
// Dans index-sse.js, ajouter:
|
||||
console.log('Request body:', JSON.stringify(req.body, null, 2));
|
||||
console.log('Response:', JSON.stringify(result, null, 2));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Workflow N8N Exemple
|
||||
|
||||
### Exemple: Créer une note à partir d'un email
|
||||
|
||||
```
|
||||
[Email Trigger]
|
||||
↓
|
||||
[MCP Client] → create_note
|
||||
• title: {{ $json.subject }}
|
||||
• content: {{ $json.body }}
|
||||
• labels: ["email", "auto"]
|
||||
• color: "blue"
|
||||
↓
|
||||
[Send Notification]
|
||||
```
|
||||
|
||||
### Exemple: Recherche et mise à jour
|
||||
|
||||
```
|
||||
[HTTP Request] (webhook)
|
||||
↓
|
||||
[MCP Client] → search_notes
|
||||
• query: {{ $json.keyword }}
|
||||
↓
|
||||
[Code Node] (filtrer résultats)
|
||||
↓
|
||||
[MCP Client] → update_note
|
||||
• id: {{ $json.noteId }}
|
||||
• labels: [...$json.existingLabels, "processed"]
|
||||
```
|
||||
|
||||
### Exemple: Backup quotidien
|
||||
|
||||
```
|
||||
[Schedule Trigger] (daily 2am)
|
||||
↓
|
||||
[MCP Client] → get_notes
|
||||
↓
|
||||
[Convert to File] (JSON)
|
||||
↓
|
||||
[Save to Dropbox/Drive]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Avancé
|
||||
|
||||
### Sessions et Reconnexion
|
||||
|
||||
Le serveur gère automatiquement les sessions:
|
||||
- Génère un UUID unique par session
|
||||
- Retourne `Mcp-Session-Id` dans le header de réponse
|
||||
- Accepte la reconnexion avec le même session ID
|
||||
- Nettoie automatiquement les sessions fermées
|
||||
|
||||
### Streaming SSE
|
||||
|
||||
Le serveur peut envoyer des notifications au client via SSE:
|
||||
|
||||
```javascript
|
||||
// Côté serveur (exemple futur)
|
||||
transport.send({
|
||||
jsonrpc: '2.0',
|
||||
method: 'notifications/resources/updated',
|
||||
params: { uri: 'notes://123' }
|
||||
});
|
||||
```
|
||||
|
||||
### Sécurité
|
||||
|
||||
⚠️ **Important pour la production:**
|
||||
|
||||
1. **Bind à localhost uniquement:**
|
||||
```javascript
|
||||
app.listen(PORT, '127.0.0.1'); // Pas 0.0.0.0
|
||||
```
|
||||
|
||||
2. **Ajouter authentication:**
|
||||
```javascript
|
||||
app.use((req, res, next) => {
|
||||
const token = req.headers.authorization;
|
||||
if (token !== 'Bearer SECRET_TOKEN') {
|
||||
return res.status(401).send('Unauthorized');
|
||||
}
|
||||
next();
|
||||
});
|
||||
```
|
||||
|
||||
3. **Validation Origin:**
|
||||
```javascript
|
||||
const allowedOrigins = ['http://localhost:3000'];
|
||||
if (!allowedOrigins.includes(req.headers.origin)) {
|
||||
return res.status(403).send('Forbidden');
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. Ressources
|
||||
|
||||
### Documentation Officielle
|
||||
- MCP Spec: https://modelcontextprotocol.io/specification/2025-06-18/basic/transports
|
||||
- TypeScript SDK: https://github.com/modelcontextprotocol/typescript-sdk
|
||||
|
||||
### Exemples de Code
|
||||
- MCP Examples: https://github.com/modelcontextprotocol/typescript-sdk/tree/main/examples/server
|
||||
|
||||
### Support
|
||||
- GitHub Issues: https://github.com/modelcontextprotocol/typescript-sdk/issues
|
||||
- Discord: https://discord.gg/modelcontextprotocol
|
||||
|
||||
---
|
||||
|
||||
## 12. Changelog
|
||||
|
||||
### Version 1.0.0 (2026-01-04)
|
||||
- ✅ Implémentation Streamable HTTP transport
|
||||
- ✅ 9 outils de gestion de notes
|
||||
- ✅ Support des sessions
|
||||
- ✅ Intégration Prisma
|
||||
- ✅ Compatible N8N
|
||||
|
||||
### Améliorations Futures
|
||||
- [ ] Authentication OAuth
|
||||
- [ ] WebSocket transport
|
||||
- [ ] Notifications temps réel
|
||||
- [ ] Backup/restore automatique
|
||||
- [ ] Rate limiting
|
||||
|
||||
---
|
||||
|
||||
**Auteur:** MCP Memento Server
|
||||
**Version:** 1.0.0
|
||||
**Date:** 2026-01-04
|
||||
**Licence:** MIT
|
||||
521
keep-notes/components/note-input.tsx
Normal file
521
keep-notes/components/note-input.tsx
Normal file
@ -0,0 +1,521 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
CheckSquare,
|
||||
X,
|
||||
Bell,
|
||||
Image,
|
||||
UserPlus,
|
||||
Palette,
|
||||
Archive,
|
||||
MoreVertical,
|
||||
Undo2,
|
||||
Redo2
|
||||
} from 'lucide-react'
|
||||
import { createNote } from '@/app/actions/notes'
|
||||
import { CheckItem, NOTE_COLORS, NoteColor } from '@/lib/types'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useUndoRedo } from '@/hooks/useUndoRedo'
|
||||
|
||||
interface NoteState {
|
||||
title: string
|
||||
content: string
|
||||
checkItems: CheckItem[]
|
||||
images: string[]
|
||||
}
|
||||
|
||||
export function NoteInput() {
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const [type, setType] = useState<'text' | 'checklist'>('text')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [color, setColor] = useState<NoteColor>('default')
|
||||
const [isArchived, setIsArchived] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Undo/Redo state management
|
||||
const {
|
||||
state: noteState,
|
||||
setState: setNoteState,
|
||||
undo,
|
||||
redo,
|
||||
canUndo,
|
||||
canRedo,
|
||||
clear: clearHistory
|
||||
} = useUndoRedo<NoteState>({
|
||||
title: '',
|
||||
content: '',
|
||||
checkItems: [],
|
||||
images: []
|
||||
})
|
||||
|
||||
const { title, content, checkItems, images } = noteState
|
||||
|
||||
// Debounced state updates for performance
|
||||
const updateTitle = (newTitle: string) => {
|
||||
setNoteState(prev => ({ ...prev, title: newTitle }))
|
||||
}
|
||||
|
||||
const updateContent = (newContent: string) => {
|
||||
setNoteState(prev => ({ ...prev, content: newContent }))
|
||||
}
|
||||
|
||||
const updateCheckItems = (newCheckItems: CheckItem[]) => {
|
||||
setNoteState(prev => ({ ...prev, checkItems: newCheckItems }))
|
||||
}
|
||||
|
||||
const updateImages = (newImages: string[]) => {
|
||||
setNoteState(prev => ({ ...prev, images: newImages }))
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isExpanded) return
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
|
||||
e.preventDefault()
|
||||
undo()
|
||||
}
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
|
||||
e.preventDefault()
|
||||
redo()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [isExpanded, undo, redo])
|
||||
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files
|
||||
if (!files) return
|
||||
|
||||
// Validate file types
|
||||
const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
|
||||
const maxSize = 5 * 1024 * 1024 // 5MB
|
||||
|
||||
Array.from(files).forEach(file => {
|
||||
// Validation
|
||||
if (!validTypes.includes(file.type)) {
|
||||
alert(`Invalid file type: ${file.name}. Only JPEG, PNG, GIF, and WebP are allowed.`)
|
||||
return
|
||||
}
|
||||
|
||||
if (file.size > maxSize) {
|
||||
alert(`File too large: ${file.name}. Maximum size is 5MB.`)
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onloadend = () => {
|
||||
updateImages([...images, reader.result as string])
|
||||
}
|
||||
reader.onerror = () => {
|
||||
alert(`Failed to read file: ${file.name}`)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
|
||||
// Reset input
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
const handleReminder = () => {
|
||||
const reminderDate = prompt('Enter reminder date and time (e.g., 2026-01-10 14:30):')
|
||||
if (!reminderDate) return
|
||||
|
||||
try {
|
||||
const date = new Date(reminderDate)
|
||||
if (isNaN(date.getTime())) {
|
||||
alert('Invalid date format. Please use format: YYYY-MM-DD HH:MM')
|
||||
return
|
||||
}
|
||||
|
||||
if (date < new Date()) {
|
||||
alert('Reminder date must be in the future')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: Store reminder in database and implement notification system
|
||||
alert(`Reminder set for: ${date.toLocaleString()}\n\nNote: Reminder system will be fully implemented in the next update.`)
|
||||
} catch (error) {
|
||||
alert('Failed to set reminder. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Validation
|
||||
if (type === 'text' && !content.trim()) {
|
||||
alert('Please enter some content for your note')
|
||||
return
|
||||
}
|
||||
if (type === 'checklist' && checkItems.length === 0) {
|
||||
alert('Please add at least one item to your checklist')
|
||||
return
|
||||
}
|
||||
if (type === 'checklist' && checkItems.every(item => !item.text.trim())) {
|
||||
alert('Checklist items cannot be empty')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
await createNote({
|
||||
title: title.trim() || undefined,
|
||||
content: type === 'text' ? content : '',
|
||||
type,
|
||||
checkItems: type === 'checklist' ? checkItems : undefined,
|
||||
color,
|
||||
isArchived,
|
||||
images: images.length > 0 ? images : undefined,
|
||||
})
|
||||
|
||||
// Reset form and history
|
||||
setNoteState({
|
||||
title: '',
|
||||
content: '',
|
||||
checkItems: [],
|
||||
images: []
|
||||
})
|
||||
clearHistory()
|
||||
setIsExpanded(false)
|
||||
setType('text')
|
||||
setColor('default')
|
||||
setIsArchived(false)
|
||||
} catch (error) {
|
||||
console.error('Failed to create note:', error)
|
||||
alert('Failed to create note. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddCheckItem = () => {
|
||||
updateCheckItems([
|
||||
...checkItems,
|
||||
{ id: Date.now().toString(), text: '', checked: false },
|
||||
])
|
||||
}
|
||||
|
||||
const handleUpdateCheckItem = (id: string, text: string) => {
|
||||
updateCheckItems(
|
||||
checkItems.map(item => (item.id === id ? { ...item, text } : item))
|
||||
)
|
||||
}
|
||||
|
||||
const handleRemoveCheckItem = (id: string) => {
|
||||
updateCheckItems(checkItems.filter(item => item.id !== id))
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setIsExpanded(false)
|
||||
setNoteState({
|
||||
title: '',
|
||||
content: '',
|
||||
checkItems: [],
|
||||
images: []
|
||||
})
|
||||
clearHistory()
|
||||
setType('text')
|
||||
setColor('default')
|
||||
setIsArchived(false)
|
||||
}
|
||||
|
||||
if (!isExpanded) {
|
||||
return (
|
||||
<Card className="p-4 max-w-2xl mx-auto mb-8 cursor-text shadow-md hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center gap-4">
|
||||
<Input
|
||||
placeholder="Take a note..."
|
||||
onClick={() => setIsExpanded(true)}
|
||||
readOnly
|
||||
value=""
|
||||
className="border-0 focus-visible:ring-0 cursor-text"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setType('checklist')
|
||||
setIsExpanded(true)
|
||||
}}
|
||||
title="New checklist"
|
||||
>
|
||||
<CheckSquare className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const colorClasses = NOTE_COLORS[color] || NOTE_COLORS.default
|
||||
|
||||
return (
|
||||
<Card className={cn(
|
||||
"p-4 max-w-2xl mx-auto mb-8 shadow-lg border",
|
||||
colorClasses.card
|
||||
)}>
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
placeholder="Title"
|
||||
value={title}
|
||||
onChange={(e) => updateTitle(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0 text-base font-semibold"
|
||||
/>
|
||||
|
||||
{/* Image Preview */}
|
||||
{images.length > 0 && (
|
||||
<div className="flex flex-col gap-2">
|
||||
{images.map((img, idx) => (
|
||||
<div key={idx} className="relative group">
|
||||
<img
|
||||
src={img}
|
||||
alt={`Upload ${idx + 1}`}
|
||||
className="max-w-full h-auto max-h-96 object-contain rounded-lg"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2 h-7 w-7 p-0 bg-white/90 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => updateImages(images.filter((_, i) => i !== idx))}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{type === 'text' ? (
|
||||
<Textarea
|
||||
placeholder="Take a note..."
|
||||
value={content}
|
||||
onChange={(e) => updateContent(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0 min-h-[100px] resize-none"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{checkItems.map((item) => (
|
||||
<div key={item.id} className="flex items-start gap-2 group">
|
||||
<Checkbox className="mt-2" />
|
||||
<Input
|
||||
value={item.text}
|
||||
onChange={(e) => handleUpdateCheckItem(item.id, e.target.value)}
|
||||
placeholder="List item"
|
||||
className="flex-1 border-0 focus-visible:ring-0"
|
||||
autoFocus={checkItems[checkItems.length - 1].id === item.id}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="opacity-0 group-hover:opacity-100 h-8 w-8 p-0"
|
||||
onClick={() => handleRemoveCheckItem(item.id)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleAddCheckItem}
|
||||
className="text-gray-600 dark:text-gray-400 w-full justify-start"
|
||||
>
|
||||
+ List item
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<TooltipProvider>
|
||||
<div className="flex items-center gap-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
title="Remind me"
|
||||
onClick={handleReminder}
|
||||
>
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Remind me</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
title="Add image"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Image className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Add image</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" title="Collaborator">
|
||||
<UserPlus className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Collaborator</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<DropdownMenu>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" title="Background options">
|
||||
<Palette className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Background options</TooltipContent>
|
||||
</Tooltip>
|
||||
<DropdownMenuContent align="start" className="w-40">
|
||||
<div className="grid grid-cols-5 gap-2 p-2">
|
||||
{Object.entries(NOTE_COLORS).map(([colorName, colorClass]) => (
|
||||
<button
|
||||
key={colorName}
|
||||
onClick={() => setColor(colorName as NoteColor)}
|
||||
className={cn(
|
||||
'w-7 h-7 rounded-full border-2 hover:scale-110 transition-transform',
|
||||
colorClass.bg,
|
||||
color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-transparent'
|
||||
)}
|
||||
title={colorName}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn(
|
||||
"h-8 w-8",
|
||||
isArchived && "text-yellow-600"
|
||||
)}
|
||||
onClick={() => setIsArchived(!isArchived)}
|
||||
title="Archive"
|
||||
>
|
||||
<Archive className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{isArchived ? 'Unarchive' : 'Archive'}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" title="More">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>More</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
title="Undo"
|
||||
onClick={undo}
|
||||
disabled={!canUndo}
|
||||
>
|
||||
<Undo2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Undo (Ctrl+Z)</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
title="Redo"
|
||||
onClick={redo}
|
||||
disabled={!canRedo}
|
||||
>
|
||||
<Redo2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Redo (Ctrl+Y)</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{type === 'text' && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => {
|
||||
setType('checklist')
|
||||
setContent('')
|
||||
handleAddCheckItem()
|
||||
}}
|
||||
title="Show checkboxes"
|
||||
>
|
||||
<CheckSquare className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Show checkboxes</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={handleClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Adding...' : 'Add'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
115
keep-notes/hooks/useUndoRedo.ts
Normal file
115
keep-notes/hooks/useUndoRedo.ts
Normal file
@ -0,0 +1,115 @@
|
||||
import { useState, useCallback, useRef } from 'react'
|
||||
|
||||
export interface UndoRedoState<T> {
|
||||
past: T[]
|
||||
present: T
|
||||
future: T[]
|
||||
}
|
||||
|
||||
interface UseUndoRedoReturn<T> {
|
||||
state: T
|
||||
setState: (newState: T | ((prev: T) => T)) => void
|
||||
undo: () => void
|
||||
redo: () => void
|
||||
canUndo: boolean
|
||||
canRedo: boolean
|
||||
clear: () => void
|
||||
}
|
||||
|
||||
const MAX_HISTORY_SIZE = 50
|
||||
|
||||
export function useUndoRedo<T>(initialState: T): UseUndoRedoReturn<T> {
|
||||
const [history, setHistory] = useState<UndoRedoState<T>>({
|
||||
past: [],
|
||||
present: initialState,
|
||||
future: [],
|
||||
})
|
||||
|
||||
// Track if we're in an undo/redo operation to prevent adding to history
|
||||
const isUndoRedoAction = useRef(false)
|
||||
|
||||
const setState = useCallback((newState: T | ((prev: T) => T)) => {
|
||||
// Skip if this is an undo/redo action
|
||||
if (isUndoRedoAction.current) {
|
||||
isUndoRedoAction.current = false
|
||||
return
|
||||
}
|
||||
|
||||
setHistory((currentHistory) => {
|
||||
const resolvedNewState =
|
||||
typeof newState === 'function'
|
||||
? (newState as (prev: T) => T)(currentHistory.present)
|
||||
: newState
|
||||
|
||||
// Don't add to history if state hasn't changed
|
||||
if (JSON.stringify(resolvedNewState) === JSON.stringify(currentHistory.present)) {
|
||||
return currentHistory
|
||||
}
|
||||
|
||||
const newPast = [...currentHistory.past, currentHistory.present]
|
||||
|
||||
// Limit history size
|
||||
if (newPast.length > MAX_HISTORY_SIZE) {
|
||||
newPast.shift()
|
||||
}
|
||||
|
||||
return {
|
||||
past: newPast,
|
||||
present: resolvedNewState,
|
||||
future: [], // Clear future on new action
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
const undo = useCallback(() => {
|
||||
setHistory((currentHistory) => {
|
||||
if (currentHistory.past.length === 0) return currentHistory
|
||||
|
||||
const previous = currentHistory.past[currentHistory.past.length - 1]
|
||||
const newPast = currentHistory.past.slice(0, currentHistory.past.length - 1)
|
||||
|
||||
isUndoRedoAction.current = true
|
||||
|
||||
return {
|
||||
past: newPast,
|
||||
present: previous,
|
||||
future: [currentHistory.present, ...currentHistory.future],
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
const redo = useCallback(() => {
|
||||
setHistory((currentHistory) => {
|
||||
if (currentHistory.future.length === 0) return currentHistory
|
||||
|
||||
const next = currentHistory.future[0]
|
||||
const newFuture = currentHistory.future.slice(1)
|
||||
|
||||
isUndoRedoAction.current = true
|
||||
|
||||
return {
|
||||
past: [...currentHistory.past, currentHistory.present],
|
||||
present: next,
|
||||
future: newFuture,
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
const clear = useCallback(() => {
|
||||
setHistory({
|
||||
past: [],
|
||||
present: initialState,
|
||||
future: [],
|
||||
})
|
||||
}, [initialState])
|
||||
|
||||
return {
|
||||
state: history.present,
|
||||
setState,
|
||||
undo,
|
||||
redo,
|
||||
canUndo: history.past.length > 0,
|
||||
canRedo: history.future.length > 0,
|
||||
clear,
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user