From 622c3107829021546b4e1af5a94c8438cccd4dbf Mon Sep 17 00:00:00 2001 From: LordMathis Date: Fri, 4 Oct 2024 21:59:27 +0200 Subject: [PATCH] Use context in editor and markdown preview --- frontend/src/components/ContentView.js | 26 +++------------------- frontend/src/components/Editor.js | 25 ++++++++++++--------- frontend/src/components/MarkdownPreview.js | 19 ++++++++-------- 3 files changed, 28 insertions(+), 42 deletions(-) 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}