Contextual Editing

Contextual editing bikin editor bisa lihat perubahannya langsung di halaman live, tanpa perlu save atau nunggu rebuild.

Arsitektur komunikasi

Tina Admin dan Nuxt saling ngobrol lewat protokol messaging antar-window yang aman:

Siklus event

1. Client ready: begitu halaman Nuxt selesai dimuat di dalam iframe, bridge kirim event tinacms:client:ready beserta URL saat itu ke Tina Admin.
2. Form sync: Tina Admin deteksi form yang cocok buat URL itu dan nampilin sidebar editing.
3. Reactive patching: setiap ketikan atau perubahan value di form Tina dikirim sebagai payload ke iframe, ditangkap sama composable useTina(), dan di-patch ke DOM.

Mengatur preview route

Tina Admin butuh tahu URL mana yang harus di-load ke iframe preview sebelum handshake di atas bisa jalan. URL itu didapat dari fungsi router yang kamu definisikan per collection di tina/config.ts, di dalam ui.router. Kalau nggak ada, klik dokumen bakal buka form edit internal, bukan preview langsung.

{
  name: 'post',
  label: 'Posts',
  path: 'content/posts',
  ui: {
    router: ({ document }) => `/blog/${document._sys.breadcrumbs.join('/')}`,
  },
  fields: [ /* ... */ ],
}

router nerima document dan collection, terus balikin path tempat Nuxt app kamu nge-serve dokumen itu. Tina Admin resolve path itu ke origin-nya sendiri dan load ke iframe preview, terus handshake tinacms:client:ready yang lanjutin dari situ.

Mapping ini sepenuhnya ada di schema TinaCMS, bukan di nuxt-tina. Module ini cuma implementasiin sisi iframe dari protokolnya, setelah halaman preview-nya kelar dimuat.