docusaurus/assets/js/85d61fbd.376c16f4.js

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["6408"],{55701:function(e,t,r){r.d(t,{Z:()=>n});let n={tabItem:"tabItem_pnkT"}},93195:function(e,t,r){r.d(t,{Z:()=>n});let n={tabList:"tabList_Qoir",tabItem:"tabItem_AQgk"}},51179:function(e,t,r){r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>i,metadata:()=>n,toc:()=>d});var n=r(99220),a=r(85893),o=r(80980),l=r(4575),s=r(54636);let i={sidebar_position:3,slug:"/api/themes/@docusaurus/theme-live-codeblock"},c="\uD83D\uDCE6 theme-live-codeblock",u={},d=[{value:"Configuration",id:"configuration",level:3}];function h(e){let t={a:"a",code:"code",h1:"h1",h3:"h3",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"-theme-live-codeblock",children:"\uD83D\uDCE6 theme-live-codeblock"})}),"\n",(0,a.jsxs)(t.p,{children:["This theme provides a ",(0,a.jsx)(t.code,{children:"@theme/CodeBlock"})," component that is powered by ",(0,a.jsx)(t.a,{href:"https://commerce.nearform.com/open-source/react-live/",children:"react-live"}),". You can read more on ",(0,a.jsx)(t.a,{href:"/docs/markdown-features/code-blocks#interactive-code-editor",children:"interactive code editor"})," documentation."]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(s.Z,{value:"npm",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-bash",children:"npm install --save @docusaurus/theme-live-codeblock\n"})})}),(0,a.jsx)(s.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-bash",children:"yarn add @docusaurus/theme-live-codeblock\n"})})}),(0,a.jsx)(s.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-bash",children:"pnpm add @docusaurus/theme-live-codeblock\n"})})}),(0,a.jsx)(s.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-bash",children:"bun add @docusaurus/theme-live-codeblock\n"})})})]}),"\n",(0,a.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  plugins: ['@docusaurus/theme-live-codeblock'],\n  themeConfig: {\n    liveCodeBlock: {\n      /**\n       * The position of the live playground, above or under the editor\n       * Possible values: \"top\" | \"bottom\"\n       */\n      playgroundPosition: 'bottom',\n    },\n  },\n};\n"})})]})}function m(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}},54636:function(e,t,r){r.d(t,{Z:()=>l});var n=r(85893);r(67294);var a=r(90496),o=r(55701);function l(e){let{children:t,hidden:r,className:l}=e;return(0,n.jsx)("div",{role:"tabpanel",className:(0,a.Z)(o.Z.tabItem,l),hidden:r,children:t})}},4575:function(e,t,r){r.d(t,{Z:()=>m});var n=r(85893),a=r(67294),o=r(90496),l=r(54947),s=r(30623),i=r(71607),c=r(93195);function u(e){let{className:t,block:r,selectedValue:a,selectValue:s,tabValues:i}=e,u=[],{blockElementScrollPositionUntilNextRender:d}=(0,l.o5)(),h=e=>{let t=e.currentTarget,r=i[u.indexOf(t)].value;r!==a&&(d(t),s(r))},m=e=>{let t=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let r=u.indexOf(e.currentTarget)+1;t=u[r]??u[0];break}case"ArrowLeft":{let r=u.indexOf(e.currentTarget)-1;t=u[r]??u[u.length-1]}}t?.focus()};return(0,n.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":r},t),children:i.map(e=>{let{value:t,label:r,attributes:l}=e;return(0,n.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>{u.push(e)},onKeyDown:m,onClick:h,...l,className:(0,o.Z)("tabs__item",c.Z.tabItem,l?.className,{"tabs__item--active":a===t}),children:r??t},t)})})}function d(e){let{lazy:t,children:r,selectedValue:l}=e,s=(Array.isArray(r)?r:[r]).filter(Boolean);if(t){let e=s.find(e=>e.props.value===l);return e?(0,a.cloneElement)(e,{className:(0,o.Z)("margin-top--md",e.props.className)}):null}return(0,n.jsx)("div",{className:"margin-top--md",children:s.map((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==l}))})}function h(e){let t=(0,s.Y)(e);return(0,n.jsxs)("div",{className:(0,o.Z)("tabs-container",c.Z.tabList),children:[(0,n.jsx)(u,{...t,...e}),(0,n.jsx)(d,{...t,...e})]})}function m(e){let t=(0,i.Z)();return(0,n.jsx)(h,{...e,children:(0,s.h)(e.children)},String(t))}},30623:function(e,t,r){r.d(t,{Y:()=>d,h:()=>c});var n=r(67294),a=r(3620),o=r(844),l=r(97486),s=r(32263),i=r(16971);function c(e){return n.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,n.isValidElement)(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function u(e){let{value:t,tabValues:r}=e;return r.some(e=>e.value===t)}function d(e){let{defaultValue:t,queryString:r=!1,groupId:d}=e,h=function(e){let{values:t,children:r}=e;return(0,n.useMemo)(()=>{let e=t??c(r).map(e=>{let{props:{value:t,label:r,attributes:n,default:a}}=e;return{value:t,label:r,attributes:n,default:a}}),n=(0,s.lx)(e,(e,t)=>e.value===t.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[t,r])}(e),[m,p]=(0,n.useState)(()=>(function(e){let{defaultValue:t,tabValues:r}=e;if(0===r.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!u({value:t,tabValues:r}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${r.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}let n=r.find(e=>e.default)??r[0];if(!n)throw Error("Unexpected error: 0 tabValues");return n.value})({defaultValue:t,tabValues:h})),[b,f]=function(e){let{queryString:t=!1,groupId:r}=e,o=(0,a.k6)(),s=function(e){let{queryString:t=!1,groupId:r}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!r)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return r??null}({queryString:t,groupId:r});return[(0,l._X)(s),(0,n.useCallback)(e=>{if(!s)return;let t=new URLSearchParams(o.location.search);t.set(s,e),o.replace({...o.location,search:t.toString()})},[s,o])]}({queryString:r,groupId:d}),[v,x]=function(e){let{groupId:t}=e,r=t?`docusaurus.tab.${t}`:null,[a,o]=(0,i.Nk)(r);return[a,(0,n.useCallback)(e=>{r&&o.set(e)},[r,o])]}({groupId:d}),g=(()=>{let e=b??v;return u({value:e,tabValues:h})?e:null})();return(0,o.Z)(()=>{g&&p(g)},[g]),{selectedValue:m,selectValue:(0,n.useCallback)(e=>{if(!u({value:e,tabValues:h}))throw Error(`Can't select invalid tab value=${e}`);p(e),f(e),x(e)},[f,x,h]),tabValues:h}}},80980:function(e,t,r){r.d(t,{Z:()=>s,a:()=>l});var n=r(67294);let a={},o=n.createContext(a);function l(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(o.Provider,{value:t},e.children)}},99220:function(e){e.exports=JSON.parse('{"id":"api/themes/theme-live-codeblock","title":"\uD83D\uDCE6 theme-live-codeblock","description":"This theme provides a @theme/CodeBlock component that is powered by react-live. You can read more on interactive code editor documentation.","source":"@site/docs/api/themes/theme-live-codeblock.mdx","sourceDirName":"api/themes","slug":"/api/themes/@docusaurus/theme-live-codeblock","permalink":"/docs/api/themes/@docusaurus/theme-live-codeblock","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/themes/theme-live-codeblock.mdx","tags":[],"version":"current","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1748882647000,"sidebarPosition":3,"frontMatter":{"sidebar_position":3,"slug":"/api/themes/@docusaurus/theme-live-codeblock"},"sidebar":"api","previous":{"title":"\uD83D\uDCE6 theme-classic","permalink":"/docs/api/themes/@docusaurus/theme-classic"},"next":{"title":"\uD83D\uDCE6 theme-search-algolia","permalink":"/docs/api/themes/@docusaurus/theme-search-algolia"}}')}}]);