docusaurus-live-brython 3.0.0-beta.8 → 3.0.1

package/lib/theme/CodeEditor/WithScript/{Store.jsx → createStore.js}

@@ -1,14 +1,12 @@
-import React, { useCallback } from "react";
-import { useSyncExternalStore } from "react";
 import { v4 as uuidv4 } from 'uuid';
-import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "docusaurus-live-brython/theme/CodeEditor/WithScript/helpers";
-import { ReactContextError, createStorageSlot } from "@docusaurus/theme-common";
-import { usePluginData } from "@docusaurus/useGlobalData";
-import { DOM_ELEMENT_IDS } from "docusaurus-live-brython/theme/CodeEditor/constants";
+import { createStorageSlot } from '@docusaurus/theme-common';
+import { getStorageScript, syncStorageScript } from '@theme/CodeEditor/WithScript/Storage';
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput } from '@theme/CodeEditor/WithScript/helpers';
+import { Status } from '@theme/CodeEditor/WithScript/Types';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import throttle from 'lodash/throttle';
-import { getStorageScript, syncStorageScript } from "docusaurus-live-brython/theme/CodeEditor/WithScript/Storage";
-import { Status } from "./Types";
-export const createStore = (props, libDir, syncMaxOnceEvery) => {
+import { runCode } from '@theme/CodeEditor/WithScript/bryRunner';
+export const createStore = (props, libDir, syncMaxOnceEvery, router) => {
     const canSave = !!props.id;
     const id = props.id || uuidv4();
     const codeId = `code.${props.title || props.lang}.${id}`.replace(/(-|\.)/g, '_');
@@ -48,27 +46,34 @@ export const createStore = (props, libDir, syncMaxOnceEvery) => {
             return Status.SUCCESS;
         }
         if (script) {
-            setState((s) => ({ ...s, ...script, ...loadedCode, status: canSave ? Status.SUCCESS : s.status, versionsLoaded: true }));
+            setState((s) => ({
+                ...s,
+                ...script,
+                ...loadedCode,
+                status: canSave ? Status.SUCCESS : s.status,
+                versionsLoaded: true
+            }));
             return Status.SUCCESS;
         }
         setState((s) => ({ ...s, status: canSave ? Status.ERROR : s.status }));
         return Status.ERROR;
     };
-    const prepareCode = (raw, config = {}) => {
-        const { pre, code } = config.codeOnly
-            ? { pre: getPreCode(state.pristineCode).pre, code: raw }
-            : getPreCode(raw);
-        const hasEdits = code !== (config.stateNotInitialized ? getPreCode(props.raw).code : state.pristineCode);
+    const prepareCode = (code, config = {}) => {
+        const hasEdits = code !== (config.stateNotInitialized ? code : state.pristineCode);
         const updatedAt = new Date();
-        const hasCanvasOutput = checkCanvasOutput(raw);
-        const hasTurtleOutput = checkTurtleOutput(raw);
-        const hasGraphicsOutput = checkGraphicsOutput(raw);
+        const allCode = `${props.preCode}\n${code}\n${props.postCode}`;
+        const hasCanvasOutput = checkCanvasOutput(allCode);
+        const hasTurtleOutput = checkTurtleOutput(allCode);
+        const hasGraphicsOutput = checkGraphicsOutput(allCode);
         if (props.versioned && !config.stateNotInitialized) {
-            addVersion({ code: code, createdAt: updatedAt, version: state.versions.length + 1 });
+            addVersion({
+                code: code,
+                createdAt: updatedAt,
+                version: state.versions.length + 1
+            });
         }
         return {
             code: code,
-            preCode: pre,
             hasCanvasOutput: hasCanvasOutput,
             hasTurtleOutput: hasTurtleOutput,
             hasGraphicsOutput: hasGraphicsOutput,
@@ -86,7 +91,12 @@ export const createStore = (props, libDir, syncMaxOnceEvery) => {
             ...data
         }));
         if (props.id) {
-            const toStore = { code: data.code, createdAt: state.createdAt, updatedAt: data.updatedAt, versions: state.versions };
+            const toStore = {
+                code: data.code,
+                createdAt: state.createdAt,
+                updatedAt: data.updatedAt,
+                versions: state.versions
+            };
             if (state.isPasted) {
                 addVersion.flush();
                 if (toStore.versions.length > 0) {
@@ -102,27 +112,12 @@ export const createStore = (props, libDir, syncMaxOnceEvery) => {
         }
     };
     const execScript = () => {
-        const toExec = `${state.code}`;
-        const lineShift = state.preCode.split(/\n/).length;
-        const src = `from brython_runner import run
-run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
-`;
-        if (!window.__BRYTHON__) {
-            alert('Brython not loaded');
-            return;
-        }
-        setState((s) => ({ ...s, isExecuting: true, isGraphicsmodalOpen: state.hasGraphicsOutput }));
-        const active = document.getElementById(DOM_ELEMENT_IDS.communicator(state.codeId));
-        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.
-         */
-        setTimeout(() => {
-            window.__BRYTHON__.runPythonSource(src, {
-                pythonpath: [libDir]
-            });
-        }, 0);
+        setState((s) => ({
+            ...s,
+            isExecuting: true,
+            graphicsModalExecutionNr: state.hasGraphicsOutput ? state.graphicsModalExecutionNr + 1 : 0
+        }));
+        runCode(state.code, state.preCode, state.postCode, codeId, libDir, router);
     };
     const load = async () => {
         return loadData(storage);
@@ -136,7 +131,13 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         setState((s) => ({ ...s, status: canSave ? Status.ERROR : s.status }));
         return Status.ERROR;
     };
-    const set = throttle(_set, syncMaxOnceEvery, { leading: false, trailing: true });
+    const setIsPasted = (isPasted) => {
+        setState((s) => ({ ...s, isPasted: isPasted }));
+    };
+    const set = throttle(_set, syncMaxOnceEvery, {
+        leading: false,
+        trailing: true
+    });
     const _addVersion = (version) => {
         if (!props.versioned || !props.id) {
             return;
@@ -145,7 +146,10 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         versions.push(version);
         setState((s) => ({ ...s, versions: versions }));
     };
-    const addVersion = throttle(_addVersion, syncMaxOnceEvery, { leading: false, trailing: true });
+    const addVersion = throttle(_addVersion, syncMaxOnceEvery, {
+        leading: false,
+        trailing: true
+    });
     const saveNow = async () => {
         addVersion.flush();
         return set.flush();
@@ -154,7 +158,7 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         storage.del();
         return Status.SUCCESS;
     };
-    const codeData = prepareCode(props.raw, { stateNotInitialized: true });
+    const codeData = prepareCode(props.code, { stateNotInitialized: true });
     const setExecuting = (isExecuting) => {
         setState((s) => ({ ...s, isExecuting: isExecuting }));
     };
@@ -165,7 +169,7 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         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));
@@ -181,7 +185,7 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         pristineCode: codeData.code,
         isExecuting: false,
         logs: [],
-        isGraphicsmodalOpen: false,
+        graphicsModalExecutionNr: 0,
         hasEdits: false,
         createdAt: createdAt,
         isLoaded: false,
@@ -189,6 +193,8 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         versions: [],
         versionsLoaded: false,
         isPasted: false,
+        preCode: props.preCode,
+        postCode: props.postCode,
         ...codeData
     };
     const getState = () => state;
@@ -208,6 +214,12 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         setState((s) => ({ ...s, versionsLoaded: true }));
         return Promise.resolve();
     };
+    const setShowRaw = (showRaw) => {
+        setState((s) => ({ ...s, showRaw: showRaw }));
+    };
+    const setStatus = (status) => {
+        setState((s) => ({ ...s, status: status }));
+    };
     return {
         getState,
         setState,
@@ -221,33 +233,9 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         setExecuting,
         stopScript,
         load,
+        setIsPasted,
+        setShowRaw,
+        setStatus,
         loadVersions
     };
 };
