Started work on markdown image support

src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["protocol-asset"] }
+tauri = { version = "2", features = ["protocol-asset", "unstable"] }
 tauri-plugin-shell = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"

src-tauri/src/lib.rs

@@ -1,4 +1,5 @@
 use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options};
+use tauri::Manager;
 use tauri_plugin_fs::FsExt;
 
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
@@ -9,6 +10,9 @@ fn greet(name: &str) -> String {
 
 #[tauri::command]
 fn parse_markdown(document: &str) -> String {
+    let mut rendered_markdown: String = String::new();
+    tauri::Builder::default().setup(move |app| {
+        let webview = app.get_webview_window("main").unwrap();
         let arena = Arena::new();
 
         // Parse the document into a root `AstNode`
@@ -21,13 +25,16 @@ fn parse_markdown(document: &str) -> String {
         for node in root.descendants() {
             if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value {
                 // image_node.url = format!("file://{}", image_node.url);
-            println!("{:?}", image_node);
+                println!("{:?}", webview.eval(&image_node.url));
             }
         }
         let mut html = vec![];
         format_html(root, &options, &mut html).unwrap();
         println!("{}", String::from_utf8(html.clone()).unwrap());
-    String::from_utf8(html).unwrap()
+        rendered_markdown = String::from_utf8(html).unwrap();
+        Ok(())
+    });
+    return "".to_owned();
     // String::from_str("lololo").unwrap()
 }
 

src/main.js

@@ -18,15 +18,13 @@ textarea.addEventListener('input', ()=> {
     text = textarea.innerText;
     var tag_id = document.getElementById('rendered_markdown');
     tag_id.innerHTML = "<p>HI</p>"
-  // invoke("parse_markdown", { document: text }).then(
-  //   (ret)=>{    
-  //     var tag_id = document.getElementById('rendered_markdown');
-  //     // tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
-      // tag_id.innerHTML = "<p>HI</p>"
-  //     // tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
-      tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
-  //   }
-  // );
+  invoke("parse_markdown", { document: text }).then(
+    (ret)=>{    
+      var tag_id = document.getElementById('rendered_markdown');
+      tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
+   // tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
+    }
+  );
 
 // });
 });
@@ -43,3 +41,15 @@ function toggle_visibility(id) {
     }
     
 }
+function handleShortcut(event) {
+    var markdown_editor = document.getElementById('markdown_input');
+
+    if (document.activeElement === markdown_editor){
+        if (event.ctrlKey) {
+            if (event.key === "l"){            
+                event.preventDefault();
+            }
+        }
+    }
+}
+document.addEventListener("keydown", handleShortcut);

src/styles.css

@@ -82,7 +82,13 @@ h1 {
   margin-bottom: 0.067em;
 }
 
+ol li {
+  margin-left: 1em;
+}
 
+ul li {
+  margin-left: 1em;
+}
 .sidebar_button {
     width: 100%;
     background-color: var(--main-bg-color);