(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7413],{38512:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/styling-theming/overriding-css",function(){return n(97109)}])},95931:function(e,t,n){"use strict";n.d(t,{e:function(){return s}});var o=n(24246),i=n(34473),a=n(15886);function s(e){let t=(0,i.kP)(),n=a.$[e.name];if(!n)throw Error("Example ".concat(e.name," not found"));let s=n.ExampleWithCode,l=function(e){var t,n;if("authenticated"!==e.status)return;let o=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==o?void 0:o.isActive)?o.tier.monthlyPriceInDollars>100?"business":"starter":"free"}(t);return(0,o.jsx)(s,{name:e.name,isProExample:n.pro?{userStatus:l}:void 0})}},97109:function(e,t,n){"use strict";n.r(t),n.d(t,{__toc:function(){return d}});var o=n(24246),i=n(29304),a=n(33756),s=n(7854);n(37090);var l=n(31441),r=n(95931);let d=[{depth:2,value:"BlockNote CSS Classes",id:"blocknote-css-classes"},{depth:2,value:"BlockNote CSS Attributes",id:"blocknote-css-attributes"},{depth:2,value:"Mantine Classes",id:"mantine-classes"}];function c(e){let t=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code",a:"a"},(0,l.a)(),e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:"Overriding CSS"}),"\n",(0,o.jsx)(t.p,{children:"In the demo below, we create additional CSS rules to make the editor text and hovered slash menu items blue:"}),"\n",(0,o.jsx)(r.e,{name:"theming/theming-css"}),"\n",(0,o.jsx)(t.p,{children:"In this page you'll find the main selectors which are useful to create your own CSS rules, including the ones seen in the demo. However, if you want to target a specific DOM element, it's easiest to just inspect the DOM tree using your browser's dev tools."}),"\n",(0,o.jsx)(t.h2,{id:"blocknote-css-classes",children:"BlockNote CSS Classes"}),"\n",(0,o.jsxs)(t.p,{children:["Within the editor's DOM structure, you'll find many elements have classes with the ",(0,o.jsx)(t.code,{children:"bn-"})," prefix. BlockNote uses these to apply CSS styles to the editor, which you can override with your own. Here are some of the most useful BlockNote classes that you can use for your CSS rules:"]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-container"}),": Container element for the editor, as well as all menus and toolbars."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-editor"}),": Element for only the editor."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-block"}),": Element for a block, including nested blocks."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-block-group"}),": Container element for nested blocks."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-block-content"}),": Element for a block's content."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-inline-content"}),": Element for only the block's editable, rich text content."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-toolbar"}),": Element for the formatting & link toolbars."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-side-menu"}),": Element for the side menu."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-drag-handle-menu"}),": Element for the drag handle menu."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".bn-suggestion-menu"}),": Element for suggestion menu."]}),"\n",(0,o.jsx)(t.h2,{id:"blocknote-css-attributes",children:"BlockNote CSS Attributes"}),"\n",(0,o.jsx)(t.p,{children:"In addition to classes, BlockNote also uses the following attributes to target a specific block type & props:"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:'[data-content-type="blockType"]'}),": Element for a block's content, but only for blocks of type ",(0,o.jsx)(t.code,{children:"blockType"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:'[data-propName="propValue"]'}),": Element for a block's content, but only for blocks with the ",(0,o.jsx)(t.code,{children:"propName"})," prop with value ",(0,o.jsx)(t.code,{children:"propValue"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["For example, ",(0,o.jsx)(t.code,{children:'[data-content-type="heading"][data-level="2"]'})," will select all heading blocks with heading level 2."]}),"\n",(0,o.jsx)(t.h2,{id:"mantine-classes",children:"Mantine Classes"}),"\n",(0,o.jsxs)(t.p,{children:["Because BlockNote uses ",(0,o.jsx)(t.a,{href:"https://mantine.dev/",children:"Mantine"})," for its UI, you can also write CSS rules using any of the default Mantine component classes."]})]})}let m={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,l.a)(),e.components);return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/docs/styling-theming/overriding-css.mdx",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"},timestamp:172890279e4,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:"Overriding CSS",headings:d},pageNextRoute:"/docs/styling-theming/overriding-css",nextraLayout:a.ZP,themeConfig:s.Z};t.default=(0,i.j)(m)}},function(e){e.O(0,[3751,1466,2888,9774,179],function(){return e(e.s=38512)}),_N_E=e.O()}]);