docusaurus-live-brython 3.0.0-beta.11 → 3.0.0-beta.5

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

@@ -1,6 +1,232 @@
-import React from "react";
+import React, { useCallback } from "react";
+import { useSyncExternalStore } from "react";
+import { v4 as uuidv4 } from 'uuid';
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "./helpers";
+import { ReactContextError, createStorageSlot } from "@docusaurus/theme-common";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { createStore } from "@theme/CodeEditor/WithScript/createStore";
+import { DOM_ELEMENT_IDS } from "../constants";
+import throttle from 'lodash/throttle';
+import { getStorageScript, syncStorageScript } from "./Storage";
+import { Status } from "./Types";
+export const createStore = (props, libDir, syncMaxOnceEvery) => {
+    const canSave = !!props.id;
+    const id = props.id || uuidv4();
+    const codeId = `code.${props.title || props.lang}.${id}`.replace(/(-|\.)/g, '_');
+    const createdAt = new Date();
+    const storageKey = `code.${props.title || 'code_block'}.${id}`;
+    const storage = createStorageSlot(storageKey);
+    storage.listen((e) => {
+        if (e.key === storageKey) {
+            try {
+                if (e.newValue) {
+                    const script = JSON.parse(e.newValue);
+                    if (new Date(script.updatedAt) > state.updatedAt) {
+                        loadData(storage);
+                    }
+                }
+            }
+            catch (err) {
+                console.warn(err);
+            }
+        }
+    });
+    const loadData = (store) => {
+        setState((s) => ({ ...s, status: canSave ? Status.SYNCING : s.status }));
+        const script = getStorageScript(store);
+        const loadedCode = script?.code ? prepareCode(script.code, { codeOnly: true }) : {};
+        addVersion.cancel();
+        if (!state.isLoaded) {
+            setState((s) => ({
+                ...s,
+                isLoaded: true,
+                ...(script || {}),
+                ...loadedCode,
+                versions: script?.versions || [],
+                versionsLoaded: true,
+                status: canSave ? Status.SUCCESS : s.status
+            }));
+            return Status.SUCCESS;
+        }
+        if (script) {
+            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 updatedAt = new Date();
+        const hasCanvasOutput = checkCanvasOutput(raw);
+        const hasTurtleOutput = checkTurtleOutput(raw);
+        const hasGraphicsOutput = checkGraphicsOutput(raw);
+        if (props.versioned && !config.stateNotInitialized) {
+            addVersion({ code: code, createdAt: updatedAt, version: state.versions.length + 1 });
+        }
+        return {
+            code: code,
+            preCode: pre,
+            hasCanvasOutput: hasCanvasOutput,
+            hasTurtleOutput: hasTurtleOutput,
+            hasGraphicsOutput: hasGraphicsOutput,
+            hasEdits: hasEdits,
+            updatedAt: updatedAt
+        };
+    };
+    const setCode = (raw, action) => {
+        if (state.isPasted && action === 'remove') {
+            return;
+        }
+        const data = prepareCode(raw);
+        setState((state) => ({
+            ...state,
+            ...data
+        }));
+        if (props.id) {
+            const toStore = { code: data.code, createdAt: state.createdAt, updatedAt: data.updatedAt, versions: state.versions };
+            if (state.isPasted) {
+                addVersion.flush();
+                if (toStore.versions.length > 0) {
+                    toStore.versions[toStore.versions.length - 1].pasted = true;
+                }
+                set(toStore);
+                set.flush();
+                state.isPasted = false;
+            }
+            else {
+                set(toStore);
+            }
+        }
+    };
+    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);
+    };
+    const load = async () => {
+        return loadData(storage);
+    };
+    const _set = async (script) => {
+        setState((s) => ({ ...s, status: canSave ? Status.SYNCING : s.status }));
+        if (syncStorageScript(script, storage)) {
+            setState((s) => ({ ...s, status: canSave ? Status.SUCCESS : s.status }));
+            return Status.SUCCESS;
+        }
+        setState((s) => ({ ...s, status: canSave ? Status.ERROR : s.status }));
+        return Status.ERROR;
+    };
+    const set = throttle(_set, syncMaxOnceEvery, { leading: false, trailing: true });
+    const _addVersion = (version) => {
+        if (!props.versioned || !props.id) {
+            return;
+        }
+        const versions = [...state.versions];
+        versions.push(version);
+        setState((s) => ({ ...s, versions: versions }));
+    };
+    const addVersion = throttle(_addVersion, syncMaxOnceEvery, { leading: false, trailing: true });
+    const saveNow = async () => {
+        addVersion.flush();
+        return set.flush();
+    };
+    const del = async () => {
+        storage.del();
+        return Status.SUCCESS;
+    };
+    const codeData = prepareCode(props.raw, { stateNotInitialized: true });
+    const setExecuting = (isExecuting) => {
+        setState((s) => ({ ...s, isExecuting: isExecuting }));
+    };
+    const addLogMessage = (log) => {
+        setState((s) => ({ ...s, logs: [...s.logs, log] }));
+    };
+    const clearLogMessages = () => {
+        setState((s) => ({ ...s, logs: [] }));
+    };
+    const closeGraphicsModal = () => {
+        setState((s) => ({ ...s, isGraphicsmodalOpen: false }));
+    };
+    const stopScript = () => {
+        const code = document.getElementById(DOM_ELEMENT_IDS.communicator(state.codeId));
+        if (code) {
+            code.removeAttribute('data--start-time');
+        }
+    };
+    let state = {
+        id: id,
+        codeId: codeId,
+        lang: props.lang,
+        showRaw: false,
+        pristineCode: codeData.code,
+        isExecuting: false,
+        logs: [],
+        isGraphicsmodalOpen: false,
+        hasEdits: false,
+        createdAt: createdAt,
+        isLoaded: false,
+        status: Status.IDLE,
+        versions: [],
+        versionsLoaded: false,
+        isPasted: false,
+        ...codeData
+    };
+    const getState = () => state;
+    const listeners = new Set();
+    const setState = (fn) => {
+        state = fn(state);
+        listeners.forEach((l) => l());
+    };
+    const subscribe = (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    };
+    const loadVersions = async () => {
+        // noop
+        state.isLoaded = false;
+        load();
+        setState((s) => ({ ...s, versionsLoaded: true }));
+        return Promise.resolve();
+    };
+    return {
+        getState,
+        setState,
+        subscribe,
+        saveNow,
+        addLogMessage,
+        clearLogMessages,
+        closeGraphicsModal,
+        setCode,
+        execScript,
+        setExecuting,
+        stopScript,
+        load,
+        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');
@@ -17,4 +243,11 @@ const ScriptContext = (props) => {
             {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/Types.d.ts

@@ -10,7 +10,6 @@ export interface StoredScript {
     updatedAt: Date;
     versions: Version[];
 }
-export type Selector<T, R> = (state: T) => R;
 export interface Script extends StoredScript {
     /**
      * this is normally a uuid

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface Props {
+interface Props {
     slim: boolean;
     readonly: boolean;
     children: React.ReactNode;
@@ -14,5 +14,5 @@ export interface Props {
     maxLines?: number;
     noHistory: boolean;
 }
-declare const CodeEditor: (props: Props) => React.JSX.Element;
-export default CodeEditor;
+declare const PyAceEditor: (props: Props) => React.JSX.Element;
+export default PyAceEditor;

package/lib/theme/CodeEditor/index.jsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import Editor from '@theme/CodeEditor/Editor';
-import BrythonCommunicator from '@theme/CodeEditor/BrythonCommunicator';
+import Editor from './Editor';
+import BrythonCommunicator from './BrythonCommunicator';
 import clsx from 'clsx';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useScript, useStore } from './WithScript/Store';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import CodeHistory from '@theme/CodeEditor/CodeHistory';
-const CodeEditor = (props) => {
+import CodeHistory from './CodeHistory';
+const PyAceEditor = (props) => {
     const { store } = useScript();
     const lang = useStore(store, (state) => state.lang);
     return (<BrowserOnly fallback={<div>Loading...</div>}>
@@ -21,4 +21,4 @@ const CodeEditor = (props) => {
         }}
         </BrowserOnly>);
 };
-export default CodeEditor;
+export default PyAceEditor;

package/lib/types.d.ts

@@ -0,0 +1,28 @@
+export type ThemeOptions = {
+    /**
+     * The path to the brython source file.
+     * @default 'https://raw.githack.com/brython-dev/brython/master/www/src/brython.js
+     */
+    brython_src?: string;
+    /**
+     * The path to the brython standard library source file.
+     * @default 'https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js'
+     */
+    brython_stdlib_src?: string;
+    /**
+     * The folder path to brython specific libraries.
+     * When a python file imports a module, the module is searched in the libDir directory.
+     * By default, the libDir is created in the static folder and the needed python files are copied there.
+     * This can be changed by setting skipCopyAssetsToLibDir to true and setting libDir to a custom path.
+     * Make sure to copy the needed python files to the custom libDir.
+     * @default '/bry-libs/'
+     */
+    libDir?: string;
+    /**
+     * Skip copying the brython specific libraries to the libDir.
+     * Make sure to copy the needed python files to the custom libDir yourself.
+     * @ref [needed python files](https://github.com/lebalz/docusaurus-live-brython/tree/main/src/assets)
+     * @default false
+     */
+    skipCopyAssetsToLibDir?: boolean;
+};

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-live-brython",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.5",
   "description": "Docusaurus live code block component for python.",
   "publishConfig": {
     "access": "public"
@@ -13,66 +13,8 @@
       "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/Editor": {
-      "types": "./lib/theme/CodeEditor/Editor/index.d.ts",
-      "default": "./lib/theme/CodeEditor/Editor/index.jsx"
-    },
-    "./theme/CodeEditor/Editor/Result": {
-      "types": "./lib/theme/CodeEditor/Editor/Result/index.d.ts",
-      "default": "./lib/theme/CodeEditor/Editor/Result/index.jsx"
-    },
-    "./theme/CodeEditor/Editor/Header": {
-      "types": "./lib/theme/CodeEditor/Editor/Header/index.d.ts",
-      "default": "./lib/theme/CodeEditor/Editor/Header/index.jsx"
-    },
-    "./theme/CodeEditor/Editor/Result/Graphics": {
-      "types": "./lib/theme/CodeEditor/Editor/Result/Graphics/index.d.ts",
-      "default": "./lib/theme/CodeEditor/Editor/Result/Graphics/index.jsx"
-    },
-    "./theme/CodeEditor/CodeHistory": {
-      "types": "./lib/theme/CodeEditor/CodeHistory/index.d.ts",
-      "default": "./lib/theme/CodeEditor/CodeHistory/index.jsx"
-    },
-    "./theme/CodeEditor/Icon": {
-      "types": "./lib/theme/CodeEditor/Icon/index.d.ts",
-      "default": "./lib/theme/CodeEditor/Icon/index.jsx"
-    },
-    "./theme/CodeEditor/Button": {
-      "types": "./lib/theme/CodeEditor/Button/index.d.ts",
-      "default": "./lib/theme/CodeEditor/Button/index.jsx"
-    },
-    "./theme/CodeEditor/constants": {
-      "types": "./lib/theme/CodeEditor/constants.d.ts",
-      "default": "./lib/theme/CodeEditor/constants.js"
-    },
-    "./theme/CodeEditor/Icon/icons": {
-      "types": "./lib/theme/CodeEditor/Icon/icons.d.ts",
-      "default": "./lib/theme/CodeEditor/Icon/icons.js"
-    },
-    "./theme/CodeEditor": {
-      "types": "./lib/theme/CodeEditor/index.d.ts",
-      "default": "./lib/theme/CodeEditor/index.jsx"
-    },
-    "./theme/CodeEditor/Editor/utils/*": {
-      "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"
-    },
-    "./theme/CodeEditor/*": {
-      "types": "./lib/theme/CodeEditor/*.d.ts",
-      "default": "./lib/theme/CodeEditor/*.jsx"
-    }
+    "./lib/*": "./lib/*",
+    "./src/*": "./src/*"
   },
   "scripts": {
     "build": "tsc --build && node ./bin/copyUntypedFiles.js && prettier --config ./.prettierrc --write \"lib/theme/**/*.js\"",
@@ -89,26 +31,23 @@
   "bugs": "https://github.com/lebalz/docusaurus-live-brython/issues",
   "homepage": "https://lebalz.github.io/docusaurus-live-brython/",
   "dependencies": {
-    "@docusaurus/core": "3.3.2",
-    "@docusaurus/theme-classic": "3.3.2",
-    "@docusaurus/theme-common": "3.3.2",
-    "@docusaurus/theme-translations": "3.3.2",
-    "@docusaurus/utils-validation": "3.3.2",
-    "ace-builds": "^1.34.2",
+    "ace-builds": "^1.4.12",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
-    "prism-react-renderer": "^2.3.1",
     "rc-slider": "^10.6.2",
-    "react-ace": "^11.0.1",
+    "react-ace": "^9.4.3",
     "react-diff-viewer": "^3.1.1",
-    "react-draggable": "^4.4.6",
+    "react-draggable": "^4.4.3",
     "svg-parser": "^2.0.4",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.3.2",
-    "@docusaurus/tsconfig": "3.3.2",
-    "@docusaurus/types": "3.3.2",
+    "@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",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.4",
     "@types/svg-parser": "^2.0.6",
@@ -118,7 +57,14 @@
     "fs-extra": "^11.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.5"
+    "prism-react-renderer": "^2.3.1",
+    "typescript": "^5.4.2"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^3.3.2",
+    "@docusaurus/theme-common": "^3.3.2",
+    "prism-react-renderer": "^2.1",
+    "webpack": "^5.0.0"
   },
   "engines": {
     "node": ">=18"

package/src/index.ts

@@ -14,7 +14,6 @@
  * 
  */
 
-import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 import type { HtmlTags, LoadContext, Plugin } from '@docusaurus/types';
 // eslint-disable-next-line import/no-extraneous-dependencies, import/order
 import logger from '@docusaurus/logger';
@@ -31,9 +30,6 @@ const theme: Plugin<{ remoteHeadTags: HtmlTags[] }> = (
     context: LoadContext,
     options: ThemeOptions,
 ) => {
-    const {
-      i18n: {currentLocale},
-    } = context;
     const libDir = options.libDir || DEFAULT_LIB_DIR;
     return {
         name: NAME,
@@ -53,12 +49,6 @@ const theme: Plugin<{ remoteHeadTags: HtmlTags[] }> = (
                 }
             }
         },
-        getDefaultCodeTranslationMessages() {
-          return readDefaultCodeTranslationMessages({
-            locale: currentLocale,
-            name: NAME,
-          });
-        },
         async contentLoaded({ content, actions }) {
             const { setGlobalData } = actions;
             const libDir = (options.libDir || DEFAULT_LIB_DIR).replace(/(\/|\\)/g, '');

package/src/theme/CodeBlock/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import CodeBlock, {type Props as CodeBlockType} from '@theme-init/CodeBlock';
+// @ts-ignore
 import type { WrapperProps } from '@docusaurus/types';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import CodeEditor from '@theme/CodeEditor';
+import CodeEditor from '../CodeEditor';
 
-import ScriptContext from '@theme/CodeEditor/WithScript/Store';
+import ScriptContext from '../CodeEditor/WithScript/Store';
 
 
 type Props = WrapperProps<typeof CodeBlockType>;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button, { Color } from '../Button';
 import { translate } from '@docusaurus/Translate';
 
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button, { Color } from '../Button';
 import { translate } from '@docusaurus/Translate';
 
 const Reset = () => {

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button, { Color } from '../Button';
 import { translate } from '@docusaurus/Translate';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 
-export interface Props {
+interface Props {
     title: string;
     slim: boolean;
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button, { Color } from '../Button';
 import { translate } from '@docusaurus/Translate';
 
 const ShowRaw = () => {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Icon, { Color } from '@theme/CodeEditor/Icon';
-import { Status } from '@theme/CodeEditor/WithScript/Types';
+import { useScript, useStore } from '../WithScript/Store';
+import Icon, { Color } from '../Icon';
+import { Status } from '../WithScript/Types';
 
 const ShowSyncStatus = () => {
     const { store } = useScript();

package/src/theme/CodeEditor/BrythonCommunicator.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import { type LogMessage } from '@theme/CodeEditor/WithScript/Types';
+import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "./constants";
+import { useScript, useStore } from './WithScript/Store';
+import { type LogMessage } from './WithScript/Types';
 
 const BrythonCommunicator = () => {
     const { store } = useScript();

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from '../Icon/icons';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icon from '@theme/CodeEditor/Icon';
+import Icon from '../Icon';
 
 export enum Color {
     Primary = 'button--primary',
@@ -18,7 +18,7 @@ export enum Size {
     Large = 'button--lg',
 }
 
-export interface Props {
+interface Props {
     icon: keyof typeof Icons;
     title?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;

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

@@ -4,9 +4,9 @@ import styles from './styles.module.css';
 import { Prism } from 'prism-react-renderer';
 import Slider from 'rc-slider';
 import 'rc-slider/assets/index.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useScript, useStore } from '../WithScript/Store';
 import Translate, { translate } from '@docusaurus/Translate';
-import Button from '@theme/CodeEditor/Button';
+import Button from '../Button';
 import DiffViewer from 'react-diff-viewer';
 import Details from '@theme/Details';
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '../constants';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-python';
@@ -10,7 +10,7 @@ import 'ace-builds/src-noconflict/mode-svg';
 import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/webpack-resolver';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useScript, useStore } from '../WithScript/Store';
 // import 'ace-builds/src-noconflict/theme-textmate';
 // import('ace-builds/src-noconflict/snippets/python'),
 

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import ShowSyncStatus from '@theme/CodeEditor/Actions/ShowSyncStatus';
-import Reset from '@theme/CodeEditor/Actions/Reset';
-import DownloadCode from '@theme/CodeEditor/Actions/DownloadCode';
-import ShowRaw from '@theme/CodeEditor/Actions/ShowRaw';
-import RunCode from '@theme/CodeEditor/Actions/RunCode';
+import { useScript, useStore } from '../../WithScript/Store';
+import ShowSyncStatus from '../../Actions/ShowSyncStatus';
+import Reset from '../../Actions/Reset';
+import DownloadCode from '../../Actions/DownloadCode';
+import ShowRaw from '../../Actions/ShowRaw';
+import RunCode from '../../Actions/RunCode';
 
-export interface Props {
+interface Props {
     slim: boolean;
     title: string;
     resettable: boolean;