docusaurus-live-brython 3.0.0-beta.24 → 3.0.0-beta.26

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## Version 3.0.0beta.25
+- Breaking: Renamed `isGraphicsmodalOpen` to `graphicsModalExecutionNr` and changing it's type from `boolean` to `number`.
+  This fixes an issue that caused the Turtle Output to display the first animation instead of the current created one, when the user kept the graphics modal open while changing the code. 

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,CA2BlE"}

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 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>);
+        return (<BrowserOnly fallback={<CodeBlock {...props}/>}>
+                {() => {
+                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/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,sBA2B7B,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/Editor/Result/Graphics/index.jsx

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 const Graphics = (props) => {
     const store = useStore();
     const codeId = useScript(store, 'codeId');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
     const nodeRef = React.useRef(null);
     return (<Draggable onStop={checkForButtonClick} positionOffset={{ x: '15%', y: '25%' }} nodeRef={nodeRef}>
             <div className={styles.brythonGraphicsResult} ref={nodeRef}>
@@ -21,7 +22,7 @@ const Graphics = (props) => {
             store.closeGraphicsModal();
         }} iconSize="12px"/>
                 </div>
-                <div id={DOM_ELEMENT_IDS.graphicsResult(codeId)} className="brython-graphics-result">
+                <div id={DOM_ELEMENT_IDS.graphicsResult(codeId)} className="brython-graphics-result" key={`exec-${graphicsModalExecutionNr}`}>
                     {props.main}
                 </div>
             </div>

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

@@ -16,7 +16,7 @@ const Editor = (props) => {
     const codeId = useScript(store, 'codeId');
     const hasCanvasOutput = useScript(store, 'hasCanvasOutput');
     const hasTurtleOutput = useScript(store, 'hasTurtleOutput');
-    const isGraphicsmodalOpen = useScript(store, 'isGraphicsmodalOpen');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
     return (<React.Fragment>
             <Header slim={props.slim} title={props.title} resettable={props.resettable} download={props.download} noCompare={props.noCompare}/>
             <div className={clsx(styles.editorContainer)}>
@@ -27,7 +27,7 @@ const Editor = (props) => {
             {lang === 'python' && (<>
                     <Result />
                     <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
-                    {isGraphicsmodalOpen && (<>
+                    {graphicsModalExecutionNr > 0 && (<>
                             {hasTurtleOutput && <Turtle />}
                             {hasCanvasOutput && <Canvas />}
                             {!hasCanvasOutput && !hasTurtleOutput && <Graphics />}

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 <div>Load</div>;
+            }
+            return <Context.Provider value={store}>{props.children}</Context.Provider>;
+        }}
+        </BrowserOnly>);
 };
 export default ScriptContext;

package/lib/theme/CodeEditor/WithScript/Types.d.ts

@@ -31,7 +31,7 @@ export interface Script extends StoredScript {
     postCode: string;
     lang: 'py' | string;
     logs: LogMessage[];
-    isGraphicsmodalOpen: boolean;
+    graphicsModalExecutionNr: number;
     hasGraphicsOutput: boolean;
     hasTurtleOutput: boolean;
     hasCanvasOutput: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/Types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAC;CACvB;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AAC7C,MAAM,WAAW,MAAO,SAAQ,YAAY;IACxC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG;IACtB,GAAG,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;CACnE,CAAC;AAEF,oBAAY,MAAM;IACd,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACtB;AAED,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,MAAM;IAChC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IACvE,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5B,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC"}
+{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/Types.ts"],"names":[],"mappings":"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"}

package/lib/theme/CodeEditor/WithScript/createStore.js

@@ -115,7 +115,7 @@ export const createStore = (props, libDir, syncMaxOnceEvery, router) => {
         setState((s) => ({
             ...s,
             isExecuting: true,
-            isGraphicsmodalOpen: state.hasGraphicsOutput
+            graphicsModalExecutionNr: state.hasGraphicsOutput ? state.graphicsModalExecutionNr + 1 : 0
         }));
         runCode(state.code, state.preCode, state.postCode, codeId, libDir, router);
     };
@@ -169,7 +169,7 @@ export const createStore = (props, libDir, syncMaxOnceEvery, router) => {
         setState((s) => ({ ...s, logs: [] }));
     };
     const closeGraphicsModal = () => {
-        setState((s) => ({ ...s, isGraphicsmodalOpen: false }));
+        setState((s) => ({ ...s, graphicsModalExecutionNr: 0 }));
     };
     const stopScript = () => {
         const code = document.getElementById(DOM_ELEMENT_IDS.communicator(state.codeId));
@@ -185,7 +185,7 @@ export const createStore = (props, libDir, syncMaxOnceEvery, router) => {
         pristineCode: codeData.code,
         isExecuting: false,
         logs: [],
-        isGraphicsmodalOpen: false,
+        graphicsModalExecutionNr: 0,
         hasEdits: false,
         createdAt: createdAt,
         isLoaded: false,

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.24",
+  "version": "3.0.0-beta.26",
   "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 BrowserOnly from '@docusaurus/BrowserOnly';
 
 type Props = WrapperProps<typeof CodeBlockType>;
 
@@ -55,15 +55,20 @@ 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;
         return (
-            <ContextEditor {...props} {...metaProps} title={sanitizedTitle(title) || lang}>
-                {props.children}
-            </ContextEditor>
+            <BrowserOnly fallback={<CodeBlock {...props} />}>
+                {() => {
+                    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/Editor/Result/Graphics/index.tsx

@@ -13,6 +13,7 @@ export interface Props {
 const Graphics = (props: Props) => {
     const store = useStore();
     const codeId = useScript(store, 'codeId');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
     const nodeRef = React.useRef(null);
     return (
         <Draggable onStop={checkForButtonClick} positionOffset={{ x: '15%', y: '25%' }} nodeRef={nodeRef}>
@@ -31,7 +32,11 @@ const Graphics = (props: Props) => {
                         iconSize="12px"
                     />
                 </div>
-                <div id={DOM_ELEMENT_IDS.graphicsResult(codeId)} className="brython-graphics-result">
+                <div
+                    id={DOM_ELEMENT_IDS.graphicsResult(codeId)}
+                    className="brython-graphics-result"
+                    key={`exec-${graphicsModalExecutionNr}`}
+                >
                     {props.main}
                 </div>
             </div>

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

@@ -32,7 +32,7 @@ const Editor = (props: Props) => {
     const codeId = useScript(store, 'codeId');
     const hasCanvasOutput = useScript(store, 'hasCanvasOutput');
     const hasTurtleOutput = useScript(store, 'hasTurtleOutput');
-    const isGraphicsmodalOpen = useScript(store, 'isGraphicsmodalOpen');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
 
     return (
         <React.Fragment>
@@ -57,7 +57,7 @@ const Editor = (props: Props) => {
                 <>
                     <Result />
                     <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
-                    {isGraphicsmodalOpen && (
+                    {graphicsModalExecutionNr > 0 && (
                         <>
                             {hasTurtleOutput && <Turtle />}
                             {hasCanvasOutput && <Canvas />}

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 <div>Load</div>;
+                }
+                return <Context.Provider value={store}>{props.children}</Context.Provider>;
+            }}
+        </BrowserOnly>
+    );
 };
 
 export default ScriptContext;

package/src/theme/CodeEditor/WithScript/Types.ts

@@ -33,7 +33,7 @@ export interface Script extends StoredScript {
     postCode: string;
     lang: 'py' | string;
     logs: LogMessage[];
-    isGraphicsmodalOpen: boolean;
+    graphicsModalExecutionNr: number;
     hasGraphicsOutput: boolean;
     hasTurtleOutput: boolean;
     hasCanvasOutput: boolean;

package/src/theme/CodeEditor/WithScript/bryRunner.ts

@@ -23,7 +23,7 @@ export const runCode = (
         return;
     }
     const active = document.getElementById(DOM_ELEMENT_IDS.communicator(codeId));
-    active.setAttribute('data--start-time', `${Date.now()}`);
+    active!.setAttribute('data--start-time', `${Date.now()}`);
     /**
      * ensure that the script is executed after the current event loop.
      * Otherwise, the brython script will not be able to access the graphics output.

package/src/theme/CodeEditor/WithScript/createStore.ts

@@ -139,7 +139,7 @@ export const createStore = (
         setState((s) => ({
             ...s,
             isExecuting: true,
-            isGraphicsmodalOpen: state.hasGraphicsOutput
+            graphicsModalExecutionNr: state.hasGraphicsOutput ? state.graphicsModalExecutionNr + 1 : 0
         }));
         runCode(state.code, state.preCode, state.postCode, codeId, libDir, router);
     };
@@ -200,7 +200,7 @@ export const createStore = (
         setState((s) => ({ ...s, logs: [] }));
     };
     const closeGraphicsModal = () => {
-        setState((s) => ({ ...s, isGraphicsmodalOpen: false }));
+        setState((s) => ({ ...s, graphicsModalExecutionNr: 0 }));
     };
     const stopScript = () => {
         const code = document.getElementById(DOM_ELEMENT_IDS.communicator(state.codeId));
@@ -216,7 +216,7 @@ export const createStore = (
         pristineCode: codeData.code,
         isExecuting: false,
         logs: [],
-        isGraphicsmodalOpen: false,
+        graphicsModalExecutionNr: 0,
         hasEdits: false,
         createdAt: createdAt,
         isLoaded: false,

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)}>