(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[188],{18799:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/ui-components/suggestion-menus",function(){return n(22696)}])},95931:function(e,t,n){"use strict";n.d(t,{e:function(){return s}});var i=n(24246),o=n(34473),a=n(15886);function s(e){let t=(0,o.kP)(),n=a.$[e.name];if(!n)throw Error("Example ".concat(e.name," not found"));let s=n.ExampleWithCode,r=function(e){var t,n;if("authenticated"!==e.status)return;let i=null==e?void 0:null===(n=e.data)||void 0===n?void 0:null===(t=n.user)||void 0===t?void 0:t.sponsorInfo;return(null==i?void 0:i.isActive)?i.tier.monthlyPriceInDollars>100?"business":"starter":"free"}(t);return(0,i.jsx)(s,{name:e.name,isProExample:n.pro?{userStatus:r}:void 0})}},22696:function(e,t,n){"use strict";n.r(t),n.d(t,{__toc:function(){return d}});var i=n(24246),o=n(29304),a=n(33756),s=n(7854);n(37090);var r=n(31441),l=n(95931);let d=[{depth:2,value:"Slash Menu",id:"slash-menu"},{depth:3,value:"Changing Slash Menu Items",id:"changing-slash-menu-items"},{depth:3,value:"Replacing the Slash Menu Component",id:"replacing-the-slash-menu-component"},{depth:2,value:"Creating additional Suggestion Menus",id:"creating-additional-suggestion-menus"},{depth:2,value:"Additional Features",id:"additional-features"},{depth:3,value:"Opening Suggestion Menus Programmatically",id:"opening-suggestion-menus-programmatically"},{depth:3,value:"Waiting for a Query",id:"waiting-for-a-query"}];function c(e){let t=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code",a:"a",h3:"h3",pre:"pre",span:"span"},(0,r.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Suggestion Menus"}),"\n",(0,i.jsx)(t.p,{children:"Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items."}),"\n",(0,i.jsx)(t.h2,{id:"slash-menu",children:"Slash Menu"}),"\n",(0,i.jsxs)(t.p,{children:["The Slash Menu is a Suggestion Menu that opens with the ",(0,i.jsx)(t.code,{children:"/"})," character (or when clicking the ",(0,i.jsx)(t.code,{children:"+"})," button in the ",(0,i.jsx)(t.a,{href:"/docs/ui-components/side-menu",children:"Block Side Menu"}),"."]}),"\n",(0,i.jsx)("img",{style:{maxWidth:"400px"},src:"/img/screenshots/slash_menu.png",alt:"image"}),"\n",(0,i.jsx)(t.h3,{id:"changing-slash-menu-items",children:"Changing Slash Menu Items"}),"\n",(0,i.jsx)(t.p,{children:'You can change the items in the Slash Menu. The demo below adds an item that inserts a new block, with "Hello World" in bold.'}),"\n",(0,i.jsx)(l.e,{name:"ui-components/suggestion-menus-slash-menu-items"}),"\n",(0,i.jsxs)(t.p,{children:["Passing ",(0,i.jsx)(t.code,{children:"slashMenu={false}"})," to ",(0,i.jsx)(t.code,{children:"BlockNoteView"})," tells BlockNote not to show the default Slash Menu. Adding the ",(0,i.jsx)(t.code,{children:"SuggestionMenuController"})," with ",(0,i.jsx)(t.code,{children:'triggerCharacter={"/"}'})," and a custom ",(0,i.jsx)(t.code,{children:"getItems"})," function tells BlockNote to show one with custom items instead."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"getItems"})," should return the items that need to be shown in the Slash Menu, based on a ",(0,i.jsx)(t.code,{children:"query"})," entered by the user (anything the user types after the ",(0,i.jsx)(t.code,{children:"triggerCharacter"}),")."]}),"\n",(0,i.jsx)(t.h3,{id:"replacing-the-slash-menu-component",children:"Replacing the Slash Menu Component"}),"\n",(0,i.jsx)(t.p,{children:"You can replace the React component used for the Slash Menu with your own, as you can see in the demo below."}),"\n",(0,i.jsx)(l.e,{name:"ui-components/suggestion-menus-slash-menu-component"}),"\n",(0,i.jsxs)(t.p,{children:["Again, we add a ",(0,i.jsx)(t.code,{children:"SuggestionMenuController"})," component with ",(0,i.jsx)(t.code,{children:'triggerCharacter={"/"}'})," and set ",(0,i.jsx)(t.code,{children:"slashMenu={false}"})," to replace the default Slash Menu."]}),"\n",(0,i.jsxs)(t.p,{children:["Now, we also pass a component to its ",(0,i.jsx)(t.code,{children:"suggestionMenuComponent"})," prop. The ",(0,i.jsx)(t.code,{children:"suggestionMenuComponent"})," we pass is responsible for rendering the filtered items. The ",(0,i.jsx)(t.code,{children:"SuggestionMenuController"})," controls its position and visibility (below the trigger character), and it also determines which items should be shown (using the optional ",(0,i.jsx)(t.code,{children:"getItems"})," prop we've seen above)."]}),"\n",(0,i.jsx)(t.h2,{id:"creating-additional-suggestion-menus",children:"Creating additional Suggestion Menus"}),"\n",(0,i.jsxs)(t.p,{children:["You can add additional Suggestion Menus to the editor, which can use any trigger character. The demo below adds an example Suggestion Menu for mentions, which opens with the ",(0,i.jsx)(t.code,{children:"@"})," character."]}),"\n",(0,i.jsx)(l.e,{name:"custom-schema/suggestion-menus-mentions"}),"\n",(0,i.jsxs)(t.p,{children:["Changing the items in the new Suggestion Menu, or the component used to render it, is done the same way as for the ",(0,i.jsx)(t.a,{href:"/docs/ui-components/suggestion-menus#slash-menu",children:"Slash Menu"}),". For more information about how the mentions elements work, see ",(0,i.jsx)(t.a,{href:"/docs/custom-schemas/custom-inline-content",children:"Custom Inline Content"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"additional-features",children:"Additional Features"}),"\n",(0,i.jsx)(t.p,{children:"BlockNote offers a few other features for working with Suggestion Menus which may fit your use case."}),"\n",(0,i.jsx)(t.h3,{id:"opening-suggestion-menus-programmatically",children:"Opening Suggestion Menus Programmatically"}),"\n",(0,i.jsx)(t.p,{children:"While suggestion menus are generally meant to be opened when the user presses a trigger character, you may also want to open them from code. To do this, you can use the following editor method:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"openSuggestionMenu"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(triggerCharacter: string): "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".openSuggestionMenu"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})]})}),"\n",(0,i.jsx)(t.h3,{id:"waiting-for-a-query",children:"Waiting for a Query"}),"\n",(0,i.jsxs)(t.p,{children:["You may want to hold off displaying a Suggestion Menu unless you're certain that the user actually wants to open the menu and not just enter the trigger character. In this case, you should use the ",(0,i.jsx)(t.code,{children:"minQueryLength"})," prop for ",(0,i.jsx)(t.code,{children:"SuggestionMenuController"}),", which takes a number."]}),"\n",(0,i.jsx)(t.p,{children:"The number indicates how many characters the user query needs to have before the menu is shown. When greater than 0, it also prevents the menu from displaying if the user enters a space immediately after the trigger character."})]})}let m={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.a)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/docs/ui-components/suggestion-menus.mdx",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"},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:"Suggestion Menus",headings:d},pageNextRoute:"/docs/ui-components/suggestion-menus",nextraLayout:a.ZP,themeConfig:s.Z};t.default=(0,o.j)(m)}},function(e){e.O(0,[3751,1466,2888,9774,179],function(){return e(e.s=18799)}),_N_E=e.O()}]);