(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[213],{73933:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/editor-api/manipulating-blocks",function(){return n(54260)}])},54260:function(e,s,n){"use strict";n.r(s),n.d(s,{__toc:function(){return r}});var t=n(24246),o=n(29304),i=n(33756),l=n(7854);n(37090);var a=n(31441);let r=[{depth:2,value:"Common types",id:"common-types"},{depth:3,value:"Block Identifiers",id:"block-identifiers"},{depth:3,value:"Partial Blocks",id:"partial-blocks"},{depth:2,value:"Accessing Blocks",id:"accessing-blocks"},{depth:3,value:"Getting the Document",id:"getting-the-document"},{depth:3,value:"Getting a Specific Block",id:"getting-a-specific-block"},{depth:3,value:"Traversing All Blocks",id:"traversing-all-blocks"},{depth:3,value:"Getting the hovered / selected Block",id:"getting-the-hovered--selected-block"},{depth:2,value:"Inserting New Blocks",id:"inserting-new-blocks"},{depth:2,value:"Updating Blocks",id:"updating-blocks"},{depth:2,value:"Removing Blocks",id:"removing-blocks"},{depth:2,value:"Replacing Blocks",id:"replacing-blocks"},{depth:2,value:"Nesting & Un-nesting Blocks",id:"nesting--un-nesting-blocks"},{depth:3,value:"Nesting Blocks",id:"nesting-blocks"},{depth:3,value:"Un-nesting Blocks",id:"un-nesting-blocks"}];function c(e){let s=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",a:"a",h2:"h2",h3:"h3",pre:"pre",span:"span"},(0,a.a)(),e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{children:"Manipulating Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Below, we explain the methods on ",(0,t.jsx)(s.code,{children:"editor"})," you can use to read Blocks from the editor, and how to create / remove / update Blocks:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#getting-the-document",children:(0,t.jsx)(s.code,{children:"get document"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#getting-a-specific-block",children:(0,t.jsx)(s.code,{children:"getBlock"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#traversing-all-blocks",children:(0,t.jsx)(s.code,{children:"forEachBlock"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#inserting-new-blocks",children:(0,t.jsx)(s.code,{children:"insertBlocks"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#updating-blocks",children:(0,t.jsx)(s.code,{children:"updateBlock"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#removing-blocks",children:(0,t.jsx)(s.code,{children:"removeBlocks"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#replacing-blocks",children:(0,t.jsx)(s.code,{children:"replaceBlocks"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#nesting-blocks",children:(0,t.jsx)(s.code,{children:"canNestBlock"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#nesting-blocks",children:(0,t.jsx)(s.code,{children:"nestBlock"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#un-nesting-blocks",children:(0,t.jsx)(s.code,{children:"canUnnestBlock"})})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#un-nesting-blocks",children:(0,t.jsx)(s.code,{children:"unnestBlock"})})}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"common-types",children:"Common types"}),"\n",(0,t.jsx)(s.p,{children:"Before we dive into the methods, let's discuss some common types used in parameters:"}),"\n",(0,t.jsx)(s.h3,{id:"block-identifiers",children:"Block Identifiers"}),"\n",(0,t.jsxs)(s.p,{children:["The methods to access, insert, update, remove, or replace blocks, can require a ",(0,t.jsx)(s.code,{children:"BlockIdentifier"})," as reference to an existing block in the document.\nThis is either a ",(0,t.jsx)(s.code,{children:"string"})," representing the block ID, or a ",(0,t.jsx)(s.code,{children:"Block"})," object from which the ID is taken:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsx)(s.code,{"data-language":"typescript","data-theme":"default",children:(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"BlockIdentifier"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Block"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),"\n",(0,t.jsx)(s.h3,{id:"partial-blocks",children:"Partial Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["When retrieving blocks from the editor, you always receive complete ",(0,t.jsx)(s.code,{children:"Block"})," objects.\nFor updating or creating blocks, you don't need to pass all properties, and you can use a ",(0,t.jsx)(s.code,{children:"PartialBlock"})," type instead:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"PartialBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  id"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  type"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  props"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Partial"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Record"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">>; "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:'// exact type depends on "type"'})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  content"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"InlineContent"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"[] "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"TableContent"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  children"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"PartialBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"[];"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"PartialBlock"})," objects are almost the same as regular ",(0,t.jsx)(s.code,{children:"Block"})," objects, but with all members optional and partial ",(0,t.jsx)(s.code,{children:"props"}),". This makes updating or creating simpler blocks much easier. We'll see this below."]}),"\n",(0,t.jsx)(s.h2,{id:"accessing-blocks",children:"Accessing Blocks"}),"\n",(0,t.jsx)(s.p,{children:"There are a few different ways to retrieve Blocks from the editor:"}),"\n",(0,t.jsx)(s.h3,{id:"getting-the-document",children:"Getting the Document"}),"\n",(0,t.jsx)(s.p,{children:"Retrieve a snapshot of the document (all top-level, non-nested blocks) in the editor using the following call:"}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Block[];"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"blocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".document;"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"returns:"})," The document; a snapshot of all top-level (non-nested) blocks in the editor."]}),"\n",(0,t.jsxs)(s.p,{children:["We already used this for the ",(0,t.jsx)(s.a,{href:"/docs/editor-basics/document-structure#document-json",children:"Document JSON"})," demo."]}),"\n",(0,t.jsx)(s.h3,{id:"getting-a-specific-block",children:"Getting a Specific Block"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"getBlock"})," to retrieve a snapshot of a specific block in the editor:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(blockIdentifier: BlockIdentifier): Block "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"undefined"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"block"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(blockIdentifier);"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"blockIdentifier:"})," The ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#block-identifiers",children:"identifier"})," of an existing block that should be retrieved."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"returns:"})," The block that matches the identifier, or ",(0,t.jsx)(s.code,{children:"undefined"})," if no matching block was found."]}),"\n",(0,t.jsx)(s.h3,{id:"traversing-all-blocks",children:"Traversing All Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"forEachBlock"})," to traverse all blocks in the editor depth-first, and execute a callback for each block:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"forEachBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  callback: (block"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Block"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" boolean "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"undefined"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  reverse: boolean "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".forEachBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"((block) "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"callback:"})," The callback to execute for each block. Returning ",(0,t.jsx)(s.code,{children:"false"})," stops the traversal."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"reverse:"})," Whether the blocks should be traversed in reverse order."]}),"\n",(0,t.jsx)(s.h3,{id:"getting-the-hovered--selected-block",children:"Getting the hovered / selected Block"}),"\n",(0,t.jsxs)(s.p,{children:["See ",(0,t.jsx)(s.a,{href:"/docs/editor-api/cursor-selections",children:"Cursor & Selections"})," to learn how to retrieve the block a user is interacting with."]}),"\n",(0,t.jsx)(s.h2,{id:"inserting-new-blocks",children:"Inserting New Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"insertBlocks"})," to insert new blocks into the document:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"insertBlocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  blocksToInsert: PartialBlock[]"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  referenceBlock: BlockIdentifier"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  placement: "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"before"'}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"after"'}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"before"'})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".insertBlocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([{type"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"paragraph"'}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" content"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Hello World"'}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}]"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" referenceBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" placement)"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"blocksToInsert:"})," An array of ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#partial-blocks",children:"partial blocks"})," that should be inserted."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"referenceBlock:"})," An ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#block-identifiers",children:"identifier"})," for an existing block, at which the new blocks should be inserted."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"placement:"})," Whether the blocks should be inserted just before or just after the ",(0,t.jsx)(s.code,{children:"referenceBlock"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["If a block's ",(0,t.jsx)(s.code,{children:"id"})," is undefined, BlockNote generates one automatically."]}),"\n",(0,t.jsx)(s.p,{children:"The method throws an error if the reference block could not be found."}),"\n",(0,t.jsx)(s.h2,{id:"updating-blocks",children:"Updating Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"updateBlock"})," to update an existing block:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"updateBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  blockToUpdate: BlockIdentifier"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  update: PartialBlock"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Example to change a block type to paragraph"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".updateBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(blockToUpdate"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { type"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"paragraph"'}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" });"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"blockToUpdate:"})," The ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#block-identifiers",children:"identifier"})," of an existing block that should be updated."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"update:"})," A ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#partial-blocks",children:"partial blocks"})," which defines how the existing block should be changed."]}),"\n",(0,t.jsxs)(s.p,{children:["Since ",(0,t.jsx)(s.code,{children:"blockToUpdate"})," is a ",(0,t.jsx)(s.code,{children:"PartialBlock"})," object, some fields might not be defined. These undefined fields are kept as-is from the existing block."]}),"\n",(0,t.jsx)(s.p,{children:"Throws an error if the block to update could not be found."}),"\n",(0,t.jsx)(s.h2,{id:"removing-blocks",children:"Removing Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"removeBlocks"})," to remove existing blocks from the document:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"removeBlocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  blocksToRemove: BlockIdentifier[]"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".removeBlocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(blocksToRemove)"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"blocksToRemove:"})," An array of ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#block-identifiers",children:"identifier"})," for existing blocks that should be removed."]}),"\n",(0,t.jsx)(s.p,{children:"Throws an error if any of the blocks could not be found."}),"\n",(0,t.jsx)(s.h2,{id:"replacing-blocks",children:"Replacing Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"replaceBlocks"})," to replace existing blocks in the editor with new blocks:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"replaceBlocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  blocksToRemove: BlockIdentifier[]"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  blocksToInsert: PartialBlock[]"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replaceBlocks"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(blocksToRemove"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" blocksToInsert)"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"blocksToRemove:"})," An array of ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#block-identifiers",children:"identifier"})," for existing blocks that should be replaced."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"blocksToInsert:"})," An array of ",(0,t.jsx)(s.a,{href:"/docs/editor-api/manipulating-blocks#partial-blocks",children:"partial blocks"})," that the existing ones should be replaced with."]}),"\n",(0,t.jsxs)(s.p,{children:["If the blocks that should be removed are not adjacent or are at different nesting levels, ",(0,t.jsx)(s.code,{children:"blocksToInsert"})," will be inserted at the position of the first block in ",(0,t.jsx)(s.code,{children:"blocksToRemove"}),"."]}),"\n",(0,t.jsx)(s.p,{children:"Throws an error if any of the blocks to remove could not be found."}),"\n",(0,t.jsx)(s.h2,{id:"nesting--un-nesting-blocks",children:"Nesting & Un-nesting Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["BlockNote also provides functions to nest & un-nest the block containing the ",(0,t.jsx)(s.a,{href:"/docs/editor-api/cursor-selections#text-cursor",children:"Text Cursor"}),"."]}),"\n",(0,t.jsx)(s.h3,{id:"nesting-blocks",children:"Nesting Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"canNestBlock"})," to check whether the block containing the ",(0,t.jsx)(s.a,{href:"/docs/editor-api/cursor-selections#text-cursor",children:"Text Cursor"})," can be nested (i.e. if there is a block above it at the same nesting level):"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"canNestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(): boolean;"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"canNestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".canNestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:["Then, use ",(0,t.jsx)(s.code,{children:"nestBlock"})," to actually nest (indent) the block:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"nestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".nestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,t.jsx)(s.h3,{id:"un-nesting-blocks",children:"Un-nesting Blocks"}),"\n",(0,t.jsxs)(s.p,{children:["Use ",(0,t.jsx)(s.code,{children:"canUnnestBlock"})," to check whether the block containing the ",(0,t.jsx)(s.a,{href:"/docs/editor-api/cursor-selections#text-cursor",children:"Text Cursor"})," can be un-nested (i.e. if it's nested in another block):"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"canUnnestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(): boolean;"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"canUnnestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".canUnnestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,t.jsxs)(s.p,{children:["Then, use ",(0,t.jsx)(s.code,{children:"unnestBlock"})," to un-nest the block:"]}),"\n",(0,t.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,t.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"unnestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(): "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".unnestBlock"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,a.a)(),e.components);return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/docs/editor-api/manipulating-blocks.mdx",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"},timestamp:1728480213e3,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:"Manipulating Blocks",headings:r},pageNextRoute:"/docs/editor-api/manipulating-blocks",nextraLayout:i.ZP,themeConfig:l.Z};s.default=(0,o.j)(d)}},function(e){e.O(0,[3751,1466,2888,9774,179],function(){return e(e.s=73933)}),_N_E=e.O()}]);