c1aa6829c9
- Introduced a new `task_comments` table in the database schema. - Implemented task comments API endpoints for listing, creating, and deleting comments. - Enhanced the task detail dialog to display comments and allow users to add new comments. - Updated task row component to handle click events for viewing task details. - Added a theme provider to manage light/dark mode across the application. - Refactored Milkdown editor to use Crepe for improved markdown editing experience. - Updated global styles to accommodate new editor and theme changes. - Enhanced task filtering and sorting functionality in the tasks page.
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { Crepe, CrepeFeature } from '@milkdown/crepe';
|
|
|
|
import '@milkdown/crepe/theme/common/style.css';
|
|
import '@milkdown/crepe/theme/nord.css';
|
|
|
|
interface MilkdownEditorProps {
|
|
initialContent: string;
|
|
onChange: (markdown: string) => void;
|
|
}
|
|
|
|
export function MilkdownEditor({ initialContent, onChange }: MilkdownEditorProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const crepeRef = useRef<Crepe | null>(null);
|
|
const onChangeRef = useRef(onChange);
|
|
onChangeRef.current = onChange;
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
|
|
const crepe = new Crepe({
|
|
root: containerRef.current,
|
|
defaultValue: initialContent,
|
|
featureConfigs: {
|
|
[CrepeFeature.Placeholder]: {
|
|
text: 'Start writing...',
|
|
},
|
|
},
|
|
});
|
|
|
|
crepe.on((listener) => {
|
|
listener.markdownUpdated((_ctx, markdown, prevMarkdown) => {
|
|
if (markdown !== prevMarkdown) {
|
|
onChangeRef.current(markdown);
|
|
}
|
|
});
|
|
});
|
|
|
|
crepe.create();
|
|
crepeRef.current = crepe;
|
|
|
|
return () => {
|
|
crepe.destroy();
|
|
crepeRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
return <div ref={containerRef} className="milkdown-container" />;
|
|
}
|