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

package/src/theme/CodeEditor/Editor/Header/styles.module.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     letter-spacing: 0.08em;
-    
+
     z-index: calc(var(--ifm-z-index-fixed) - 2);
     padding: 0.2em;
     padding-left: 0.5em;
@@ -15,13 +15,13 @@
 }
 
 .controls > .title {
-	flex-shrink: 1;
-	flex-grow: 1;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    flex-shrink: 1;
+    flex-grow: 1;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .controls.slim {
     padding: 0;
-}
+}

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styles from './styles.module.css';
+import CodeBlock from '@theme/CodeBlock';
+import clsx from 'clsx';
+import Icon from '@theme/CodeEditor/Icon';
+import { translate } from '@docusaurus/Translate';
+
+interface Props {
+    type: 'pre' | 'post';
+    code: string;
+}
+
+const HiddenCode = (props: Props) => {
+    const [show, setShow] = React.useState(false);
+    const { code } = props;
+    if (code.length === 0) {
+        return null;
+    }
+    return (
+        <div className={clsx(styles.container)}>
+            {show && (
+                <div>
+                    <CodeBlock
+                        language="python"
+                        showLineNumbers={false}
+                        className={clsx(styles.hiddenCode, styles.pre, show && styles.open)}
+                    >
+                        {code}
+                    </CodeBlock>
+                </div>
+            )}
+            <button
+                className={clsx(styles.toggleButton, show && styles.open, styles[props.type])}
+                onClick={() => setShow(!show)}
+                title={translate({
+                    id: 'theme.CodeEditor.Editor.HiddenCode.toggleButtonTitle',
+                    message: 'Toggle hidden code'
+                })}
+            >
+                <Icon
+                    icon={show ? 'TrayMinus' : 'TrayPlus'}
+                    rotate={(show ? 180 : 0) + (props.type === 'post' ? 180 : 0)}
+                />
+            </button>
+        </div>
+    );
+};
+
+export default HiddenCode;

package/src/theme/CodeEditor/Editor/HiddenCode/styles.module.css

@@ -0,0 +1,52 @@
+.container > .toggleButton {
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    z-index: var(--ifm-z-index-dropdown);
+    opacity: var(--show-hidden-code-toggle-opacity);
+    transition: opacity 0.6s ease; /* Adjust timing as needed */
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--ifm-color-info-darkest);
+    cursor: pointer;
+}
+.container > .toggleButton:hover {
+    color: var(--ifm-color-info);
+}
+
+.container > .toggleButton.post {
+    left: 50%;
+    top: unset;
+    bottom: 0px;
+}
+.toggleButton > svg {
+    transition: all 0.1s ease; /* Adjust timing as needed */
+}
+
+.container > .toggleButton.open {
+    color: var(--ifm-color-danger);
+}
+.container > .toggleButton.open:hover {
+    color: var(--ifm-color-danger-darkest);
+}
+
+.hiddenCode {
+    margin-bottom: 0;
+    --ifm-pre-padding: 0 3em;
+}
+.hiddenCode pre {
+    border-radius: 0;
+}
+.hiddenCode pre > code {
+    background-color: var(--ifm-color-secondary-dark);
+    border-radius: 0;
+}
+.hiddenCode > div[class^='codeBlockContent'] > div[class^='buttonGroup'] {
+    right: 0;
+    top: 0;
+}
+
+html[data-theme='dark'] .hiddenCode pre > code {
+    background-color: var(--ifm-card-background-color);
+}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
-import Graphics from 'docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
 import styles from './styles.module.css';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 
 const downloadCanvas = (canvasId: string) => {
     const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
@@ -13,49 +13,52 @@ const downloadCanvas = (canvasId: string) => {
     var dt = canvas.toDataURL('image/png');
     /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
     dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
-  
+
     /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
-    dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');
-  
-    var downloadLink = document.createElement("a");
+    dt = dt.replace(
+        /^data:application\/octet-stream/,
+        'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png'
+    );
+
+    var downloadLink = document.createElement('a');
     downloadLink.href = dt;
     downloadLink.download = `${canvasId}.png`;
     document.body.appendChild(downloadLink);
     downloadLink.click();
     document.body.removeChild(downloadLink);
-  };
+};
 
 const Canvas = () => {
-    const { store } = useScript();
-    // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
-    const codeId = useStore(store, (state) => state.codeId);
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
 
     return (
         <Graphics
             controls={
                 <Button
-                    icon='Download'
-                    iconSize='12px'
+                    icon="Download"
+                    iconSize="12px"
                     onClick={() => {
-                        downloadCanvas(DOM_ELEMENT_IDS.canvasContainer(codeId))
+                        downloadCanvas(DOM_ELEMENT_IDS.canvasContainer(codeId));
                     }}
                     title="Download SVG"
                     className={styles.slimStrippedButton}
                 />
             }
             main={
-                <canvas 
-                    id={DOM_ELEMENT_IDS.canvasContainer(codeId)} 
+                <canvas
+                    id={DOM_ELEMENT_IDS.canvasContainer(codeId)}
                     width="500"
                     height="500"
                     style={{
-                        display: 'block', 
-                        width: '500px', 
+                        display: 'block',
+                        width: '500px',
                         height: '500px'
-                    }}></canvas>
+                    }}
+                ></canvas>
             }
         />
