Force editor not to expand

src-tauri/src/lib.rs

@@ -2,27 +2,19 @@ use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options};
 use html_tag::HtmlTag;
 use shellexpand;
 use std::{
-    collections::BTreeMap,
     env,
-    ffi::{OsStr, OsString},
     fs,
     path::{absolute, Path},
 };
-use tauri::{ipc::IpcResponse, 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 {
-    format!("Hello, {}! You've been greeted from Rust!", name)
-}
 
 #[tauri::command]
 fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String {
-    let mut rendered_markdown: String = String::new();
+    let rendered_markdown: String;
     let path = "/foo/bar.txt";
     println!("{:?}", shellexpand::full(path));
-    // let webview = app.get_webview_window("main").unwrap();
     let arena = Arena::new();
 
     // Parse the document into a root `AstNode`
@@ -32,23 +24,31 @@ fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String
     let root = parse_document(&arena, document, &options);
 
     // Iterate over all the descendants of root.
-    env::set_current_dir(basepath);
+
+    if let Ok(resolved_basepath) = shellexpand::full(&basepath) {
+        println!(
+            "{:?}",
+            env::set_current_dir(&resolved_basepath.into_owned())
+        );
+    }
+
     for node in root.descendants() {
         if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value {
             let image_path = Path::new(&image_node.url).to_path_buf();
-            let absolute_image_path = absolute(image_node.url.clone());
+
-            let absolute_image_path = 
+            let absolute_image_path_res = absolute(image_node.url.clone());
-.unwrap_or(image_path)
+
-                .as_path()
+            let absolute_image_path = absolute_image_path_res.unwrap_or(image_path.clone());
-                .to_string_lossy()
+            let absolute_image_path_str = absolute_image_path.as_path().to_string_lossy();
-            if let Ok(resolved_path) = shellexpand::full(&absolute_image_path) {
+            if let Ok(resolved_path) = shellexpand::full(&absolute_image_path_str) {
                 image_node.url = pathtemplate.replace("FILEPATH", &resolved_path);
             }
+            println!("{}", image_node.url);
         }
     }
     let mut html = vec![];
     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();
     return rendered_markdown.to_owned();
     // String::from_str("lololo").unwrap()

src/filesystem.js

@@ -1,17 +1,16 @@
 const { convertFileSrc, invoke } = window.__TAURI__.core;
 const { homeDir, join } = window.__TAURI__.path;
 const { readTextFile } = window.__TAURI__.fs;
-
+import { render_markdown } from "./main.js";
 function handle_file_select(filename) {
   if (filename.endsWith("md")) {
     readTextFile(convertFileSrc(filename)).then(
       (ret) => {
         var tag_id = document.getElementById('markdown_input');
         tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
+        render_markdown();
       }
     );
-        var tag_id = document.getElementById('rendered_markdown');
-        tag_id.dispatchEvent(new Event("input"));
   }
 }
 

src/index.html

@@ -12,6 +12,9 @@
   <script type="module" src="./ui.js" defer></script>
   <!-- <script src="./filesystem.js"></script> -->
   <script type="module" src="./filesystem.js" defer></script>
+  <script type="text/javascript" src="./main.js"></script>
+  <script type="text/javascript" src="./filesystem.js"></script>
+
   <script src="//unpkg.com/force-graph"></script>
 </head>
 
@@ -35,26 +38,6 @@
       </div>
 
       <div class="filetree" id="filetree">
-        <!-- <div class="filetree-node"> -->
-        <!-- <button class="filetree-element"> -->
-        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 1 -->
-        <!-- </button> -->
-        <!-- <div class="filetree-node" id="folder2"> -->
-        <!-- <button class="filetree-element"> -->
-        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 2 -->
-        <!-- </button> -->
-        <!-- <div class="filetree-node" id="folder3"> -->
-        <!-- <button class="filetree-element"> -->
-        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 3 -->
-        <!-- </button> -->
-        <!-- </div> -->
-        <!-- <div class="filetree-node" id="folder4"> -->
-        <!-- <button class="filetree-element"> -->
-        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 4 -->
-        <!-- </button> -->
-        <!-- </div> -->
-        <!-- </div> -->
-        <!-- </div> -->
       </div>
       <div class="row" id="main_editor">
         <div class="col" id="markdown_input" contenteditable></div>

src/main.js

@@ -12,18 +12,22 @@ let placeholder_path = "FILEPATH";
 let path_template = convertFileSrc(placeholder_path);
 
 let textarea = document.getElementById('markdown_input');
-textarea.addEventListener('input', ()=> {
+
+
+export function render_markdown(){
   text = textarea.innerText;
-    var tag_id = document.getElementById('rendered_markdown');
+    invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase"}).then(
-    invoke("parse_markdown", { document: text, pathtemplate: path_template}).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">'))
         }
     );
+}
+textarea.addEventListener('input', ()=> {
+  render_markdown();
+    
 
-// });
 });
 
  // Random tree

src/styles.css

@@ -4,10 +4,11 @@
 
 :root {
   --main-bg-color: #2f2f2f;
-  --sidebar-width: 3em;
   --highlight-color: #5f5f5f;
-  --text-color: #ffffff;
+  --text-color: #f6f6f6;
 
+  --sidebar-width: 3em;
+  --filetree-width: 10em;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -20,8 +21,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-
-
 }
 
 * {
@@ -32,62 +31,59 @@
 
 .container {
   height: 100%;
+  max-width: 100%;
   margin: 0;
   padding-top: 1vh;
   display: flex;
   flex-direction: row;
-  justify-content: left;
   text-align: left;
+  align-items: stretch;
 }
 
+#main_editor {
+  width: 100%;
+  font-size: 16px;
+  line-height: 18px;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  color: var(--text-color);
+  background-color: var(--main-bg-color);
+  float: right;
+  overflow: hidden;
+}
 
 .col {
+  flex: 0 0 49%;
   width: 50%;
   padding: 0.5em;
   margin: .1em;
   border: solid;
   border-radius: .5em;
 }
-
 #markdown_input {
   grid-column: 1;
   grid-row: 1;
   text-align: left;
-  /*float:left;*/
+  color: var(--text-color);
-  color: #f6f6f6;
   background: var(--main-bg-color);
-  overflow: scroll;
+  overflow-x: wrap;
+  overflow-y: scroll;
 }
 
 #rendered_markdown {
   grid-column: 2;
   grid-row: 1;
-
-
-  /*float:right;*/
   text-align: left;
-  color: #f6f6f6;
+  color: var(--text-color);
   background-color: var(--main-bg-color);
-
   img {
     width: 100%;
   }
-
+  overflow-x: wrap;
-  overflow: scroll;
+  overflow-y: scroll;
 }
 
-.main_editor {
-  width: 100%;
-  text-align: center;
-  font-size: 16px;
-  line-height: 18px;
-  display: flex;
-
-  flex-direction: column;
-  justify-content: center;
-  color: #f6f6f6;
-  background-color: var(--main-bg-color);
-}
 
 h1 {
   text-align: left;
@@ -98,10 +94,10 @@ h1 {
 }
 
 li {
-  line-height: 0.1em;
+  /* line-height: 0.1em; */
-  margin 0px 0;
+  margin: 0;
   margin-left: 1em;
-  padding 0;
+  padding: 0;
 }
 
 .sidebar_button {
@@ -133,11 +129,6 @@ li {
 
 }
 
-#main_editor {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
 
 .main {
   display: flex;
@@ -149,14 +140,16 @@ li {
   visibility: visible;
   width: var(--sidebar-width);
   transition: all 0.1s ease-out;
+  float: left;
 }
 
-
-
 .filetree {
-  width: 10em;
+  float: left;
+  border: solid;
+  /* width: var(--filetree-width); */
   overflow-x: scroll;
   overflow-y: scroll;
+  resize: width;
 }
 
 .filetree-directory-button,
@@ -172,7 +165,9 @@ li {
   color: var(--text-color);
 
 }
-
+.filetree-node{
+  margin-left: 1em;
+}
 .filetree-icon {
   height: 1em;
   background-color: transparent;