docusaurus-live-brython 3.0.0-beta.10 → 3.0.0-beta.4

package/README.md

@@ -1,8 +1,5 @@
 # Docusaurus Live Codeblock for Python
 
-![NPM Version](https://img.shields.io/npm/v/docusaurus-live-brython)
-
-
 > [!NOTE]\
 > This theme works with Docusaurus v3+.
 
@@ -118,13 +115,4 @@ yarn link docusaurus-live-brython
 Then start the website
 ```sh
 yarn run start
-```
-
-### Publish
-
-```bash
-yarn run build
-# when running inside wsl, use --auth=legacy
-npm login --auth=legacy
-npm publish --auth=legacy
 ```

package/lib/theme/CodeBlock/index.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import CodeBlock from '@theme-init/CodeBlock';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import CodeEditor from '@theme/CodeEditor';
-import ScriptContext from '@theme/CodeEditor/WithScript/Store';
+import CodeEditor from '../CodeEditor';
+// import Playground from '@theme-original/Playground';
+// import ReactLiveScope from '@theme-original/ReactLiveScope';
+import ScriptContext from '../CodeEditor/WithScript/Store';
 const sanitizedTitle = (id) => {
     if (!id) {
         return;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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 = () => {
     const { store } = useScript();

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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();
     const isLoaded = useStore(store, (state) => state.isLoaded);

package/lib/theme/CodeEditor/BrythonCommunicator.jsx

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from '../Icon/icons';
 export declare enum Color {
     Primary = "button--primary",
     Secondary = "button--secondary",

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icon from '@theme/CodeEditor/Icon';
+import Icon from '../Icon';
 export var Color;
 (function (Color) {
     Color["Primary"] = "button--primary";

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

@@ -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/WithScript/Store';
+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';
 const highlightSyntax = (str) => {

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

@@ -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/WithScript/Store';
+import { useScript, useStore } from '../WithScript/Store';
 const ALIAS_LANG_MAP_ACE = {
     mpy: 'python',
 };

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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';
 const Header = (props) => {
     const { store } = useScript();
     const hasEdits = useStore(store, (state) => state.hasEdits);

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const Canvas: () => React.JSX.Element;
-export default Canvas;
+declare const CanvasResult: () => React.JSX.Element;
+export default CanvasResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.jsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
-import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
+import { DOM_ELEMENT_IDS } from '../../../constants';
+import GraphicsResult from '.';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Button from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 const downloadCanvas = (canvasId) => {
     const canvas = document.getElementById(canvasId);
     if (!canvas) {
@@ -21,11 +21,11 @@ const downloadCanvas = (canvasId) => {
     downloadLink.click();
     document.body.removeChild(downloadLink);
 };
-const Canvas = () => {
+const CanvasResult = () => {
     const { store } = useScript();
     // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
     const codeId = useStore(store, (state) => state.codeId);
-    return (<Graphics controls={<Button icon='Download' iconSize='12px' onClick={() => {
+    return (<GraphicsResult controls={<Button icon='Download' iconSize='12px' onClick={() => {
                 downloadCanvas(DOM_ELEMENT_IDS.canvasContainer(codeId));
             }} title="Download SVG" className={styles.slimStrippedButton}/>} main={<canvas id={DOM_ELEMENT_IDS.canvasContainer(codeId)} width="500" height="500" style={{
                 display: 'block',
@@ -33,4 +33,4 @@ const Canvas = () => {
                 height: '500px'
             }}></canvas>}/>);
 };
-export default Canvas;
+export default CanvasResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const Turtle: () => React.JSX.Element;
-export default Turtle;
+declare const TurtleResult: () => React.JSX.Element;
+export default TurtleResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.jsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
-import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
-import { saveSvg } from '@theme/CodeEditor/Editor/utils/saveSvg';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Button from '@theme/CodeEditor/Button';
+import { DOM_ELEMENT_IDS } from '../../../constants';
+import GraphicsResult from '.';
+import { saveSvg } from '../../utils/saveSvg';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 import clsx from 'clsx';
-const Turtle = () => {
+const TurtleResult = () => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     const code = useStore(store, (state) => state.code);
-    return (<Graphics controls={<React.Fragment>
+    return (<GraphicsResult controls={<React.Fragment>
                     <Button icon='AnimationPlay' onClick={() => {
                 const turtleResult = document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId));
                 if (turtleResult) {
@@ -25,4 +25,4 @@ const Turtle = () => {
             }} title="Download SVG" className={styles.slimStrippedButton}/>
                 </React.Fragment>}/>);
 };
-export default Turtle;
+export default TurtleResult;

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

@@ -3,5 +3,5 @@ interface Props {
     controls?: JSX.Element;
     main?: JSX.Element;
 }
-declare const Graphics: (props: Props) => React.JSX.Element;
-export default Graphics;
+declare const GraphicsResult: (props: Props) => React.JSX.Element;
+export default GraphicsResult;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '../../../constants';
 import Draggable from 'react-draggable';
-import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Button from '@theme/CodeEditor/Button';
+import { checkForButtonClick } from '../../utils/checkForButtonClick';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 import clsx from 'clsx';
-const Graphics = (props) => {
+const GraphicsResult = (props) => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     return (<Draggable onStop={checkForButtonClick} positionOffset={{ x: 0, y: '-50%' }}>
@@ -26,4 +26,4 @@ const Graphics = (props) => {
             </div>
         </Draggable>);
 };
-export default Graphics;
+export default GraphicsResult;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './styles.module.css';
 // @ts-ignore
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
+import { useScript, useStore } from '../../WithScript/Store';
 const Result = (props) => {
     const { store } = useScript();
     const logs = useStore(store, (state) => state.logs);

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

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { DOM_ELEMENT_IDS, } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Result from "@theme/CodeEditor/Editor/Result";
-import Turtle from "@theme/CodeEditor/Editor/Result/Graphics/Turtle";
-import Canvas from "@theme/CodeEditor/Editor/Result/Graphics/Canvas";
-import Graphics from "@theme/CodeEditor/Editor/Result/Graphics";
-import Header from "@theme/CodeEditor/Editor/Header";
-import EditorAce from "@theme/CodeEditor/Editor/EditorAce";
+import { DOM_ELEMENT_IDS, } from "../constants";
+import { useScript, useStore } from '../WithScript/Store';
+import Result from "./Result";
+import TurtleResult from "./Result/Graphics/Turtle";
+import CanvasResult from "./Result/Graphics/Canvas";
+import GraphicsResult from "./Result/Graphics";
+import Header from "./Header";
+import EditorAce from "./EditorAce";
 const Editor = (props) => {
     const { store } = useScript();
     const lang = useStore(store, (state) => state.lang);
@@ -22,9 +22,9 @@ const Editor = (props) => {
           <Result />
           <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
           {isGraphicsmodalOpen && (<>
-              {hasTurtleOutput && (<Turtle />)}
-              {hasCanvasOutput && (<Canvas />)}
-              {!hasCanvasOutput && !hasTurtleOutput && (<Graphics />)}
+              {hasTurtleOutput && (<TurtleResult />)}
+              {hasCanvasOutput && (<CanvasResult />)}
+              {!hasCanvasOutput && !hasTurtleOutput && (<GraphicsResult />)}
             </>)}
         </>}
     </React.Fragment>);

package/lib/theme/CodeEditor/Editor/utils/saveSvg.js

@@ -1,4 +1,4 @@
-import { removeAnimations } from "@theme/CodeEditor/Editor/utils/svgWithoutAnimations";
+import { removeAnimations } from "./svgWithoutAnimations";
 const duration = (anim) => {
     const dur = anim.getAttribute('dur') || '';
     if (/ms$/.test(dur)) {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from './icons';
 export declare enum Color {
     Primary = "var(--ifm-color-primary)",
     Secondary = "var(--ifm-color-secondary)",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from './icons';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 export var Color;

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

@@ -1,3 +1,3 @@
-import type { StorageSlot, StoredScript } from "@theme/CodeEditor/WithScript/Types";
+import type { StorageSlot, StoredScript } from "./Types";
 export declare const getStorageScript: (storage: StorageSlot) => StoredScript | undefined;
 export declare const syncStorageScript: (script: StoredScript, storage: StorageSlot) => boolean;

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

@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
 import { useSyncExternalStore } from "react";
 import { v4 as uuidv4 } from 'uuid';
-import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "@theme/CodeEditor/WithScript/helpers";
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "./helpers";
 import { ReactContextError, createStorageSlot } from "@docusaurus/theme-common";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
+import { DOM_ELEMENT_IDS } from "../constants";
 import throttle from 'lodash/throttle';
-import { getStorageScript, syncStorageScript } from "@theme/CodeEditor/WithScript/Storage";
+import { getStorageScript, syncStorageScript } from "./Storage";
 import { Status } from "./Types";
 export const createStore = (props, libDir, syncMaxOnceEvery) => {
     const canSave = !!props.id;

package/lib/theme/CodeEditor/index.jsx

@@ -1,11 +1,11 @@
 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/WithScript/Store';
+import { useScript, useStore } from './WithScript/Store';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import CodeHistory from '@theme/CodeEditor/CodeHistory';
+import CodeHistory from './CodeHistory';
 const PyAceEditor = (props) => {
     const { store } = useScript();
     const lang = useStore(store, (state) => state.lang);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-live-brython",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.4",
   "description": "Docusaurus live code block component for python.",
   "publishConfig": {
     "access": "public"
@@ -13,65 +13,11 @@
       "types": "./lib/index.d.ts",
       "default": "./lib/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\"",
+    "build": "tsc --build && node ./bin/copyUntypedFiles.js",
     "watch": "run-p -c copy:watch build:watch",
     "build:watch": "tsc --build --watch",
     "copy:watch": "node ./bin/copyUntypedFiles.js --watch"
@@ -79,11 +25,10 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git://github.com/lebalz/docusaurus-live-brython.git"
+    "url": "git://github.com/lebalz/dokusaurus-live-brython.git"
   },
   "author": "Balthasar Hofer <lebalz@outlook.com>",
-  "bugs": "https://github.com/lebalz/docusaurus-live-brython/issues",
-  "homepage": "https://lebalz.github.io/docusaurus-live-brython/",
+  "bugs": "https://github.com/lebalz/dokusaurus-live-brython/issues",
   "dependencies": {
     "ace-builds": "^1.4.12",
     "clsx": "^2.1.1",
@@ -110,7 +55,6 @@
     "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"
   },

package/src/theme/CodeBlock/index.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import CodeBlock, {type Props as CodeBlockType} from '@theme-init/CodeBlock';
+import { default as ThemeCodeBlock } from '@theme-original/CodeBlock';
+// import CodeBlock from '@theme-original/CodeBlock';
+// import CodeBlockType from '@theme/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 Playground from '@theme-original/Playground';
+// import ReactLiveScope from '@theme-original/ReactLiveScope';
+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/WithScript/Store';
-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/WithScript/Store';
-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,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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/WithScript/Store';
-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/WithScript/Store';
-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',

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/WithScript/Store';
+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/WithScript/Store';
+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,12 +1,12 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-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';
 
 interface Props {
     slim: boolean;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
-import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
+import { DOM_ELEMENT_IDS } from '../../../constants';
+import GraphicsResult from '.';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Button from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 
 const downloadCanvas = (canvasId: string) => {
     const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
@@ -25,13 +25,13 @@ const downloadCanvas = (canvasId: string) => {
     document.body.removeChild(downloadLink);
   };
 
-const Canvas = () => {
+const CanvasResult = () => {
     const { store } = useScript();
     // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
     const codeId = useStore(store, (state) => state.codeId);
 
     return (
-        <Graphics
+        <GraphicsResult
             controls={
                 <Button
                     icon='Download'
@@ -58,4 +58,4 @@ const Canvas = () => {
     )
 };
 
-export default Canvas;
+export default CanvasResult;

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
-import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
-import { saveSvg } from '@theme/CodeEditor/Editor/utils/saveSvg';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Button from '@theme/CodeEditor/Button';
+import { DOM_ELEMENT_IDS } from '../../../constants';
+import GraphicsResult from '.';
+import { saveSvg } from '../../utils/saveSvg';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button, { Color } from '../../../Button';
 import clsx from 'clsx';
 
-const Turtle = () => {
+const TurtleResult = () => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     const code = useStore(store, (state) => state.code);
     return (
-        <Graphics
+        <GraphicsResult
             controls={
                 <React.Fragment>
                     <Button
@@ -45,4 +45,4 @@ const Turtle = () => {
     )
 }
 
-export default Turtle;
+export default TurtleResult;

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '../../../constants';
 import Draggable from 'react-draggable';
-import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Button from '@theme/CodeEditor/Button';
+import { checkForButtonClick } from '../../utils/checkForButtonClick';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 import clsx from 'clsx';
 interface Props {
     controls?: JSX.Element;
     main?: JSX.Element;
 }
-const Graphics = (props: Props) => {
+const GraphicsResult = (props: Props) => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     return (
@@ -44,4 +44,4 @@ const Graphics = (props: Props) => {
     );
 };
 
-export default Graphics;
+export default GraphicsResult;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './styles.module.css';
 // @ts-ignore
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
+import { useScript, useStore } from '../../WithScript/Store';
 
 interface Props {
 }

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

@@ -1,14 +1,16 @@
 import * as React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
 import {
   DOM_ELEMENT_IDS,
-} from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/WithScript/Store';
-import Result from "@theme/CodeEditor/Editor/Result";
-import Turtle from "@theme/CodeEditor/Editor/Result/Graphics/Turtle";
-import Canvas from "@theme/CodeEditor/Editor/Result/Graphics/Canvas";
-import Graphics from "@theme/CodeEditor/Editor/Result/Graphics";
-import Header from "@theme/CodeEditor/Editor/Header";
-import EditorAce from "@theme/CodeEditor/Editor/EditorAce";
+} from "../constants";
+import { useScript, useStore } from '../WithScript/Store';
+import Result from "./Result";
+import TurtleResult from "./Result/Graphics/Turtle";
+import CanvasResult from "./Result/Graphics/Canvas";
+import GraphicsResult from "./Result/Graphics";
+import Header from "./Header";
+import EditorAce from "./EditorAce";
 
 interface Props {
   slim: boolean;
@@ -52,13 +54,13 @@ const Editor = (props: Props) => {
           {isGraphicsmodalOpen && (
             <>
               {hasTurtleOutput && (
-                <Turtle />
+                <TurtleResult />
               )}
               {hasCanvasOutput && (
-                <Canvas />
+                <CanvasResult />
               )}
               {!hasCanvasOutput && !hasTurtleOutput && (
-                <Graphics />
+                <GraphicsResult />
               )}
             </>
           )}
@@ -68,4 +70,4 @@ const Editor = (props: Props) => {
   );
 };
 
-export default Editor;
+export default Editor;

package/src/theme/CodeEditor/Editor/utils/saveSvg.ts

@@ -1,4 +1,4 @@
-import { removeAnimations } from "@theme/CodeEditor/Editor/utils/svgWithoutAnimations";
+import { removeAnimations } from "./svgWithoutAnimations";
 
 const duration = (anim: SVGAnimateElement) => {
   const dur = anim.getAttribute('dur') || '';

package/src/theme/CodeEditor/Editor/utils/svgWithoutAnimations.ts

@@ -1,4 +1,4 @@
-import { parse, RootNode, Node } from "svg-parser";
+import { parse, RootNode, ElementNode, Node } from "svg-parser";
 
 const objToAttr = (obj: Object) => {
   return Object.entries(obj || {})

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from './icons';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 

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

@@ -1,4 +1,4 @@
-import type { StorageSlot, StoredScript } from "@theme/CodeEditor/WithScript/Types";
+import type { StorageSlot, StoredScript } from "./Types";
 
 export const getStorageScript = (storage: StorageSlot): StoredScript | undefined => {
     const storedCode = storage.get();

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

@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
 import { useSyncExternalStore } from "react";
 import { v4 as uuidv4 } from 'uuid';
-import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "@theme/CodeEditor/WithScript/helpers";
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "./helpers";
 import { ReactContextError, createStorageSlot } from "@docusaurus/theme-common";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
+import { DOM_ELEMENT_IDS } from "../constants";
 import throttle from 'lodash/throttle';
-import { getStorageScript, syncStorageScript } from "@theme/CodeEditor/WithScript/Storage";
+import { getStorageScript, syncStorageScript } from "./Storage";
 import { type InitState, type LogMessage, type Script, Status, type Store, type StoredScript, type Version } from "./Types";
 export const createStore = (props: InitState, libDir: string, syncMaxOnceEvery: number): Store => {
     const canSave = !!props.id;

package/src/theme/CodeEditor/index.tsx

@@ -1,11 +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/WithScript/Store';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { useScript, useStore } from './WithScript/Store';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import CodeHistory from '@theme/CodeEditor/CodeHistory';
+import CodeHistory from './CodeHistory';
 
 interface Props {
     slim: boolean;
@@ -54,4 +55,3 @@ const PyAceEditor = (props: Props) => {
 };
 
 export default PyAceEditor;
-

package/.prettierrc

@@ -1,9 +0,0 @@
-{
-  "arrowParens": "always",
-  "bracketSpacing": false,
-  "bracketSameLine": true,
-  "printWidth": 80,
-  "proseWrap": "never",
-  "singleQuote": true,
-  "trailingComma": "all"
-}