Cuaderno — Editor WYSIWYG personal (TipTap 3.22)
Qué es
El Cuaderno es un bloc de notas markdown personal integrado en el workspace de CreaRack Pro. Cada miembro del staff dispone de su propio espacio privado: las notas tienen scope por owner_id (correo Cloudflare Access) y nunca son visibles a otros usuarios.
Distinto de Notes (post-its): la tabla
notesdel dashboard es compartida entre el equipo. El Cuaderno (notebook_notes) es estrictamente personal.
Arquitectura
Backend — Cloudflare Pages Functions + D1
| Capa | Archivo | Descripción |
|---|---|---|
| Migración | migrations/0022_create_notebook.sql | Crea la tabla notebook_notes en D1 |
| Endpoint lista/create | functions/api/notebook/index.ts | GET /api/notebook + POST /api/notebook |
| Endpoint detalle | functions/api/notebook/[id].ts | GET/PUT/DELETE /api/notebook/:id |
Tabla D1: notebook_notes
CREATE TABLE IF NOT EXISTS notebook_notes (
id INTEGER PRIMARY KEY AUTOINCREMENT,
owner_id TEXT NOT NULL, -- email Cloudflare Access
title TEXT NOT NULL DEFAULT 'Sin título',
content TEXT NOT NULL DEFAULT '{}', -- JSON nativo TipTap
word_count INTEGER NOT NULL DEFAULT 0,
pinned INTEGER NOT NULL DEFAULT 0, -- booleano SQLite (0/1)
archived_at TEXT, -- NULL = activa; ISO 8601 = archivada
created_at TEXT NOT NULL DEFAULT (datetime('now')),
updated_at TEXT NOT NULL DEFAULT (datetime('now'))
);
Índice compuesto: (owner_id, archived_at, pinned DESC, updated_at DESC) — optimizado para el listado habitual (notas activas del usuario, ancladas primero).
Identificación de usuario: la función actorFrom(request) lee la cabecera cf-access-authenticated-user-email inyectada por Cloudflare Access. Fallback: 'web'.
Endpoints API
GET /api/notebook
Devuelve las notas del usuario autenticado. Por defecto excluye archivadas.
| Parámetro | Tipo | Descripción |
|---|---|---|
archived=1 | query | Incluye notas archivadas |
Orden: pinned DESC, updated_at DESC.
POST /api/notebook
Crea una nueva nota.
{ "title": "Mi nota", "content": "{...tiptap json...}", "word_count": 42 }
Responde 201 con la nota creada. Registra actividad create en el activity log.
GET /api/notebook/:id
Retorna la nota si pertenece al usuario. 404 si no es del owner.
PUT /api/notebook/:id
Actualiza campos parcialmente. Campos aceptados: title, content, word_count, pinned, archived (bool).
- Auto-save: los cambios de contenido puro (keystroke debounced a 1s) no registran actividad para evitar ruido en el log.
- Cambios significativos (título, pin, archivado) sí registran actividad.
DELETE /api/notebook/:id
Borra la nota permanentemente. Registra actividad delete.
Frontend
Componentes
| Componente | Archivo | Responsabilidad |
|---|---|---|
NotebookPage | src/components/notebook/NotebookPage.tsx | Página principal con sidebar: Ancladas / Notas / Archivadas |
NoteEditor | src/components/notebook/NoteEditor.tsx | Editor TipTap + auto-save 1s + estado del slash menu |
Toolbar | src/components/notebook/Toolbar.tsx | Barra de formato: bold, italic, listas, link, tabla, pin/archive |
slashCommands | src/components/notebook/slashCommands.ts | 10 comandos via @tiptap/suggestion |
ExportModal | src/components/notebook/ExportModal.tsx | Export MD/HTML + copiar/descargar |
Ruta Astro: src/pages/tools/notebook/index.astro
Extensiones TipTap activas
starter-kit | link | placeholder | table/table-cell/table-header/table-row
task-list | task-item | suggestion (slash menu)
Serialización a Markdown vía tiptap-markdown ^0.9.0.
Slash Menu (10 comandos)
Invocado escribiendo / en cualquier posición del editor:
- Texto normal
- Título H1
- Título H2
- Título H3
- Lista con viñetas
- Lista numerada
- Lista de tareas
- Bloque de código
- Tabla (3×3)
- Separador horizontal
Auto-save
Debounce de 1 segundo tras cada keystroke. Llama a PUT /api/notebook/:id con content y word_count. No registra actividad para no saturar el log de operaciones.
Export
El ExportModal ofrece:
- Markdown (
.md) — serializado contiptap-markdown - HTML standalone — incluye estilos en línea, descargable como
.html - PDF — no hay generación server-side; se indica al usuario usar
Ctrl+P→ impresora PDF del SO.
Seguridad y scope
- Toda operación valida que
owner_id === actorFrom(request)antes de leer o modificar. - No hay endpoint admin para listar notas de otros usuarios.
- Cloudflare Access garantiza que la cabecera
cf-access-authenticated-user-emailno puede ser falsificada desde internet.
Dependencias añadidas
"@tiptap/core": "^3.22.5",
"@tiptap/extension-link": "^3.22.5",
"@tiptap/extension-placeholder": "^3.22.5",
"@tiptap/extension-table": "^3.22.5",
"@tiptap/extension-table-cell": "^3.22.5",
"@tiptap/extension-table-header":"^3.22.5",
"@tiptap/extension-table-row": "^3.22.5",
"@tiptap/extension-task-item": "^3.22.5",
"@tiptap/extension-task-list": "^3.22.5",
"@tiptap/pm": "^3.22.5",
"@tiptap/react": "^3.22.5",
"@tiptap/starter-kit": "^3.22.5",
"@tiptap/suggestion": "^3.22.5",
"tiptap-markdown": "^0.9.0"
Contexto del plan s52
El Cuaderno es la PR3 de 4 del plan workspace tools s52:
| PR | Feature | Sesión |
|---|---|---|
| PR1 | Quick Links | s52pm |
| PR2 | Direcciones | s54 |
| PR3 | Cuaderno (esta feature) | s52 |
| PR4 | Hub /tools | s52 |
Véase también
- [[feature—tools—hub-tools]]
- [[workspace—que-es-workspace]]
- [[workspace—tareas-notas]]
- [[workspace—dashboard]]