-    )
+    );
 };
 
-export default Canvas;
+export default Canvas;

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

@@ -1,39 +1,43 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
-import Graphics from 'docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics';
-import { saveSvg } from 'docusaurus-live-brython/theme/CodeEditor/Editor/utils/saveSvg';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
+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 { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 
 const Turtle = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
-    const code = useStore(store, (state) => state.code);
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
+    const code = useScript(store, 'code');
     return (
         <Graphics
             controls={
                 <React.Fragment>
                     <Button
-                        icon='AnimationPlay'
+                        icon="AnimationPlay"
                         onClick={() => {
-                            const turtleResult = (document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId)) as any) as SVGSVGElement;
+                            const turtleResult = document.getElementById(
+                                DOM_ELEMENT_IDS.turtleSvgContainer(codeId)
+                            ) as any as SVGSVGElement;
                             if (turtleResult) {
-                                saveSvg(turtleResult, `${codeId}`, code, true)
+                                saveSvg(turtleResult, `${codeId}`, code, true);
                             }
                         }}
                         className={clsx(styles.slimStrippedButton)}
-                        iconSize='12px'
+                        iconSize="12px"
                         title="Download Animated SVG"
                     />
                     <Button
-                        icon='Download'
-                        iconSize='12px'
+                        icon="Download"
+                        iconSize="12px"
                         onClick={() => {
-                            const turtleResult = (document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId)) as any) as SVGSVGElement;
+                            const turtleResult = document.getElementById(
+                                DOM_ELEMENT_IDS.turtleSvgContainer(codeId)
+                            ) as any as SVGSVGElement;
                             if (turtleResult) {
-                                saveSvg(turtleResult, `${codeId}`, code)
+                                saveSvg(turtleResult, `${codeId}`, code);
                             }
                         }}
                         title="Download SVG"
@@ -42,7 +46,7 @@ const Turtle = () => {
                 </React.Fragment>
             }
         />
-    )
-}
+    );
+};
 
-export default Turtle;
+export default Turtle;

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

@@ -1,24 +1,23 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import Draggable from 'react-draggable';
-import { checkForButtonClick } from 'docusaurus-live-brython/theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
-interface Props {
-    controls?: JSX.Element;
-    main?: JSX.Element;
+export interface Props {
+    controls?: React.ReactNode;
+    main?: React.ReactNode;
 }
 const Graphics = (props: Props) => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
+    const nodeRef = React.useRef(null);
     return (
-        <Draggable
-            onStop={checkForButtonClick}
-            positionOffset={{ x: 0, y: '-50%' }}
-        >
-            <div className={styles.brythonGraphicsResult}>
+        <Draggable onStop={checkForButtonClick} positionOffset={{ x: '15%', y: '25%' }} nodeRef={nodeRef}>
+            <div className={styles.brythonGraphicsResult} ref={nodeRef}>
                 <div className={styles.brythonGraphicsResultHead}>
                     <span>Output</span>
                     <span className={styles.spacer}></span>
@@ -30,12 +29,13 @@ const Graphics = (props: Props) => {
                             store.stopScript();
                             store.closeGraphicsModal();
                         }}
-                        iconSize='12px'
+                        iconSize="12px"
                     />
                 </div>
                 <div
                     id={DOM_ELEMENT_IDS.graphicsResult(codeId)}
                     className="brython-graphics-result"
+                    key={`exec-${graphicsModalExecutionNr}`}
                 >
                     {props.main}
                 </div>
@@ -44,4 +44,4 @@ const Graphics = (props: Props) => {
     );
 };
 
