import{u as c,D as p,c as r,z as s,b as l,G as y,B as F,R as t,o as i,a as o,t as e}from"./chunks/framework.03801eb5.js";import{g as D,a as d}from"./chunks/demoUtils.6ac2f074.js";const C=t("",7),A=["src"],h=t("",9),_={class:"language-typescript"},k=s("button",{title:"Copy Code",class:"copy"},null,-1),u=s("span",{class:"lang"},"typescript",-1),b={class:"shiki material-theme-palenight"},B=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"useState"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"}"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#C3E88D"}},"react"),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#89DDFF"}},";")],-1),f=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"BlockNoteEditor"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"Block"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"}"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#C3E88D"}},"@blocknote/core"),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#89DDFF"}},";")],-1),g=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"BlockNoteView"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"useBlockNote"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"}"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#C3E88D"}},"@blocknote/react"),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#89DDFF"}},";")],-1),m=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#C3E88D"}},"@blocknote/core/style.css"),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#89DDFF"}},";")],-1),w=s("span",{class:"line"},null,-1),E=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"export"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"default"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C792EA"}},"function"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#82AAFF"}},"App"),s("span",{style:{color:"#89DDFF"}},"()"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{")],-1),v=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"  "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Stores the editor's contents as an array of Block objects.")],-1),N=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#C792EA"}},"const"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"["),s("span",{style:{color:"#A6ACCD"}},"blocks"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"setBlocks"),s("span",{style:{color:"#89DDFF"}},"]"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"="),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#82AAFF"}},"useState"),s("span",{style:{color:"#89DDFF"}},"<"),s("span",{style:{color:"#FFCB6B"}},"Block"),s("span",{style:{color:"#F07178"}},"[] "),s("span",{style:{color:"#89DDFF"}},"|"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#FFCB6B"}},"null"),s("span",{style:{color:"#89DDFF"}},">"),s("span",{style:{color:"#F07178"}},"("),s("span",{style:{color:"#89DDFF"}},"null"),s("span",{style:{color:"#F07178"}},")"),s("span",{style:{color:"#89DDFF"}},";")],-1),T=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  ")],-1),x=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"  "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Creates a new editor instance.")],-1),S=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#C792EA"}},"const"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"editor"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#FFCB6B"}},"BlockNoteEditor"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"|"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#FFCB6B"}},"null"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"="),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#82AAFF"}},"useBlockNote"),s("span",{style:{color:"#F07178"}},"("),s("span",{style:{color:"#89DDFF"}},"{")],-1),I={class:"line"},j=s("span",{style:{color:"#F07178"}},"    theme",-1),q=s("span",{style:{color:"#89DDFF"}},":",-1),P=s("span",{style:{color:"#F07178"}}," ",-1),V=s("span",{style:{color:"#89DDFF"}},'"',-1),O={style:{color:"#C3E88D"}},R=s("span",{style:{color:"#89DDFF"}},'"',-1),W=s("span",{style:{color:"#89DDFF"}},",",-1),z=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"    "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Listens for when the editor's contents change.")],-1),G=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    "),s("span",{style:{color:"#82AAFF"}},"onEditorContentChange"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"("),s("span",{style:{color:"#A6ACCD","font-style":"italic"}},"editor"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#FFCB6B"}},"BlockNoteEditor"),s("span",{style:{color:"#89DDFF"}},")"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#C792EA"}},"=>"),s("span",{style:{color:"#F07178"}}," ")],-1),L=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"      "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Converts the editor's contents to an array of Block objects.")],-1),J=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#82AAFF"}},"setBlocks"),s("span",{style:{color:"#F07178"}},"("),s("span",{style:{color:"#A6ACCD"}},"editor"),s("span",{style:{color:"#89DDFF"}},"."),s("span",{style:{color:"#A6ACCD"}},"topLevelBlocks"),s("span",{style:{color:"#F07178"}},")")],-1),M=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#89DDFF"}},"}"),s("span",{style:{color:"#F07178"}},")")],-1),H=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  ")],-1),K=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"  "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Renders the editor instance and its contents, as an array of Block")],-1),Q=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"  "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// objects, below.")],-1),U=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"return"),s("span",{style:{color:"#F07178"}}," (")],-1),X=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    <"),s("span",{style:{color:"#FFCB6B"}},"div"),s("span",{style:{color:"#F07178"}},">")],-1),Y=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"<"),s("span",{style:{color:"#A6ACCD"}},"BlockNoteView"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"editor"),s("span",{style:{color:"#89DDFF"}},"={"),s("span",{style:{color:"#A6ACCD"}},"editor"),s("span",{style:{color:"#89DDFF"}},"}/>")],-1),Z=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      <"),s("span",{style:{color:"#FFCB6B"}},"pre"),s("span",{style:{color:"#F07178"}},">"),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#F07178"}},"JSON.stringify("),s("span",{style:{color:"#A6ACCD"}},"blocks"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"null"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#F78C6C"}},"2"),s("span",{style:{color:"#F07178"}},")"),s("span",{style:{color:"#89DDFF"}},"}</"),s("span",{style:{color:"#A6ACCD"}},"pre"),s("span",{style:{color:"#89DDFF"}},">")],-1),$=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    "),s("span",{style:{color:"#89DDFF"}},"</"),s("span",{style:{color:"#A6ACCD"}},"div"),s("span",{style:{color:"#89DDFF"}},">")],-1),ss=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  )"),s("span",{style:{color:"#89DDFF"}},";")],-1),os=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"}")],-1),ls={class:"language-css"},ns=s("button",{title:"Copy Code",class:"copy"},null,-1),es=s("span",{class:"lang"},"css",-1),ts={class:"shiki material-theme-palenight"},as={class:"line"},cs={style:{color:"#A6ACCD"}},ps=s("span",{class:"line"},null,-1),rs=s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pre"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{")],-1),ys=s("span",{class:"line"},[s("span",{style:{color:"#A6ACCD"}},"  "),s("span",{style:{color:"#B2CCD6"}},"color"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#A6ACCD"}}," gray"),s("span",{style:{color:"#89DDFF"}},";")],-1),Fs=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"}")],-1),_s=JSON.parse(`{"title":"Introduction to Blocks","description":"So, you've set up a BlockNote editor and your users can start writing content, organized in blocks. What are blocks exactly, and how do we access the blocks from code?","frontmatter":{"title":"Introduction to Blocks","description":"So, you've set up a BlockNote editor and your users can start writing content, organized in blocks. What are blocks exactly, and how do we access the blocks from code?","imageTitle":"Introduction to Blocks","path":"/docs/blocks"},"headers":[],"relativePath":"docs/blocks.md","filePath":"docs/blocks.md"}`),is={name:"docs/blocks.md"},ks=Object.assign(is,{setup(Ds){const{isDark:n}=c();return(ds,Cs)=>{const a=p("Sandbox");return i(),r("div",null,[C,s("img",{src:l(n)?"/img/screenshots/block_structure_dark.png":"/img/screenshots/block_structure.png",alt:"image",style:{width:"100%"}},null,8,A),h,y(a,{codeOptions:"%5B%22typescript-vue%20%2FApp.tsx%22%2C%22css-vue%20%2Fstyles.css%20%5Bhidden%5D%22%5D",template:"react-ts"},{default:F(()=>[s("div",_,[k,u,s("pre",b,[s("code",null,[B,o(`
`),f,o(`
`),g,o(`
`),m,o(`
`),w,o(`
`),E,o(`
`),v,o(`
`),N,o(`
`),T,o(`
`),x,o(`
`),S,o(`
`),s("span",I,[j,q,P,V,s("span",O,e(l(D)(l(n))),1),R,W]),o(`
`),z,o(`
`),G,o(`
`),L,o(`
`),J,o(`
`),M,o(`
`),H,o(`
`),K,o(`
`),Q,o(`
`),U,o(`
`),X,o(`
`),Y,o(`
`),Z,o(`
`),$,o(`
`),ss,o(`
`),os])])]),s("div",ls,[ns,es,s("pre",ts,[s("code",null,[s("span",as,[s("span",cs,e(l(d)(l(n))),1)]),o(`
`),ps,o(`
`),rs,o(`
`),ys,o(`
`),Fs])])])]),_:1})])}}});export{_s as __pageData,ks as default};