= ({
- projectId,
- repoOwner,
- repoName,
+ projectId,
+ repoOwner,
+ repoName,
}) => {
-
- const computeHash = async (content: string): Promise => {
- const msgBuffer = new TextEncoder().encode(content);
- const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer);
- const hashArray = Array.from(new Uint8Array(hashBuffer));
- return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
- };
-
- const getSize = (content: string): number => {
- return new TextEncoder().encode(content).length;
- };
-
- const [selectedFile, setSelectedFile] = useState(null);
- const [fileContent, setFileContent] = useState("");
- const [originalHash, setOriginalHash] = useState("");
- const [originalSize, setOriginalSize] = useState(0);
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(null);
- const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
- const [isCommitPanelOpen, setIsCommitPanelOpen] = useState(false);
- const [drafts, setDrafts] = useState>({});
- const [mdxError, setMdxError] = useState(null);
- const [isMounted, setIsMounted] = useState(false);
- const [editorRef, setEditorRef] = useState(null);
- const [showDraftModal, setShowDraftModal] = useState(false);
- const [pendingDraft, setPendingDraft] = useState<{
- content: string;
- timestamp: number;
- filePath: string;
- } | null>(null);
- const [pendingCreates, setPendingCreates] = useState<
- Array<{ path: string; type: "file" | "folder" }>
- >([]);
-
- // Mount tracking for hydration fix
- useEffect(() => {
- // console.log("[MDXEditorToast] Component mounted", {
- // projectId,
- // repoOwner,
- // repoName,
- // });
- setIsMounted(true);
- }, [projectId, repoOwner, repoName]);
-
-
- useEffect(() => {
- const savedDrafts = localStorage.getItem(`mdx-drafts-${projectId}`);
- if (savedDrafts) {
- try {
- setDrafts(JSON.parse(savedDrafts));
- } catch (e) {
- console.error("Failed to load drafts:", e);
- }
- }
- }, [projectId]);
-
-
- useEffect(() => {
- if (Object.keys(drafts).length > 0) {
- localStorage.setItem(`mdx-drafts-${projectId}`, JSON.stringify(drafts));
- }
- }, [drafts, projectId]);
-
- const loadFileContent = useCallback(
- async (file: FileItem) => {
- if (file.type === "dir") return;
-
- const isPending = pendingCreates.some(
- (p) => p.path === file.path && p.type === "file",
- );
-
- if (isPending) {
- // for pending files, content is in drafts or empty
- const draftKey = `${repoOwner}/${repoName}/${file.path}`;
- const content = drafts[draftKey]?.content || "# New File Content";
- setFileContent(content);
- // for new files, original is empty
- setOriginalHash(await computeHash(""));
- setOriginalSize(0);
- setSelectedFile(file);
- setHasUnsavedChanges(!!content);
- return;
- }
-
- setIsLoading(true);
- setError(null);
-
- try {
- const response = await (api.projects as any)[projectId].repo[repoOwner][
- repoName
- ].file.$get({
- query: {
- path: file.path,
- },
- });
-
- if (!response.ok) {
- throw new Error(`Failed to load file: ${response.statusText}`);
- }
-
- const data = await response.json();
- const content = data.data.content || "";
-
- setFileContent(content);
-
- // compute hash and size for original content
- const hash = await computeHash(content);
- const size = getSize(content);
- setOriginalHash(hash);
- setOriginalSize(size);
-
- setSelectedFile(file);
- setHasUnsavedChanges(false);
-
- // check if there's a draft for this file
- const draftKey = `${repoOwner}/${repoName}/${file.path}`;
- if (drafts[draftKey]) {
- const draft = drafts[draftKey];
- if (draft.content !== content) {
- setPendingDraft(draft);
- setShowDraftModal(true);
- }
- }
- } catch (err) {
- setError(err instanceof Error ? err.message : "Failed to load file");
- } finally {
- setIsLoading(false);
- }
- },
- [projectId, repoOwner, repoName, drafts, pendingCreates],
- );
-
- const handleContentChange = useCallback((content: string) => {
- setFileContent(content);
- }, []);
-
- // async change detection using hash and size
- useEffect(() => {
- const checkChanges = async () => {
- if (!selectedFile) return;
-
- // metadata check (size)
- const currentSize = getSize(fileContent);
- if (currentSize !== originalSize) {
- setHasUnsavedChanges(true);
- return;
- }
-
- // cryptographic hash check
- const currentHash = await computeHash(fileContent);
- setHasUnsavedChanges(currentHash !== originalHash);
- };
-
- checkChanges();
- }, [fileContent, originalSize, originalHash, selectedFile]);
-
- // auto-save draft
- useEffect(() => {
- if (hasUnsavedChanges && selectedFile) {
- const timeoutId = setTimeout(() => {
- saveDraft();
- }, 2000); // auto-save after 2 seconds of inactivity
-
- return () => clearTimeout(timeoutId);
- }
- }, [fileContent, hasUnsavedChanges, selectedFile]);
-
- // Save draft manually
- const saveDraft = useCallback(() => {
- if (!selectedFile) return;
-
- const draftKey = `${repoOwner}/${repoName}/${selectedFile.path}`;
- const newDrafts = {
- ...drafts,
- [draftKey]: {
- content: fileContent,
- timestamp: Date.now(),
- filePath: selectedFile.path,
- },
- };
- setDrafts(newDrafts);
- }, [drafts, fileContent, repoOwner, repoName, selectedFile]);
-
-
- const handleFileCreate = useCallback(
- (path: string, type: "file" | "folder") => {
- setPendingCreates((prev) => [...prev, { path, type }]);
-
- if (type === "file") {
- const newFile: FileItem = {
- name: path.split("/").pop() || "",
- path,
- type: "file",
- size: 0,
- sha: "",
- };
-
- const draftKey = `${repoOwner}/${repoName}/${path}`;
- setDrafts((prev) => ({
- ...prev,
- [draftKey]: {
- content: "# New File Content",
- timestamp: Date.now(),
- filePath: path,
- },
- }));
- setSelectedFile(newFile);
- setFileContent("# New File Content");
-
- computeHash("").then((hash) => {
- setOriginalHash(hash);
- setOriginalSize(0);
- });
- setHasUnsavedChanges(true); // treat new file as having changes so it can be committed
- }
- },
- [repoOwner, repoName],
- );
-
- const handleCommit = useCallback(
- async (
- commitMessage: string,
- filesToCommit: {
- path: string;
- content: string;
- }[],
- ) => {
- try {
-
- const allFilesToCommit = [...filesToCommit];
-
- pendingCreates.forEach((item) => {
- if (item.type === "file") {
- // ensure pending files are included even if empty/unchanged
- // (though usually they'd be in filesToCommit via getUnsavedFiles)
- const exists = allFilesToCommit.some((f) => f.path === item.path);
- if (!exists) {
- const draftKey = `${repoOwner}/${repoName}/${item.path}`;
- const content = drafts[draftKey]?.content || "";
- allFilesToCommit.push({
- path: item.path,
- content,
- });
- }
- }
- });
-
- if (allFilesToCommit.length === 0) {
- alert("No changes to commit.");
- return;
- }
-
- const response = await (api.projects as any)[projectId].repo[repoOwner][
- repoName
- ]["bulk-update"].$post({
- json: {
- files: allFilesToCommit,
- message: commitMessage,
- },
- });
-
- if (!response.ok) {
- throw new Error(`Failed to commit changes: ${response.statusText}`);
- }
-
- allFilesToCommit.forEach(async (file) => {
- try {
- await actions.projectsActions.logActivity({
- projectId,
- actionType: "commit",
- filePath: file.path,
- fileName: file.path.split("/").pop() || "",
- fileSize: getSize(file.content),
- changesSummary: commitMessage,
- });
- } catch (error) {
- console.error("Failed to log activity:", error);
- }
- });
-
- const newDrafts = { ...drafts };
- allFilesToCommit.forEach((file) => {
- const draftKey = `${repoOwner}/${repoName}/${file.path}`;
- delete newDrafts[draftKey];
- });
- setDrafts(newDrafts);
- setPendingCreates([]);
-
- if (
- selectedFile &&
- allFilesToCommit.some((f) => f.path === selectedFile.path)
- ) {
- // update original hash/size to match committed content
- const newHash = await computeHash(fileContent);
- const newSize = getSize(fileContent);
- setOriginalHash(newHash);
- setOriginalSize(newSize);
- setHasUnsavedChanges(false);
- }
-
- setIsCommitPanelOpen(false);
- alert("Changes committed successfully!");
-
- // trigger reload in FileExplorer (via window event as implemented before) - could be improved
- window.dispatchEvent(new Event("project-settings-updated"));
- } catch (err) {
- alert(err instanceof Error ? err.message : "Failed to commit changes");
- }
- },
- [
- projectId,
- repoOwner,
- repoName,
- drafts,
- selectedFile,
- fileContent,
- pendingCreates,
- ],
- );
-
-
- const getUnsavedFiles = useCallback(() => {
- const unsavedFiles: {
- path: string;
- content: string;
- }[] = [];
-
- if (hasUnsavedChanges && selectedFile) {
- unsavedFiles.push({
- path: selectedFile.path,
- content: fileContent,
- });
- }
-
- Object.entries(drafts).forEach(([draftKey, draft]) => {
- const filePath = draft.filePath;
- if (!selectedFile || filePath !== selectedFile.path) {
- unsavedFiles.push({
- path: filePath,
- content: draft.content,
- });
- }
- });
-
- return unsavedFiles;
- }, [hasUnsavedChanges, selectedFile, fileContent, drafts]);
-
- return (
-
-
-
-
-
Files
-
- {repoOwner}/{repoName}
-
-
-
-
-
- {/* Editor Area */}
-
- {/* Editor Header */}
-
-
- {selectedFile ? (
-
-
- {selectedFile.name}
-
-
- {selectedFile.path}
-
-
- ) : (
-
Select a file to edit
- )}
- {hasUnsavedChanges && (
-
- )}
-
-
- {hasUnsavedChanges && (
-
- )}
- {Object.keys(drafts).length > 0 && (
-
- )}
-
-
-
-
- {/* Editor Content */}
-
- {error && (
-
- )}
-
- {mdxError && (
-
-
-
MDX Parsing Error: {mdxError}
-
-
- You can fix the errors in source mode and switch to rich
- text mode when you are ready.
-
-
-
-
-
-
-
-
- )}
-
- {isLoading ? (
-
- ) : selectedFile ? (
-
- {isMounted ? (
- // Toast UI Editor
-
- {
- if (editorRef) {
- const content = editorRef.getInstance().getMarkdown();
- handleContentChange(content);
- }
- }}
- toolbarItems={[
- ["heading", "bold", "italic", "strike"],
- ["hr", "quote"],
- ["ul", "ol", "task", "indent", "outdent"],
- ["table", "image", "link"],
- ["code", "codeblock"],
- ["scrollSync"],
- ]}
- />
-
- ) : (
- // Loading state during hydration
-
- )}
-
- ) : (
-
-
-
-
No file selected
-
Choose a file from the explorer to start editing
-
-
- )}
-
-
-
- {/* Commit Panel */}
- {isCommitPanelOpen && (
-
setIsCommitPanelOpen(false)}
- />
- )}
-
- {/* Draft Restore Modal */}
- {showDraftModal && pendingDraft && (
-
-
-
- Unsaved Changes Found
-
-
- You have unsaved changes for this file from{" "}
-
- {new Date(pendingDraft.timestamp).toLocaleString()}
-
- . Would you like to restore them?
-
-
-
-
-
-
-
+
+
+
Files
+
+ {repoOwner}/{repoName}
+
+
+
+
+
+ {/* Media Panel */}
+ {showMediaPanel && mediaPath && (
+
+
+
+ )}
+
+ {/* Editor Area */}
+
+ {/* Editor Header */}
+
+
+ {selectedFile ? (
+
+
+ {selectedFile.name}
+
+
+ {selectedFile.path}
+
+
+ ) : (
+
Select a file to edit
+ )}
+ {hasUnsavedChanges && (
+
+ )}
+ {schemaErrors.length > 0 && (
+
+
+
+ Schema Mismatch
+
+
+ )}
+
+
+ {hasUnsavedChanges && (
+
+ )}
+ {Object.keys(drafts).length > 0 && (
+
+ )}
+
+ {/* Media Panel Toggle */}
+
+
+
+
+ {/* Editor Content */}
+
+ {error && (
+
+ )}
+
+ {schemaErrors.length > 0 && (
+
+
+ Schema Errors:
+
+
+ {schemaErrors.map((err, i) => (
+ -
+ {err}
+
+ ))}
+
+
+ )}
+
+ {mdxError && (
+
+
+
MDX Parsing Error: {mdxError}
+
+
+ You can fix the errors in source mode and switch to rich
+ text mode when you are ready.
+
+
+
+
+
+
+
+
+ )}
+
+ {isLoading ? (
+
+
+
+ Loading file content...
+
+
+ ) : selectedFile ? (
+
+ {isMounted && EditorComponent ? (
+ // Toast UI Editor
+
+ {
+ if (editorRef) {
+ const content = editorRef.getInstance().getMarkdown();
+ handleContentChange(content);
+ }
+ }}
+ toolbarItems={[
+ ["heading", "bold", "italic", "strike"],
+ ["hr", "quote"],
+ ["ul", "ol", "task", "indent", "outdent"],
+ ["table", "image", "link"],
+ ["code", "codeblock"],
+ ["scrollSync"],
+ ]}
+ />
+
+ ) : (
+ // Loading state during hydration
+
+
+
+ Preparing editor...
+
+
+ )}
+
+ ) : (
+
+
+
+
No file selected
+
Choose a file from the explorer to start editing
+
+
+ )}
+
+
+
+ {/* Commit Panel */}
+ {isCommitPanelOpen && (
+
setIsCommitPanelOpen(false)}
+ />
+ )}
+
+ {/* Draft Restore Modal */}
+ {showDraftModal && pendingDraft && (
+
+
+
+ Unsaved Changes Found
+
+
+ You have unsaved changes for this file from{" "}
+
+ {new Date(pendingDraft.timestamp).toLocaleString()}
+
+ . Would you like to restore them?
+
+
+
+
+
+
+
+ Loading media...
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
{error}
+
+
+ {/* Header */}
+
+
Media Library
+
+
{files.length} images
+
+
+
+
+ {/* Upload Progress */}
+ {uploading && (
+
+
+ Uploading...
+ {uploadProgress}%
+
+
+
+ )}
+
+ {/* Drag Overlay */}
+ {isDragging && (
+
+
+
+
Drop images here
+
+
+ )}
+
+ {/* File Grid */}
+
+ {files.length === 0 ? (
+
+
+
No images yet
+
+ Drag and drop images here or click the + button
+
+
+ ) : (
+
+ {files.map((file) => (
+
handleImageClick(file)}
+ >
+
+
+ {/* Hover Overlay */}
+
+
+
+
+ {/* Filename on hover */}
+
+
{file.name}
+
+ {formatFileSize(file.size)}
+
+
+
+ ))}
+
+ )}
+
+
+ {/* Hidden File Input */}
+
+
-
-
-
- Project Settings
-
-
-
-
- {/* Tabs */}
-
-
-
-
-
- {loading ? (
-
- ) : (
-
- {activeTab === "general" && (
-
-
-
-
- Enter one directory path per line (e.g.,{" "}
- content/blog). Only files in these
- directories will be accessible.
-
-