Iaphetes/Apographe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Force editor not to expand

Browse source
This commit is contained in:
Iaphetes 2024-12-31 13:20:06 +01:00
parent 869157c08c
commit 0d41825928
5 changed files with 120 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src-tauri/src/lib.rs
View file

@ -2,27 +2,19 @@ use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options};
use html_tag::HtmlTag; use html_tag::HtmlTag;
use shellexpand; use shellexpand;
use std::{ use std::{
collections::BTreeMap,
env, env,
ffi::{OsStr, OsString},
fs, fs,
path::{absolute, Path}, path::{absolute, Path},
}; };
use tauri::{ipc::IpcResponse, Manager};
use tauri_plugin_fs::FsExt; 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] #[tauri::command]
fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String { 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"; let path = "/foo/bar.txt";
println!("{:?}", shellexpand::full(path)); println!("{:?}", shellexpand::full(path));
// let webview = app.get_webview_window("main").unwrap();
let arena = Arena::new(); let arena = Arena::new();
// Parse the document into a root `AstNode` // 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); let root = parse_document(&arena, document, &options);
// Iterate over all the descendants of root. // 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() { 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 {
let image_path = Path::new(&image_node.url).to_path_buf(); 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); image_node.url = pathtemplate.replace("FILEPATH", &resolved_path);
} }
println!("{}", 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(); rendered_markdown = String::from_utf8(html).unwrap();
return rendered_markdown.to_owned(); return rendered_markdown.to_owned();
// String::from_str("lololo").unwrap() // String::from_str("lololo").unwrap()

103
src/filesystem.js
View file

@ -1,52 +1,51 @@
const { convertFileSrc, invoke } = window.__TAURI__.core; const { convertFileSrc, invoke } = window.__TAURI__.core;
const { homeDir, join } = window.__TAURI__.path; const { homeDir, join } = window.__TAURI__.path;
const { readTextFile } = window.__TAURI__.fs; const { readTextFile } = window.__TAURI__.fs;
import { render_markdown } from "./main.js";
function handle_file_select(filename){ function handle_file_select(filename) {
if (filename.endsWith("md")){ if (filename.endsWith("md")) {
readTextFile(convertFileSrc(filename) ).then( readTextFile(convertFileSrc(filename)).then(
(ret)=>{ (ret) => {
var tag_id = document.getElementById('markdown_input'); var tag_id = document.getElementById('markdown_input');
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>"); tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
} render_markdown();
); }
var tag_id = document.getElementById('rendered_markdown'); );
tag_id.dispatchEvent(new Event("input")); }
}
} }
function dropdown(id) { function dropdown(id) {
var dropdown_element = document.getElementById(id); var dropdown_element = document.getElementById(id);
var dropdown_children = dropdown_element.children; var dropdown_children = dropdown_element.children;
console.log(dropdown_element.getAttribute("expanded")); console.log(dropdown_element.getAttribute("expanded"));
if (dropdown_element.getAttribute("expanded") == "false") { if (dropdown_element.getAttribute("expanded") == "false") {
dropdown_element.setAttribute("expanded", "true"); dropdown_element.setAttribute("expanded", "true");
} }
else{ else {
dropdown_element.setAttribute("expanded", "false"); dropdown_element.setAttribute("expanded", "false");
} }
for (var i = 0; i < dropdown_children.length; i++) { for (var i = 0; i < dropdown_children.length; i++) {
var child = dropdown_children[i]; var child = dropdown_children[i];
console.log(child.id); console.log(child.id);
if (child.className === "filetree-node") { if (child.className === "filetree-node") {
if (document.getElementById(id).getAttribute("expanded") == "true") { if (document.getElementById(id).getAttribute("expanded") == "true") {
document.getElementById(child.id).style.visibility = "visible"; document.getElementById(child.id).style.visibility = "visible";
document.getElementById(child.id).style.height = "auto"; document.getElementById(child.id).style.height = "auto";
} else { } else {
document.getElementById(child.id).style.visibility = "hidden"; document.getElementById(child.id).style.visibility = "hidden";
document.getElementById(child.id).style.height = 0; document.getElementById(child.id).style.height = 0;
} }
}
} }
}
} }
window.onload = function () { window.onload = function() {
invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"]}).then( invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"] }).then(
(ret)=>{ (ret) => {
var tag_id = document.getElementById('filetree'); var tag_id = document.getElementById('filetree');
tag_id.innerHTML = ret; tag_id.innerHTML = ret;
} }
) )
} }
let filetree = document.getElementById('filetree'); let filetree = document.getElementById('filetree');
// Options for the observer (which mutations to observe) // 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 // Callback function to execute when mutations are observed
const callback = (mutationList, observer) => { const callback = (mutationList, observer) => {
var anchors = document.getElementsByClassName("filetree-directory-button"); var anchors = document.getElementsByClassName("filetree-directory-button");
for (var i = 0; i < anchors.length; i++) { for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i]; var anchor = anchors[i];
anchor.onclick = function () { anchor.onclick = function() {
dropdown(this.parentElement.id); dropdown(this.parentElement.id);
};
}; };
var anchors = document.getElementsByClassName("filetree-file-button"); };
for (var i = 0; i < anchors.length; i++) { var anchors = document.getElementsByClassName("filetree-file-button");
var anchor = anchors[i]; for (var i = 0; i < anchors.length; i++) {
anchor.onclick = function () { var anchor = anchors[i];
handle_file_select(this.parentElement.id); anchor.onclick = function() {
}; handle_file_select(this.parentElement.id);
}; };
};
}; };

23
src/index.html
View file

@ -12,6 +12,9 @@
<script type="module" src="./ui.js" defer></script> <script type="module" src="./ui.js" defer></script>
<!-- <script src="./filesystem.js"></script> --> <!-- <script src="./filesystem.js"></script> -->
<script type="module" src="./filesystem.js" defer></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> <script src="//unpkg.com/force-graph"></script>
</head> </head>
@ -35,26 +38,6 @@
</div> </div>
<div class="filetree" id="filetree"> <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>
<div class="row" id="main_editor"> <div class="row" id="main_editor">
<div class="col" id="markdown_input" contenteditable></div> <div class="col" id="markdown_input" contenteditable></div>

18
src/main.js
View file

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

75
src/styles.css
View file

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