Merge pull request 'feat/md' (#5 ) from feat/md into main

Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/5
update gray items border color
2024-10-09 04:32:57 +00:00 · 2024-10-09 00:31:52 -04:00 · 2024-10-09 00:22:53 -04:00 · 2024-10-08 23:57:24 -04:00 · 2024-10-08 01:34:29 -04:00
8 changed files with 165 additions and 54 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.html
+++ b/index.html
@ -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>
--- 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",
--- a/src/components/MarkDownEditor/MarkDownEditor.tsx
+++ 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<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!elRef.current) return
+    const editor = new Editor({
+      element: elRef.current,
+      content: initial
+    })
+    editor.addEventListener('change', onChange)
+  }, [])
+
+  return (
+    <div
+      className={'h-full overflow-hidden'}
+      ref={elRef}
+    ></div>
+  )
+}
--- a/src/components/MarkDownEditor/md.css
+++ 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;
+}
--- 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 (
    <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"}
+          <div className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-400 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`,
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@ -1,9 +1,12 @@
+
 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 { MarkDownEditor } from "./MarkDownEditor/MarkDownEditor"
+import { ChangeEvent } from "tiny-markdown-editor"

 namespace NoteCard {
  export interface NoteCardProps {
@ -27,6 +30,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
  function updateLocalStorage(time?: number) {
    debounce(() => {
      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)
  }

-  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"
-      style={{
+  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`,
-      }}
-    >
-      <div className="flex-1 flex flex-col gap-1">
-        <div className="px-2 flex justify-between items-center cursor-move" onmousedown={_handleMouseDown}>
-          <div style={{
+  }
+
+  const saveIndicatorStyle = {
    opacity: saved.value ? '0' : '100'
-          }} className={`rounded-full w-1 h-1 dark:bg-white bg-green-500`}></div>
-          <button className="text-md dark:text-[#777] text-black" onclick={(_e: Event) => {
-            NotesSigal.default.removeNote(item.id)
-            NotesSigal.default.notes.notify()
-            updateLocalStorage()
-          }}>x</button>
+  }
+
+  return (
+    <div
+      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"
+    >
+      <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={saveIndicatorStyle} className="rounded-full w-1 h-1 dark:bg-white bg-green-500"></div>
+          <button className="text-md dark:text-[#777] text-black" onclick={_handleClose}>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} onChange={_handleMdChange} />
        <ExpandIcon cb={_handleResizeMouseDown} />
-
      </div>
    </div >

@ -156,3 +166,4 @@ function ExpandIcon({ cb }: {
    </svg>
  )
 }
+
--- a/src/styles.css
+++ b/src/styles.css
@ -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;
Author	SHA1	Message	Date
Triston Armstrong	f659a38026	Merge pull request 'feat/md' (#5 ) from feat/md into main Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/5	2024-10-09 04:32:57 +00:00
Triston Armstrong	4ea03e68bf	update gray items border color	2024-10-09 00:31:52 -04:00
Triston Armstrong	412ae1c740	refactor a bit for readability	2024-10-09 00:22:53 -04:00
Triston Armstrong	640e5af6fe	fix styling of markdown text	2024-10-08 23:57:24 -04:00
Triston Armstrong	80e5f03877	get markdown working with existing notes cards	2024-10-08 01:34:29 -04:00