-export const useStore = (store, selector) => {
-    return useSyncExternalStore(store.subscribe, useCallback(() => selector(store.getState()), [store, selector]));
-};
-export const Context = React.createContext(undefined);
-const ScriptContext = (props) => {
-    const { libDir, syncMaxOnceEvery } = usePluginData('docusaurus-live-brython');
-    const [store, setStore] = React.useState(null);
-    React.useEffect(() => {
-        const store = createStore(props, libDir, syncMaxOnceEvery);
-        setStore(store);
-        store.load();
-    }, [props.id, libDir]);
-    if (!store) {
-        return <div>Load</div>;
-    }
-    return (<Context.Provider value={{ store: store }}>
-            {props.children}
-        </Context.Provider>);
-};
-export function useScript() {
-    const context = React.useContext(Context);
-    if (context === null) {
-        throw new ReactContextError('ScriptContextProvider', 'The Component must be a child of the CodeContextProvider component');
-    }
-    return context;
-}
-export default ScriptContext;

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

@@ -1,13 +1,10 @@
 export declare const checkGraphicsOutput: (raw: string) => boolean;
 export declare const checkTurtleOutput: (raw: string) => boolean;
 export declare const checkCanvasOutput: (raw: string) => boolean;
-export declare const getPreCode: (rawcode: string) => {
-    pre: string;
-    code: string;
-};
 /**
  * The python script is transformed to a string by embedding it with """ characters.
  * So we must prevent the script itself to contain this sequence of characters.
  * @param {String} script
  */
 export declare const sanitizePyScript: (script: string) => string;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/helpers.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,KAAG,OAOjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,KAAG,OAE/C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,KAAG,OAE/C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,WAE9C,CAAC"}

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

