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:
47
src/renderer/components/notes/MilkdownEditor.tsx
Normal file
47
src/renderer/components/notes/MilkdownEditor.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useRef } from 'react';
|
||||
import { Editor, rootCtx, defaultValueCtx } from '@milkdown/kit/core';
|
||||
import { commonmark } from '@milkdown/kit/preset/commonmark';
|
||||
import { history } from '@milkdown/kit/plugin/history';
|
||||
import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
|
||||
import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/react';
|
||||
|
||||
import '@milkdown/kit/prose/view/style/prosemirror.css';
|
||||
|
||||
interface MilkdownEditorProps {
|
||||
initialContent: string;
|
||||
onChange: (markdown: string) => void;
|
||||
}
|
||||
|
||||
function MilkdownInner({ initialContent, onChange }: MilkdownEditorProps) {
|
||||
const onChangeRef = useRef(onChange);
|
||||
onChangeRef.current = onChange;
|
||||
|
||||
useEditor((root) =>
|
||||
Editor.make()
|
||||
.config((ctx) => {
|
||||
ctx.set(rootCtx, root);
|
||||
ctx.set(defaultValueCtx, initialContent);
|
||||
})
|
||||
.use(commonmark)
|
||||
.use(history)
|
||||
.use(listener)
|
||||
.config((ctx) => {
|
||||
ctx.get(listenerCtx).markdownUpdated((_ctx, markdown, prevMarkdown) => {
|
||||
if (markdown !== prevMarkdown) {
|
||||
onChangeRef.current(markdown);
|
||||
}
|
||||
});
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return <Milkdown />;
|
||||
}
|
||||
|
||||
export function MilkdownEditor(props: MilkdownEditorProps) {
|
||||
return (
|
||||
<MilkdownProvider>
|
||||
<MilkdownInner {...props} />
|
||||
</MilkdownProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user