41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import "@blocknote/core/fonts/inter.css";
|
|
import type { BlockNoteEditor } from "@blocknote/core";
|
|
import "@blocknote/mantine/style.css";
|
|
import { BlockNoteView } from "@blocknote/mantine";
|
|
import { useCreateBlockNote } from "@blocknote/react";
|
|
import { useTheme } from "@xtablo/shared/contexts/ThemeContext";
|
|
|
|
interface NotesEditorProps {
|
|
initialContent: string;
|
|
onChange?: (content: string) => void;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
export function NotesEditor({ initialContent, onChange, readOnly = false }: NotesEditorProps) {
|
|
const { theme } = useTheme();
|
|
|
|
// Create editor instance
|
|
const editor: BlockNoteEditor = useCreateBlockNote({
|
|
initialContent: initialContent ? JSON.parse(initialContent) : undefined,
|
|
});
|
|
|
|
// Handle changes
|
|
const handleChange = () => {
|
|
if (onChange && !readOnly) {
|
|
const blocks = editor.document;
|
|
onChange(JSON.stringify(blocks));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full p-4">
|
|
<BlockNoteView
|
|
editor={editor}
|
|
theme={theme === "dark" ? "dark" : "light"}
|
|
editable={!readOnly}
|
|
onChange={readOnly ? undefined : handleChange}
|
|
data-theming-css
|
|
/>
|
|
</div>
|
|
);
|
|
}
|