feat: integrate Milkdown editor for note-taking functionality

- Added Milkdown dependencies: @milkdown/kit, @milkdown/react, @milkdown/theme-nord.
- Implemented MilkdownEditor component for rich text editing in notes.
- Updated /notes/$noteId route to include editable title and auto-saving functionality.
- Enhanced UI with loading states, saving indicators, and delete confirmation dialog.
- Applied Milkdown-specific CSS overrides for consistent theming and styling.
- Improved note update logic with debounced saving and cleanup on unmount.
This commit is contained in:
Roberto Musso
2026-02-22 22:47:05 +01:00
parent 7860ca6ad1
commit 2308158976
9 changed files with 3016 additions and 34 deletions

View File

@@ -140,3 +140,142 @@ body {
display: flex;
overflow: hidden;
}
/* Milkdown editor overrides */
[data-milkdown-root] {
display: flex;
flex-direction: column;
height: 100%;
}
.milkdown {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
color: var(--foreground);
font-family: inherit;
line-height: 1.75;
}
.milkdown .editor {
flex: 1;
outline: none;
padding: 0;
overflow-y: auto;
word-break: break-word;
overflow-wrap: break-word;
}
.milkdown .editor > * + * {
margin-top: 0.75em;
}
.milkdown .editor h1 {
font-size: 1.875rem;
font-weight: 700;
line-height: 1.2;
color: var(--foreground);
}
.milkdown .editor h2 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
color: var(--foreground);
}
.milkdown .editor h3 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
color: var(--foreground);
}
.milkdown .editor h4 {
font-size: 1.125rem;
font-weight: 600;
color: var(--foreground);
}
.milkdown .editor h5,
.milkdown .editor h6 {
font-size: 1rem;
font-weight: 600;
color: var(--foreground);
}
.milkdown .editor p {
color: var(--foreground);
}
.milkdown .editor blockquote {
border-left: 3px solid var(--border);
padding-left: 1rem;
color: var(--muted-foreground);
font-style: italic;
}
.milkdown .editor pre {
background: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.75rem 1rem;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.875rem;
}
.milkdown .editor code {
background: var(--muted);
color: var(--foreground);
padding: 0.125rem 0.375rem;
border-radius: calc(var(--radius) - 4px);
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.875em;
}
.milkdown .editor pre code {
background: transparent;
padding: 0;
border-radius: 0;
}
.milkdown .editor ul,
.milkdown .editor ol {
padding-left: 1.5rem;
color: var(--foreground);
}
.milkdown .editor ul {
list-style-type: disc;
}
.milkdown .editor ol {
list-style-type: decimal;
}
.milkdown .editor li + li {
margin-top: 0.25em;
}
.milkdown .editor a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.milkdown .editor hr {
border: none;
border-top: 1px solid var(--border);
margin: 1.5em 0;
}
.milkdown .editor strong {
font-weight: 600;
}
.milkdown .editor em {
font-style: italic;
}