mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-17 18:35:19 +02:00
refactor: improve type safety and structure in editor page
- Updated BlockNote document handling by defining TypeScript types for better clarity and maintainability. - Refactored extractTitleFromBlockNote function to utilize the new types, enhancing type safety. - Changed state management for editorContent to use the defined BlockNoteDocument type. - Adjusted layout classes for improved responsiveness and visual consistency in the editor interface.
This commit is contained in:
parent
8fae4b1742
commit
ee5d14c86c
1 changed files with 19 additions and 7 deletions
|
|
@ -25,17 +25,29 @@ import { Separator } from "@/components/ui/separator";
|
||||||
import { notesApiService } from "@/lib/apis/notes-api.service";
|
import { notesApiService } from "@/lib/apis/notes-api.service";
|
||||||
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
|
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
|
||||||
|
|
||||||
|
// BlockNote types
|
||||||
|
type BlockNoteInlineContent = string | { text?: string; type?: string; styles?: Record<string, unknown> };
|
||||||
|
|
||||||
|
interface BlockNoteBlock {
|
||||||
|
type: string;
|
||||||
|
content?: BlockNoteInlineContent[];
|
||||||
|
children?: BlockNoteBlock[];
|
||||||
|
props?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
type BlockNoteDocument = BlockNoteBlock[] | null | undefined;
|
||||||
|
|
||||||
interface EditorContent {
|
interface EditorContent {
|
||||||
document_id: number;
|
document_id: number;
|
||||||
title: string;
|
title: string;
|
||||||
document_type?: string;
|
document_type?: string;
|
||||||
blocknote_document: any;
|
blocknote_document: BlockNoteDocument;
|
||||||
updated_at: string | null;
|
updated_at: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper function to extract title from BlockNote document
|
// Helper function to extract title from BlockNote document
|
||||||
// Takes the text content from the first block (should be a heading for notes)
|
// Takes the text content from the first block (should be a heading for notes)
|
||||||
function extractTitleFromBlockNote(blocknoteDocument: any[] | null | undefined): string {
|
function extractTitleFromBlockNote(blocknoteDocument: BlockNoteDocument): string {
|
||||||
if (!blocknoteDocument || !Array.isArray(blocknoteDocument) || blocknoteDocument.length === 0) {
|
if (!blocknoteDocument || !Array.isArray(blocknoteDocument) || blocknoteDocument.length === 0) {
|
||||||
return "Untitled";
|
return "Untitled";
|
||||||
}
|
}
|
||||||
|
|
@ -49,9 +61,9 @@ function extractTitleFromBlockNote(blocknoteDocument: any[] | null | undefined):
|
||||||
// BlockNote blocks have a content array with inline content
|
// BlockNote blocks have a content array with inline content
|
||||||
if (firstBlock.content && Array.isArray(firstBlock.content)) {
|
if (firstBlock.content && Array.isArray(firstBlock.content)) {
|
||||||
const textContent = firstBlock.content
|
const textContent = firstBlock.content
|
||||||
.map((item: any) => {
|
.map((item: BlockNoteInlineContent) => {
|
||||||
if (typeof item === "string") return item;
|
if (typeof item === "string") return item;
|
||||||
if (item?.text) return item.text;
|
if (typeof item === "object" && item?.text) return item.text;
|
||||||
return "";
|
return "";
|
||||||
})
|
})
|
||||||
.join("")
|
.join("")
|
||||||
|
|
@ -73,7 +85,7 @@ export default function EditorPage() {
|
||||||
const [document, setDocument] = useState<EditorContent | null>(null);
|
const [document, setDocument] = useState<EditorContent | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
const [editorContent, setEditorContent] = useState<any>(null);
|
const [editorContent, setEditorContent] = useState<BlockNoteDocument>(null);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||||
const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
|
const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
|
||||||
|
|
@ -410,7 +422,7 @@ export default function EditorPage() {
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
className="flex flex-col h-full w-full"
|
className="flex flex-col min-h-screen w-full"
|
||||||
>
|
>
|
||||||
{/* Toolbar */}
|
{/* Toolbar */}
|
||||||
<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-4 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-6">
|
<div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-4 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-6">
|
||||||
|
|
@ -444,7 +456,7 @@ export default function EditorPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Editor Container */}
|
{/* Editor Container */}
|
||||||
<div className="flex-1 overflow-visible relative">
|
<div className="flex-1 min-h-0 overflow-hidden relative">
|
||||||
<div className="h-full w-full overflow-auto p-6">
|
<div className="h-full w-full overflow-auto p-6">
|
||||||
{error && (
|
{error && (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue