(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5413],{12328:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/ui-components/formatting-toolbar",function(){return o(82978)}])},95931:function(e,t,o){"use strict";o.d(t,{e:function(){return s}});var n=o(24246),i=o(34473),a=o(15886);function s(e){let t=(0,i.kP)(),o=a.$[e.name];if(!o)throw Error("Example ".concat(e.name," not found"));let s=o.ExampleWithCode,r=function(e){var t,o;if("authenticated"!==e.status)return;let n=null==e?void 0:null===(o=e.data)||void 0===o?void 0:null===(t=o.user)||void 0===t?void 0:t.sponsorInfo;return(null==n?void 0:n.isActive)?n.tier.monthlyPriceInDollars>100?"business":"starter":"free"}(t);return(0,n.jsx)(s,{name:e.name,isProExample:o.pro?{userStatus:r}:void 0})}},82978:function(e,t,o){"use strict";o.r(t),o.d(t,{__toc:function(){return d}});var n=o(24246),i=o(29304),a=o(33756),s=o(7854);o(37090);var r=o(31441),l=o(95931);let d=[{depth:2,value:"Changing the Formatting Toolbar",id:"changing-the-formatting-toolbar"},{depth:2,value:"Changing Block Type Select (Dropdown) Items",id:"changing-block-type-select-dropdown-items"}];function c(e){let t=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code"},(0,r.a)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:"Formatting Toolbar"}),"\n",(0,n.jsx)(t.p,{children:"The Formatting Toolbar appears whenever you highlight text in the editor."}),"\n",(0,n.jsx)("img",{style:{maxWidth:"600px"},src:"/img/screenshots/formatting_toolbar.png",alt:"image"}),"\n",(0,n.jsx)(t.h2,{id:"changing-the-formatting-toolbar",children:"Changing the Formatting Toolbar"}),"\n",(0,n.jsx)(t.p,{children:"You can change or replace the Formatting Toolbar with your own React component. In the demo below, 2 buttons are added to the default Formatting Toolbar - one to add a blue text/background, and one to toggle code styles."}),"\n",(0,n.jsx)(l.e,{name:"ui-components/formatting-toolbar-buttons"}),"\n",(0,n.jsxs)(t.p,{children:["We first define our custom ",(0,n.jsx)(t.code,{children:"BlueButton"}),". The ",(0,n.jsx)(t.code,{children:"useComponentsContext"})," hook gets all components used internally by BlockNote, so we want to use ",(0,n.jsx)(t.code,{children:"Components.FormattingToolbar.Button"})," for this."]}),"\n",(0,n.jsxs)(t.p,{children:["We use the ",(0,n.jsx)(t.code,{children:"FormattingToolbar"})," component to create a custom Formatting Toolbar. By specifying its children, we can replace the default buttons in the toolbar with our own."]}),"\n",(0,n.jsxs)(t.p,{children:["This custom Formatting Toolbar is passed to a ",(0,n.jsx)(t.code,{children:"FormattingToolbarController"}),", which controls its position and visibility (above or below the highlighted text)."]}),"\n",(0,n.jsxs)(t.p,{children:["Setting ",(0,n.jsx)(t.code,{children:"formattingToolbar={false}"})," on ",(0,n.jsx)(t.code,{children:"BlockNoteView"})," tells BlockNote not to show the default Formatting Toolbar."]}),"\n",(0,n.jsx)(t.h2,{id:"changing-block-type-select-dropdown-items",children:"Changing Block Type Select (Dropdown) Items"}),"\n",(0,n.jsx)(t.p,{children:"The first element in the default Formatting Toolbar is the Block Type Select, and you can change the items in it. The demo makes the Block Type Select work for image blocks by adding an item to it."}),"\n",(0,n.jsx)(l.e,{name:"ui-components/formatting-toolbar-block-type-items"}),"\n",(0,n.jsxs)(t.p,{children:["Here, we use the ",(0,n.jsx)(t.code,{children:"FormattingToolbar"})," component but keep the default buttons (we don't pass any children). Instead, we pass our customized Block Type Select items using the ",(0,n.jsx)(t.code,{children:"blockTypeSelectItems"})," prop."]})]})}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,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/docs/ui-components/formatting-toolbar.mdx",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"},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:"Formatting Toolbar",headings:d},pageNextRoute:"/docs/ui-components/formatting-toolbar",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=12328)}),_N_E=e.O()}]);