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..ddb4568 --- /dev/null +++ b/src/components/MarkDownEditor/MarkDownEditor.tsx @@ -0,0 +1,30 @@ +import { Editor, Listener } from 'tiny-markdown-editor' +import './md.css' +import { useEffect, useRef } from "kaioken" + +namespace MarkDownEditor { + export interface Props { + initial: string + onChange: Listener<'change'> + } +} + +export function MarkDownEditor({ initial, onChange }: MarkDownEditor.Props) { + const elRef = useRef(null) + + useEffect(() => { + if (!elRef.current) return + const editor = new Editor({ + element: elRef.current, + content: initial + }) + editor.addEventListener('change', onChange) + }, []) + + return ( +
+ ) +} diff --git a/src/components/MarkDownEditor/md.css b/src/components/MarkDownEditor/md.css new file mode 100644 index 0000000..4038560 --- /dev/null +++ b/src/components/MarkDownEditor/md.css @@ -0,0 +1,47 @@ +.TinyMDE { + @apply h-full bg-transparent overflow-y-scroll dark:text-gray-300 text-gray-600; +} + +.TMMark_TMH1, +.TMMark_TMH2, +.TMMark_TMH3, +.TMMark_TMH4, +.TMMark_TMH5, +.TMMark_TMH6, +.TMMark_TMOL, +.TMMark_TMUL { + @apply text-blue-500; +} + +.TMH1, +.TMH2, +.TMH3, +.TMH4, +.TMH5, +.TMH6 { + @apply uppercase; +} + +.TMLink { + @apply decoration-blue-500; +} + +.TMImage { + @apply decoration-green-500; +} + +.TMCode { + @apply text-blue-800 px-1; +} + +.TMBlockquote { + @apply border-blue-500 bg-blue-100 dark:bg-opacity-5; +} + +.TMFencedCodeBacktick { + @apply dark:bg-white dark:bg-opacity-10 px-1; +} + +.TMInfoString { + @apply text-blue-500; +} diff --git a/src/components/MiniMap.tsx b/src/components/MiniMap.tsx index d037a83..24e524a 100644 --- a/src/components/MiniMap.tsx +++ b/src/components/MiniMap.tsx @@ -21,6 +21,7 @@ export function MiniMap() { const width = canvasDimentsion.value.width / _MAP_SCALE_FACTOR const height = canvasDimentsion.value.height / _MAP_SCALE_FACTOR + useEffect(() => { function _handleScroll(_e: Event) { scrollX.value = window.scrollX @@ -31,8 +32,6 @@ export function MiniMap() { return () => window.removeEventListener('scroll', _handleScroll) }, []) - - return (
) @@ -74,29 +82,37 @@ export function MiniMap() { const note = notes.notes.value[noteKey] function _handleItemClick(_e: MouseEvent) { + const newLeft = note.position.x - ((viewportWidth / 2) - (note.dimensions.w / 2)) + const newTop = note.position.y - ((viewportHeight / 2) - (note.dimensions.h / 2)) window.scrollTo({ - left: note.position.x - ((viewportWidth / 2) - (note.dimensions.w / 2)), - top: note.position.y - ((viewportHeight / 2) - (note.dimensions.h / 2)), + left: newLeft, + top: newTop, behavior: 'smooth' }) } + const newWidth = note.dimensions.w / _MAP_SCALE_FACTOR + const newHeight = note.dimensions.h / _MAP_SCALE_FACTOR + const newTop = (note.position.y / _MAP_SCALE_FACTOR) + const newLeft = (note.position.x / _MAP_SCALE_FACTOR) + const newZIndex = LayerEnum.MINIMAP + 1 + return ( -
) })}
{ localStorage.setItem("notes", JSON.stringify(notes.notes.value)) + saved.value = true }, time) } @@ -86,45 +90,51 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) { window.removeEventListener('mouseup', _handleResizeMouseUp) } + function _handleMdChange(e: ChangeEvent) { + NotesSigal.default.updateNoteProperty(itemKey, 'contents', e.content) + NotesSigal.default.notes.notify() + updateLocalStorage() + saved.value = false + } + + function _handleClose(_e: Event) { + NotesSigal.default.removeNote(item.id) + NotesSigal.default.notes.notify() + updateLocalStorage() + } + + function _handleFocusCard() { + focusedItem.value = itemKey + } + + const cardPositionStyle = { + zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`, + width: `${item.dimensions.w}px`, + height: `${item.dimensions.h}px`, + top: `${item.position.y}px`, + left: `${item.position.x}px`, + } + + const saveIndicatorStyle = { + opacity: saved.value ? '0' : '100' + } + 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" - style={{ - zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`, - width: `${item.dimensions.w}px`, - height: `${item.dimensions.h}px`, - top: `${item.position.y}px`, - left: `${item.position.x}px`, - }} + onmousedown={_handleFocusCard} + style={cardPositionStyle} + className="overflow-hidden text-[#333] dark:bg-[#1a1a1a] dark:border-[#1c1c1c] bg-[#eee] select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#ddd] absolute" > -
+
-
- +
+
+
-