Force editor not to expand
This commit is contained in:
parent
869157c08c
commit
0d41825928
5 changed files with 120 additions and 139 deletions
|
|
@ -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 =
|
||||
.unwrap_or(image_path)
|
||||
.as_path()
|
||||
.to_string_lossy()
|
||||
if let Ok(resolved_path) = shellexpand::full(&absolute_image_path) {
|
||||
|
||||
let absolute_image_path_res = absolute(image_node.url.clone());
|
||||
|
||||
let absolute_image_path = absolute_image_path_res.unwrap_or(image_path.clone());
|
||||
let absolute_image_path_str = absolute_image_path.as_path().to_string_lossy();
|
||||
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()
|
||||
|
|
|
|||
|
|
@ -1,52 +1,51 @@
|
|||
const { convertFileSrc, invoke } = window.__TAURI__.core;
|
||||
const { homeDir, join } = window.__TAURI__.path;
|
||||
const { readTextFile } = window.__TAURI__.fs;
|
||||
|
||||
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>");
|
||||
}
|
||||
);
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
tag_id.dispatchEvent(new Event("input"));
|
||||
}
|
||||
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();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function dropdown(id) {
|
||||
var dropdown_element = document.getElementById(id);
|
||||
var dropdown_children = dropdown_element.children;
|
||||
console.log(dropdown_element.getAttribute("expanded"));
|
||||
if (dropdown_element.getAttribute("expanded") == "false") {
|
||||
dropdown_element.setAttribute("expanded", "true");
|
||||
}
|
||||
else{
|
||||
dropdown_element.setAttribute("expanded", "false");
|
||||
}
|
||||
for (var i = 0; i < dropdown_children.length; i++) {
|
||||
var child = dropdown_children[i];
|
||||
console.log(child.id);
|
||||
if (child.className === "filetree-node") {
|
||||
if (document.getElementById(id).getAttribute("expanded") == "true") {
|
||||
document.getElementById(child.id).style.visibility = "visible";
|
||||
document.getElementById(child.id).style.height = "auto";
|
||||
} else {
|
||||
document.getElementById(child.id).style.visibility = "hidden";
|
||||
document.getElementById(child.id).style.height = 0;
|
||||
}
|
||||
}
|
||||
var dropdown_element = document.getElementById(id);
|
||||
var dropdown_children = dropdown_element.children;
|
||||
console.log(dropdown_element.getAttribute("expanded"));
|
||||
if (dropdown_element.getAttribute("expanded") == "false") {
|
||||
dropdown_element.setAttribute("expanded", "true");
|
||||
}
|
||||
else {
|
||||
dropdown_element.setAttribute("expanded", "false");
|
||||
}
|
||||
for (var i = 0; i < dropdown_children.length; i++) {
|
||||
var child = dropdown_children[i];
|
||||
console.log(child.id);
|
||||
if (child.className === "filetree-node") {
|
||||
if (document.getElementById(id).getAttribute("expanded") == "true") {
|
||||
document.getElementById(child.id).style.visibility = "visible";
|
||||
document.getElementById(child.id).style.height = "auto";
|
||||
} else {
|
||||
document.getElementById(child.id).style.visibility = "hidden";
|
||||
document.getElementById(child.id).style.height = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
window.onload = function () {
|
||||
invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"]}).then(
|
||||
(ret)=>{
|
||||
var tag_id = document.getElementById('filetree');
|
||||
tag_id.innerHTML = ret;
|
||||
}
|
||||
)
|
||||
window.onload = function() {
|
||||
invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"] }).then(
|
||||
(ret) => {
|
||||
var tag_id = document.getElementById('filetree');
|
||||
tag_id.innerHTML = ret;
|
||||
}
|
||||
)
|
||||
}
|
||||
let filetree = document.getElementById('filetree');
|
||||
// Options for the observer (which mutations to observe)
|
||||
|
|
@ -54,20 +53,20 @@ const config = { attributes: true, childList: true, subtree: true };
|
|||
|
||||
// Callback function to execute when mutations are observed
|
||||
const callback = (mutationList, observer) => {
|
||||
var anchors = document.getElementsByClassName("filetree-directory-button");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var anchor = anchors[i];
|
||||
anchor.onclick = function () {
|
||||
dropdown(this.parentElement.id);
|
||||
};
|
||||
var anchors = document.getElementsByClassName("filetree-directory-button");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var anchor = anchors[i];
|
||||
anchor.onclick = function() {
|
||||
dropdown(this.parentElement.id);
|
||||
};
|
||||
var anchors = document.getElementsByClassName("filetree-file-button");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var anchor = anchors[i];
|
||||
anchor.onclick = function () {
|
||||
handle_file_select(this.parentElement.id);
|
||||
};
|
||||
};
|
||||
var anchors = document.getElementsByClassName("filetree-file-button");
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var anchor = anchors[i];
|
||||
anchor.onclick = function() {
|
||||
handle_file_select(this.parentElement.id);
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
18
src/main.js
18
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', ()=> {
|
||||
text = textarea.innerText;
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
invoke("parse_markdown", { document: text, pathtemplate: path_template}).then(
|
||||
|
||||
|
||||
export function render_markdown(){
|
||||
text = textarea.innerText;
|
||||
invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase"}).then(
|
||||
(ret)=>{
|
||||
var tag_id = document.getElementById('rendered_markdown');
|
||||
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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: #f6f6f6;
|
||||
color: var(--text-color);
|
||||
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: scroll;
|
||||
overflow-x: wrap;
|
||||
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;
|
||||
margin 0px 0;
|
||||
/* line-height: 0.1em; */
|
||||
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue