diff --git a/bun.lockb b/bun.lockb index 45ccfd5..dbb1abe 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html index 67084e5..7690c63 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,11 @@ Kslab + diff --git a/package.json b/package.json index 079fc03..728dbae 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/MarkDownEditor/MarkDownEditor.tsx b/src/components/MarkDownEditor/MarkDownEditor.tsx new file mode 100644 index 0000000..95a9bc5 --- /dev/null +++ b/src/components/MarkDownEditor/MarkDownEditor.tsx @@ -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(null) + + useEffect(() => { + if (!elRef.current) return + const editor = new Editor({ + element: elRef.current, + content: initial + }) + }, []) + + return ( +
+ ) +} diff --git a/src/components/MarkDownEditor/md.css b/src/components/MarkDownEditor/md.css new file mode 100644 index 0000000..c730965 --- /dev/null +++ b/src/components/MarkDownEditor/md.css @@ -0,0 +1,3 @@ +.TinyMDE { + @apply h-full bg-transparent overflow-y-scroll; +} diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index ab019ff..75eb98f 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -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(null) const { debounce } = useDebounce() @@ -89,7 +93,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { return (
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`, }} > -
+
x
-