Add pyodide execution support

package.json

@@ -17,14 +17,18 @@
   "dependencies": {
     "@docusaurus/core": "3.2.1",
     "@docusaurus/preset-classic": "3.2.1",
+    "@docusaurus/theme-common": "3.2.1",
     "@easyops-cn/docusaurus-search-local": "^0.38.1",
     "@mdx-js/react": "^3.0.0",
+    "ace-builds": "^1.8.1",
     "clsx": "^1.2.1",
     "docusaurus-lunr-search": "^3.3.1",
     "lunr": "^2.3.9",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
+    "react-ace": "^12.0.0",
     "react-dom": "^18.2.0",
+    "react-py": "^1.10.7",
     "redocusaurus": "^2.0.2"
   },
   "devDependencies": {

src/components/CodeEditor.css

@@ -0,0 +1,60 @@
+.ace_hidden-cursors {
+    opacity: 0;
+}
+
+.code-editor {
+    margin: 0 0 var(--ifm-leading);
+    border-radius: 0.25em;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
+}
+
+.code-editor-window {
+    overflow: clip;
+    border-radius: 0.25em;
+    background-color: var(--code-background);
+    position: relative;
+}
+
+.button-container {
+    position: absolute;
+    top: 0.3em;
+    right: 0.5em;
+    display: flex;
+    gap: 0.5em;
+    opacity: 0;
+}
+
+.code-editor-window:hover .button-container,
+.code-editor-window:active .button-container {
+    opacity: 100%;
+}
+
+.icon-button:focus,
+.icon-button:active {
+    opacity: 100%;
+}
+
+.output-window {
+    border: var(--divider-color-alt) solid 1px;
+    border-top: var(--divider-color) solid 1px;
+    border-radius: 0 0 .25em .25em;
+    padding: 0.5em 1em;
+}
+
+.icon-button {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    opacity: 40%;
+    cursor: pointer;
+}
+
+.icon-button:hover {
+    opacity: 100%;
+}
+
+.icon {
+    font-size: 1.5em;
+    font-weight: bold;
+    color: var(--text-color);
+}

src/components/CodeEditor.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from 'react'
+import BrowserOnly from '@docusaurus/BrowserOnly'
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+import {Packages, usePython} from "react-py";
+
+import Controls from './Controls'
+import Loader from './Loader'
+import Input from './Input'
+
+import "./CodeEditor.css"
+
+const editorOptions = {
+  enableBasicAutocompletion: true,
+  enableLiveAutocompletion: true,
+  highlightActiveLine: false,
+  showPrintMargin: false
+}
+
+const editorOnLoad = (editor) => {
+  editor.renderer.setScrollMargin(10, 10, 0, 0)
+  editor.moveCursorTo(0, 0)
+}
+
+interface CodeEditorProps {
+  code: string
+  packages?: Packages
+}
+
+const isMobile = () => (
+    !!navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)/i)
+    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+)
+
+export default function CodeEditor(props: CodeEditorProps) {
+  const { code, packages } = props
+  const [input, setInput] = useState(code.trimEnd())
+  const [showOutput, setShowOutput] = useState(false)
+  const [playFocus, setplayFocus] = useState(false);
+  const [resetFocus, setresetFocus] = useState(false);
+
+  useEffect(() => {
+    setInput(code.trimEnd())
+    setShowOutput(false)
+  }, [code])
+
+  const isBrowser = useIsBrowser();
+  let AceEditor = null;
+  if (isBrowser) {
+    AceEditor = require('react-ace').default;
+    require("ace-builds/src-noconflict/mode-python");
+    require("ace-builds/src-noconflict/theme-textmate");
+    require("ace-builds/src-noconflict/theme-idle_fingers");
+    require("ace-builds/src-noconflict/ext-language_tools");
+  }
+
+  const {
+    runPython,
+    stdout,
+    stderr,
+    isLoading,
+    isRunning,
+    interruptExecution,
+    isAwaitingInput,
+    sendInput,
+    prompt
+  } = usePython({ packages })
+
+  function run() {
+    runPython(input)
+    setShowOutput(true)
+  }
+
+  function stop() {
+    interruptExecution()
+    setShowOutput(false)
+  }
+
+
+  function reset() {
+    setShowOutput(false)
+    setInput(code.trimEnd())
+  }
+
+  function buttons() {
+    return <>
+      {!isRunning ?
+        <button
+          className={"icon-button"}
+   	  disabled={isLoading || isRunning}
+          onClick={run}
+          onFocus={() => setplayFocus(true)}
+          onBlur={() => setplayFocus(false)}
+          aria-label={"Run Code"}
+          title={"Run Code"}
+        >
+        <span className={"icon lsf-icon"} title={"play"}></span>
+      </button>
+      :
+      <button
+        className={"icon-button"}
+        disabled={isLoading || !isRunning}
+        onClick={stop}
+        onFocus={() => setplayFocus(true)}
+        onBlur={() => setplayFocus(false)}
+        aria-label={"Stop Code"}
+        title={"Stop Code"}
+      >
+        <span className={"icon lsf-icon"} title={"stop"}></span>
+      </button>
+    }
+    <button
+      className={"icon-button"}
+      onClick={reset}
+      onFocus={() => setresetFocus(true)}
+      onBlur={() => setresetFocus(false)}
+      aria-label={"Reset Code Window"}
+      title={"Reset Code Window"}
+    >
+      <span className={"icon lsf-icon"} title={"refresh"}></span>
+    </button>
+    </>;
+  }
+
+  function output() {
+    return (
+      <pre className={"output-window"}>
+        <span>{stdout}</span>
+        <span style={{color: "var(--text-code-error)"}}>{stderr}</span>
+      </pre>
+    );
+  }
+
+  function editor() {
+    return <AceEditor
+      value={input}
+      mode="python"
+      name="CodeBlock"
+      fontSize={'0.9rem'}
+      onChange={(newValue, e) => setInput(newValue)}
+      width='100%'
+      maxLines={Infinity}
+      style={{backgroundColor: "rgba(0, 0, 0, 0)"}}
+      onLoad={editorOnLoad}
+      editorProps={{$blockScrolling: true}}
+      setOptions={editorOptions}
+    />;
+  }
+
+  function showButtons() {
+    return props.showButtons || isMobile() || playFocus || resetFocus;
+  }
+
+  const fallback = <pre style={{margin: 0, padding: "0.55rem"}}>{input}</pre>;
+
+  return <BrowserOnly fallback={fallback}>
+    {() => (
+      <div className={"code-editor"} onMouseLeave={() => {
+        setplayFocus(false);
+        setresetFocus(false);
+      }}>
+        <div className={"code-editor-window"} style={showOutput ? {borderRadius: ".25em .25em 0 0"} : {}}>
+          {editor()}
+          <div className={"button-container"} style={showButtons() ? {opacity: 100} : {}}>
+            {isLoading ? <span>Loading...</span> : buttons()}
+          </div>
+        </div>
+        {showOutput && output()}
+      </div>
+    )}
+  </BrowserOnly>
+}

