WoodyLab
WoodyLabBuild with UIMS

Documentazione · src/admin

L’AdminBar

Quindici file per modificare il contenuto stando sopra il sito pubblico. Non è un’anteprima del risultato: è il risultato, con sopra un livello che sa cosa si può toccare.

Dal DOM al blocco

Il problema di modificare stando sulla pagina è che si clicca su un nodo del DOM e bisogna sapere quale blocco è. La risposta è un attributo `data-uims-id` messo dal renderer: chi non ce l’ha non è selezionabile, ed è corretto — non tutto quello che si vede è un blocco.

Da lì si ricostruisce il percorso del blocco dentro la struttura (`content.0.x`), e c’è un dettaglio che sembra pedante e non lo è: un segmento fatto di sole cifre è un INDICE, non una chiave chiamata «0». Confonderli produce scritture nel posto sbagliato.

  • admin/domMap.ts — la mappa fra nodi del DOM e blocchi; l’etichetta leggibile di una sezione
  • admin/blockTree.ts — l’albero dei blocchi selezionabili
  • admin/blockPath.ts — il percorso di un blocco dentro la struttura
  • admin/applyDraft.ts — applica una modifica al percorso giusto, distinguendo indici e chiavi

Lo stato dell’editor

L’editor ha un proprio store, con la stessa idea di quello del sito: stato, dispatch, sottoscrizione per chiave. Separato perché le due cose non devono interferire — modificare la selezione dell’editor non è un evento del sito.

Il ponte fra i due esiste ed è esplicito: un file solo, che sa quali eventi passano da una parte all’altra.

  • admin/adminStore.tsx — lo store dell’editor
  • admin/adminEvents.ts — gli eventi dell’editor: selezione, modifica, riordino
  • admin/adminEventBridge.tsx — il ponte fra il bus del sito e quello dell’editor
  • admin/schema.ts — i tab e i campi, LETTI dalla definizione del blocco — mai inventati

Riordinare e vedere subito

Il riordino si applica al DOM immediatamente, e insieme si conserva la via del ritorno: i nodi nell’ordine in cui erano. Se il salvataggio fallisce si torna indietro senza ricaricare.

Lo spostamento è di un passo alla volta, e ai bordi restituisce lo stesso array — non un errore. Una lista che non può salire più in alto non è un caso eccezionale.

  • admin/reorder.ts — sposta di un passo; ai bordi non cambia niente
  • admin/livePreview.ts — applica al DOM e conserva la via del ritorno
  • admin/AdminBar.tsx — la barra: pannelli, selezione, comandi
  • admin/adminStyles.ts — le classi dell’editor
  • admin/adminData.tsx — i dati che l’editor legge dagli store
  • admin/lexicalToHtml.ts — converte solo i nodi che l’editor sa modificare: convertire il resto sarebbe mentire
  • admin/index.ts — la porta dell’area
Login