fix styling of markdown text

src/components/MarkDownEditor/MarkDownEditor.tsx

@@ -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 (

src/components/MarkDownEditor/md.css

@@ -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;
 }

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)),
+            left: newLeft,
-            top: image.position.y - ((viewportHeight / 2) - (image.dimensions.h / 2)),
+            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`,
+              width: `${newWidth}px`,
-              height: `${image.dimensions.h / _MAP_SCALE_FACTOR}px`,
+              height: `${newHeight}px`,
-              top: `${(image.position.y / _MAP_SCALE_FACTOR)}px`,
+              top: `${newTop}px`,
-              left: `${(image.position.x / _MAP_SCALE_FACTOR)}px`,
+              left: `${newLeft}px`,
-              zIndex: `${LayerEnum.MINIMAP + 1}`
+              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)),
+            left: newLeft,
-            top: note.position.y - ((viewportHeight / 2) - (note.dimensions.h / 2)),
+            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`,
+              width: `${newWidth}px`,
-              height: `${note.dimensions.h / _MAP_SCALE_FACTOR}px`,
+              height: `${newHeight}px`,
-              top: `${(note.position.y / _MAP_SCALE_FACTOR)}px`,
+              top: `${newTop}px`,
-              left: `${(note.position.x / _MAP_SCALE_FACTOR)}px`,
+              left: `${newLeft}px`,
-              zIndex: `${LayerEnum.MINIMAP + 1}`
+              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`,

src/components/NoteCard.tsx

@@ -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} />
 

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;