-export default Graphics;
+export default Graphics;

package/src/theme/CodeEditor/Editor/Result/Graphics/styles.module.css

@@ -38,6 +38,6 @@
     margin-right: 0;
 }
 
-html[data-theme='dark'] .brythonGraphicsResult {    
+html[data-theme='dark'] .brythonGraphicsResult {
     background-color: rgba(179, 179, 179, 0.671);
-}
+}

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

@@ -1,21 +1,17 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-// @ts-ignore
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 
-interface Props {
-}
-
-const Result = (props: Props) => {
-    const { store } = useScript();
-    const logs = useStore(store, (state) => state.logs);
+const Result = () => {
+    const store = useStore();
+    const logs = useScript(store, 'logs');
     if (logs.length === 0) {
         return null;
     }
-    const errors: string[] = []
+    const errors: string[] = [];
     let lineNr = 1;
-    const code = logs.map((msg) => {
+    const code = logs.slice().map((msg) => {
         const msgLen = (msg.output || '').split('\n').length - 1;
         if (msg.type === 'stderr') {
             errors.push(`${lineNr}-${lineNr + msgLen}`);
@@ -25,9 +21,7 @@ const Result = (props: Props) => {
     });
     return (
         <div className={styles.result}>
-            <CodeBlock metastring={`{${errors.join(',')}}`}>
-                {code.join('')}
-            </CodeBlock>
+            <CodeBlock metastring={`{${errors.join(',')}}`}>{code.join('')}</CodeBlock>
         </div>
     );
 };

package/src/theme/CodeEditor/Editor/Result/styles.module.css

@@ -1,19 +1,24 @@
 .result {
-	grid-area: result;
-	max-width: 100%;
-	overflow-x: auto;
+    grid-area: result;
+    max-width: 100%;
+    overflow-x: auto;
     --ifm-leading: 0;
     flex-grow: 1;
     flex-basis: 80ch;
 }
 
-.result>pre {
-	margin-bottom: 0px;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
+.result > pre {
+    margin-bottom: 0px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
 
 .result :global(.theme-code-block-highlighted-line) {
-	color: var(--ifm-color-danger-darker) !important;
-	background: transparent;
-}
+    color: var(--ifm-color-danger-darker) !important;
+    background: transparent;
+}
+
+.result pre {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

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

@@ -1,71 +1,73 @@
-import * as React from "react";
-import {
-  DOM_ELEMENT_IDS,
-} from "docusaurus-live-brython/theme/CodeEditor/constants";
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Result from "docusaurus-live-brython/theme/CodeEditor/Editor/Result";
-import Turtle from "docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics/Turtle";
-import Canvas from "docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics/Canvas";
-import Graphics from "docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics";
-import Header from "docusaurus-live-brython/theme/CodeEditor/Editor/Header";
-import EditorAce from "docusaurus-live-brython/theme/CodeEditor/Editor/EditorAce";
+import * as React from 'react';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+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 clsx from 'clsx';
+import styles from './styles.module.css';
+import HiddenCode from '@theme/CodeEditor/Editor/HiddenCode';
 
-interface Props {
-  slim: boolean;
-  title: string;
-  resettable: boolean;
-  showLineNumbers: boolean;
-  download: boolean;
-  lang: string;
-  noCompare: boolean;
-  precode: string;
-  maxLines?: number;
-  versioned?: boolean;
+export interface Props {
+    slim: boolean;
+    title: string;
+    resettable: boolean;
+    showLineNumbers: boolean;
+    download: boolean;
+    lang: string;
+    noCompare: boolean;
+    preCode: string;
+    postCode: string;
+    maxLines?: number;
+    versioned?: boolean;
+    onChange?: (code: string) => void;
 }
 
 const Editor = (props: Props) => {
-  const { store } = useScript();
-  const lang = useStore(store, (state) => state.lang);
-  const codeId = useStore(store, (state) => state.codeId);
-  const hasCanvasOutput = useStore(store, (state) => state.hasCanvasOutput);
-  const hasTurtleOutput = useStore(store, (state) => state.hasTurtleOutput);
-  const isGraphicsmodalOpen = useStore(store, (state) => state.isGraphicsmodalOpen);
-  
-  return (
-    <React.Fragment>
-      <Header
-        slim={props.slim}
-        title={props.title}
-        resettable={props.resettable}
-        download={props.download}
-        noCompare={props.noCompare}
-      />
-      <EditorAce
-        showLineNumbers={props.showLineNumbers} 
-        maxLines={props.maxLines}
-        versioned={props.versioned}
-      />
-      {lang === 'python' &&
-        <>
-          <Result />
-          <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
-          {isGraphicsmodalOpen && (
-            <>
-              {hasTurtleOutput && (
-                <Turtle />
-              )}
-              {hasCanvasOutput && (
-                <Canvas />
-              )}
-              {!hasCanvasOutput && !hasTurtleOutput && (
-                <Graphics />
-              )}
-            </>
-          )}
-        </>
-      }
-    </React.Fragment>
-  );
+    const store = useStore();
+    const lang = useScript(store, 'lang');
+    const codeId = useScript(store, 'codeId');
+    const hasCanvasOutput = useScript(store, 'hasCanvasOutput');
+    const hasTurtleOutput = useScript(store, 'hasTurtleOutput');
+    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)}>
+                <HiddenCode type="pre" code={props.preCode} />
+                <EditorAce
+                    showLineNumbers={props.showLineNumbers}
+                    maxLines={props.maxLines}
+                    versioned={props.versioned}
+                    onChange={props.onChange}
+                />
+                <HiddenCode type="post" code={props.postCode} />
+            </div>
+            {lang === 'python' && (
+                <>
+                    <Result />
+                    <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
+                    {graphicsModalExecutionNr > 0 && (
+                        <>
+                            {hasTurtleOutput && <Turtle />}
+                            {hasCanvasOutput && <Canvas />}
+                            {!hasCanvasOutput && !hasTurtleOutput && <Graphics />}
+                        </>
+                    )}
+                </>
+            )}
+        </React.Fragment>
+    );
 };
 
-export default Editor;
+export default Editor;

package/src/theme/CodeEditor/Editor/styles.module.css

@@ -1,20 +1,28 @@
+.editorContainer {
+    grid-area: editor;
+    position: relative;
+    --show-hidden-code-toggle-opacity: 0;
+}
 .editor {
-	grid-area: editor;
     display: flex;
     flex-wrap: wrap;
 }
 
 .editor .noGutter :global(.ace_scroller) {
-	left: 4px !important;
+    left: 4px !important;
 }
 
 .editor :global(.ace_scrollbar.ace_scrollbar-h) {
-	overflow-x: hidden !important;
+    overflow-x: hidden !important;
 }
 
 .brythonEditor {
-	flex-grow: 1;
-	flex-basis: 80ch;
-	/*rtl:ignore*/
-	direction: ltr;
+    flex-grow: 1;
+    flex-basis: 80ch;
+    /*rtl:ignore*/
+    direction: ltr;
+}
+
+.editorContainer:hover {
+    --show-hidden-code-toggle-opacity: 1;
 }

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

@@ -1,8 +1,8 @@
-import {DraggableEvent} from 'react-draggable';
+import { DraggableEvent } from 'react-draggable';
 /**
  * When using react-draggable, the click-event is not propagated
  * to the button on touch devices. Fix this by clicking the button
- * programmatically. 
+ * programmatically.
  */
 const checkForButtonClick = (event: DraggableEvent) => {
     if (!event.type || event.type.toLowerCase() !== 'touchend') {
@@ -19,7 +19,7 @@ const checkForButtonClick = (event: DraggableEvent) => {
         }
         if (elem.tagName.toLowerCase() === 'div') {
             if (elem.classList.contains('react-draggable')) {
-                elem = null
+                elem = null;
                 break;
             }
         }
@@ -28,6 +28,6 @@ const checkForButtonClick = (event: DraggableEvent) => {
         // add the click to the end of the event queue
         setTimeout(() => elem?.click(), 1);
     }
-}
+};
 
-export { checkForButtonClick }
+export { checkForButtonClick };