[{"data":1,"prerenderedAt":329},["ShallowReactive",2],{"navigation_docs_id":3,"-id-guide-preview-mode":88,"-id-guide-preview-mode-surround":324},[4,18,51],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Getting Started","\u002Fid\u002Fgetting-started","id\u002F1.getting-started",[9,13],{"title":10,"path":11,"stem":12},"Pengenalan","\u002Fid\u002Fgetting-started\u002Fintroduction","id\u002F1.getting-started\u002F1.introduction",{"title":14,"path":15,"stem":16},"Instalasi & Konfigurasi","\u002Fid\u002Fgetting-started\u002Finstallation","id\u002F1.getting-started\u002F2.installation",false,{"title":19,"path":20,"stem":21,"children":22,"page":17},"Guide","\u002Fid\u002Fguide","id\u002F2.guide",[23,27,31,35,39,43,47],{"title":24,"path":25,"stem":26},"Contextual Editing","\u002Fid\u002Fguide\u002Fcontextual-editing","id\u002F2.guide\u002F1.contextual-editing",{"title":28,"path":29,"stem":30},"Preview Mode","\u002Fid\u002Fguide\u002Fpreview-mode","id\u002F2.guide\u002F2.preview-mode",{"title":32,"path":33,"stem":34},"Tina Cloud & Mode Editing","\u002Fid\u002Fguide\u002Ftina-cloud","id\u002F2.guide\u002F3.tina-cloud",{"title":36,"path":37,"stem":38},"Kompatibilitas Nuxt Content","\u002Fid\u002Fguide\u002Fnuxt-content","id\u002F2.guide\u002F4.nuxt-content",{"title":40,"path":41,"stem":42},"Media","\u002Fid\u002Fguide\u002Fmedia","id\u002F2.guide\u002F5.media",{"title":44,"path":45,"stem":46},"Rich-Text Lanjutan","\u002Fid\u002Fguide\u002Frich-text-advanced","id\u002F2.guide\u002F6.rich-text-advanced",{"title":48,"path":49,"stem":50},"Deployment","\u002Fid\u002Fguide\u002Fdeployment","id\u002F2.guide\u002F7.deployment",{"title":52,"path":53,"stem":54,"children":55,"page":17},"Api","\u002Fid\u002Fapi","id\u002F3.api",[56,60,64,68,72,76,80,84],{"title":57,"path":58,"stem":59},"useTina()","\u002Fid\u002Fapi\u002Fuse-tina","id\u002F3.api\u002F1.use-tina",{"title":61,"path":62,"stem":63},"useTinaBridge()","\u002Fid\u002Fapi\u002Fuse-tina-bridge","id\u002F3.api\u002F2.use-tina-bridge",{"title":65,"path":66,"stem":67},"useTinaPreview()","\u002Fid\u002Fapi\u002Fuse-tina-preview","id\u002F3.api\u002F3.use-tina-preview",{"title":69,"path":70,"stem":71},"\u003CTinaProvider>","\u002Fid\u002Fapi\u002Ftina-provider","id\u002F3.api\u002F4.tina-provider",{"title":73,"path":74,"stem":75},"\u003CTinaMarkdown>","\u002Fid\u002Fapi\u002Ftina-markdown","id\u002F3.api\u002F5.tina-markdown",{"title":77,"path":78,"stem":79},"\u003CTinaMermaid>","\u002Fid\u002Fapi\u002Ftina-mermaid","id\u002F3.api\u002F6.tina-mermaid",{"title":81,"path":82,"stem":83},"Konfigurasi Module","\u002Fid\u002Fapi\u002Fconfiguration","id\u002F3.api\u002F7.configuration",{"title":85,"path":86,"stem":87},"Tipe Field","\u002Fid\u002Fapi\u002Ffield-types","id\u002F3.api\u002F8.field-types",{"id":89,"title":28,"body":90,"description":317,"extension":318,"links":319,"meta":320,"navigation":321,"path":29,"seo":322,"stem":30,"__hash__":323},"docs_id\u002Fid\u002F2.guide\u002F2.preview-mode.md",{"type":91,"value":92,"toc":311},"minimark",[93,101,110,139,189,196,212,248,294,307],[94,95,96,100],"p",{},[97,98,99],"code",{},"nuxt-tina"," punya dua mekanisme \"preview\" yang beda tujuan. Jangan disamakan:",[102,103,105,106,109],"h2",{"id":104},"_1-contextual-editing-udah-jalan-bukan-usepreviewmode","1. Contextual editing (udah jalan, bukan ",[97,107,108],{},"usePreviewMode()",")",[94,111,112,113,116,117,120,121,123,124,127,128,132,133,135,136,138],{},"Live editing di dalam iframe Tina Admin (",[97,114,115],{},"\u002Fadmin#\u002F~\u002F...",") di-patch lewat bridge ",[97,118,119],{},"postMessage"," custom (",[97,122,57],{}," + ",[97,125,126],{},"bridge.ts","), ",[129,130,131],"strong",{},"bukan"," ",[97,134,108],{}," bawaan Nuxt. Begitu editor ngetik di form Tina, data barunya langsung dikirim ke halaman lewat ",[97,137,119],{}," dan di-patch ke state Vue reaktif: sama sekali nggak ada refetch ke server.",[140,141,146],"pre",{"className":142,"code":143,"language":144,"meta":145,"style":145},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { data, isEditing, isInIframe } = useTina(response)\n","ts","",[97,147,148],{"__ignoreMap":145},[149,150,153,157,161,165,168,171,173,176,179,182,186],"span",{"class":151,"line":152},"line",1,[149,154,156],{"class":155},"spNyl","const",[149,158,160],{"class":159},"sMK4o"," {",[149,162,164],{"class":163},"sTEyZ"," data",[149,166,167],{"class":159},",",[149,169,170],{"class":163}," isEditing",[149,172,167],{"class":159},[149,174,175],{"class":163}," isInIframe ",[149,177,178],{"class":159},"}",[149,180,181],{"class":159}," =",[149,183,185],{"class":184},"s2Zo4"," useTina",[149,187,188],{"class":163},"(response)\n",[102,190,192,193,195],{"id":191},"_2-usetinapreview-link-preview-yang-bisa-dibagikan","2. ",[97,194,65],{},": link preview yang bisa dibagikan",[94,197,198,199,202,203,211],{},"Composable terpisah buat kasus yang beda: ",[129,200,201],{},"bagi link draft"," ke stakeholder yang nggak pernah buka Tina Admin sama sekali. Ini cuma wrapper tipis di atas ",[204,205,209],"a",{"href":206,"rel":207},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode",[208],"nofollow",[97,210,108],{}," bawaan Nuxt.",[140,213,215],{"className":142,"code":214,"language":144,"meta":145,"style":145},"const { enabled, state } = useTinaPreview()\n\u002F\u002F state.branch otomatis keisi dari query param ?tina-preview=\u003Cbranch>\n",[97,216,217,241],{"__ignoreMap":145},[149,218,219,221,223,226,228,231,233,235,238],{"class":151,"line":152},[149,220,156],{"class":155},[149,222,160],{"class":159},[149,224,225],{"class":163}," enabled",[149,227,167],{"class":159},[149,229,230],{"class":163}," state ",[149,232,178],{"class":159},[149,234,181],{"class":159},[149,236,237],{"class":184}," useTinaPreview",[149,239,240],{"class":163},"()\n",[149,242,244],{"class":151,"line":243},2,[149,245,247],{"class":246},"sHwdD","\u002F\u002F state.branch otomatis keisi dari query param ?tina-preview=\u003Cbranch>\n",[249,250,251,263,280],"ul",{},[252,253,254,255,258,259,262],"li",{},"Aktif lewat query param ",[97,256,257],{},"?tina-preview=\u003Cbranch>"," (nama param-nya bisa diubah: ",[97,260,261],{},"useTinaPreview('custom-param')",").",[252,264,265,268,269,272,273,276,277,279],{},[97,266,267],{},"state.branch"," otomatis keisi, dan ",[97,270,271],{},"useAsyncData","\u002F",[97,274,275],{},"useFetch"," yang udah ada otomatis re-run pas status preview berubah (udah built-in di ",[97,278,108],{},", nggak perlu logic manual).",[252,281,282,283,123,286,289,290,293],{},"Ditest pakai ",[97,284,285],{},"nuxt generate",[97,287,288],{},"nuxt preview",", bukan ",[97,291,292],{},"nuxt dev",".",[94,295,296,297,300,301,132,304,306],{},"Composable-nya sendiri udah jalan (plumbing sisi Nuxt-nya udah selesai). Yang ",[129,298,299],{},"belum"," disambungkan itu protokol token Tina Cloud Editorial Workflow yang beneran (fitur PRO berbayar), soalnya butuh akun PRO buat verifikasi gimana token itu sebenarnya dipetakan ke branch\u002Fdraft di sisi Tina Cloud. Kalau kamu cuma butuh live editing di dalam Tina Admin, kamu ",[129,302,303],{},"nggak butuh",[97,305,65],{}," sama sekali: itu murni buat kasus \"kirim link ke orang lain\".",[308,309,310],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":145,"searchDepth":243,"depth":243,"links":312},[313,315],{"id":104,"depth":243,"text":314},"1. Contextual editing (udah jalan, bukan usePreviewMode())",{"id":191,"depth":243,"text":316},"2. useTinaPreview(): link preview yang bisa dibagikan","usePreviewMode() Nuxt dan bedanya dengan bridge visual editing.","md",null,{},true,{"title":28,"description":317},"r909s4u-JQdzqE-OKF34DG20HZPtUO90YT1US4sHnNg",[325,327],{"title":24,"path":25,"stem":26,"description":326,"children":-1},"Cara kerja alur komunikasi postMessage dan live preview.",{"title":32,"path":33,"stem":34,"description":328,"children":-1},"Setup auth Tina Cloud, dan dua mode editing: CMS dasar vs visual\u002Fcontextual.",1789757554260]