docusaurus-live-brython 3.0.0-beta.25 → 3.0.0-beta.27

package/lib/theme/CodeBlock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeBlock/index.tsx"],"names":[],"mappings":";;AACA,OAAkB,EAAE,KAAK,KAAK,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAsChD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsBlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeBlock/index.tsx"],"names":[],"mappings":";;AACA,OAAkB,EAAE,KAAK,KAAK,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAsChD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0BlE"}

package/lib/theme/CodeBlock/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import CodeBlock from '@theme-init/CodeBlock';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import ContextEditor from '@theme/CodeEditor/ContextEditor';
+import ContextEditor, { splitCode } from '@theme/CodeEditor/ContextEditor';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 const sanitizedTitle = (id) => {
     if (!id) {
         return;
@@ -42,13 +42,16 @@ export default function CodeBlockWrapper(props) {
     // if (metaProps.live_jsx) {
     //     return <Playground scope={ReactLiveScope} {...props} />;
     // }
-    if (metaProps.live_py && ExecutionEnvironment.canUseDOM) {
+    if (metaProps.live_py) {
         const title = props.title || metaProps.title;
-        const rawcode = (props.children || '').replace(/\s*\n$/, '');
-        let code = rawcode;
-        return (<ContextEditor {...props} {...metaProps} title={sanitizedTitle(title) || lang}>
-                {props.children}
-            </ContextEditor>);
+        const { code } = splitCode(props.children || '');
+        return (<BrowserOnly fallback={<CodeBlock language={lang}>{code}</CodeBlock>}>
+                {() => {
+                return (<ContextEditor {...props} {...metaProps} title={sanitizedTitle(title) || lang}>
+                            {props.children}
+                        </ContextEditor>);
+            }}
+            </BrowserOnly>);
     }
     return <CodeBlock {...props}/>;
 }

package/lib/theme/CodeEditor/Actions/ShowSyncStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowSyncStatus.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/ShowSyncStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,cAAc,yBAyBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ShowSyncStatus.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/ShowSyncStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,cAAc,yBAqCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/theme/CodeEditor/Actions/ShowSyncStatus.jsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Icon, { Color } from '@theme/CodeEditor/Icon';
 import { Status } from '@theme/CodeEditor/WithScript/Types';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 const ShowSyncStatus = () => {
     const store = useStore();
     const isLoaded = useScript(store, 'isLoaded');
@@ -14,14 +15,18 @@ const ShowSyncStatus = () => {
             return () => clearTimeout(disposer);
         }
     }, [status, store]);
-    return (<>
-            {!isLoaded && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary}/>}
-            <div style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></div>
-            <span style={{ minWidth: '1em' }}>
-                {status === Status.SYNCING && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary}/>}
-                {status === Status.SUCCESS && <Icon icon="Check" size={'1.2em'} color={Color.Success}/>}
-                {status === Status.ERROR && <Icon icon="Close" size={'1.2em'} color={Color.Danger}/>}
-            </span>
-        </>);
+    return (<BrowserOnly fallback={null}>
+            {() => {
+            return (<>
+                        {!isLoaded && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary}/>}
+                        <div style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></div>
+                        <span style={{ minWidth: '1em' }}>
+                            {status === Status.SYNCING && (<Icon icon="Sync" spin size={'1.2em'} color={Color.Primary}/>)}
+                            {status === Status.SUCCESS && (<Icon icon="Check" size={'1.2em'} color={Color.Success}/>)}
+                            {status === Status.ERROR && (<Icon icon="Close" size={'1.2em'} color={Color.Danger}/>)}
+                        </span>
+                    </>);
+        }}
+        </BrowserOnly>);
 };
 export default ShowSyncStatus;

package/lib/theme/CodeEditor/ContextEditor/index.d.ts

@@ -6,6 +6,11 @@ interface Props extends MetaProps {
     children: string | React.ReactNode;
     onChange?: (code: string) => void;
 }
