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

feat/md #5

Merged
tristonarmstrong merged 4 commits from feat/md into main 2024-10-09 04:32:58 +00:00
Conversation 0 Commits 4 Files Changed 8 +103 -29
5 changed files with 103 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 640e5af6fe - Show all commits

12
src/components/MarkDownEditor/MarkDownEditor.tsx
View File

@ -1,8 +1,15 @@
import { Editor } from 'tiny-markdown-editor'
import { Editor, Listener } from 'tiny-markdown-editor'
import './md.css'
import { useEffect, useRef } from "kaioken"
export function MarkDownEditor({ initial }: { initial: string }) {
namespace MarkDownEditor {
export interface Props {
initial: string
onChange: Listener<'change'>
}
}
export function MarkDownEditor({ initial, onChange }: MarkDownEditor.Props) {
const elRef = useRef<HTMLDivElement>(null)
useEffect(() => {
@ -11,6 +18,7 @@ export function MarkDownEditor({ initial }: { initial: string }) {
element: elRef.current,
content: initial
})
editor.addEventListener('change', onChange)
}, [])
return (

46
src/components/MarkDownEditor/md.css
View File

@ -1,3 +1,47 @@
.TinyMDE {
@apply h-full bg-transparent overflow-y-scroll;
@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;
}

50
src/components/MiniMap.tsx
View File

@ -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 (
<div
className="dark:bg-[#ffffff11] bg-[#0001] fixed rounded"
@ -48,22 +47,31 @@ export function MiniMap() {
const el = useRef(null)
function _handleItemClick(_e: MouseEvent) {
const newLeft = image.position.x - ((viewportWidth / 2) - (image.dimensions.w / 2))
const newTop = image.position.y - ((viewportHeight / 2) - (image.dimensions.h / 2))
window.scrollTo({
left: image.position.x - ((viewportWidth / 2) - (image.dimensions.w / 2)),
top: image.position.y - ((viewportHeight / 2) - (image.dimensions.h / 2)),
left: newLeft,
top: newTop,
behavior: 'smooth'
})
}
const newWidth = image.dimensions.w / _MAP_SCALE_FACTOR
const newHeight = image.dimensions.h / _MAP_SCALE_FACTOR
const newTop = (image.position.y / _MAP_SCALE_FACTOR)
const newLeft = (image.position.x / _MAP_SCALE_FACTOR)
const newZIndex = LayerEnum.MINIMAP + 1
return (
<div ref={el} className={"absolute dark:bg-green-500 bg-green-300 dark:hover:bg-blue-500 hover:bg-blue-300 cursor-pointer border dark:border-[#222] border-green-500 rounded"}
onclick={_handleItemClick}
style={{
width: `${image.dimensions.w / _MAP_SCALE_FACTOR}px`,
height: `${image.dimensions.h / _MAP_SCALE_FACTOR}px`,
top: `${(image.position.y / _MAP_SCALE_FACTOR)}px`,
left: `${(image.position.x / _MAP_SCALE_FACTOR)}px`,
zIndex: `${LayerEnum.MINIMAP + 1}`
width: `${newWidth}px`,
height: `${newHeight}px`,
top: `${newTop}px`,
left: `${newLeft}px`,
zIndex: `${newZIndex}`
}}
></div>
)
@ -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 (
<div className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-500 rounded"}
onclick={_handleItemClick}
style={{
width: `${note.dimensions.w / _MAP_SCALE_FACTOR}px`,
height: `${note.dimensions.h / _MAP_SCALE_FACTOR}px`,
top: `${(note.position.y / _MAP_SCALE_FACTOR)}px`,
left: `${(note.position.x / _MAP_SCALE_FACTOR)}px`,
zIndex: `${LayerEnum.MINIMAP + 1}`
width: `${newWidth}px`,
height: `${newHeight}px`,
top: `${newTop}px`,
left: `${newLeft}px`,
zIndex: `${newZIndex}`
}}
></div>
)
})}
<div
className={'absolute bg-blue-200 bg-opacity-10 border dark:border-blue-800 border-blue-500 bg-blue-500 rounded'}
className={'pointer-events-none absolute bg-blue-200 bg-opacity-10 border dark:border-blue-800 border-blue-500 bg-blue-500 rounded'}
style={{
width: `${viewportWidth / _MAP_SCALE_FACTOR}px`,
height: `${viewportHeight / _MAP_SCALE_FACTOR}px`,

15
src/components/NoteCard.tsx
View File

@ -1,12 +1,12 @@
import { signal, useEffect, useRef } from "kaioken"
import { signal, 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"
import { ChangeEvent } from "tiny-markdown-editor"
namespace NoteCard {
export interface NoteCardProps {
@ -24,7 +24,6 @@ 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()
@ -90,10 +89,16 @@ 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()
}
return (
<div
onmousedown={() => focusedItem.value = itemKey}
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"
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"
style={{
zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
width: `${item.dimensions.w}px`,
@ -115,7 +120,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
</div>
<hr className="border dark:border-[#1c1c1c] border-[#ddd]" />
<MarkDownEditor initial={item.contents} />
<MarkDownEditor initial={item.contents} onChange={_handleMdChange} />
<ExpandIcon cb={_handleResizeMouseDown} />

9
src/styles.css
View File

@ -13,14 +13,15 @@
box-sizing: border-box;
}
*::-webkit-scrollbar {
display: none;
}
html {
overflow: scroll;
}
html,
body {
overscroll-behavior-x: none;
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-synthesis: none;