CreaRack-SL

Cuaderno — Editor WYSIWYG personal (TipTap 3.22)

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 notes del dashboard es compartida entre el equipo. El Cuaderno (notebook_notes) es estrictamente personal.


Arquitectura

Backend — Cloudflare Pages Functions + D1

CapaArchivoDescripción
Migraciónmigrations/0022_create_notebook.sqlCrea la tabla notebook_notes en D1
Endpoint lista/createfunctions/api/notebook/index.tsGET /api/notebook + POST /api/notebook
Endpoint detallefunctions/api/notebook/[id].tsGET/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ámetroTipoDescripción
archived=1queryIncluye 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

ComponenteArchivoResponsabilidad
NotebookPagesrc/components/notebook/NotebookPage.tsxPágina principal con sidebar: Ancladas / Notas / Archivadas
NoteEditorsrc/components/notebook/NoteEditor.tsxEditor TipTap + auto-save 1s + estado del slash menu
Toolbarsrc/components/notebook/Toolbar.tsxBarra de formato: bold, italic, listas, link, tabla, pin/archive
slashCommandssrc/components/notebook/slashCommands.ts10 comandos via @tiptap/suggestion
ExportModalsrc/components/notebook/ExportModal.tsxExport 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:

  1. Texto normal
  2. Título H1
  3. Título H2
  4. Título H3
  5. Lista con viñetas
  6. Lista numerada
  7. Lista de tareas
  8. Bloque de código
  9. Tabla (3×3)
  10. 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 con tiptap-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-email no 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:

PRFeatureSesión
PR1Quick Linkss52pm
PR2Direccioness54
PR3Cuaderno (esta feature)s52
PR4Hub /toolss52

Véase también

  • [[feature—tools—hub-tools]]
  • [[workspace—que-es-workspace]]
  • [[workspace—tareas-notas]]
  • [[workspace—dashboard]]