import{u as t,D as p,c,z as s,b as l,G as r,B as y,a as o,O as D,o as F,t as a}from"./chunks/framework.f7673d23.js";import{g as i,a as C}from"./chunks/demoUtils.6ac2f074.js";const A=s("h1",{id:"block-side-menu",tabindex:"-1"},[o("Block Side Menu "),s("a",{class:"header-anchor",href:"#block-side-menu","aria-label":'Permalink to "Block Side Menu"'},"​")],-1),d=s("p",null,"The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.",-1),h=["src"],u=s("p",null,[o("You can also click the drag handle in the Block Side Menu ("),s("code",null,"⠿"),o(") to open the Drag Handle Menu.")],-1),_=["src"],m=s("h2",{id:"custom-drag-handle-menu",tabindex:"-1"},[o("Custom Drag Handle Menu "),s("a",{class:"header-anchor",href:"#custom-drag-handle-menu","aria-label":'Permalink to "Custom Drag Handle Menu"'},"​")],-1),B=s("p",null,"BlockNote lets you customize which items appear in the Drag Handle Menu. Have a look at the example below, in which the color picker item is replaced with a custom item that opens an alert.",-1),g={class:"language-typescript"},k=s("button",{title:"Copy Code",class:"copy"},null,-1),f=s("span",{class:"lang"},"typescript",-1),E={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"}},"Block"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"BlockNoteEditor"),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),M=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{")],-1),v=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#A6ACCD"}},"BlockNoteView"),s("span",{style:{color:"#89DDFF"}},",")],-1),w=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#A6ACCD"}},"createReactBlockSideMenuFactory"),s("span",{style:{color:"#89DDFF"}},",")],-1),N=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#A6ACCD"}},"DragHandleMenu"),s("span",{style:{color:"#89DDFF"}},",")],-1),S=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#A6ACCD"}},"DragHandleMenuItem"),s("span",{style:{color:"#89DDFF"}},",")],-1),H=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#A6ACCD"}},"RemoveBlockButton"),s("span",{style:{color:"#89DDFF"}},",")],-1),P=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#A6ACCD"}},"useBlockNote"),s("span",{style:{color:"#89DDFF"}},",")],-1),x=s("span",{class:"line"},[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),I=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),R=s("span",{class:"line"},null,-1),T=s("span",{class:"line"},[s("span",{style:{color:"#C792EA"}},"const"),s("span",{style:{color:"#A6ACCD"}}," CustomDragHandleMenu "),s("span",{style:{color:"#89DDFF"}},"="),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"("),s("span",{style:{color:"#A6ACCD","font-style":"italic"}},"props"),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:"#A6ACCD"}},"  "),s("span",{style:{color:"#F07178"}},"editor"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#FFCB6B"}},"BlockNoteEditor"),s("span",{style:{color:"#89DDFF"}},";")],-1),O=s("span",{class:"line"},[s("span",{style:{color:"#A6ACCD"}},"  "),s("span",{style:{color:"#F07178"}},"block"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#FFCB6B"}},"Block"),s("span",{style:{color:"#89DDFF"}},";")],-1),q=s("span",{class:"line"},[s("span",{style:{color:"#A6ACCD"}},"  "),s("span",{style:{color:"#F07178"}},"closeMenu"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"()"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C792EA"}},"=>"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#FFCB6B"}},"void"),s("span",{style:{color:"#89DDFF"}},";")],-1),z=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"})"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C792EA"}},"=>"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"{")],-1),J=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"return"),s("span",{style:{color:"#F07178"}}," (")],-1),Y=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    <"),s("span",{style:{color:"#FFCB6B"}},"DragHandleMenu"),s("span",{style:{color:"#F07178"}},">")],-1),j=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#676E95","font-style":"italic"}},"/*Default button to remove the block.*/"),s("span",{style:{color:"#89DDFF"}},"}")],-1),G=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"<"),s("span",{style:{color:"#A6ACCD"}},"RemoveBlockButton"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"{..."),s("span",{style:{color:"#A6ACCD","font-style":"italic"}},"props"),s("span",{style:{color:"#89DDFF"}},"}>")],-1),L=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"        "),s("span",{style:{color:"#A6ACCD","font-style":"italic"}},"Delete")],-1),U=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"</"),s("span",{style:{color:"#A6ACCD"}},"RemoveBlockButton"),s("span",{style:{color:"#89DDFF"}},">")],-1),W=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#676E95","font-style":"italic"}},"/*Custom item which opens an alert when clicked.*/"),s("span",{style:{color:"#89DDFF"}},"}")],-1),X=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"<"),s("span",{style:{color:"#A6ACCD","font-style":"italic"}},"DragHandleMenuItem")],-1),K=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"        "),s("span",{style:{color:"#A6ACCD"}},"closeMenu"),s("span",{style:{color:"#89DDFF"}},"={"),s("span",{style:{color:"#F07178"}},"props."),s("span",{style:{color:"#A6ACCD"}},"closeMenu"),s("span",{style:{color:"#89DDFF"}},"}")],-1),Q=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"        "),s("span",{style:{color:"#A6ACCD"}},"onClick"),s("span",{style:{color:"#89DDFF"}},"={"),s("span",{style:{color:"#F07178"}},"() => "),s("span",{style:{color:"#89DDFF"}},"{")],-1),Z=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"          "),s("span",{style:{color:"#A6ACCD"}},"window"),s("span",{style:{color:"#89DDFF"}},"."),s("span",{style:{color:"#82AAFF"}},"alert"),s("span",{style:{color:"#F07178"}},"("),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#C3E88D"}},"Button Pressed!"),s("span",{style:{color:"#89DDFF"}},'"'),s("span",{style:{color:"#F07178"}},")"),s("span",{style:{color:"#89DDFF"}},";")],-1),$=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"          "),s("span",{style:{color:"#A6ACCD"}},"props"),s("span",{style:{color:"#89DDFF"}},"."),s("span",{style:{color:"#82AAFF"}},"closeMenu"),s("span",{style:{color:"#F07178"}},"()"),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:"#F07178"}},"        "),s("span",{style:{color:"#A6ACCD"}},"Open"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD","font-style":"italic"}},"Alert")],-1),ls=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      "),s("span",{style:{color:"#89DDFF"}},"</"),s("span",{style:{color:"#A6ACCD"}},"DragHandleMenuItem"),s("span",{style:{color:"#89DDFF"}},">")],-1),ns=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    "),s("span",{style:{color:"#89DDFF"}},"</"),s("span",{style:{color:"#A6ACCD"}},"DragHandleMenu"),s("span",{style:{color:"#89DDFF"}},">")],-1),as=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  )"),s("span",{style:{color:"#89DDFF"}},";")],-1),es=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"};")],-1),ts=s("span",{class:"line"},null,-1),ps=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),cs=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"  "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Creates a new editor instance.")],-1),rs=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:"#82AAFF"}},"useBlockNote"),s("span",{style:{color:"#F07178"}},"("),s("span",{style:{color:"#89DDFF"}},"{")],-1),ys={class:"line"},Ds=s("span",{style:{color:"#F07178"}},"    theme",-1),Fs=s("span",{style:{color:"#89DDFF"}},":",-1),is=s("span",{style:{color:"#F07178"}}," ",-1),Cs=s("span",{style:{color:"#89DDFF"}},'"',-1),As={style:{color:"#C3E88D"}},ds=s("span",{style:{color:"#89DDFF"}},'"',-1),hs=s("span",{style:{color:"#89DDFF"}},",",-1),us=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    customElements"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#89DDFF"}},"{")],-1),_s=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"      "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Makes the editor instance use the custom menu.")],-1),ms=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"      dragHandleMenu"),s("span",{style:{color:"#89DDFF"}},":"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#A6ACCD"}},"CustomDragHandleMenu")],-1),Bs=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"    "),s("span",{style:{color:"#89DDFF"}},"},")],-1),gs=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#89DDFF"}},"}"),s("span",{style:{color:"#F07178"}},")"),s("span",{style:{color:"#89DDFF"}},";")],-1),ks=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"  "),s("span",{style:{color:"#676E95","font-style":"italic"}},"// Renders the editor instance.")],-1),fs=s("span",{class:"line"},[s("span",{style:{color:"#F07178"}},"  "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"return"),s("span",{style:{color:"#F07178"}}," <"),s("span",{style:{color:"#FFCB6B"}},"BlockNoteView"),s("span",{style:{color:"#F07178"}}," "),s("span",{style:{color:"#FFCB6B"}},"editor"),s("span",{style:{color:"#F07178"}}," = "),s("span",{style:{color:"#89DDFF"}},"{"),s("span",{style:{color:"#F07178"}},"editor"),s("span",{style:{color:"#89DDFF"}},"}"),s("span",{style:{color:"#F07178"}},"/>"),s("span",{style:{color:"#89DDFF"}},";")],-1),Es=s("span",{class:"line"},[s("span",{style:{color:"#89DDFF"}},"}")],-1),bs={class:"language-css"},Ms=s("button",{title:"Copy Code",class:"copy"},null,-1),vs=s("span",{class:"lang"},"css",-1),ws={class:"shiki material-theme-palenight"},Ns={class:"line"},Ss={style:{color:"#A6ACCD"}},Hs=D("",10),Os=JSON.parse('{"title":"Block Side Menu","description":"The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.","frontmatter":{"title":"Block Side Menu","description":"The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.","imageTitle":"Block Side Menu","path":"/docs/side-menu"},"headers":[],"relativePath":"docs/side-menu.md","filePath":"docs/side-menu.md"}'),Ps={name:"docs/side-menu.md"},qs=Object.assign(Ps,{setup(xs){const{isDark:n}=t();return(Is,Rs)=>{const e=p("Sandbox");return F(),c("div",null,[A,d,s("img",{style:{"max-width":"500px"},src:l(n)?"/img/screenshots/side_menu_dark.png":"/img/screenshots/side_menu.png",alt:"image"},null,8,h),u,s("img",{style:{"max-width":"250px"},src:l(n)?"/img/screenshots/drag_handle_menu_dark.png":"/img/screenshots/drag_handle_menu.png",alt:"image"},null,8,_),m,B,r(e,{codeOptions:"%5B%22typescript-vue%20%2FApp.tsx%22%2C%22css-vue%20%2Fstyles.css%20%5Bhidden%5D%22%5D",template:"react-ts"},{default:y(()=>[s("div",g,[k,f,s("pre",E,[s("code",null,[b,o(`
`),M,o(`
`),v,o(`
`),w,o(`
`),N,o(`
`),S,o(`
`),H,o(`
`),P,o(`
`),x,o(`
`),I,o(`
`),R,o(`
`),T,o(`
`),V,o(`
`),O,o(`
`),q,o(`
`),z,o(`
`),J,o(`
`),Y,o(`
`),j,o(`
`),G,o(`
`),L,o(`
`),U,o(`
`),W,o(`
`),X,o(`
`),K,o(`
`),Q,o(`
`),Z,o(`
`),$,o(`
`),ss,o(`
`),os,o(`
`),ls,o(`
`),ns,o(`
`),as,o(`
`),es,o(`
`),ts,o(`
`),ps,o(`
`),cs,o(`
`),rs,o(`
`),s("span",ys,[Ds,Fs,is,Cs,s("span",As,a(l(i)(l(n))),1),ds,hs]),o(`
`),us,o(`
`),_s,o(`
`),ms,o(`
`),Bs,o(`
`),gs,o(`
`),ks,o(`
`),fs,o(`
`),Es])])]),s("div",bs,[Ms,vs,s("pre",ws,[s("code",null,[s("span",Ns,[s("span",Ss,a(l(C)(l(n))),1)])])])])]),_:1}),Hs])}}});export{Os as __pageData,qs as default};