implemented image support

src-tauri/Cargo.lock

@@ -146,6 +146,7 @@ dependencies = [
  "comrak",
  "serde",
  "serde_json",
+ "shellexpand",
  "tauri",
  "tauri-build",
  "tauri-plugin-fs",
@@ -3470,6 +3471,15 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "24188a676b6ae68c3b2cb3a01be17fbf7240ce009799bb56d5b1409051e78fde"
 
+[[package]]
+name = "shellexpand"
+version = "3.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da03fa3b94cc19e3ebfc88c4229c49d8f08cdbd1228870a45f0ffdf84988e14b"
+dependencies = [
+ "dirs",
+]
+
 [[package]]
 name = "shlex"
 version = "1.3.0"

src-tauri/Cargo.toml

@@ -25,4 +25,5 @@ serde_json = "1"
 comrak = "0.29.0"
 tauri-plugin-fs = "2"
 tauri-plugin-log = "2"
+shellexpand = "3.1.0"
 

src-tauri/src/lib.rs

@@ -1,7 +1,9 @@
+use std::path::Path;
+
 use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options};
+use shellexpand;
 use tauri::Manager;
 use tauri_plugin_fs::FsExt;
-
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 #[tauri::command]
 fn greet(name: &str) -> String {
@@ -9,9 +11,10 @@ fn greet(name: &str) -> String {
 }
 
 #[tauri::command]
-fn parse_markdown(document: &str) -> String {
+fn parse_markdown(document: &str, pathtemplate: &str) -> String {
     let mut rendered_markdown: String = String::new();
-    // tauri::Builder::default().setup(move |app| {
+    let path = "/foo/bar.txt";
+    println!("{:?}", shellexpand::full(path));
     // let webview = app.get_webview_window("main").unwrap();
     let arena = Arena::new();
 
@@ -24,16 +27,15 @@ fn parse_markdown(document: &str) -> String {
     // Iterate over all the descendants of root.
     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);
+            if let Ok(resolved_path) = shellexpand::full(&image_node.url) {
-            // println!("{:?}", webview.eval(&image_node.url));
+                image_node.url = pathtemplate.replace("FILEPATH", &resolved_path);
+            }
         }
     }
     let mut html = vec![];
     format_html(root, &options, &mut html).unwrap();
     println!("{}", String::from_utf8(html.clone()).unwrap());
     rendered_markdown = String::from_utf8(html).unwrap();
-    // Ok(())
-    // });
     return rendered_markdown.to_owned();
     // String::from_str("lololo").unwrap()
 }

src/main.js

@@ -14,17 +14,21 @@ let text = "";
   // tag_id.innerHTML = "<p>HI</p>"
 // window.addEventListener("DOMContentLoaded", () => {
 let textarea = document.getElementById('markdown_input');
+
+
+let placeholder_path = "FILEPATH";
+let path_template = convertFileSrc(placeholder_path);
+
 textarea.addEventListener('input', ()=> {
     text = textarea.innerText;
     var tag_id = document.getElementById('rendered_markdown');
-    tag_id.innerHTML = "<p>HI</p>"
+    invoke("parse_markdown", { document: text, pathtemplate: path_template}).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 = "<pre>".concat("", ret).concat("", "</pre>");
-      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">'))
-    }
+        }
-  );
+    );
 
 // });
 });

src/styles.css

@@ -62,6 +62,9 @@
     text-align: left;
     color: #f6f6f6;
     background-color: var(--main-bg-color);
+    img {
+      width: 100%;
+    }
 }
 .main_editor{
   width: 100%;
@@ -83,18 +86,13 @@ h1 {
   color: red;
 }
 
-ol li {
+li {
+  line-height: 0.1em;
+  margin 0px 0;
   margin-left: 1em;
+  padding 0;
 }
 
-ul li {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 0;
-  margin: 0;
-  padding: 0;
-  margin-left: 1em;
-}
 .sidebar_button {
     width: 100%;
     background-color: var(--main-bg-color);
@@ -137,3 +135,4 @@ ul li {
     transition: all 0.1s ease-out;
 }
 
+