@@ -12,7 +22,7 @@ function NoteEditor() {
return (
{ currentNote.title }
-
{ currentNote.body }
+
)
}
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..333d3ed
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,37 @@
+import { createContext, useContext, useState } from "react";
+
+type Theme = "light" | "dark";
+
+const ThemeContext = createContext<{
+ theme: Theme;
+ toggleTheme: () => void;
+} | null>(null);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setTheme] = useState
(() =>
+ document.documentElement.classList.contains("dark")
+ ? "dark"
+ : "light"
+ );
+
+ const toggleTheme = () => {
+ const html = document.documentElement;
+ html.classList.toggle("dark");
+
+ setTheme(
+ html.classList.contains("dark") ? "dark" : "light"
+ );
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTheme() {
+ const ctx = useContext(ThemeContext);
+ if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+ return ctx;
+}
diff --git a/src/index.css b/src/index.css
index 063244a..eff6f74 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,13 @@
@import "tailwindcss";
@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
+@source "../node_modules/@blocknote/shadcn";
body {
font-family: "Fira Sans", sans-serif, monospace !important;
}
+@custom-variant dark (&:is(.dark *));
+
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
@@ -115,6 +116,14 @@ body {
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
+
+ /* Blocknote tweaks */
+ --bn-colors-editor-background: #0a0a0a !important;
+ --bn-colors-block-background: #0a0a0a !important;
+
+ .bn-add-file-button {
+ background-color: var(--primary-foreground) !important;
+ }
}
@layer base {
diff --git a/src/models/Note.ts b/src/models/Note.ts
index ae49686..956667d 100644
--- a/src/models/Note.ts
+++ b/src/models/Note.ts
@@ -1,12 +1,23 @@
+import { PartialBlock } from "@blocknote/core";
+
export class Note {
id: string;
title: string;
- body: string;
+ body: PartialBlock[];
constructor(data: Partial = {}) {
this.id = data.id ?? this.randomNumber();
this.title = data.title ?? "Untitled Note";
- this.body = data.body ?? "";
+ this.body = data.body ?? this.defaultBody();
+ }
+
+ private defaultBody(): any {
+ return [
+ {
+ type: "paragraph",
+ content: ""
+ }
+ ]
}
// TODO: replace with UUID