diff --git a/frontend/src/components/ContentView.js b/frontend/src/components/ContentView.js
index 4a5bc28..a6c04ce 100644
--- a/frontend/src/components/ContentView.js
+++ b/frontend/src/components/ContentView.js
@@ -2,19 +2,14 @@ import React from 'react';
import Editor from './Editor';
import MarkdownPreview from './MarkdownPreview';
import { Text } from '@geist-ui/core';
-import { getFileUrl, lookupFileByName } from '../services/api';
+import { getFileUrl } from '../services/api';
import { isImageFile } from '../utils/fileHelpers';
import { useFileContentContext } from '../contexts/FileContentContext';
import { useUIStateContext } from '../contexts/UIStateContext';
-import { useSettings } from '../contexts/SettingsContext';
-import { useFileNavigation } from '../hooks/useFileNavigation';
const ContentView = () => {
- const { content, selectedFile, handleContentChange, handleSave } =
- useFileContentContext();
+ const { selectedFile } = useFileContentContext();
const { activeTab } = useUIStateContext();
- const { settings } = useSettings();
- const { handleLinkClick } = useFileNavigation();
if (!selectedFile) {
return (
@@ -47,22 +42,7 @@ const ContentView = () => {
);
}
- return activeTab === 'source' ? (
-
- ) : (
-
- );
+ return activeTab === 'source' ? : ;
};
export default ContentView;
diff --git a/frontend/src/components/Editor.js b/frontend/src/components/Editor.js
index 4b7ee76..77b316c 100644
--- a/frontend/src/components/Editor.js
+++ b/frontend/src/components/Editor.js
@@ -5,14 +5,19 @@ import { EditorView, keymap } from '@codemirror/view';
import { markdown } from '@codemirror/lang-markdown';
import { defaultKeymap } from '@codemirror/commands';
import { oneDark } from '@codemirror/theme-one-dark';
+import { useFileContentContext } from '../contexts/FileContentContext';
+import { useSettings } from '../contexts/SettingsContext';
-const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
+const Editor = () => {
+ const { content, selectedFile, handleContentChange, handleSave } =
+ useFileContentContext();
+ const { settings } = useSettings();
const editorRef = useRef();
const viewRef = useRef();
useEffect(() => {
- const handleSave = (view) => {
- onSave(filePath, view.state.doc.toString());
+ const handleEditorSave = (view) => {
+ handleSave(selectedFile, view.state.doc.toString());
return true;
};
@@ -25,12 +30,12 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
overflow: 'auto',
},
'.cm-gutters': {
- backgroundColor: themeType === 'dark' ? '#1e1e1e' : '#f5f5f5',
- color: themeType === 'dark' ? '#858585' : '#999',
+ backgroundColor: settings.theme === 'dark' ? '#1e1e1e' : '#f5f5f5',
+ color: settings.theme === 'dark' ? '#858585' : '#999',
border: 'none',
},
'.cm-activeLineGutter': {
- backgroundColor: themeType === 'dark' ? '#2c313a' : '#e8e8e8',
+ backgroundColor: settings.theme === 'dark' ? '#2c313a' : '#e8e8e8',
},
});
@@ -44,17 +49,17 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
keymap.of([
{
key: 'Ctrl-s',
- run: handleSave,
+ run: handleEditorSave,
preventDefault: true,
},
]),
EditorView.updateListener.of((update) => {
if (update.docChanged) {
- onChange(update.state.doc.toString());
+ handleContentChange(update.state.doc.toString());
}
}),
theme,
- themeType === 'dark' ? oneDark : [],
+ settings.theme === 'dark' ? oneDark : [],
],
});
@@ -68,7 +73,7 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
return () => {
view.destroy();
};
- }, [filePath, themeType]);
+ }, [selectedFile, settings.theme, handleContentChange, handleSave]);
useEffect(() => {
if (viewRef.current && content !== viewRef.current.state.doc.toString()) {
diff --git a/frontend/src/components/MarkdownPreview.js b/frontend/src/components/MarkdownPreview.js
index 3c81b8e..43c89d5 100644
--- a/frontend/src/components/MarkdownPreview.js
+++ b/frontend/src/components/MarkdownPreview.js
@@ -5,14 +5,15 @@ import rehypeKatex from 'rehype-katex';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import 'katex/dist/katex.min.css';
+import { useFileContentContext } from '../contexts/FileContentContext';
+import { useFileNavigation } from '../hooks/useFileNavigation';
+import { lookupFileByName } from '../services/api';
-const MarkdownPreview = ({
- content,
- baseUrl,
- onLinkClick,
- lookupFileByName,
-}) => {
+const MarkdownPreview = () => {
+ const { content } = useFileContentContext();
+ const { handleLinkClick } = useFileNavigation();
const [processedContent, setProcessedContent] = useState(content);
+ const baseUrl = window.API_BASE_URL;
useEffect(() => {
const processContent = async (rawContent) => {
@@ -82,7 +83,7 @@ const MarkdownPreview = ({
};
processContent(content).then(setProcessedContent);
- }, [content, baseUrl, lookupFileByName]);
+ }, [content, baseUrl]);
const handleImageError = (event) => {
console.error('Failed to load image:', event.target.src);
@@ -125,7 +126,7 @@ const MarkdownPreview = ({
href="#"
onClick={(e) => {
e.preventDefault();
- onLinkClick(filePath, heading);
+ handleLinkClick(filePath, heading);
}}
>
{children}
@@ -141,7 +142,7 @@ const MarkdownPreview = ({
style={{ color: 'red', textDecoration: 'underline' }}
onClick={(e) => {
e.preventDefault();
- onLinkClick(fileName);
+ handleLinkClick(fileName);
}}
>
{children}