@@ -3,7 +3,10 @@ const GRID_IMPORTS_TESTER = /(^from grid import)|(^import grid)/m;
 const GRAPHICS_OUTPUT_TESTER = /^(SETUP_)?GRAPHICS_OUTPUT\s*=\s*(True|1)/m;
 const CANVAS_OUTPUT_TESTER = /^(SETUP_)?CANVAS_OUTPUT\s*=\s*(True|1)/m;
 export const checkGraphicsOutput = (raw) => {
-    return CANVAS_OUTPUT_TESTER.test(raw) || GRAPHICS_OUTPUT_TESTER.test(raw) || TURTLE_IMPORTS_TESTER.test(raw) || GRID_IMPORTS_TESTER.test(raw);
+    return (CANVAS_OUTPUT_TESTER.test(raw) ||
+        GRAPHICS_OUTPUT_TESTER.test(raw) ||
+        TURTLE_IMPORTS_TESTER.test(raw) ||
+        GRID_IMPORTS_TESTER.test(raw));
 };
 export const checkTurtleOutput = (raw) => {
     return TURTLE_IMPORTS_TESTER.test(raw);
@@ -11,19 +14,6 @@ export const checkTurtleOutput = (raw) => {
 export const checkCanvasOutput = (raw) => {
     return CANVAS_OUTPUT_TESTER.test(raw) || GRID_IMPORTS_TESTER.test(raw);
 };
-export const getPreCode = (rawcode) => {
-    const match = rawcode.match(/\n###\s*PRE.*?\n/);
-    if (match) {
-        return {
-            pre: rawcode.slice(0, match.index || 0),
-            code: rawcode.slice((match.index || 0) + match[0].length)
-        };
-    }
-    return {
-        pre: '',
-        code: rawcode
-    };
-};
 /**
  * The python script is transformed to a string by embedding it with """ characters.
  * So we must prevent the script itself to contain this sequence of characters.

package/lib/theme/CodeEditor/constants.d.ts

@@ -14,3 +14,4 @@ declare const GRID_IMPORTS_TESTER: RegExp;
 declare const GRAPHICS_OUTPUT_TESTER: RegExp;
 declare const CANVAS_OUTPUT_TESTER: RegExp;
 export { DOM_ELEMENT_IDS, BRYTHON_NOTIFICATION_EVENT, CLOSE_TURTLE_MODAL_EVENT, TURTLE_IMPORTS_TESTER, GRAPHICS_OUTPUT_TESTER, CANVAS_OUTPUT_TESTER, GRID_IMPORTS_TESTER, TURTLE3D_IMPORTS_TESTER };
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeEditor/constants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe;2BACM,MAAM;6BACJ,MAAM;wBACX,MAAM;wBACN,MAAM;iCACG,MAAM;8BACT,MAAM;CACnC,CAAC;AAEF,QAAA,MAAM,0BAA0B,eAAe,CAAC;AAChD,QAAA,MAAM,wBAAwB,uBAAuB,CAAC;AACtD,QAAA,MAAM,qBAAqB,QAA4C,CAAC;AACxE,QAAA,MAAM,uBAAuB,QAAgD,CAAC;AAC9E,QAAA,MAAM,mBAAmB,QAAwC,CAAC;AAClE,QAAA,MAAM,sBAAsB,QAA8C,CAAC;AAC3E,QAAA,MAAM,oBAAoB,QAA4C,CAAC;AAEvE,OAAO,EACH,eAAe,EACf,0BAA0B,EAC1B,wBAAwB,EACxB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EAC1B,CAAC"}

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

@@ -0,0 +1,3 @@
+export { useStore as useStore } from '@theme/CodeEditor/hooks/useStore';
+export { useScript as useScript } from '@theme/CodeEditor/hooks/useScript';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC"}

package/lib/theme/CodeEditor/hooks/index.js

@@ -0,0 +1,2 @@
+export { useStore as useStore } from '@theme/CodeEditor/hooks/useStore';
+export { useScript as useScript } from '@theme/CodeEditor/hooks/useScript';

package/lib/theme/CodeEditor/hooks/useScript.d.ts

@@ -0,0 +1,3 @@
+import { type Script, type Document } from '@theme/CodeEditor/WithScript/Types';
+export declare const useScript: <T extends keyof Script>(store: Document, selector: T) => Script[T];
+//# sourceMappingURL=useScript.d.ts.map

package/lib/theme/CodeEditor/hooks/useScript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScript.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useScript.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,MAAM,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAG1F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,MAAM,EAAE,OAAO,QAAQ,EAAE,UAAU,CAAC,KAAG,MAAM,CAAC,CAAC,CAKxF,CAAC"}

package/lib/theme/CodeEditor/hooks/useScript.js

@@ -0,0 +1,4 @@
+import { useCallback, useSyncExternalStore } from 'react';
+export const useScript = (store, selector) => {
+    return useSyncExternalStore(store.subscribe, useCallback(() => store.getState()[selector], [store, selector]));
+};

package/lib/theme/CodeEditor/hooks/useStore.d.ts

@@ -0,0 +1,3 @@
+import { type Document } from '@theme/CodeEditor/WithScript/Types';
+export declare function useStore(): Document;
+//# sourceMappingURL=useStore.d.ts.map

package/lib/theme/CodeEditor/hooks/useStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAInE,wBAAgB,QAAQ,IAAI,QAAQ,CASnC"}

package/lib/theme/CodeEditor/hooks/useStore.js

@@ -0,0 +1,10 @@
+import { Context } from '@theme/CodeEditor/WithScript/ScriptContext';
+import { ReactContextError } from '@docusaurus/theme-common';
+import { useContext } from 'react';
+export function useStore() {
+    const context = useContext(Context);
+    if (context === null) {
+        throw new ReactContextError('ScriptContextProvider', 'The Component must be a child of the ScriptContextProvider component');
+    }
+    return context;
+}

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

@@ -1,8 +1,22 @@
 import * as React from 'react';
-interface Props {
+export interface MetaProps {
+    reference?: boolean;
+    live_jsx?: boolean;
+    live_py?: boolean;
+    id?: string;
+    slim?: boolean;
+    readonly?: boolean;
+    noReset?: boolean;
+    noDownload?: boolean;
+    versioned?: boolean;
+    noHistory?: boolean;
+    noCompare?: boolean;
+    maxLines?: string;
+    title?: string;
+}
+export interface Props {
     slim: boolean;
     readonly: boolean;
-    children: React.ReactNode;
     noCompare: boolean;
     title: string;
     versioned: boolean;
@@ -10,9 +24,14 @@ interface Props {
     download: boolean;
     showLineNumbers: boolean;
     lang: string;
-    precode: string;
+    preCode: string;
+    postCode: string;
+    code: string;
     maxLines?: number;
     noHistory: boolean;
+    className?: string;
+    onChange?: (code: string) => void;
 }
-declare const PyAceEditor: (props: Props) => React.JSX.Element;
-export default PyAceEditor;
+declare const CodeEditor: (props: Props) => React.JSX.Element;
+export default CodeEditor;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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,GAAI,OAAO,KAAK,sBAwB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/theme/CodeEditor/index.jsx

@@ -1,24 +1,25 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import Editor from 'docusaurus-live-brython/theme/CodeEditor/Editor';
-import BrythonCommunicator from 'docusaurus-live-brython/theme/CodeEditor/BrythonCommunicator';
+import Editor from '@theme/CodeEditor/Editor';
+import BrythonCommunicator from '@theme/CodeEditor/BrythonCommunicator';
 import clsx from 'clsx';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import CodeHistory from 'docusaurus-live-brython/theme/CodeEditor/CodeHistory';
-const PyAceEditor = (props) => {
-    const { store } = useScript();
-    const lang = useStore(store, (state) => state.lang);
-    return (<BrowserOnly fallback={<div>Loading...</div>}>
+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={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
             {() => {
-            return (<div className={clsx(styles.wrapper, 'notranslate')}>
-                            <div className={clsx(styles.playgroundContainer, props.slim ? styles.containerSlim : styles.containerBig, 'live_py')}>
-                                <Editor {...props}/>
-                                {!props.noHistory && (<CodeHistory />)}
-                            </div>
-                            {lang === 'python' && <BrythonCommunicator />}
-                        </div>);
+            return (<div className={clsx(styles.wrapper, 'notranslate', props.className)}>
+                        <div className={clsx(styles.playgroundContainer, props.slim ? styles.containerSlim : styles.containerBig, 'live_py')}>
+                            <Editor {...props}/>
+                            {!props.noHistory && <CodeHistory />}
+                        </div>
+                        {lang === 'python' && <BrythonCommunicator />}
+                    </div>);
         }}
         </BrowserOnly>);
 };
-export default PyAceEditor;
+export default CodeEditor;

package/lib/theme/CodeEditor/styles.module.css

@@ -1,43 +1,41 @@
 .containerBig {
-	display: grid;
-	flex-grow: 1;
-	flex-shrink: 1;
-	flex-basis: 250px;
-	grid-template-columns: 100%;
-	grid-template-rows: min-content 1fr min-content;
-	gap: 0px 0px;
-	grid-auto-flow: row;
-	grid-template-areas: 'controls' 'editor' 'result';
+    display: grid;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 250px;
+    grid-template-columns: 100%;
+    grid-template-rows: min-content 1fr min-content;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas: 'controls' 'editor' 'result';
 }
 
 .containerSlim {
-	display: grid;
-	grid-template-columns: 1fr min-content;
-	grid-template-rows: 1fr min-content;
-	gap: 0px 0px;
-	grid-auto-flow: row;
-	grid-template-areas: 'editor controls' 'result result';
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    grid-template-rows: 1fr min-content;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas: 'editor controls' 'result result';
 }
 
-
 .containerSlim .headerButton {
-	z-index: calc(var(--ifm-z-index-fixed) - 2);
-	height: 100%;
-	border-radius: 0px;
-	padding: 2px 6px;
-	margin: 0px;
+    z-index: calc(var(--ifm-z-index-fixed) - 2);
+    height: 100%;
+    border-radius: 0px;
+    padding: 2px 6px;
+    margin: 0px;
 }
 
-
 .wrapper:last-child .playgroundContainer {
-	margin-bottom: inherit;
+    margin-bottom: inherit;
 }
 
 .playgroundContainer {
-	margin-bottom: var(--ifm-leading);
-	border-radius: var(--ifm-global-radius);
-	box-shadow: var(--ifm-global-shadow-lw);
-	overflow: hidden;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
+    margin-bottom: var(--ifm-leading);
+    border-radius: var(--ifm-global-radius);
+    box-shadow: var(--ifm-global-shadow-lw);
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 1;
+}

package/og-image.md

@@ -0,0 +1,23 @@
+# How to OG:Image
+
+- 👉 [https://og-playground.vercel.app/](https://og-playground.vercel.app/)
+- 👉[image2base64](https://www.base64-image.de/)
+
+```tsx
+// Modified based on https://tailwindui.com/components/marketing/sections/cta-sections
+
+<div tw="flex flex-col w-full h-full items-center justify-center bg-white">
+  <div tw="bg-gray-50 flex w-full">
+    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
+      <h2 tw="flex flex-col text-3xl sm:text-8xl font-bold tracking-tight text-gray-900 text-left">
+        <span tw="text-blue-500">Live</span>
+        <span tw="text-blue-600">Interactive</span>
+        <span tw="text-blue-700">Brython!</span>
+      </h2>
+      <div tw="flex" style={{marginBottom: '1em'}}>
+        <img height="560" src="...bas64...." />
+      </div>
+    </div>
+  </div>
+</div>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-live-brython",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.1",
   "description": "Docusaurus live code block component for python.",
   "publishConfig": {
     "access": "public"
@@ -13,6 +13,14 @@
       "types": "./lib/index.d.ts",
       "default": "./lib/index.js"
     },
+    "./theme/CodeEditor/hooks": {
+      "types": "./lib/theme/CodeEditor/hooks/index.d.ts",
+      "default": "./lib/theme/CodeEditor/hooks/index.js"
+    },
+    "./theme/CodeEditor/ContextEditor": {
+      "types": "./lib/theme/CodeEditor/ContextEditor/index.d.ts",
+      "default": "./lib/theme/CodeEditor/ContextEditor/index.jsx"
+    },
     "./theme/CodeEditor/Editor": {
       "types": "./lib/theme/CodeEditor/Editor/index.d.ts",
       "default": "./lib/theme/CodeEditor/Editor/index.jsx"
@@ -33,6 +41,10 @@
       "types": "./lib/theme/CodeEditor/CodeHistory/index.d.ts",
       "default": "./lib/theme/CodeEditor/CodeHistory/index.jsx"
     },
+    "./theme/CodeEditor/HiddenCode": {
+      "types": "./lib/theme/CodeEditor/HiddenCode/index.d.ts",
+      "default": "./lib/theme/CodeEditor/HiddenCode/index.jsx"
+    },
     "./theme/CodeEditor/Icon": {
       "types": "./lib/theme/CodeEditor/Icon/index.d.ts",
       "default": "./lib/theme/CodeEditor/Icon/index.jsx"
@@ -57,6 +69,10 @@
       "types": "./lib/theme/CodeEditor/Editor/utils/*.d.ts",
       "default": "./lib/theme/CodeEditor/Editor/utils/*.js"
     },
+    "./theme/CodeEditor/WithScript/Store": {
+      "types": "./lib/theme/CodeEditor/WithScript/Store.d.ts",
+      "default": "./lib/theme/CodeEditor/WithScript/Store.jsx"
+    },
     "./theme/CodeEditor/WithScript/*": {
       "types": "./lib/theme/CodeEditor/WithScript/*.d.ts",
       "default": "./lib/theme/CodeEditor/WithScript/*.js"
@@ -70,7 +86,9 @@
     "build": "tsc --build && node ./bin/copyUntypedFiles.js && prettier --config ./.prettierrc --write \"lib/theme/**/*.js\"",
     "watch": "run-p -c copy:watch build:watch",
     "build:watch": "tsc --build --watch",
-    "copy:watch": "node ./bin/copyUntypedFiles.js --watch"
+    "copy:watch": "node ./bin/copyUntypedFiles.js --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "license": "MIT",
   "repository": {
@@ -81,23 +99,27 @@
   "bugs": "https://github.com/lebalz/docusaurus-live-brython/issues",
   "homepage": "https://lebalz.github.io/docusaurus-live-brython/",
   "dependencies": {
-    "ace-builds": "^1.4.12",
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
+    "@docusaurus/theme-classic": "^3.9.2",
+    "@docusaurus/theme-common": "^3.9.2",
+    "@docusaurus/theme-translations": "^3.9.2",
+    "@docusaurus/utils-validation": "^3.9.2",
+    "ace-builds": "^1.34.2",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
+    "prism-react-renderer": "^2.3.1",
     "rc-slider": "^10.6.2",
-    "react-ace": "^9.4.3",
-    "react-diff-viewer": "^3.1.1",
-    "react-draggable": "^4.4.3",
+    "react-ace": "^11.0.1",
+    "react-diff-viewer-continued": "^3.4.0",
+    "react-draggable": "^4.4.6",
     "svg-parser": "^2.0.4",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@docusaurus/core": "^3.3.2",
-    "@docusaurus/module-type-aliases": "^3.3.2",
-    "@docusaurus/theme-classic": "^3.3.2",
-    "@docusaurus/theme-common": "^3.3.2",
-    "@docusaurus/tsconfig": "^3.3.2",
-    "@docusaurus/types": "^3.3.2",
+    "@docusaurus/module-type-aliases": "^3.9.2",
+    "@docusaurus/tsconfig": "^3.9.2",
+    "@docusaurus/types": "^3.9.2",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.4",
     "@types/svg-parser": "^2.0.6",
@@ -106,17 +128,14 @@
     "concurrently": "^8.2.2",
     "fs-extra": "^11.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5",
-    "prism-react-renderer": "^2.3.1",
-    "typescript": "^5.4.2"
+    "prettier": "^3.3.3",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^3.3.2",
-    "@docusaurus/theme-common": "^3.3.2",
-    "prism-react-renderer": "^2.1",
-    "webpack": "^5.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "engines": {
     "node": ">=18"
   }
-}
+}