fix: disable ace editor worker and fix codeblock parse issue

MR-Addict · Feb 20, 2024 · 87a2514 · 87a2514
1 parent 0eee481
commit 87a2514
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 23 deletions.
diff --git a/backend/example/src/SUMMARY.md b/backend/example/src/SUMMARY.md
@@ -9,13 +9,10 @@
 
 # Languages
 
-- [Python]()
-  - [Intro](python/intro.md)
-  - [Packages](python/packages.md)
+- [Python](python/intro.md)
   - [Examples](python/examples.md)
-- [Typescript]()
-  - [Intro](typescript/intro.md)
+  - [Packages](python/packages.md)
+- [Typescript](typescript/intro.md)
   - [Examples](typescript/examples.md)
-- [Javascript]()
-  - [Intro](javascript/intro.md)
+- [Javascript](javascript/intro.md)
   - [Examples](javascript/examples.md)
diff --git a/backend/example/src/javascript/intro.md b/backend/example/src/javascript/intro.md
@@ -1,4 +1,4 @@
-# Intro
+# Javascript
 
 Javascript is a programming language that is used to make web pages interactive. Browser is able to run javascript code directly. We don't need any compiler to run javascript code in the browser.
 

diff --git a/backend/src/cfg.rs b/backend/src/cfg.rs
@@ -1,10 +1,10 @@
 use mdbook::Config;
 
-pub fn get_config_bool(config: &Config, key: &str) -> bool {
+pub fn get_config_bool(config: &Config, key: &str, default: bool) -> bool {
     config
         .get(format!("preprocessor.repl.{}", key).as_str())
         .and_then(|v| v.as_bool())
-        .unwrap_or(false)
+        .unwrap_or(default.to_owned())
 }
 
 pub fn get_config_string(config: &Config, key: &str, default: &str) -> String {

diff --git a/backend/src/repl.rs b/backend/src/repl.rs
@@ -46,7 +46,7 @@ fn map_lang(raw_lang: &str) -> &str {
 
 fn render_repls(content: &str, config: &Config) -> (bool, String) {
     // \r? is for windows line endings
-    let langs = "py|python|ts|typescript|js|javascript";
+    let langs = r"\bpy\b|\bpython\b|\bts\b|\btypescript\b|\bjs\b|\bjavascript\b";
     let re = Regex::new(&format!(r"(?s)```({}),?(.*?)\r?\n(.*?)```", langs)).unwrap();
 
     // if there are no matches, return the content as is
@@ -68,7 +68,7 @@ fn render_repls(content: &str, config: &Config) -> (bool, String) {
             let readonly = options.contains(&"readonly".to_string());
 
             // get the config options
-            let enable = cfg::get_config_bool(config, &format!("{}.enable", lang));
+            let enable = cfg::get_config_bool(config, &format!("{}.enable", lang), true);
             let loading = cfg::get_config_string(config, &format!("{}.lazy", lang), "lazy");
 
             // if norepl is in the options, return the code block as is

diff --git a/frontend/src/components/Buttons/Buttons.tsx b/frontend/src/components/Buttons/Buttons.tsx
@@ -12,21 +12,20 @@ interface ButtonProps {
   Icon: IconType;
   onClick: () => void;
   disabled?: boolean;
-  iconClass?: string;
 }
 
-function Button({ Icon, onClick, title, disabled, iconClass }: ButtonProps) {
+function Button({ Icon, onClick, title, disabled }: ButtonProps) {
   return (
     <button
       disabled={disabled}
       type="button"
       onClick={onClick}
       title={title}
       className={
-        "dark:bg-zinc-900 dark:text-gray-400 sm:dark:enabled:hover:text-gray-300 sm:enabled:hover:text-blue-600 dark:border-zinc-600"
+        "dark:bg-zinc-900 dark:text-gray-400 sm:dark:enabled:hover:text-gray-300 sm:enabled:hover:text-blue-600 dark:border-zinc-600 group"
       }
     >
-      <Icon size={13} className={iconClass} />
+      <Icon size={13} className="group-disabled:animate-spin" />
     </button>
   );
 }
@@ -61,9 +60,8 @@ export default function Buttons() {
       <Button
         title="run code"
         onClick={handlePlay}
-        iconClass={clsx({ "animate-spin": output.status === "loading" })}
         disabled={output.status === "loading" || output.status === "running"}
-        Icon={output.status === "loading" ? VscLoading : output.status === "running" ? VscDebugStop : VscPlay}
+        Icon={output.status === "loading" || output.status === "running" ? VscLoading : VscPlay}
       />
       <Button title="copy code" Icon={copied ? IoCheckmark : VscCopy} onClick={handleCopy} />
     </div>

diff --git a/frontend/src/components/Editor/Editor.tsx b/frontend/src/components/Editor/Editor.tsx
@@ -33,6 +33,7 @@ export default function Editor() {
         className="bg-transparent"
         readOnly={editor.readonly}
         defaultValue={editor.defaultCode}
+        setOptions={{ useWorker: false }}
         tabSize={editor.lang === "python" ? 4 : 2}
         theme={editor.theme === "light" ? "textmate" : "monokai"}
         onChange={(code) => setEditor({ ...editor, code })}

diff --git a/frontend/src/components/Output/Output.tsx b/frontend/src/components/Output/Output.tsx
@@ -54,11 +54,13 @@ export default function Output() {
         ))}
       </div>
       <div className={style.buttons}>
-        <Button
-          title="clear output"
-          Icon={GrClear}
-          onClick={() => setOutputs((prev) => ({ ...prev, [editor.lang]: { status: "idle", data: [] } }))}
-        />
+        {output.status === "finished" && (
+          <Button
+            Icon={GrClear}
+            title="clear output"
+            onClick={() => setOutputs((prev) => ({ ...prev, [editor.lang]: { status: "idle", data: [] } }))}
+          />
+        )}
       </div>
     </div>
   );