feat(Frontend): ✨ use language extension for hightling

mdcpp · Jul 3, 2024 · f979efc · f979efc
1 parent 46a2e7a
commit f979efc
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 33 deletions.
diff --git a/docker/dev/.gitignore b/docker/dev/.gitignore
@@ -0,0 +1 @@
+*.lang
diff --git a/docker/dev/docker-compose.yml b/docker/dev/docker-compose.yml
@@ -34,6 +34,7 @@ services:
     profiles: [backend-dev, frontend-dev]
     volumes:
       - ./judger/config:/config
+      - ./judger/plugins:/plugins
       - /sys/fs/cgroup:/sys/fs/cgroup
     environment:
       - CONFIG_PATH=/config/config.toml

diff --git a/frontend/assets/moncao.js b/frontend/assets/moncao.js
@@ -1,2 +1,4 @@
 require.config({paths:{vs:'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'}});
-require(['vs/editor/editor.main'],()=>{});
+require(['vs/editor/editor.main'],()=>{});
+
+var editor_inject_1083hdkjla=100;
diff --git a/frontend/src/components/editor.rs b/frontend/src/components/editor.rs
@@ -1,66 +1,76 @@
+use gloo::console::console;
 use leptos::*;
 
-#[derive(Debug, Clone, Copy)]
-pub enum Language {
-    Unselected,
-    Rust,
-    Python,
-    JavaScript,
-    C,
-}
+// #[derive(Debug, Clone, Copy)]
+// pub enum Language {
+//     Unselected,
+//     Rust,
+//     Python,
+//     JavaScript,
+//     C,
+// }
 
-impl Language {
-    fn to_ident(self) -> Option<&'static str> {
-        match self {
-            Self::Unselected => None,
-            Self::Rust => Some("rust"),
-            Self::Python => Some("python"),
-            Self::JavaScript => Some("javascript"),
-            Self::C => Some("c"),
-        }
-    }
+// impl Language {
+//     fn to_ident(self) -> Option<&'static str> {
+//         match self {
+//             Self::Unselected => None,
+//             Self::Rust => Some("rust"),
+//             Self::Python => Some("python"),
+//             Self::JavaScript => Some("javascript"),
+//             Self::C => Some("c"),
+//         }
+//     }
+// }
+
+pub fn get_editor_code() -> Option<String> {
+    js_sys::eval("editor_inject_1083hdkjla.getValue()")
+        .ok()?
+        .as_string()
 }
 
 #[component]
 pub fn Editor(
-    #[prop(into, default = Language::JavaScript.into())] language: MaybeSignal<
-        Language,
-    >,
+    #[prop(into, default = Some("javascript".to_string()).into())]
+    language: MaybeSignal<Option<String>>,
     #[prop(into, optional)] on_submit: Option<Callback<String>>,
 ) -> impl IntoView {
     /// compacted version of the script
     /// ```javascript
     /// (async() => {
     ///     let parent = null;
-    ///     while(parent==null || typeof monaco=="undefined"){
+    ///     while(parent==null || typeof monaco=='undefined'){
     ///         await new Promise(r=>setTimeout(r, 5));
     ///         parent = document.getElementById('editor-inject-1083hdkjla');
     ///     }
     ///
+    ///     while(parent.firstChild) parent.removeChild(parent.firstChild);
+    ///
     ///     let child = document.createElement('div');
     ///     parent.appendChild(child);
     ///     child.style = 'width:100%;height:65vh';
     ///   
     ///     monaco.editor.setTheme('vs-dark');
-    ///     monaco.editor.create(child, {
+    ///     editor_inject_1083hdkjla = monaco.editor.create(child, {
     ///         value: '',
     ///         language: 'pro-lang'
     ///     });
     /// })()
     /// ```
     static EDITOR_SCRIPT_SOURCE: &str =
-        "(async()=>{let parent=null;while(parent==null||typeof \
+        "(async() => {let parent=null;while(parent==null || typeof \
          monaco=='undefined'){await new Promise(r=>setTimeout(r, \
-         5));parent=document.getElementById('editor-inject-1083hdkjla');}let \
+         5));parent=document.getElementById('editor-inject-1083hdkjla');\
+         }while(parent.firstChild) parent.removeChild(parent.firstChild);let \
          child=document.createElement('div');parent.appendChild(child);child.\
-         style='width:100%;height:65vh';monaco.editor.setTheme('vs-dark');\
-         monaco.editor.create(child,{value:'',language:'pro-lang'});})()";
-    if let Some(ident) = language.get().to_ident() {
-        create_effect(move |_| {
-            js_sys::eval(&EDITOR_SCRIPT_SOURCE.replace("pro-lang", ident))
+         style='width:100%;height:65vh';  \
+         monaco.editor.setTheme('vs-dark');editor_inject_1083hdkjla=monaco.\
+         editor.create(child, {value:'',language:'pro-lang'});})()";
+    create_effect(move |_| {
+        if let Some(ident) = language.get() {
+            js_sys::eval(&EDITOR_SCRIPT_SOURCE.replace("pro-lang", &ident))
                 .unwrap();
-        });
-    }
+        }
+    });
 
     view! {
         <div>