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,25 +10,31 @@ fn greet(name: &str) -> String {
 
 #[tauri::command]
 fn parse_markdown(document: &str) -> String {
-    let arena = Arena::new();
+    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`
+        // Parse the document into a root `AstNode`
-    let mut options = Options::default();
+        let mut options = Options::default();
-    options.render.unsafe_ = true;
+        options.render.unsafe_ = true;
-    // options.render.hardbreaks = true;
+        // options.render.hardbreaks = true;
-    let root = parse_document(&arena, document, &options);
+        let root = parse_document(&arena, document, &options);
 
-    // Iterate over all the descendants of root.
+        // Iterate over all the descendants of root.
-    for node in root.descendants() {
+        for node in root.descendants() {
-        if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value {
+            if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value {
-            // image_node.url = format!("file://{}", image_node.url);
+                // image_node.url = format!("file://{}", image_node.url);
-            println!("{:?}", image_node);
+                println!("{:?}", webview.eval(&image_node.url));
+            }
         }
-    }
+        let mut html = vec![];
-    let mut html = vec![];
+        format_html(root, &options, &mut html).unwrap();
-    format_html(root, &options, &mut html).unwrap();
+        println!("{}", String::from_utf8(html.clone()).unwrap());
-    println!("{}", String::from_utf8(html.clone()).unwrap());
+        rendered_markdown = String::from_utf8(html).unwrap();
-    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(
+  invoke("parse_markdown", { document: text }).then(
-  //   (ret)=>{    
+    (ret)=>{    
-  //     var tag_id = document.getElementById('rendered_markdown');
+      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 = "<pre>".concat("", ret).concat("", "</pre>");
-      // tag_id.innerHTML = "<p>HI</p>"
+   // tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
-  //     // 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);