src/components/Controls.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import clsx from 'clsx'
+
+interface ControlProps {
+  items: {
+    label: string
+    icon: any
+    onClick: () => void
+    disabled?: boolean
+    hidden?: boolean
+  }[]
+  isAwaitingInput?: boolean
+}
+
+export default function Controls(props: ControlProps) {
+  const { items, isAwaitingInput } = props
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div className="pointer-events-none z-10 -mb-16 flex justify-end p-2">
+      <div className="pointer-events-auto space-x-2 rounded-md bg-white p-1 opacity-80 shadow-md hover:opacity-100">
+        {isAwaitingInput && (
+          <div className="inline-flex items-center rounded-md bg-lime-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow">
+            <svg
+              className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            <span>Awaiting input...</span>
+          </div>
+        )}
+        <span className="isolate inline-flex rounded-md">
+          {visibleItems.map((item, i) => (
+            <button
+              key={item.label}
+              type="button"
+              onClick={item.onClick}
+              disabled={item.disabled}
+              className={clsx(
+                'relative inline-flex items-center border border-none border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 focus:z-10 focus:outline-none focus:ring-0',
+                !item.disabled
+                  ? 'opacity-75 hover:cursor-pointer hover:bg-zinc-50 hover:opacity-100'
+                  : 'opacity-50 hover:cursor-not-allowed',
+                i === 0 && 'rounded-l-md',
+                i === visibleItems.length - 1 && 'rounded-r-md'
+              )}
+            >
+              <item.icon
+                className="-ml-1 mr-2 h-5 w-5 text-zinc-400"
+                aria-hidden="true"
+              />
+              {item.label}
+            </button>
+          ))}
+        </span>
+      </div>
+    </div>
+  )
+}

src/components/Input.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { PaperAirplaneIcon } from '@heroicons/react/20/solid'
+
+interface InputProps {
+  prompt: string
+  onSubmit: (value: string) => void
+}
+
+export default function Input(props: InputProps) {
+  const { prompt, onSubmit } = props
+  const [input, setInput] = useState('')
+
+  const inputRef = useRef<HTMLInputElement>()
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [inputRef.current])
+
+  return (
+    <div className="mt-4 lg:w-1/2">
+      <label
+        htmlFor="input"
+        className="block text-sm font-medium text-zinc-700 dark:text-zinc-100"
+      >
+        Input
+      </label>
+      <div className="mt-1 flex rounded-md shadow-sm">
+        <div className="relative flex flex-grow items-stretch focus-within:z-10">
+          <input
+            ref={inputRef}
+            type="text"
+            name="input"
+            id="input"
+            className="block w-full rounded-l-md border-none bg-neutral-200 px-2 py-1.5 placeholder-zinc-400 shadow-sm focus:ring-0 dark:bg-neutral-600 sm:text-sm"
+            placeholder={prompt}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && onSubmit(input)}
+          />
+        </div>
+        <button
+          type="button"
+          className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-none border-zinc-300 bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-700 hover:cursor-pointer hover:bg-zinc-100 focus:border-lime-500 focus:outline-none focus:ring-1 focus:ring-lime-500"
+          onClick={() => onSubmit(input)}
+        >
+          <PaperAirplaneIcon
+            className="h-5 w-5 text-zinc-400"
+            aria-hidden="true"
+          />
+          <span>Submit</span>
+        </button>
+      </div>
+    </div>
+  )
+}