apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-06 20:15:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(editor): implement viewer mode for large documents, switching between 'plate' and 'monaco' editors based on document size

Browse source
This commit is contained in:
Anish Sarkar 2026-06-05 14:23:18 +05:30
parent c2b8b3ac5e
commit cf8a2d0759
4 changed files with 100 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_backend/app/routes/editor_routes.py
View file

@ -38,6 +38,8 @@ logger = logging.getLogger(__name__)
router = APIRouter() router = APIRouter()
EDITOR_PLATE_MAX_BYTES = 2 * 1024 * 1024
@router.get("/search-spaces/{search_space_id}/documents/{document_id}/editor-content") @router.get("/search-spaces/{search_space_id}/documents/{document_id}/editor-content")
async def get_editor_content( async def get_editor_content(
@ -84,6 +86,7 @@ async def get_editor_content(
def _build_response(md: str) -> dict: def _build_response(md: str) -> dict:
size_bytes = len(md.encode("utf-8")) size_bytes = len(md.encode("utf-8"))
viewer_mode = "monaco" if size_bytes > EDITOR_PLATE_MAX_BYTES else "plate"
truncated = False truncated = False
output_md = md output_md = md
if max_length is not None and size_bytes > max_length: if max_length is not None and size_bytes > max_length:
@ -97,6 +100,7 @@ async def get_editor_content(
"content_size_bytes": size_bytes, "content_size_bytes": size_bytes,
"chunk_count": chunk_count, "chunk_count": chunk_count,
"truncated": truncated, "truncated": truncated,
"viewer_mode": viewer_mode,
"updated_at": document.updated_at.isoformat() "updated_at": document.updated_at.isoformat()
if document.updated_at if document.updated_at
else None, else None,

36
surfsense_web/components/editor-panel/editor-panel.tsx
View file

@ -51,10 +51,12 @@ interface EditorContent {
content_size_bytes?: number; content_size_bytes?: number;
chunk_count?: number; chunk_count?: number;
truncated?: boolean; truncated?: boolean;
viewer_mode?: ViewerMode;
} }
const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]); const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]);
type EditorRenderMode = "rich_markdown" | "source_code"; type EditorRenderMode = "rich_markdown" | "source_code";
type ViewerMode = "plate" | "monaco";
type AgentFilesystemMount = { type AgentFilesystemMount = {
mount: string; mount: string;
@ -168,6 +170,9 @@ export function EditorPanelContent({
); );
const isLargeDocument = (editorDoc?.content_size_bytes ?? 0) > LARGE_DOCUMENT_THRESHOLD; const isLargeDocument = (editorDoc?.content_size_bytes ?? 0) > LARGE_DOCUMENT_THRESHOLD;
const viewerMode: ViewerMode = isMemoryMode
? "plate"
: (editorDoc?.viewer_mode ?? (isLargeDocument ? "monaco" : "plate"));
useEffect(() => { useEffect(() => {
const controller = new AbortController(); const controller = new AbortController();
@ -432,12 +437,10 @@ export function EditorPanelContent({
? (isMemoryMode || ? (isMemoryMode ||
editorRenderMode === "source_code" || editorRenderMode === "source_code" ||
EDITABLE_DOCUMENT_TYPES.has(editorDoc.document_type ?? "")) && EDITABLE_DOCUMENT_TYPES.has(editorDoc.document_type ?? "")) &&
!isLargeDocument viewerMode === "plate"
: false; : false;
// Render through PlateEditor for editable doc types (FILE/NOTE). // Render through PlateEditor only when the backend says the rich editor is safe.
// Everything else (large docs, non-editable types) falls back to the // Monaco mode is a raw markdown safety path for large documents.
// lightweight `MarkdownViewer` — Plate is heavy on multi-MB docs and
// non-editable types don't benefit from its editing UX.
const renderInPlateEditor = isEditableType; const renderInPlateEditor = isEditableType;
const hasUnsavedChanges = editedMarkdown !== null; const hasUnsavedChanges = editedMarkdown !== null;
const showDesktopHeader = !!onClose; const showDesktopHeader = !!onClose;
@ -492,14 +495,14 @@ export function EditorPanelContent({
} }
}, [documentId, editorDoc?.title, searchSpaceId]); }, [documentId, editorDoc?.title, searchSpaceId]);
const largeDocAlert = isLargeDocument && !isLocalFileMode && editorDoc && ( const largeDocAlert = viewerMode === "monaco" && !isLocalFileMode && editorDoc && (
<Alert className="mb-4"> <Alert className="m-4 shrink-0">
<FileText className="size-4" /> <FileText className="size-4" />
<AlertDescription className="flex items-center justify-between gap-4"> <AlertDescription className="flex items-center justify-between gap-4">
<span> <span>
This document is too large for the editor ( This document is too large for the editor (
{Math.round((editorDoc.content_size_bytes ?? 0) / 1024 / 1024)}MB,{" "} {Math.round((editorDoc.content_size_bytes ?? 0) / 1024 / 1024)}MB,{" "}
{editorDoc.chunk_count ?? 0} chunks). Showing a preview below. {editorDoc.chunk_count ?? 0} chunks). Showing raw markdown below.
</span> </span>
<Button <Button
variant="outline" variant="outline"
@ -753,12 +756,19 @@ export function EditorPanelContent({
}} }}
/> />
</div> </div>
) : isLargeDocument && !isLocalFileMode ? ( ) : viewerMode === "monaco" && !isLocalFileMode ? (
// Large doc — fast Streamdown preview + download CTA. // Large doc — raw markdown in Monaco. Rich renderers are intentionally skipped.
// Plate is heavy on multi-MB docs. <div className="flex h-full min-h-0 flex-col">
<div className="h-full overflow-y-auto px-5 py-4">
{largeDocAlert} {largeDocAlert}
<MarkdownViewer content={editorDoc.source_markdown} enableCitations /> <div className="min-h-0 flex-1 overflow-hidden">
<SourceCodeEditor
path={`${editorDoc.title || "document"}.md`}
language="markdown"
value={editorDoc.source_markdown}
readOnly
onChange={() => {}}
/>
</div>
</div> </div>
) : renderInPlateEditor ? ( ) : renderInPlateEditor ? (
// Editable doc (FILE/NOTE) — Plate editing UX. // Editable doc (FILE/NOTE) — Plate editing UX.

130
surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
View file

@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { PlateEditor } from "@/components/editor/plate-editor"; import { PlateEditor } from "@/components/editor/plate-editor";
import { SourceCodeEditor } from "@/components/editor/source-code-editor";
import { MarkdownViewer } from "@/components/markdown-viewer"; import { MarkdownViewer } from "@/components/markdown-viewer";
import { Alert, AlertDescription } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -22,6 +23,7 @@ interface DocumentContent {
content_size_bytes?: number; content_size_bytes?: number;
chunk_count?: number; chunk_count?: number;
truncated?: boolean; truncated?: boolean;
viewer_mode?: ViewerMode;
} }
function DocumentSkeleton() { function DocumentSkeleton() {
@ -51,6 +53,7 @@ interface DocumentTabContentProps {
} }
const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]); const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]);
type ViewerMode = "plate" | "monaco";
export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) { export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) {
const [doc, setDoc] = useState<DocumentContent | null>(null); const [doc, setDoc] = useState<DocumentContent | null>(null);
@ -66,6 +69,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
const router = useRouter(); const router = useRouter();
const isLargeDocument = (doc?.content_size_bytes ?? 0) > LARGE_DOCUMENT_THRESHOLD; const isLargeDocument = (doc?.content_size_bytes ?? 0) > LARGE_DOCUMENT_THRESHOLD;
const viewerMode: ViewerMode = doc?.viewer_mode ?? (isLargeDocument ? "monaco" : "plate");
useEffect(() => { useEffect(() => {
const controller = new AbortController(); const controller = new AbortController();
@ -204,9 +208,9 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
); );
} }
const isEditable = EDITABLE_DOCUMENT_TYPES.has(doc.document_type ?? "") && !isLargeDocument; const isEditable = viewerMode === "plate" && EDITABLE_DOCUMENT_TYPES.has(doc.document_type ?? "");
if (isEditing && !isLargeDocument) { if (isEditing && viewerMode === "plate") {
return ( return (
<div className="flex flex-col h-full overflow-hidden"> <div className="flex flex-col h-full overflow-hidden">
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0"> <div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
@ -265,64 +269,74 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
</Button> </Button>
)} )}
</div> </div>
<div className="flex-1 overflow-auto"> <div className="flex-1 min-h-0 overflow-hidden">
<div className="max-w-4xl mx-auto px-6 py-6"> {viewerMode === "monaco" ? (
{isLargeDocument ? ( <div className="flex h-full min-h-0 flex-col">
<> <Alert className="m-4 shrink-0">
<Alert className="mb-4"> <FileText className="size-4" />
<FileText className="size-4" /> <AlertDescription className="flex items-center justify-between gap-4">
<AlertDescription className="flex items-center justify-between gap-4"> <span>
<span> This document is too large for the editor (
This document is too large for the editor ( {Math.round((doc.content_size_bytes ?? 0) / 1024 / 1024)}MB,{" "}
{Math.round((doc.content_size_bytes ?? 0) / 1024 / 1024)}MB,{" "} {doc.chunk_count ?? 0} chunks). Showing raw markdown below.
{doc.chunk_count ?? 0} chunks). Showing a preview below. </span>
<Button
variant="outline"
size="sm"
className="relative shrink-0"
disabled={downloading}
onClick={async () => {
setDownloading(true);
try {
const response = await authenticatedFetch(
`${BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/download-markdown`,
{ method: "GET" }
);
if (!response.ok) throw new Error("Download failed");
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
const disposition = response.headers.get("content-disposition");
const match = disposition?.match(/filename="(.+)"/);
a.download = match?.[1] ?? `${doc.title || "document"}.md`;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
toast.success("Download started");
} catch {
toast.error("Failed to download document");
} finally {
setDownloading(false);
}
}}
>
<span className={`flex items-center gap-1.5 ${downloading ? "opacity-0" : ""}`}>
<Download className="size-3.5" />
Download .md
</span> </span>
<Button {downloading && <Spinner size="sm" className="absolute" />}
variant="outline" </Button>
size="sm" </AlertDescription>
className="relative shrink-0" </Alert>
disabled={downloading} <div className="min-h-0 flex-1 overflow-hidden">
onClick={async () => { <SourceCodeEditor
setDownloading(true); path={`${doc.title || "document"}.md`}
try { language="markdown"
const response = await authenticatedFetch( value={doc.source_markdown}
`${BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/download-markdown`, readOnly
{ method: "GET" } onChange={() => {}}
); />
if (!response.ok) throw new Error("Download failed"); </div>
const blob = await response.blob(); </div>
const url = URL.createObjectURL(blob); ) : (
const a = document.createElement("a"); <div className="h-full overflow-auto">
a.href = url; <div className="max-w-4xl mx-auto px-6 py-6">
const disposition = response.headers.get("content-disposition");
const match = disposition?.match(/filename="(.+)"/);
a.download = match?.[1] ?? `${doc.title || "document"}.md`;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
toast.success("Download started");
} catch {
toast.error("Failed to download document");
} finally {
setDownloading(false);
}
}}
>
<span className={`flex items-center gap-1.5 ${downloading ? "opacity-0" : ""}`}>
<Download className="size-3.5" />
Download .md
</span>
{downloading && <Spinner size="sm" className="absolute" />}
</Button>
</AlertDescription>
</Alert>
<MarkdownViewer content={doc.source_markdown} enableCitations /> <MarkdownViewer content={doc.source_markdown} enableCitations />
</> </div>
) : ( </div>
<MarkdownViewer content={doc.source_markdown} enableCitations /> )}
)}
</div>
</div> </div>
</div> </div>
); );

1
surfsense_web/tests/helpers/api/documents.ts
View file

@ -44,6 +44,7 @@ export type EditorContent = {
content_size_bytes: number; content_size_bytes: number;
chunk_count: number; chunk_count: number;
truncated: boolean; truncated: boolean;
viewer_mode?: "plate" | "monaco";
}; };
// Same endpoint the UI hits when a user opens a document in the dashboard. // Same endpoint the UI hits when a user opens a document in the dashboard.