+export declare const splitCode: (rawCode: string) => {
+    pre: string;
+    code: string;
+    post: string;
+};
 /**
  * Use this component when you want a working CodeEditor.
  * The CodeEditor must be wrapped in a ScriptContext - this component does that.

package/lib/theme/CodeEditor/ContextEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/ContextEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI/D,UAAU,KAAM,SAAQ,SAAS;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAYD;;;;;GAKG;AACH,QAAA,MAAM,aAAa,UAAW,KAAK,sBA0ClC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/ContextEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI/D,UAAU,KAAM,SAAQ,SAAS;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,eAAO,MAAM,SAAS,YAAa,MAAM;;;;CAOxC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,aAAa,UAAW,KAAK,sBA0ClC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/theme/CodeEditor/ContextEditor/index.jsx

@@ -4,7 +4,7 @@ import CodeEditor from '@theme/CodeEditor';
 import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
 import CodeBlock from '@theme/CodeBlock';
 const SPLIT_CODE_REGEX = /^(?:(?<pre>.*?)\n###\s*PRE\s*)?(?<code>.*?)(?:\n###\s*POST\s*(?<post>.*))?$/s;
-const splitCode = (rawCode) => {
+export const splitCode = (rawCode) => {
     const { pre, code, post } = rawCode.replace(/\s*\n$/, '').match(SPLIT_CODE_REGEX).groups || {};
     return {
         pre: pre || '',

package/lib/theme/CodeEditor/Editor/Result/Graphics/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/CodeEditor/Editor/Result/Graphics/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AACD,QAAA,MAAM,QAAQ,UAAW,KAAK,sBA4B7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/CodeEditor/Editor/Result/Graphics/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AACD,QAAA,MAAM,QAAQ,UAAW,KAAK,sBAgC7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/theme/CodeEditor/WithScript/ScriptContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScriptContext.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/ScriptContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAGnF,eAAO,MAAM,OAAO,8EAAuD,CAAC;AAE5E,QAAA,MAAM,aAAa,UAAW,SAAS,GAAG;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAAE,sBAmBtE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ScriptContext.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/ScriptContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAKnF,eAAO,MAAM,OAAO,8EAAuD,CAAC;AAE5E,QAAA,MAAM,aAAa,UAAW,SAAS,GAAG;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAAE,sBAwBtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/theme/CodeEditor/WithScript/ScriptContext.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { usePluginData } from '@docusaurus/useGlobalData';
 import { createStore } from '@theme/CodeEditor/WithScript/createStore';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import CodeBlock from '@theme/CodeBlock';
 export const Context = React.createContext(undefined);
 const ScriptContext = (props) => {
     const { libDir, syncMaxOnceEvery } = usePluginData('docusaurus-live-brython');
@@ -13,9 +15,13 @@ const ScriptContext = (props) => {
         setStore(store);
         store.load();
     }, [props.id, libDir, siteConfig]);
-    if (!store) {
-        return <div>Load</div>;
-    }
-    return <Context.Provider value={store}>{props.children}</Context.Provider>;
+    return (<BrowserOnly fallback={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
+            {() => {
+            if (!store) {
+                return <CodeBlock language={props.lang}>{props.code}</CodeBlock>;
+            }
+            return <Context.Provider value={store}>{props.children}</Context.Provider>;
+        }}
+        </BrowserOnly>);
 };
 export default ScriptContext;

package/lib/theme/CodeEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,SAAS;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,UAAU,UAAW,KAAK,sBAwB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,SAAS;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,UAAU,UAAW,KAAK,sBAwB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/theme/CodeEditor/index.jsx

@@ -6,10 +6,11 @@ import clsx from 'clsx';
 import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeHistory from '@theme/CodeEditor/CodeHistory';
+import CodeBlock from '@theme/CodeBlock';
 const CodeEditor = (props) => {
     const store = useStore();
     const lang = useScript(store, 'lang');
-    return (<BrowserOnly fallback={<div>Loading...</div>}>
+    return (<BrowserOnly fallback={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
             {() => {
             return (<div className={clsx(styles.wrapper, 'notranslate', props.className)}>
                         <div className={clsx(styles.playgroundContainer, props.slim ? styles.containerSlim : styles.containerBig, 'live_py')}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-live-brython",
-  "version": "3.0.0-beta.25",
+  "version": "3.0.0-beta.27",
   "description": "Docusaurus live code block component for python.",
   "publishConfig": {
     "access": "public"

package/src/theme/CodeBlock/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import CodeBlock, { type Props as CodeBlockType } from '@theme-init/CodeBlock';
 import type { WrapperProps } from '@docusaurus/types';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import CodeEditor, { type MetaProps } from '@theme/CodeEditor';
+import { type MetaProps } from '@theme/CodeEditor';
 
-import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
-import ContextEditor from '@theme/CodeEditor/ContextEditor';
+import ContextEditor, { splitCode } from '@theme/CodeEditor/ContextEditor';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 type Props = WrapperProps<typeof CodeBlockType>;
 
@@ -55,15 +55,19 @@ export default function CodeBlockWrapper(props: Props): JSX.Element {
     // if (metaProps.live_jsx) {
     //     return <Playground scope={ReactLiveScope} {...props} />;
     // }
-    if (metaProps.live_py && ExecutionEnvironment.canUseDOM) {
+    if (metaProps.live_py) {
         const title = props.title || metaProps.title;
-
-        const rawcode: string = ((props.children as string) || '').replace(/\s*\n$/, '');
-        let code = rawcode;
+        const { code } = splitCode((props.children as string) || '');
         return (
-            <ContextEditor {...props} {...metaProps} title={sanitizedTitle(title) || lang}>
-                {props.children}
-            </ContextEditor>
+            <BrowserOnly fallback={<CodeBlock language={lang}>{code}</CodeBlock>}>
+                {() => {
+                    return (
+                        <ContextEditor {...props} {...metaProps} title={sanitizedTitle(title) || lang}>
+                            {props.children}
+                        </ContextEditor>
+                    );
+                }}
+            </BrowserOnly>
         );
     }
     return <CodeBlock {...props} />;

package/src/theme/CodeEditor/Actions/DownloadCode.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useStore, useScript } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import Button from '@theme/CodeEditor/Button';
 import { translate } from '@docusaurus/Translate';
 
 const DownloadCode = (props: { title: string }) => {

package/src/theme/CodeEditor/Actions/ShowSyncStatus.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Icon, { Color } from '@theme/CodeEditor/Icon';
 import { Status } from '@theme/CodeEditor/WithScript/Types';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 const ShowSyncStatus = () => {
     const store = useStore();
@@ -18,15 +19,27 @@ const ShowSyncStatus = () => {
     }, [status, store]);
 
     return (
-        <>
-            {!isLoaded && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary} />}
-            <div style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></div>
-            <span style={{ minWidth: '1em' }}>
-                {status === Status.SYNCING && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary} />}
-                {status === Status.SUCCESS && <Icon icon="Check" size={'1.2em'} color={Color.Success} />}
-                {status === Status.ERROR && <Icon icon="Close" size={'1.2em'} color={Color.Danger} />}
-            </span>
-        </>
+        <BrowserOnly fallback={null}>
+            {() => {
+                return (
+                    <>
+                        {!isLoaded && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary} />}
+                        <div style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></div>
+                        <span style={{ minWidth: '1em' }}>
+                            {status === Status.SYNCING && (
+                                <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary} />
+                            )}
+                            {status === Status.SUCCESS && (
+                                <Icon icon="Check" size={'1.2em'} color={Color.Success} />
+                            )}
+                            {status === Status.ERROR && (
+                                <Icon icon="Close" size={'1.2em'} color={Color.Danger} />
+                            )}
+                        </span>
+                    </>
+                );
+            }}
+        </BrowserOnly>
     );
 };
 

package/src/theme/CodeEditor/ContextEditor/index.tsx

@@ -12,7 +12,7 @@ interface Props extends MetaProps {
 }
 
 const SPLIT_CODE_REGEX = /^(?:(?<pre>.*?)\n###\s*PRE\s*)?(?<code>.*?)(?:\n###\s*POST\s*(?<post>.*))?$/s;
-const splitCode = (rawCode: string) => {
+export const splitCode = (rawCode: string) => {
     const { pre, code, post } = rawCode.replace(/\s*\n$/, '').match(SPLIT_CODE_REGEX).groups || {};
     return {
         pre: pre || '',

package/src/theme/CodeEditor/Editor/Result/Graphics/index.tsx

@@ -32,7 +32,11 @@ const Graphics = (props: Props) => {
                         iconSize="12px"
                     />
                 </div>
-                <div id={DOM_ELEMENT_IDS.graphicsResult(codeId)} className="brython-graphics-result" key={`exec-${graphicsModalExecutionNr}`}>
+                <div
+                    id={DOM_ELEMENT_IDS.graphicsResult(codeId)}
+                    className="brython-graphics-result"
+                    key={`exec-${graphicsModalExecutionNr}`}
+                >
                     {props.main}
                 </div>
             </div>

package/src/theme/CodeEditor/WithScript/ScriptContext.tsx

@@ -3,6 +3,8 @@ import { usePluginData } from '@docusaurus/useGlobalData';
 import { type InitState, type Document } from '@theme/CodeEditor/WithScript/Types';
 import { createStore } from '@theme/CodeEditor/WithScript/createStore';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import CodeBlock from '@theme/CodeBlock';
 export const Context = React.createContext<Document | undefined>(undefined);
 
 const ScriptContext = (props: InitState & { children: React.ReactNode }) => {
@@ -19,11 +21,16 @@ const ScriptContext = (props: InitState & { children: React.ReactNode }) => {
         store.load();
     }, [props.id, libDir, siteConfig]);
 
-    if (!store) {
-        return <div>Load</div>;
-    }
-
-    return <Context.Provider value={store}>{props.children}</Context.Provider>;
+    return (
+        <BrowserOnly fallback={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
+            {() => {
+                if (!store) {
+                    return <CodeBlock language={props.lang}>{props.code}</CodeBlock>;
+                }
+                return <Context.Provider value={store}>{props.children}</Context.Provider>;
+            }}
+        </BrowserOnly>
+    );
 };
 
 export default ScriptContext;

package/src/theme/CodeEditor/index.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeHistory from '@theme/CodeEditor/CodeHistory';
+import CodeBlock from '@theme/CodeBlock';
 
 export interface MetaProps {
     reference?: boolean;
@@ -45,7 +46,7 @@ const CodeEditor = (props: Props) => {
     const store = useStore();
     const lang = useScript(store, 'lang');
     return (
-        <BrowserOnly fallback={<div>Loading...</div>}>
+        <BrowserOnly fallback={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
             {() => {
                 return (
                     <div className={clsx(styles.wrapper, 'notranslate', props.className)}>