Merge pull request #1439 from finos/monaco-dark

Add theme support to monaco
finos · Jun 8, 2021 · 5e9a2d5 · 5e9a2d5
2 parents 0cd715f + 951fa4a
commit 5e9a2d5
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 31 deletions.
diff --git a/packages/perspective-viewer/src/themes/material.dark.less b/packages/perspective-viewer/src/themes/material.dark.less
@@ -42,6 +42,7 @@ perspective-viewer, .perspective-viewer-material-dark {
     --expression--function-color: @lightblue600;
     --expression--error-color: rgb(255, 136, 136);
     --input-dragover--background: linear-gradient(to top, rgbs(38, 112, 169, 0.5), transparent 50%);
+    --monaco-theme: vs-dark;
 
     table {
         color: white;

diff --git a/packages/perspective-workspace/src/theme/material.dark.less b/packages/perspective-workspace/src/theme/material.dark.less
@@ -25,7 +25,7 @@ perspective-viewer.workspace-master-widget {
     --plugin--background: @grey800;
 }
 
-perspective-column-style {
+perspective-column-style, perspective-expression-editor {
     background-color: @grey700;
     color: #FFFFFF;
     border: 1px solid @grey500;

diff --git a/packages/perspective-workspace/src/theme/material.less b/packages/perspective-workspace/src/theme/material.less
@@ -22,7 +22,7 @@ perspective-viewer.workspace-master-widget {
     }
 }
 
-perspective-column-style {
+perspective-column-style, perspective-expression-editor {
     background-color: #FFFFFF;
     color: #161616;
     border: 1px solid #E0E4E9;

diff --git a/rust/perspective-vieux/src/rust/components/expression_editor.rs b/rust/perspective-vieux/src/rust/components/expression_editor.rs
@@ -33,6 +33,7 @@ pub struct ExpressionEditorProps {
     pub on_init_callback: Rc<dyn Fn()>,
     pub on_validate_callback: Rc<dyn Fn(bool)>,
     pub session: Session,
+    pub monaco_theme: String,
 }
 
 /// A label widget which displays a row count and a "projection" count, the number of
@@ -144,7 +145,7 @@ impl Component for ExpressionEditor {
         if first_render {
             let this = self.clone();
             let _ = future_to_promise(async move {
-                let editor = init_monaco().await.unwrap();
+                let editor = init_monaco(&this.props.monaco_theme).await.unwrap();
                 let args = EditorArgs {
                     theme: "exprtk-theme",
                     value: "",

diff --git a/rust/perspective-vieux/src/rust/custom_elements/expression_editor.rs b/rust/perspective-vieux/src/rust/custom_elements/expression_editor.rs
@@ -34,11 +34,13 @@ impl PerspectiveExpressionEditorElement {
         on_save_callback: Rc<dyn Fn(JsValue)>,
         on_init_callback: Rc<dyn Fn()>,
         on_validate_callback: Rc<dyn Fn(bool)>,
+        monaco_theme: String
     ) -> PerspectiveExpressionEditorElement {
         let props = ExpressionEditorProps {
             on_save_callback,
             on_init_callback,
             on_validate_callback,
+            monaco_theme,
             session,
         };
 

diff --git a/rust/perspective-vieux/src/rust/custom_elements/vieux.rs b/rust/perspective-vieux/src/rust/custom_elements/vieux.rs
@@ -21,6 +21,16 @@ use wasm_bindgen_futures::future_to_promise;
 use web_sys::*;
 use yew::prelude::*;
 
+fn get_theme(elem: &HtmlElement) -> String {
+    let styles = window().unwrap().get_computed_style(elem).unwrap().unwrap();
+    match &styles.get_property_value("--monaco-theme") {
+        Err(_) => "vs",
+        Ok(ref s) if s.trim() == "" => "vs",
+        Ok(x) => x.trim(),
+    }
+    .to_owned()
+}
+
 /// A `customElements` external API.
 #[wasm_bindgen]
 #[derive(Clone)]
@@ -119,12 +129,14 @@ impl PerspectiveVieuxElement {
                 .unwrap();
         });
 
+        let monaco_theme = get_theme(&target);
         let mut element = PerspectiveExpressionEditorElement::new(
             editor,
             self.session.clone(),
             on_save,
             on_init,
             on_validate,
+            monaco_theme,
         );
 
         element.open(target).unwrap();

diff --git a/rust/perspective-vieux/src/rust/exprtk.rs b/rust/perspective-vieux/src/rust/exprtk.rs
@@ -10,7 +10,7 @@ use js_intern::*;
 use js_sys::Reflect;
 use serde_json::error;
 use std::cell::Cell;
-use wasm_bindgen::{JsCast, prelude::*};
+use wasm_bindgen::{prelude::*, JsCast};
 
 use crate::js_object;
 use crate::utils::monaco::*;
@@ -444,28 +444,6 @@ thread_local! {
             },
         ]
     };
-
-    static THEME: DefineThemeArgs<'static> = DefineThemeArgs {
-        base: "vs",
-        inherit: true,
-        rules: vec![
-            // DefineThemeToken {
-            //     token: "exprtk-comment",
-            //     foreground: "#007700",
-            //     font_style: None,
-            // },
-            // DefineThemeToken {
-            //     token: "exprtk-symbol",
-            //     foreground: "#0000ff",
-            //     font_style: None,
-            // },
-            // DefineThemeToken {
-            //     token: "exprtk-column",
-            //     foreground: "#990000",
-            //     font_style: None,
-            // },
-        ],
-    }
 }
 
 /// This helper _must_ create the `JsValue` anew on each call, or it causes strange
@@ -477,7 +455,7 @@ fn get_suggestions() -> JsValue {
 
 /// Initializes the `plang` language definition using Monaco's `Languages`
 /// module.
-async fn init_language() -> Result<Editor, error::Error> {
+async fn init_language(base: &str) -> Result<Editor, error::Error> {
     let exts = monaco_exts();
     let module = monaco_module().await.unchecked_into::<MonacoModule>();
     let languages = module.languages();
@@ -489,7 +467,14 @@ async fn init_language() -> Result<Editor, error::Error> {
     let items = js_object!("provideCompletionItems", provider.as_ref()).into();
     provider.forget();
     languages.register_completion_item_provider("exprtk", items);
-    editor.define_theme("exprtk-theme", THEME.with(|x| JsValue::from_serde(&x))?);
+    editor.define_theme(
+        "exprtk-theme",
+        JsValue::from_serde(&DefineThemeArgs {
+            base,
+            inherit: true,
+            rules: vec![],
+        })?,
+    );
     exts.await;
     Ok(editor)
 }
@@ -504,13 +489,16 @@ fn init_environment() -> Result<(), error::Error> {
 }
 
 /// Initialize the `ExprTK` language in `monaco`.  This should only be done once.
-pub async fn init_monaco() -> Result<Editor, error::Error> {
+pub async fn init_monaco(base: &str) -> Result<Editor, error::Error> {
     if IS_REGISTERED.with(|x| !x.get()) {
-        let editor = init_language().await?;
+        let editor = init_language(base).await?;
         init_environment()?;
         IS_REGISTERED.with(|x| x.set(true));
         Ok(editor)
     } else {
-        Ok(monaco_module().await.unchecked_into::<MonacoModule>().editor())
+        Ok(monaco_module()
+            .await
+            .unchecked_into::<MonacoModule>()
+            .editor())
     }
 }