(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6113],{13784:function(e,o,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/editor-basics/setup",function(){return t(12215)}])},12215:function(e,o,t){"use strict";t.r(o),t.d(o,{__toc:function(){return c}});var n=t(24246),s=t(29304),i=t(33756),l=t(7854);t(37090);var r=t(31441),a=t(36391);let c=[{depth:2,value:"useCreateBlockNote hook",id:"usecreateblocknote-hook"},{depth:2,value:"Rendering the Editor with <BlockNoteView>",id:"rendering-the-editor-with-blocknoteview"},{depth:3,value:"Props",id:"props"}];function d(e){let o=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code",pre:"pre",span:"span",strong:"strong",a:"a",em:"em",h3:"h3"},(0,r.a)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.h1,{children:"Editor Setup"}),"\n",(0,n.jsx)(o.p,{children:"You can customize your editor when you instantiate it. Let's take a closer looks at the basic methods and components to set up your BlockNote editor."}),"\n",(0,n.jsxs)(o.h2,{id:"usecreateblocknote-hook",children:[(0,n.jsx)(o.code,{children:"useCreateBlockNote"})," hook"]}),"\n",(0,n.jsxs)(o.p,{children:["Create a new ",(0,n.jsx)(o.code,{children:"BlockNoteEditor"})," by calling the ",(0,n.jsx)(o.code,{children:"useCreateBlockNote"})," hook. This instantiates a new editor and its required state. You can later interact with the editor using the Editor API and pass it to the ",(0,n.jsx)(o.code,{children:"BlockNoteView"})," component."]}),"\n",(0,n.jsx)(o.pre,{"data-language":"ts","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(o.code,{"data-language":"ts","data-theme":"default",children:[(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"useCreateBlockNote"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  options"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"BlockNoteEditorOptions"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  deps"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"React"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"DependencyList"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" []"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"BlockNoteEditor"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsx)(o.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"BlockNoteEditorOptions"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  initialContent"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"PartialBlock"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"[];"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  domAttributes"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"Record"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:">;"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  defaultStyles"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"uploadFile"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" (file"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"File"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"Promise"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:">;"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  collaboration"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"CollaborationOptions"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  dictionary"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"Dictionary"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  schema"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"BlockNoteSchema"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  trailingBlock"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  animations"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsx)(o.span,{className:"line",children:(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),"\n",(0,n.jsx)(o.p,{children:"The hook takes two optional parameters:"}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.strong,{children:"options:"})," An object containing options for the editor:"]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"initialContent:"})," The content that should be in the editor when it's created, represented as an array of ",(0,n.jsx)(o.a,{href:"/docs/manipulating-blocks#partial-blocks",children:"partial block objects"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"domAttributes:"})," An object containing HTML attributes that should be added to various DOM elements in the editor. See ",(0,n.jsx)(o.a,{href:"/docs/theming#adding-dom-attributes",children:"Adding DOM Attributes"})," for more."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"defaultStyles"}),": Whether to use the default font and reset the styles of ",(0,n.jsx)(o.code,{children:"<p>"}),", ",(0,n.jsx)(o.code,{children:"<li>"}),", ",(0,n.jsx)(o.code,{children:"<h1>"}),", etc. elements that are used in BlockNote. Defaults to true if undefined."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"uploadFile"}),": A function which handles file uploads and eventually returns the URL to the uploaded file. Used for ",(0,n.jsx)(o.a,{href:"/docs/editor-basics/default-schema#image",children:"Image blocks"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"collaboration"}),": Options for enabling real-time collaboration. See ",(0,n.jsx)(o.a,{href:"/docs/advanced/real-time-collaboration",children:"Real-time Collaboration"})," for more info."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"dictionary"}),": Provide strings for localization. See the ",(0,n.jsx)(o.a,{href:"/examples/basic/localization",children:"Localization / i18n example"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"schema"})," (",(0,n.jsx)(o.em,{children:"advanced"}),"): The editor schema if you want to extend your editor with custom blocks, styles, or inline content ",(0,n.jsx)(o.a,{href:"/docs/custom-schemas",children:"Custom Schemas"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"trailingBlock"}),": An option which user can pass with ",(0,n.jsx)(o.code,{children:"false"})," value to disable the automatic creation of a trailing new block on the next line when the user types or edits any block. Defaults to ",(0,n.jsx)(o.code,{children:"true"})," if undefined."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"animations"}),": Whether changes to blocks (like indentation, creating lists, changing headings) should be animated or not. Defaults to ",(0,n.jsx)(o.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.strong,{children:"deps:"})," Dependency array that's internally passed to ",(0,n.jsx)(o.code,{children:"useMemo"}),". A new editor will only be created when this array changes."]}),"\n",(0,n.jsxs)(a.UW,{type:"info",emoji:"\uD83D\uDCA1",children:[(0,n.jsxs)("strong",{children:["Manually creating the editor (",(0,n.jsx)(o.code,{children:"BlockNoteEditor.create"}),")"]}),(0,n.jsx)("p",{children:(0,n.jsxs)(o.p,{children:["The ",(0,n.jsx)(o.code,{children:"useCreateBlockNote"})," hook is actually a simple ",(0,n.jsx)(o.code,{children:"useMemo"})," wrapper around\nthe ",(0,n.jsx)(o.code,{children:"BlockNoteEditor.create"})," method. You can use this method directly if you\nwant to control the editor lifecycle manually. For example, we do this in\nthe ",(0,n.jsx)(o.a,{href:"/examples/backend/saving-loading",children:"Saving & Loading example"})," to delay\nthe editor creation until some content has been fetched from an external\ndata source."]})})]}),"\n",(0,n.jsxs)(o.h2,{id:"rendering-the-editor-with-blocknoteview",children:["Rendering the Editor with ",(0,n.jsx)(o.code,{children:"<BlockNoteView>"})]}),"\n",(0,n.jsxs)(o.p,{children:["Use the ",(0,n.jsx)(o.code,{children:"<BlockNoteView>"})," component to render the ",(0,n.jsx)(o.code,{children:"BlockNoteEditor"})," instance you just created:"]}),"\n",(0,n.jsx)(o.pre,{"data-language":"tsx","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(o.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"useCreateBlockNote"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,n.jsx)(o.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"BlockNoteView"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"editor"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"{editor} />;"})]})]})}),"\n",(0,n.jsx)(o.h3,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(o.p,{children:["There are a number of additional props you can pass to ",(0,n.jsx)(o.code,{children:"BlockNoteView"}),". You can find the full list of these below:"]}),"\n",(0,n.jsx)(o.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(o.code,{"data-language":"typescript","data-theme":"default",children:[(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"BlockNoteViewProps"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  editor"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"BlockNoteEditor"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  editable"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"onSelectionChange"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"onChange"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  theme"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"light"'})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"dark"'})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"Theme"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"        light"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"Theme"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"        dark"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"Theme"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsx)(o.span,{className:"line",children:(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"      };"})}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  formattingToolbar"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  linkToolbar"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  sideMenu"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  slashMenu"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  emojiPicker"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  filePanel"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  tableHandles"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"  children"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"})]}),"\n",(0,n.jsxs)(o.span,{className:"line",children:[(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-keyword)"},children:"&"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"HTMLAttributes"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-token-function)"},children:"HTMLDivElement"}),(0,n.jsx)(o.span,{style:{color:"var(--shiki-color-text)"},children:">;"})]})]})}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"editor"}),": The ",(0,n.jsx)(o.code,{children:"BlockNoteEditor"})," instance to render."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"editable"}),": Whether the editor should be editable."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"onSelectionChange"}),": Callback fired when the editor selection changes."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"onChange"}),": Callback fired when the editor content (document) changes."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"theme"}),": The editor's theme, see ",(0,n.jsx)(o.a,{href:"/docs/styling-theming/themes",children:"Themes"})," for more about this."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"formattingToolbar"}),": Whether the ",(0,n.jsx)(o.a,{href:"/docs/ui-components/formatting-toolbar",children:"Formatting Toolbar"})," should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"linkToolbar"}),": Whether the Link Toolbar should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"sideMenu"}),": Whether the ",(0,n.jsx)(o.a,{href:"/docs/ui-components/side-menu",children:"Block Side Menu"})," should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"slashMenu"}),": Whether the ",(0,n.jsx)(o.a,{href:"/docs/ui-components/suggestion-menus#slash-menu",children:"Slash Menu"})," should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"emojiPicker"}),": Whether the ",(0,n.jsx)(o.a,{href:"/docs/advanced/grid-suggestion-menus#emoji-picker",children:"Emoji Picker"})," should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"filePanel"}),": Whether the File Toolbar should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"tableHandles"}),": Whether the Table Handles should be enabled."]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"children"}),": Pass child elements to the ",(0,n.jsx)(o.code,{children:"BlockNoteView"})," to create or customize toolbars, menus, or other UI components. See ",(0,n.jsx)(o.a,{href:"/docs/ui-components",children:"UI Components"})," for more."]}),"\n",(0,n.jsxs)(o.p,{children:["Additional props passed are forwarded to the HTML ",(0,n.jsx)(o.code,{children:"div"})," element BlockNote renders internally."]}),"\n",(0,n.jsxs)(a.UW,{type:"info",emoji:"\uD83D\uDCA1",children:[(0,n.jsx)("strong",{children:"Uncontrolled component"}),(0,n.jsx)("p",{children:(0,n.jsxs)(o.p,{children:["Note that the ",(0,n.jsx)(o.code,{children:"BlockNoteView"})," component is an ",(0,n.jsx)(o.a,{href:"https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components",children:"uncontrolled component"}),".\nThis means you don't pass in the editor content directly as a prop. You can use the ",(0,n.jsx)(o.code,{children:"initialContent"})," option in the ",(0,n.jsx)(o.code,{children:"useCreateBlockNote"})," hook to set the initial content of the editor (similar to the ",(0,n.jsx)(o.code,{children:"defaultValue"})," prop in a regular React ",(0,n.jsx)(o.code,{children:"<textarea>"}),")."]})}),(0,n.jsx)("p",{children:(0,n.jsxs)(o.p,{children:["BlockNote handles the complexities and performance optimizations of managing editor state internally. You can interact with the editor content using the ",(0,n.jsx)(o.a,{href:"/docs/editor-api",children:"Editor API"}),"."]})})]})]})}let h={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:o}=Object.assign({},(0,r.a)(),e.components);return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(d,{...e})}):d(e)},pageOpts:{filePath:"pages/docs/editor-basics/setup.mdx",route:"/docs/editor-basics/setup",frontMatter:{description:"Learn how to setup your BlockNote editor using the `useCreateBlockNote` hook and the ``BlockNoteView` component."},timestamp:1728391391e3,pageMap:[{kind:"Meta",data:{"*":{type:"page"},index:{type:"page",display:"hidden",theme:{layout:"raw",sidebar:!1,toc:!0},title:"Index"},docs:{title:"Docs",display:"children"},examples:{title:"Examples",display:"children"},pricing:{type:"page",theme:{layout:"raw",sidebar:!0,toc:!0},title:"Pricing"},about:"About"}},{kind:"MdxPage",name:"about",route:"/about"},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{index:"Introduction",quickstart:"Quickstart","editor-basics":"Editor Basics","editor-api":"Editor API","styling-theming":"Styling & Theming","ui-components":"UI Components","custom-schemas":"Custom Schemas",advanced:"Advanced","discord-link":{title:"Community ↗",href:"https://discord.gg/Qc2QTTH5dF",newWindow:!0}}},{kind:"Folder",name:"advanced",route:"/docs/advanced",children:[{kind:"MdxPage",name:"ariakit",route:"/docs/advanced/ariakit",frontMatter:{title:"BlockNote with Ariakit",description:"Ariakit rich text editor with BlockNote",imageTitle:"BlockNote with Ariakit"}},{kind:"MdxPage",name:"grid-suggestion-menus",route:"/docs/advanced/grid-suggestion-menus",frontMatter:{title:"Grid Suggestion Menus",description:"In addition to displaying Suggestion Menus as stacks, BlockNote also supports displaying them as grids.",imageTitle:"Grid Suggestion Menus"}},{kind:"MdxPage",name:"nextjs",route:"/docs/advanced/nextjs",frontMatter:{title:"Next.js and BlockNote",description:"Details on integrating BlockNote with Next.js",imageTitle:"Next.js and BlockNote"}},{kind:"MdxPage",name:"real-time-collaboration",route:"/docs/advanced/real-time-collaboration",frontMatter:{title:"Real-time Collaborative rich text editor",description:"Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs)",imageTitle:"Real-time Collaboration"}},{kind:"MdxPage",name:"shadcn",route:"/docs/advanced/shadcn",frontMatter:{title:"BlockNote with ShadCN and Tailwind",description:"ShadCN + Tailwind rich text editor using BlockNote",imageTitle:"BlockNote with ShadCN and Tailwind"}},{kind:"MdxPage",name:"vanilla-js",route:"/docs/advanced/vanilla-js",frontMatter:{title:"Usage Without React (Vanilla JS)",description:"BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps.",imageTitle:"Usage Without React (Vanilla JS)"}},{kind:"Meta",data:{ariakit:"BlockNote with Ariakit",shadcn:"BlockNote with ShadCN and Tailwind","grid-suggestion-menus":"Grid Suggestion Menus",nextjs:"Next.js and BlockNote","real-time-collaboration":"Real-time Collaborative rich text editor","vanilla-js":"Usage Without React (Vanilla JS)"}}]},{kind:"Folder",name:"custom-schemas",route:"/docs/custom-schemas",children:[{kind:"MdxPage",name:"custom-blocks",route:"/docs/custom-schemas/custom-blocks"},{kind:"MdxPage",name:"custom-inline-content",route:"/docs/custom-schemas/custom-inline-content"},{kind:"MdxPage",name:"custom-styles",route:"/docs/custom-schemas/custom-styles"},{kind:"Meta",data:{"custom-blocks":"Custom Blocks","custom-inline-content":"Custom Inline Content","custom-styles":"Custom Styles"}}]},{kind:"MdxPage",name:"custom-schemas",route:"/docs/custom-schemas",frontMatter:{title:"Custom Schemas",description:"Learn how to create custom schemas for your BlockNote editor"}},{kind:"Folder",name:"editor-api",route:"/docs/editor-api",children:[{kind:"Meta",data:{"manipulating-blocks":"Manipulating Blocks","manipulating-inline-content":"Manipulating Inline Content","cursor-selections":"Cursor & Selections","converting-blocks":"Markdown & HTML","server-processing":"Server-side processing"}},{kind:"MdxPage",name:"converting-blocks",route:"/docs/editor-api/converting-blocks",frontMatter:{title:"Markdown & HTML",description:"It's possible to export or import Blocks to and from Markdown and HTML.",imageTitle:"Markdown & HTML",path:"/docs/converting-blocks"}},{kind:"MdxPage",name:"cursor-selections",route:"/docs/editor-api/cursor-selections",frontMatter:{title:"Cursor & Selections",description:"If you want to know which block(s) the user is currently editing, you can do so using cursor positions and selections.",imageTitle:"Cursor & Selections",path:"/docs/cursor-selections"}},{kind:"MdxPage",name:"manipulating-blocks",route:"/docs/editor-api/manipulating-blocks",frontMatter:{title:"Manipulating Blocks",description:"How to read Blocks from the editor, and how to create / remove / update Blocks.",imageTitle:"Manipulating Blocks",path:"/docs/manipulating-blocks"}},{kind:"MdxPage",name:"manipulating-inline-content",route:"/docs/editor-api/manipulating-inline-content",frontMatter:{title:"Manipulating Inline Content",imageTitle:"Manipulating Inline Content",path:"/docs/block-content"}},{kind:"MdxPage",name:"server-processing",route:"/docs/editor-api/server-processing",frontMatter:{title:"Server-side processing",description:"Use `ServerBlockNoteEditor` to process Blocks on the server.",imageTitle:"Server-side processing",path:"/docs/server-side-processing"}}]},{kind:"MdxPage",name:"editor-api",route:"/docs/editor-api"},{kind:"Folder",name:"editor-basics",route:"/docs/editor-basics",children:[{kind:"Meta",data:{setup:"Editor Setup","document-structure":"Document Structure","default-schema":"Default Schema"}},{kind:"MdxPage",name:"default-schema",route:"/docs/editor-basics/default-schema",frontMatter:{title:"Default Content Types",description:"BlockNote supports a variety on built-in block and inline content types that are included in the editor by default.",imageTitle:"Default Content Types"}},{kind:"MdxPage",name:"document-structure",route:"/docs/editor-basics/document-structure",frontMatter:{description:"Learn how documents (the content of the rich text editor) are structured to make the most out of BlockNote."}},{kind:"MdxPage",name:"setup",route:"/docs/editor-basics/setup",frontMatter:{description:"Learn how to setup your BlockNote editor using the `useCreateBlockNote` hook and the ``BlockNoteView` component."}}]},{kind:"MdxPage",name:"editor-basics",route:"/docs/editor-basics"},{kind:"MdxPage",name:"index",route:"/docs",frontMatter:{title:"Introduction to BlockNote",imageTitle:"Introduction to BlockNote",path:"/docs/introduction"}},{kind:"MdxPage",name:"quickstart",route:"/docs/quickstart",frontMatter:{title:"Quickstart",description:"Getting started with BlockNote is quick and easy. All you need to do is install the package and add the React component to your app!",imageTitle:"Quickstart",path:"/docs/quickstart"}},{kind:"Folder",name:"styling-theming",route:"/docs/styling-theming",children:[{kind:"Meta",data:{themes:"Themes","overriding-css":"Overriding CSS","adding-dom-attributes":"Adding DOM Attributes"}},{kind:"MdxPage",name:"adding-dom-attributes",route:"/docs/styling-theming/adding-dom-attributes",frontMatter:{title:"Adding DOM Attributes",description:"BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.",imageTitle:"Styling & Theming",path:"/docs/theming"}},{kind:"MdxPage",name:"overriding-css",route:"/docs/styling-theming/overriding-css",frontMatter:{title:"Overriding CSS",description:"You can change any styles applied to the editor by setting your own CSS styles.",imageTitle:"Overriding CSS",path:"/docs/styling-theming/overriding-css"}},{kind:"MdxPage",name:"themes",route:"/docs/styling-theming/themes",frontMatter:{title:"Themes",description:"Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font.",imageTitle:"Themes",path:"/docs/styling-theming/theming"}}]},{kind:"MdxPage",name:"styling-theming",route:"/docs/styling-theming",frontMatter:{title:"Styling & Theming",description:"You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with theme CSS variables, or apply more complex styles with additional CSS rules.",imageTitle:"Styling & Theming",path:"/docs/styling-theming"}},{kind:"Folder",name:"ui-components",route:"/docs/ui-components",children:[{kind:"Meta",data:{"side-menu":"Block Side Menu","formatting-toolbar":"Formatting Toolbar","hyperlink-toolbar":{title:"Link Toolbar",display:"hidden"},"image-toolbar":{title:"Image Toolbar",display:"hidden"},"suggestion-menus":"Suggestion Menus"}},{kind:"MdxPage",name:"formatting-toolbar",route:"/docs/ui-components/formatting-toolbar",frontMatter:{title:"Formatting Toolbar",description:"The Formatting Toolbar appears whenever you highlight text in the editor.",imageTitle:"Formatting Toolbar",path:"/docs/formatting-toolbar"}},{kind:"MdxPage",name:"hyperlink-toolbar",route:"/docs/ui-components/hyperlink-toolbar",frontMatter:{title:"Link Toolbar",description:"The Link Toolbar appears whenever you hover a link in the editor.",imageTitle:"Link Toolbar",path:"/docs/link-toolbar"}},{kind:"MdxPage",name:"image-toolbar",route:"/docs/ui-components/image-toolbar",frontMatter:{title:"Image Toolbar",description:'The Image Toolbar appears whenever you select an image that doesn\'t have a URL, or when you click the "Replace Image" button in the Formatting Toolbar when an image is selected.',imageTitle:"Image Toolbar",path:"/docs/image-toolbar"}},{kind:"MdxPage",name:"side-menu",route:"/docs/ui-components/side-menu",frontMatter:{title:"Block Side Menu",description:"The Block Side Menu appears on the left side whenever you hover a block.",imageTitle:"Block Side Menu",path:"/docs/side-menu"}},{kind:"MdxPage",name:"suggestion-menus",route:"/docs/ui-components/suggestion-menus",frontMatter:{title:"Suggestion Menus",description:"Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.",imageTitle:"Suggestion Menus",path:"/docs/slash-menu"}}]},{kind:"MdxPage",name:"ui-components",route:"/docs/ui-components",frontMatter:{title:"UI Components",description:"BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized.",imageTitle:"UI Components",path:"/docs/ui-components"}}]},{kind:"Folder",name:"examples",route:"/examples",children:[{kind:"Meta",data:{index:"Overview",basic:"Basic",backend:"Backend","ui-components":"UI Components",theming:"Theming",interoperability:"Interoperability","custom-schema":"Custom Schemas",collaboration:"Collaboration",extensions:"Extensions"}},{kind:"Folder",name:"backend",route:"/examples/backend",children:[{kind:"Meta",data:{"file-uploading":{title:"Upload Files"},"saving-loading":{title:"Saving & Loading"},s3:{title:"Upload Files to AWS S3"},"rendering-static-documents":{title:"Rendering static documents"}}},{kind:"MdxPage",name:"file-uploading",route:"/examples/backend/file-uploading"},{kind:"MdxPage",name:"rendering-static-documents",route:"/examples/backend/rendering-static-documents"},{kind:"MdxPage",name:"s3",route:"/examples/backend/s3"},{kind:"MdxPage",name:"saving-loading",route:"/examples/backend/saving-loading"}]},{kind:"Folder",name:"basic",route:"/examples/basic",children:[{kind:"Meta",data:{minimal:{title:"Basic Setup"},"block-objects":{title:"Displaying Document JSON"},"all-blocks":{title:"Default Schema Showcase"},"removing-default-blocks":{title:"Removing Default Blocks from Schema"},"block-manipulation":{title:"Manipulating Blocks"},"selection-blocks":{title:"Displaying Selected Blocks"},ariakit:{title:"Use with Ariakit"},shadcn:{title:"Use with ShadCN"},localization:{title:"Localization (i18n)"}}},{kind:"MdxPage",name:"all-blocks",route:"/examples/basic/all-blocks"},{kind:"MdxPage",name:"ariakit",route:"/examples/basic/ariakit"},{kind:"MdxPage",name:"block-manipulation",route:"/examples/basic/block-manipulation"},{kind:"MdxPage",name:"block-objects",route:"/examples/basic/block-objects"},{kind:"MdxPage",name:"localization",route:"/examples/basic/localization"},{kind:"MdxPage",name:"minimal",route:"/examples/basic/minimal"},{kind:"MdxPage",name:"removing-default-blocks",route:"/examples/basic/removing-default-blocks"},{kind:"MdxPage",name:"selection-blocks",route:"/examples/basic/selection-blocks"},{kind:"MdxPage",name:"shadcn",route:"/examples/basic/shadcn"}]},{kind:"Folder",name:"collaboration",route:"/examples/collaboration",children:[{kind:"Meta",data:{partykit:{title:"Collaborative Editing with PartyKit"},liveblocks:{title:"Collaborative Editing with Liveblocks"}}},{kind:"MdxPage",name:"liveblocks",route:"/examples/collaboration/liveblocks"},{kind:"MdxPage",name:"partykit",route:"/examples/collaboration/partykit"}]},{kind:"Folder",name:"custom-schema",route:"/examples/custom-schema",children:[{kind:"Meta",data:{"alert-block":{title:"Alert Block"},"suggestion-menus-mentions":{title:"Mentions Menu"},"font-style":{title:"Font Style"},"pdf-file-block":{title:"PDF Block"}}},{kind:"MdxPage",name:"alert-block",route:"/examples/custom-schema/alert-block"},{kind:"MdxPage",name:"font-style",route:"/examples/custom-schema/font-style"},{kind:"MdxPage",name:"pdf-file-block",route:"/examples/custom-schema/pdf-file-block"},{kind:"MdxPage",name:"suggestion-menus-mentions",route:"/examples/custom-schema/suggestion-menus-mentions"}]},{kind:"Folder",name:"extensions",route:"/examples/extensions",children:[{kind:"Meta",data:{"tiptap-arrow-conversion":{title:"TipTap extension (arrow InputRule)"}}},{kind:"MdxPage",name:"tiptap-arrow-conversion",route:"/examples/extensions/tiptap-arrow-conversion"}]},{kind:"MdxPage",name:"index",route:"/examples"},{kind:"Folder",name:"interoperability",route:"/examples/interoperability",children:[{kind:"Meta",data:{"converting-blocks-to-html":{title:"Converting Blocks to HTML"},"converting-blocks-from-html":{title:"Parsing HTML to Blocks"},"converting-blocks-to-md":{title:"Converting Blocks to Markdown"},"converting-blocks-from-md":{title:"Parsing Markdown to Blocks"}}},{kind:"MdxPage",name:"converting-blocks-from-html",route:"/examples/interoperability/converting-blocks-from-html"},{kind:"MdxPage",name:"converting-blocks-from-md",route:"/examples/interoperability/converting-blocks-from-md"},{kind:"MdxPage",name:"converting-blocks-to-html",route:"/examples/interoperability/converting-blocks-to-html"},{kind:"MdxPage",name:"converting-blocks-to-md",route:"/examples/interoperability/converting-blocks-to-md"}]},{kind:"Folder",name:"theming",route:"/examples/theming",children:[{kind:"Meta",data:{"theming-dom-attributes":{title:"Adding CSS Class to Blocks"},"changing-font":{title:"Changing Editor Font"},"theming-css":{title:"Overriding CSS Styles"},"theming-css-variables":{title:"Overriding Theme CSS Variables"},"theming-css-variables-code":{title:"Changing Themes Through Code"}}},{kind:"MdxPage",name:"changing-font",route:"/examples/theming/changing-font"},{kind:"MdxPage",name:"theming-css-variables-code",route:"/examples/theming/theming-css-variables-code"},{kind:"MdxPage",name:"theming-css-variables",route:"/examples/theming/theming-css-variables"},{kind:"MdxPage",name:"theming-css",route:"/examples/theming/theming-css"},{kind:"MdxPage",name:"theming-dom-attributes",route:"/examples/theming/theming-dom-attributes"}]},{kind:"Folder",name:"ui-components",route:"/examples/ui-components",children:[{kind:"Meta",data:{"ui-elements-remove":{title:"Removing UI Elements"},"formatting-toolbar-buttons":{title:"Adding Formatting Toolbar Buttons"},"formatting-toolbar-block-type-items":{title:"Adding Block Type Select Items"},"side-menu-buttons":{title:"Adding Block Side Menu Buttons"},"side-menu-drag-handle-items":{title:"Adding Drag Handle Menu Items"},"suggestion-menus-slash-menu-items":{title:"Adding Slash Menu Items"},"suggestion-menus-slash-menu-component":{title:"Replacing Slash Menu Component"},"suggestion-menus-emoji-picker-columns":{title:"Changing Emoji Picker Columns"},"suggestion-menus-emoji-picker-component":{title:"Replacing Emoji Picker Component"},"suggestion-menus-grid-mentions":{title:"Grid Mentions Menu"},"uppy-file-panel":{title:"Uppy File Panel"},"static-formatting-toolbar":{title:"Static Formatting Toolbar"},"custom-ui":{title:"UI With Third-Party Components"}}},{kind:"MdxPage",name:"custom-ui",route:"/examples/ui-components/custom-ui"},{kind:"MdxPage",name:"formatting-toolbar-block-type-items",route:"/examples/ui-components/formatting-toolbar-block-type-items"},{kind:"MdxPage",name:"formatting-toolbar-buttons",route:"/examples/ui-components/formatting-toolbar-buttons"},{kind:"MdxPage",name:"side-menu-buttons",route:"/examples/ui-components/side-menu-buttons"},{kind:"MdxPage",name:"side-menu-drag-handle-items",route:"/examples/ui-components/side-menu-drag-handle-items"},{kind:"MdxPage",name:"static-formatting-toolbar",route:"/examples/ui-components/static-formatting-toolbar"},{kind:"MdxPage",name:"suggestion-menus-emoji-picker-columns",route:"/examples/ui-components/suggestion-menus-emoji-picker-columns"},{kind:"MdxPage",name:"suggestion-menus-emoji-picker-component",route:"/examples/ui-components/suggestion-menus-emoji-picker-component"},{kind:"MdxPage",name:"suggestion-menus-grid-mentions",route:"/examples/ui-components/suggestion-menus-grid-mentions"},{kind:"MdxPage",name:"suggestion-menus-slash-menu-component",route:"/examples/ui-components/suggestion-menus-slash-menu-component"},{kind:"MdxPage",name:"suggestion-menus-slash-menu-items",route:"/examples/ui-components/suggestion-menus-slash-menu-items"},{kind:"MdxPage",name:"ui-elements-remove",route:"/examples/ui-components/ui-elements-remove"},{kind:"MdxPage",name:"uppy-file-panel",route:"/examples/ui-components/uppy-file-panel"}]}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{overrideTitle:"BlockNote - Javascript Block-Based React rich text editor",description:"A beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling."}},{kind:"MdxPage",name:"pricing",route:"/pricing"}],flexsearch:!0,title:"Editor Setup",headings:c},pageNextRoute:"/docs/editor-basics/setup",nextraLayout:i.ZP,themeConfig:l.Z};o.default=(0,s.j)(h)}},function(e){e.O(0,[3751,1466,2888,9774,179],function(){return e(e.s=13784)}),_N_E=e.O()}]);