Klectr/KSlab
1
0
Fork 0
generated from Klectr/KTemplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get markdown working with existing notes cards

Browse Source
This commit is contained in:
Triston Armstrong 2024-10-08 01:34:29 -04:00
parent 6d4d825d5f
commit 80e5f03877
Signed by: tristonarmstrong
GPG Key ID: A23B48AE45EB6EFE
6 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

5
index.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Kslab</title>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"
/>
</head>
<body>

3
package.json
View File

@ -13,7 +13,8 @@
"dependencies": {
"@tauri-apps/api": "^1",
"caniuse-lite": "^1.0.30001667",
"kaioken": "^0.32.1"
"kaioken": "^0.32.1",
"tiny-markdown-editor": "^0.1.26"
},
"devDependencies": {
"@tauri-apps/cli": "^1",

22
src/components/MarkDownEditor/MarkDownEditor.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Editor } from 'tiny-markdown-editor'
import './md.css'
import { useEffect, useRef } from "kaioken"
export function MarkDownEditor({ initial }: { initial: string }) {
const elRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!elRef.current) return
const editor = new Editor({
element: elRef.current,
content: initial
})
}, [])
return (
<div
className={'h-full overflow-hidden'}
ref={elRef}
></div>
)
}

3
src/components/MarkDownEditor/md.css Normal file
View File

@ -0,0 +1,3 @@
.TinyMDE {
@apply h-full bg-transparent overflow-y-scroll;
}

25
src/components/NoteCard.tsx
View File

@ -1,9 +1,12 @@
import { signal, useRef } from "kaioken"
import { signal, useEffect, useRef } from "kaioken"
import { NotesSigal, focusedItem } from "../signals"
import { useDebounce } from "../utils/useDebounce"
import notes, { NoteCardType } from "../signals/notes"
import { LayerEnum } from "../utils/enums"
import { useThemeDetector } from "../utils/useThemeDetector"
import TinyMDE, { Editor } from 'tiny-markdown-editor'
import { MarkDownEditor } from "./MarkDownEditor/MarkDownEditor"
namespace NoteCard {
export interface NoteCardProps {
@ -21,6 +24,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
const offsetY = useRef(0)
const initialResizeX = useRef(0)
const initialResizeY = useRef(0)
const el = useRef<HTMLInputElement>(null)
const { debounce } = useDebounce()
@ -89,7 +93,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
return (
<div
onmousedown={() => focusedItem.value = itemKey}
className="text-[#333] dark:bg-[#111] dark:border-[#1c1c1c] bg-[#eee] select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#ddd] absolute"
className="overflow-hidden text-[#333] dark:bg-[#111] dark:border-[#1c1c1c] bg-[#eee] select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#ddd] absolute"
style={{
zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
width: `${item.dimensions.w}px`,
@ -98,7 +102,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
left: `${item.position.x}px`,
}}
>
<div className="flex-1 flex flex-col gap-1">
<div className="overflow-hidden flex-1 flex flex-col gap-1">
<div className="px-2 flex justify-between items-center cursor-move" onmousedown={_handleMouseDown}>
<div style={{
opacity: saved.value ? '0' : '100'
@ -110,18 +114,8 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
}}>x</button>
</div>
<hr className="border dark:border-[#1c1c1c] border-[#ddd]" />
<textarea
placeholder={"Todo: put some note here"}
className="flex resize-none px-2 w-full h-full bg-transparent resize-none focus:outline-none dark:text-gray-300"
value={item.contents}
onkeypress={() => { saved.value = false }}
onchange={(e) => {
NotesSigal.default.updateNoteProperty(itemKey, 'contents', e.target.value)
NotesSigal.default.notes.notify()
updateLocalStorage()
saved.value = true
}}
/>
<MarkDownEditor initial={item.contents} />
<ExpandIcon cb={_handleResizeMouseDown} />
@ -156,3 +150,4 @@ function ExpandIcon({ cb }: {
</svg>
)
}