working on editor styling
This commit is contained in:
Adrian Osterwind
parent
05519bad5b
commit
5f35da27f2
3 changed files with 50 additions and 125 deletions
7
deno.lock
generated
7
deno.lock
generated
|
|
@ -7,6 +7,7 @@
|
|||
"npm:@tauri-apps/api@2": "2.1.1",
|
||||
"npm:@tauri-apps/cli@2": "2.1.0",
|
||||
"npm:@tauri-apps/cli@2.1.0": "2.1.0",
|
||||
"npm:@tauri-apps/plugin-fs@^2.0.2": "2.0.2",
|
||||
"npm:@tauri-apps/plugin-shell@2": "2.0.1",
|
||||
"npm:d3@^7.9.0": "7.9.0_d3-selection@3.0.0",
|
||||
"npm:marked@15": "15.0.0",
|
||||
|
|
@ -271,6 +272,12 @@
|
|||
"@tauri-apps/cli-win32-x64-msvc"
|
||||
]
|
||||
},
|
||||
"@tauri-apps/plugin-fs@2.0.2": {
|
||||
"integrity": "sha512-4YZaX2j7ta81M5/DL8aN10kTnpUkEpkPo1FTYPT8Dd0ImHe3azM8i8MrtjrDGoyBYLPO3zFv7df/mSCYF8oA0Q==",
|
||||
"dependencies": [
|
||||
"@tauri-apps/api"
|
||||
]
|
||||
},
|
||||
"@tauri-apps/plugin-shell@2.0.1": {
|
||||
"integrity": "sha512-akU1b77sw3qHiynrK0s930y8zKmcdrSD60htjH+mFZqv5WaakZA/XxHR3/sF1nNv9Mgmt/Shls37HwnOr00aSw==",
|
||||
"dependencies": [
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ fn parse_markdown(document: &str) -> String {
|
|||
// }
|
||||
let mut html = vec![];
|
||||
format_html(root, &Options::default(), &mut html).unwrap();
|
||||
// println!("{:?}", String::from_utf8(html.clone()));
|
||||
println!("{:?}", String::from_utf8(html.clone()));
|
||||
String::from_utf8(html).unwrap()
|
||||
// String::from_str("lololo").unwrap()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,33 @@
|
|||
<script lang="ts">
|
||||
|
||||
import { exists, BaseDirectory } from '@tauri-apps/plugin-fs';
|
||||
import { marked } from 'marked';
|
||||
import asyncDerivedStream from '../stream.js'
|
||||
import { writable } from 'svelte/store'
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
|
||||
let text = writable(`Some words are *italic*, some are **bold**
|
||||
|
||||
|
||||
|
||||
`);
|
||||
|
||||
function randomSleep () {
|
||||
const timeout = Math.floor(Math.random() * 2000)
|
||||
return new Promise(resolve => setTimeout(resolve, timeout))
|
||||
}
|
||||
|
||||
let text = writable(`# test`);
|
||||
async function parse_markdown(document){
|
||||
return await invoke("parse_markdown", { document });
|
||||
}
|
||||
|
||||
let parsed_text = asyncDerivedStream(text, parse_markdown)
|
||||
|
||||
</script>
|
||||
|
||||
<textarea bind:value={$text}></textarea>
|
||||
|
||||
|
||||
{@html $parsed_text}
|
||||
<main class="container">
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<div class="row">
|
||||
<div class="column1">
|
||||
<textarea bind:value={$text} id="MarkdownEditor"></textarea>
|
||||
</div>
|
||||
<div class="column2">
|
||||
<renderedmarkdown>
|
||||
|
||||
{@html $parsed_text}
|
||||
</renderedmarkdown>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!--
|
||||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
|
@ -75,124 +65,52 @@ function randomSleep () {
|
|||
<p>{greetMsg}</p>
|
||||
</main>
|
||||
|
||||
-->
|
||||
<style>
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.svelte-kit:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00);
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 95vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.column1{
|
||||
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border:3px solid black;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
.column2{
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
float: right;
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
renderedmarkdown :global {
|
||||
h1 {
|
||||
text-align: left;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.MarkdownEditor{
|
||||
color: red;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
-->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue