(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{129:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return b}));var a=n(2),o=n(6),r=(n(0),n(147)),l={id:"api-reference-editor",title:"Editor Component"},i={id:"api-reference-editor",title:"Editor Component",description:"This article discusses the API and props of the core controlled contentEditable",source:"@site/../docs/APIReference-Editor.md",permalink:"/docs/api-reference-editor",editUrl:"https://github.com/facebook/draft-js/edit/master/docs/../docs/APIReference-Editor.md",lastUpdatedBy:"maarekj",lastUpdatedAt:1603477503,sidebar:"docs",previous:{title:"Issues and Pitfalls",permalink:"/docs/advanced-topics-issues-and-pitfalls"},next:{title:"EditorChangeType",permalink:"/docs/api-reference-editor-change-type"}},c=[{value:"Props",id:"props",children:[]},{value:"Basics",id:"basics",children:[{value:"<code>editorState</code>",id:"editorstate",children:[]},{value:"<code>onChange</code>",id:"onchange",children:[]}]},{value:"Presentation (Optional)",id:"presentation-optional",children:[{value:"<code>placeholder</code>",id:"placeholder",children:[]},{value:"<code>textAlignment</code>",id:"textalignment",children:[]},{value:"<code>textDirectionality</code>",id:"textdirectionality",children:[]},{value:"<code>blockRendererFn</code>",id:"blockrendererfn",children:[]},{value:"<code>blockRenderMap</code>",id:"blockrendermap",children:[]},{value:"<code>blockStyleFn</code>",id:"blockstylefn",children:[]},{value:"customStyleMap",id:"customstylemap",children:[]},{value:"<code>customStyleFn</code>",id:"customstylefn",children:[]}]},{value:"Behavior (Optional)",id:"behavior-optional",children:[{value:"<code>autoCapitalize</code>",id:"autocapitalize",children:[]},{value:"<code>autoComplete</code>",id:"autocomplete",children:[]},{value:"<code>autoCorrect</code>",id:"autocorrect",children:[]},{value:"<code>readOnly</code>",id:"readonly",children:[]},{value:"<code>spellCheck</code>",id:"spellcheck",children:[]},{value:"<code>stripPastedStyles</code>",id:"strippastedstyles",children:[]}]},{value:"DOM and Accessibility (Optional)",id:"dom-and-accessibility-optional",children:[{value:"<code>tabIndex</code>",id:"tabindex",children:[]},{value:"ARIA props",id:"aria-props",children:[]},{value:"<code>editorKey</code>",id:"editorkey",children:[]}]},{value:"Cancelable Handlers (Optional)",id:"cancelable-handlers-optional",children:[{value:"<code>handleReturn</code>",id:"handlereturn",children:[]},{value:"<code>handleKeyCommand</code>",id:"handlekeycommand",children:[]},{value:"<code>handleBeforeInput</code>",id:"handlebeforeinput",children:[]},{value:"<code>handlePastedText</code>",id:"handlepastedtext",children:[]},{value:"<code>handlePastedFiles</code>",id:"handlepastedfiles",children:[]},{value:"<code>handleDroppedFiles</code>",id:"handledroppedfiles",children:[]},{value:"<code>handleDrop</code>",id:"handledrop",children:[]}]},{value:"Key Handlers (Optional)",id:"key-handlers-optional",children:[{value:"<code>keyBindingFn</code>",id:"keybindingfn",children:[]}]},{value:"Mouse events",id:"mouse-events",children:[{value:"<code>onFocus</code>",id:"onfocus",children:[]},{value:"<code>onBlur</code>",id:"onblur",children:[]}]},{value:"Methods",id:"methods",children:[{value:"<code>focus</code>",id:"focus",children:[]},{value:"<code>blur</code>",id:"blur",children:[]}]}],d={rightToc:c};function b(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},d,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"This article discusses the API and props of the core controlled contentEditable\ncomponent itself, ",Object(r.b)("inlineCode",{parentName:"p"},"Editor"),". Props are defined within\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditorProps.js"}),Object(r.b)("inlineCode",{parentName:"a"},"DraftEditorProps")),"."),Object(r.b)("h2",{id:"props"},"Props"),Object(r.b)("h2",{id:"basics"},"Basics"),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/quickstart-api-basics"}),"API Basics")," for an introduction."),Object(r.b)("h3",{id:"editorstate"},Object(r.b)("inlineCode",{parentName:"h3"},"editorState")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"editorState: EditorState;\n")),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"EditorState")," object to be rendered by the ",Object(r.b)("inlineCode",{parentName:"p"},"Editor"),"."),Object(r.b)("h3",{id:"onchange"},Object(r.b)("inlineCode",{parentName:"h3"},"onChange")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"onChange: (editorState: EditorState) => void\n")),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"onChange")," function to be executed by the ",Object(r.b)("inlineCode",{parentName:"p"},"Editor")," when edits and selection\nchanges occur."),Object(r.b)("h2",{id:"presentation-optional"},"Presentation (Optional)"),Object(r.b)("h3",{id:"placeholder"},Object(r.b)("inlineCode",{parentName:"h3"},"placeholder")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"placeholder?: string\n")),Object(r.b)("p",null,"Optional placeholder string to display when the editor is empty."),Object(r.b)("p",null,"Note: You can use CSS to style or hide your placeholder as needed. For instance,\nin the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/rich"}),"rich editor example"),", the placeholder is hidden when the user changes block styling in an empty editor.\nThis is because the placeholder may not line up with the cursor when the style\nis changed."),Object(r.b)("h3",{id:"textalignment"},Object(r.b)("inlineCode",{parentName:"h3"},"textAlignment")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"textAlignment?: DraftTextAlignment\n")),Object(r.b)("p",null,"Optionally set the overriding text alignment for this editor. This alignment value will\napply to the entire contents, regardless of default text direction for input text."),Object(r.b)("p",null,"You may use this if you wish to center your text or align it flush in one direction\nto fit it within your UI design."),Object(r.b)("p",null,"If this value is not set, text alignment will be based on the characters within\nthe editor, on a per-block basis."),Object(r.b)("h3",{id:"textdirectionality"},Object(r.b)("inlineCode",{parentName:"h3"},"textDirectionality")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"textDirectionality?: DraftTextDirectionality\n")),Object(r.b)("p",null,"Optionally set the overriding text directionality for this editor. The values include 'RTL' for right-to-left text, like Hebrew or Arabic, and 'LTR' for left-to-right text, like English or Spanish. This directionality will apply to the entire contents, regardless of default text direction for input text."),Object(r.b)("p",null,"If this value is not set, text directionality will be based on the characters\nwithin the editor, on a per-block basis."),Object(r.b)("h3",{id:"blockrendererfn"},Object(r.b)("inlineCode",{parentName:"h3"},"blockRendererFn")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"blockRendererFn?: (block: ContentBlock) => ?Object\n")),Object(r.b)("p",null,"Optionally set a function to define custom block rendering. See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-block-components"}),"Advanced Topics: Block Components")," for details on usage."),Object(r.b)("h3",{id:"blockrendermap"},Object(r.b)("inlineCode",{parentName:"h3"},"blockRenderMap")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"blockRenderMap?: DraftBlockRenderMap\n")),Object(r.b)("p",null,"Provide a map of block rendering configurations. Each block type maps to element tag and an optional react element wrapper. This configuration is used for both rendering and paste processing. See\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-custom-block-render-map"}),"Advanced Topics: Custom Block Rendering")," for details on usage."),Object(r.b)("h3",{id:"blockstylefn"},Object(r.b)("inlineCode",{parentName:"h3"},"blockStyleFn")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"blockStyleFn?: (block: ContentBlock) => string\n")),Object(r.b)("p",null,"Optionally set a function to define class names to apply to the given block when it is rendered. See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-block-styling"}),"Advanced Topics: Block Styling")," for details on usage."),Object(r.b)("h3",{id:"customstylemap"},"customStyleMap"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"customStyleMap?: Object\n")),Object(r.b)("p",null,"Optionally define a map of inline styles to apply to spans of text with the specified style. See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-inline-styles"}),"Advanced Topics: Inline Styles")," for details on usage."),Object(r.b)("h3",{id:"customstylefn"},Object(r.b)("inlineCode",{parentName:"h3"},"customStyleFn")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"customStyleFn?: (style: DraftInlineStyle, block: ContentBlock) => ?Object\n")),Object(r.b)("p",null,"Optionally define a function to transform inline styles to CSS objects that are applied to spans of text. See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-inline-styles"}),"Advanced Topics: Inline Styles")," for details on usage."),Object(r.b)("h2",{id:"behavior-optional"},"Behavior (Optional)"),Object(r.b)("h3",{id:"autocapitalize"},Object(r.b)("inlineCode",{parentName:"h3"},"autoCapitalize")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"autoCapitalize?: string\n")),Object(r.b)("p",null,"Set if auto capitalization is turned on and how it behaves. More about platform availability and usage can ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocapitalize"}),"be found on mdn"),"."),Object(r.b)("h3",{id:"autocomplete"},Object(r.b)("inlineCode",{parentName:"h3"},"autoComplete")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"autoComplete?: string\n")),Object(r.b)("p",null,"Set if auto complete is turned on and how it behaves. More about platform availability and usage can ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocomplete"}),"be found on mdn"),"."),Object(r.b)("h3",{id:"autocorrect"},Object(r.b)("inlineCode",{parentName:"h3"},"autoCorrect")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"autoCorrect?: string\n")),Object(r.b)("p",null,"Set if auto correct is turned on and how it behaves. More about platform availability and usage can ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocorrect"}),"be found on MDN"),"."),Object(r.b)("h3",{id:"readonly"},Object(r.b)("inlineCode",{parentName:"h3"},"readOnly")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"readOnly?: boolean\n")),Object(r.b)("p",null,"Set whether the editor should be rendered as static DOM, with all editability disabled."),Object(r.b)("p",null,"This is useful when supporting interaction within ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-block-components"}),"custom block components")," or if you only want to display content for a static use case."),Object(r.b)("p",null,"Default is ",Object(r.b)("inlineCode",{parentName:"p"},"false"),"."),Object(r.b)("h3",{id:"spellcheck"},Object(r.b)("inlineCode",{parentName:"h3"},"spellCheck")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"spellCheck?: boolean\n")),Object(r.b)("p",null,"Set whether spellcheck is turned on for your editor."),Object(r.b)("p",null,"Note that in OSX Safari, enabling spellcheck also enables autocorrect, if the user\nhas it turned on. Also note that spellcheck is always disabled in IE, since the events\nneeded to observe spellcheck events are not fired in IE."),Object(r.b)("p",null,"Default is ",Object(r.b)("inlineCode",{parentName:"p"},"false"),"."),Object(r.b)("h3",{id:"strippastedstyles"},Object(r.b)("inlineCode",{parentName:"h3"},"stripPastedStyles")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"stripPastedStyles?: boolean\n")),Object(r.b)("p",null,"Set whether to remove all information except plaintext from pasted content."),Object(r.b)("p",null,"This should be used if your editor does not support rich styles."),Object(r.b)("p",null,"Default is ",Object(r.b)("inlineCode",{parentName:"p"},"false"),"."),Object(r.b)("h2",{id:"dom-and-accessibility-optional"},"DOM and Accessibility (Optional)"),Object(r.b)("h3",{id:"tabindex"},Object(r.b)("inlineCode",{parentName:"h3"},"tabIndex")),Object(r.b)("h3",{id:"aria-props"},"ARIA props"),Object(r.b)("p",null,"These props allow you to set accessibility properties on your editor. See\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditorProps.js"}),"DraftEditorProps")," for the exhaustive list of supported attributes."),Object(r.b)("h3",{id:"editorkey"},Object(r.b)("inlineCode",{parentName:"h3"},"editorKey")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"editorKey?: string\n")),Object(r.b)("p",null,"You probably won't set ",Object(r.b)("inlineCode",{parentName:"p"},"editorKey")," on an ",Object(r.b)("inlineCode",{parentName:"p"},"<Editor />")," manually unless you're\nrendering a Draft component serverside. If you ",Object(r.b)("em",{parentName:"p"},"are"),", you must set this prop\nto avoid server/client mismatches."),Object(r.b)("p",null,"If the key is not set, it is generated automatically when the component\nrenders and assigned as a prop of the Editor's ",Object(r.b)("inlineCode",{parentName:"p"},"<DraftEditorContents />"),"\ncomponent."),Object(r.b)("p",null,"If you ",Object(r.b)("em",{parentName:"p"},"do")," set this prop, the key should be unique ",Object(r.b)("em",{parentName:"p"},"per-editor"),", as it is\nused to determine if styles should be preserved when pasting text within an\neditor."),Object(r.b)("h2",{id:"cancelable-handlers-optional"},"Cancelable Handlers (Optional)"),Object(r.b)("p",null,"These prop functions are provided to allow custom event handling for a small\nset of useful events. By returning ",Object(r.b)("inlineCode",{parentName:"p"},"'handled'")," from your handler, you indicate that\nthe event is handled and the Draft core should do nothing more with it. By returning\n",Object(r.b)("inlineCode",{parentName:"p"},"'not-handled'"),", you defer to Draft to handle the event."),Object(r.b)("h3",{id:"handlereturn"},Object(r.b)("inlineCode",{parentName:"h3"},"handleReturn")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handleReturn?: (\n  e: SyntheticKeyboardEvent,\n  editorState: EditorState,\n) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle a ",Object(r.b)("inlineCode",{parentName:"p"},"RETURN")," keydown event. Example usage: Choosing a mention tag from a\nrendered list of results to trigger applying the mention entity to your content."),Object(r.b)("h3",{id:"handlekeycommand"},Object(r.b)("inlineCode",{parentName:"h3"},"handleKeyCommand")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handleKeyCommand?: (\n  command: string,\n  editorState: EditorState,\n  eventTimeStamp: number,\n) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle the named editor command. See\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-key-bindings"}),"Advanced Topics: Key Bindings"),"\nfor details on usage."),Object(r.b)("h3",{id:"handlebeforeinput"},Object(r.b)("inlineCode",{parentName:"h3"},"handleBeforeInput")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handleBeforeInput?: (\n  chars: string,\n  editorState: EditorState,\n  eventTimeStamp: number,\n) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle the characters to be inserted from a ",Object(r.b)("inlineCode",{parentName:"p"},"beforeInput")," event. Returning ",Object(r.b)("inlineCode",{parentName:"p"},"'handled'"),"\ncauses the default behavior of the ",Object(r.b)("inlineCode",{parentName:"p"},"beforeInput")," event to be prevented (i.e. it is\nthe same as calling the ",Object(r.b)("inlineCode",{parentName:"p"},"preventDefault")," method on the event).\nExample usage: After a user has typed ",Object(r.b)("inlineCode",{parentName:"p"},"-")," at the start of a new block, you might\nconvert that ",Object(r.b)("inlineCode",{parentName:"p"},"ContentBlock")," into an ",Object(r.b)("inlineCode",{parentName:"p"},"unordered-list-item"),"."),Object(r.b)("p",null,'At Facebook, we also use this to convert typed ASCII quotes into "smart" quotes,\nand to convert typed emoticons into images.'),Object(r.b)("h3",{id:"handlepastedtext"},Object(r.b)("inlineCode",{parentName:"h3"},"handlePastedText")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handlePastedText?: (\n  text: string,\n  html?: string,\n  editorState: EditorState,\n) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle text and html(for rich text) that has been pasted directly into the editor. Returning true will prevent the default paste behavior."),Object(r.b)("h3",{id:"handlepastedfiles"},Object(r.b)("inlineCode",{parentName:"h3"},"handlePastedFiles")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handlePastedFiles?: (files: Array<Blob>) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle files that have been pasted directly into the editor."),Object(r.b)("h3",{id:"handledroppedfiles"},Object(r.b)("inlineCode",{parentName:"h3"},"handleDroppedFiles")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handleDroppedFiles?: (\n  selection: SelectionState,\n  files: Array<Blob>,\n) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle files that have been dropped into the editor."),Object(r.b)("h3",{id:"handledrop"},Object(r.b)("inlineCode",{parentName:"h3"},"handleDrop")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"handleDrop?: (\n  selection: SelectionState,\n  dataTransfer: Object,\n  isInternal: DraftDragType,\n) => DraftHandleValue\n")),Object(r.b)("p",null,"Handle other drop operations."),Object(r.b)("h2",{id:"key-handlers-optional"},"Key Handlers (Optional)"),Object(r.b)("p",null,"Draft lets you supply a custom ",Object(r.b)("inlineCode",{parentName:"p"},"keyDown")," handler that wraps or overrides its\ndefault one."),Object(r.b)("h3",{id:"keybindingfn"},Object(r.b)("inlineCode",{parentName:"h3"},"keyBindingFn")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"keyBindingFn?: (e: SyntheticKeyboardEvent) => ?string\n")),Object(r.b)("p",null,"This prop function exposes ",Object(r.b)("inlineCode",{parentName:"p"},"keyDown")," events to a handler of your choosing. If an\nevent of interest happens, you can perform custom logic and/or return a string\ncorresponding to a ",Object(r.b)("inlineCode",{parentName:"p"},"DraftEditorCommand")," or a custom editor command of your\nown creation. Example: At Facebook, this is used to provide keyboard interaction\nfor the mentions autocomplete menu that appears when typing a friend's name.\nYou can find a more detailed explanation of this\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"/docs/advanced-topics-key-bindings"}),"here"),"."),Object(r.b)("h2",{id:"mouse-events"},"Mouse events"),Object(r.b)("h3",{id:"onfocus"},Object(r.b)("inlineCode",{parentName:"h3"},"onFocus")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"onFocus?: (e: SyntheticFocusEvent) => void\n")),Object(r.b)("h3",{id:"onblur"},Object(r.b)("inlineCode",{parentName:"h3"},"onBlur")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"onBlur?: (e: SyntheticFocusEvent) => void\n")),Object(r.b)("h2",{id:"methods"},"Methods"),Object(r.b)("h3",{id:"focus"},Object(r.b)("inlineCode",{parentName:"h3"},"focus")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"focus(): void\n")),Object(r.b)("p",null,"Force focus back onto the editor node."),Object(r.b)("h3",{id:"blur"},Object(r.b)("inlineCode",{parentName:"h3"},"blur")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"blur(): void\n")),Object(r.b)("p",null,"Remove focus from the editor node."))}b.isMDXComponent=!0},147:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return h}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var d=o.a.createContext({}),b=function(e){var t=o.a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=b(e.components);return o.a.createElement(d.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),s=b(n),u=a,h=s["".concat(l,".").concat(u)]||s[u]||p[u]||r;return n?o.a.createElement(h,i(i({ref:t},d),{},{components:n})):o.a.createElement(h,i({ref:t},d))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,l=new Array(r);l[0]=u;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var d=2;d<r;d++)l[d]=n[d];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"}}]);