+ No workspace opened. Use File → Open Folder...
+
+ )
+ }
+
+ return (
+
+
+ {showToc && toc.length > 0 && (
+
+ )}
+
diff --git a/src/renderer/components/SyntaxHighlighter.js b/src/renderer/components/SyntaxHighlighter.js
index 861919c..b3e414c 100644
--- a/src/renderer/components/SyntaxHighlighter.js
+++ b/src/renderer/components/SyntaxHighlighter.js
@@ -1,8 +1,43 @@
-import React from 'react'
+import React, { useState } from 'react'
import { Prism } from 'react-syntax-highlighter'
-const SyntaxHighlighter = ({ language, value }) => (
-
-)
+const SyntaxHighlighter = ({ language, value }) => {
+ const [copied, setCopied] = useState(false)
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(value || '')
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ } catch (err) {
+ console.error('Failed to copy:', err)
+ }
+ }
+
+ return (
+
+
+
+
+ )
+}
export default SyntaxHighlighter
diff --git a/src/renderer/components/TabBar.js b/src/renderer/components/TabBar.js
new file mode 100644
index 0000000..2e97744
--- /dev/null
+++ b/src/renderer/components/TabBar.js
@@ -0,0 +1,52 @@
+import React from 'react'
+
+const TabBar = ({ tabs, activeTab, onTabClick, onTabClose }) => {
+ return (
+
+ {tabs.map(tab => (
+
onTabClick(tab)}
+ style={{
+ padding: '8px 16px',
+ cursor: 'pointer',
+ backgroundColor: activeTab === tab.path ? '#fff' : 'transparent',
+ borderBottom: activeTab === tab.path ? '2px solid #0366d6' : 'none',
+ display: 'inline-flex',
+ alignItems: 'center',
+ minWidth: '120px',
+ maxWidth: '200px'
+ }}
+ >
+
+ {tab.name}
+
+
+
+ ))}
+
+ )
+}
+
+export default TabBar
diff --git a/src/renderer/hooks/useIpcEvents.js b/src/renderer/hooks/useIpcEvents.js
index 4517937..efb8feb 100644
--- a/src/renderer/hooks/useIpcEvents.js
+++ b/src/renderer/hooks/useIpcEvents.js
@@ -1,14 +1,19 @@
import React, { useEffect, useState } from 'react'
-const { ipcRenderer } = require('electron')
const useIpcEvents = ({ initValue, event, callback }) => {
const [value, setValue] = useState(initValue)
useEffect(() => {
- if (!callback)
- ipcRenderer.on(event, (event, data) => {
- setValue(data)
- })
- else ipcRenderer.on(event, callback)
+ const handler = callback || ((_, data) => setValue(data))
+
+ if (window.api) {
+ window.api.on(event, handler)
+ }
+
+ return () => {
+ if (window.api?.removeListener) {
+ window.api.removeListener(event, handler)
+ }
+ }
}, [])
return [value, setValue]
diff --git a/src/renderer/next.config.js b/src/renderer/next.config.js
index 5b6b47e..0ba65d7 100644
--- a/src/renderer/next.config.js
+++ b/src/renderer/next.config.js
@@ -1,4 +1,11 @@
-module.exports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ output: 'export',
+ distDir: 'out',
+ images: {
+ unoptimized: true
+ },
+ trailingSlash: true,
webpack(config) {
// Allows you to load Electron modules and
// native Node.js ones into your renderer
@@ -6,3 +13,5 @@ module.exports = {
return config
}
}
+
+module.exports = nextConfig
diff --git a/src/renderer/pages/index-old.js b/src/renderer/pages/index-old.js
new file mode 100644
index 0000000..087ffc3
--- /dev/null
+++ b/src/renderer/pages/index-old.js
@@ -0,0 +1,97 @@
+import React, { useRef, useEffect, useCallback } from 'react'
+import MarkdowPreview from '../components/MarkdownPreview'
+import editorOptions from '../config/editorOptions'
+import useIpcEvents from '../hooks/useIpcEvents'
+import { getLineNumber, onScroll, selectAll, getElement, srollToElement, downLoadDoc } from '../utils/editorHelpers'
+import { SELECT_ALL, SET_EDITOR_TEXT, SET_THEME, SET_ALLOW_HTML, SAVE_CONTENT_IN_STORE } from '../constants'
+import initEditor from '../config/initEditor'
+
+const Home = () => {
+ const editor = useRef(null)
+ const saveTimeoutRef = useRef(null)
+ const [content, setContent] = useIpcEvents({
+ initValue: '',
+ event: SET_EDITOR_TEXT
+ })
+
+ const [theme, setTheme] = useIpcEvents({
+ initValue: 'yonce',
+ event: SET_THEME
+ })
+ const [allowHtml, setAllowHtml] = useIpcEvents({
+ initValue: false,
+ event: SET_ALLOW_HTML
+ })
+ const [previewVisible, setPreviewVisible] = useIpcEvents({
+ initValue: true,
+ event: 'TOGGLE_PREVIEW',
+ callback: () => setPreviewVisible(prev => !prev)
+ })
+ useIpcEvents({ event: SELECT_ALL, callback: selectAll.bind(null, editor) })
+
+ // Debounced save function
+ const debouncedSave = useCallback((value) => {
+ if (saveTimeoutRef.current) {
+ clearTimeout(saveTimeoutRef.current)
+ }
+ saveTimeoutRef.current = setTimeout(() => {
+ window.api.send(SAVE_CONTENT_IN_STORE, value)
+ }, 500)
+ }, [])
+
+ const onChangeHandler = (editor, data, value) => {
+ setContent(value)
+ debouncedSave(value)
+ const lineNo = getLineNumber(editor)
+ const domNode = getElement(lineNo)
+ srollToElement(domNode)
+ }
+
+ useEffect(() => {
+ const loadInitialData = async () => {
+ const { content, theme, allowHtml } = await window.api.invoke('GET_GLOBALS')
+ setContent(content || '')
+ setAllowHtml(allowHtml || false)
+ setTheme(theme || 'yonce')
+ if (editor?.current) editor.current.focus()
+ }
+
+ const handleExportPdf = () => {
+ window.api.send('EXPORT_TO_PDF')
+ }
+
+ loadInitialData()
+ window.api.on('EXPORT_TO_HTML', downLoadDoc)
+ window.api.on('EXPORT_TO_PDF', handleExportPdf)
+
+ return () => {
+ window.api.removeListener('EXPORT_TO_HTML', downLoadDoc)
+ window.api.removeListener('EXPORT_TO_PDF', handleExportPdf)
+ }
+ }, [])
+
+ const CodeMirror = initEditor()
+ return (
+
+
+ {CodeMirror && (
+ (editor.current = e)}
+ value={content}
+ options={editorOptions(theme)}
+ onBeforeChange={onChangeHandler}
+ onChange={onChangeHandler}
+ onScroll={onScroll}
+ />
+ )}
+
+ {previewVisible && (
+
+
+
+ )}
+
+ )
+}
+
+export default Home
diff --git a/src/renderer/pages/index.js b/src/renderer/pages/index.js
index 736f029..88b666c 100644
--- a/src/renderer/pages/index.js
+++ b/src/renderer/pages/index.js
@@ -1,66 +1,262 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useCallback, useState } from 'react'
import MarkdowPreview from '../components/MarkdownPreview'
+import FileTree from '../components/FileTree'
+import TabBar from '../components/TabBar'
import editorOptions from '../config/editorOptions'
import useIpcEvents from '../hooks/useIpcEvents'
-import { getLineNumber, onScroll, selectAll, getElement, srollToElement, downLoadDoc } from '../utils/editorHelpers'
+import { getLineNumber, onScroll, selectAll, getElement, srollToElement, downLoadDoc, exportToPNG, copyHTMLToClipboard, publishGist } from '../utils/editorHelpers'
import { SELECT_ALL, SET_EDITOR_TEXT, SET_THEME, SET_ALLOW_HTML, SAVE_CONTENT_IN_STORE } from '../constants'
import initEditor from '../config/initEditor'
-const { ipcRenderer, remote } = require('electron')
-
const Home = () => {
const editor = useRef(null)
- const [content, setContent] = useIpcEvents({
- initValue: '',
- event: SET_EDITOR_TEXT
- })
+ const saveTimeoutRef = useRef(null)
+ const previewRef = useRef(null)
+
+ // State
+ const [content, setContent] = useState('')
+ const [workspacePath, setWorkspacePath] = useState(null)
+ const [tabs, setTabs] = useState([])
+ const [activeTabPath, setActiveTabPath] = useState(null)
+ const [showToc, setShowToc] = useState(false)
+ const [settingsOpen, setSettingsOpen] = useState(false)
const [theme, setTheme] = useIpcEvents({
initValue: 'yonce',
event: SET_THEME
})
+
const [allowHtml, setAllowHtml] = useIpcEvents({
initValue: false,
event: SET_ALLOW_HTML
})
+
+ const [previewVisible, setPreviewVisible] = useIpcEvents({
+ initValue: true,
+ event: 'TOGGLE_PREVIEW',
+ callback: () => setPreviewVisible(prev => !prev)
+ })
+
useIpcEvents({ event: SELECT_ALL, callback: selectAll.bind(null, editor) })
+ // Debounced save function
+ const debouncedSave = useCallback((path, value) => {
+ if (saveTimeoutRef.current) {
+ clearTimeout(saveTimeoutRef.current)
+ }
+ saveTimeoutRef.current = setTimeout(async () => {
+ if (path) {
+ try {
+ await window.api.fs.writeFile(path, value)
+ } catch (err) {
+ console.error('Failed to save file:', err)
+ }
+ } else {
+ window.api.send(SAVE_CONTENT_IN_STORE, value)
+ }
+ }, 500)
+ }, [])
+
const onChangeHandler = (editor, data, value) => {
setContent(value)
- ipcRenderer.send(SAVE_CONTENT_IN_STORE, content)
+ debouncedSave(activeTabPath, value)
+
+ // Update tab content
+ if (activeTabPath) {
+ setTabs(prev => prev.map(tab =>
+ tab.path === activeTabPath ? { ...tab, content: value, isDirty: true } : tab
+ ))
+ }
+
const lineNo = getLineNumber(editor)
const domNode = getElement(lineNo)
srollToElement(domNode)
}
- useEffect(() => {
- const { getGlobal } = remote
- setContent(getGlobal('content') || '')
- setAllowHtml(getGlobal('allowHtml') || false)
- setTheme(getGlobal('theme') || 'yonce')
- if (editor?.current) editor.current.focus()
+ // File operations
+ const handleFileClick = useCallback(async (file) => {
+ try {
+ const fileContent = await window.api.fs.readFile(file.path)
+
+ // Check if tab already exists
+ const existingTab = tabs.find(t => t.path === file.path)
+ if (existingTab) {
+ setActiveTabPath(file.path)
+ setContent(existingTab.content)
+ } else {
+ const newTab = {
+ path: file.path,
+ name: file.name,
+ content: fileContent,
+ isDirty: false
+ }
+ setTabs(prev => [...prev, newTab])
+ setActiveTabPath(file.path)
+ setContent(fileContent)
+ }
+ } catch (err) {
+ console.error('Failed to open file:', err)
+ }
+ }, [tabs])
+
+ const handleTabClick = useCallback((tab) => {
+ setActiveTabPath(tab.path)
+ setContent(tab.content)
+ }, [])
+
+ const handleTabClose = useCallback((tab) => {
+ const newTabs = tabs.filter(t => t.path !== tab.path)
+ setTabs(newTabs)
+
+ if (activeTabPath === tab.path) {
+ if (newTabs.length > 0) {
+ const nextTab = newTabs[newTabs.length - 1]
+ setActiveTabPath(nextTab.path)
+ setContent(nextTab.content)
+ } else {
+ setActiveTabPath(null)
+ setContent('')
+ }
+ }
+ }, [tabs, activeTabPath])
- ipcRenderer.on('EXPORT_TO_HTML', downLoadDoc)
+ // Workspace handling
+ const handleOpenFolder = useCallback(async () => {
+ try {
+ const folderPath = await window.api.fs.openFolderDialog()
+ if (folderPath) {
+ setWorkspacePath(folderPath)
+ }
+ } catch (err) {
+ console.error('Failed to open folder:', err)
+ }
}, [])
+ useEffect(() => {
+ const loadInitialData = async () => {
+ const { content, theme, allowHtml } = await window.api.invoke('GET_GLOBALS')
+ setContent(content || '')
+ setAllowHtml(allowHtml || false)
+ setTheme(theme || 'yonce')
+ if (editor?.current) editor.current.focus()
+ }
+
+ const handleExportPdf = () => {
+ window.api.send('EXPORT_TO_PDF')
+ }
+
+ const handleExportPng = () => {
+ if (previewRef.current) {
+ exportToPNG(previewRef.current)
+ }
+ }
+
+ const handleCopyHtml = () => {
+ copyHTMLToClipboard()
+ }
+
+ const handlePublishGist = (_, { secret }) => {
+ publishGist(content, activeTabPath, secret)
+ }
+
+ const handleToggleToc = () => {
+ setShowToc(prev => !prev)
+ }
+
+ const handleOpenSettings = () => {
+ setSettingsOpen(true)
+ }
+
+ loadInitialData()
+
+ window.api.on('EXPORT_TO_HTML', downLoadDoc)
+ window.api.on('EXPORT_TO_PDF', handleExportPdf)
+ window.api.on('EXPORT_TO_PNG', handleExportPng)
+ window.api.on('COPY_HTML_TO_CLIPBOARD', handleCopyHtml)
+ window.api.on('PUBLISH_GIST', handlePublishGist)
+ window.api.on('TOGGLE_TOC', handleToggleToc)
+ window.api.on('OPEN_SETTINGS', handleOpenSettings)
+ window.api.on('OPEN_WORKSPACE_FOLDER', handleOpenFolder)
+
+ return () => {
+ window.api.removeListener('EXPORT_TO_HTML', downLoadDoc)
+ window.api.removeListener('EXPORT_TO_PDF', handleExportPdf)
+ window.api.removeListener('EXPORT_TO_PNG', handleExportPng)
+ window.api.removeListener('COPY_HTML_TO_CLIPBOARD', handleCopyHtml)
+ window.api.removeListener('PUBLISH_GIST', handlePublishGist)
+ window.api.removeListener('TOGGLE_TOC', handleToggleToc)
+ window.api.removeListener('OPEN_SETTINGS', handleOpenSettings)
+ window.api.removeListener('OPEN_WORKSPACE_FOLDER', handleOpenFolder)
+ }
+ }, [content, activeTabPath])
+
const CodeMirror = initEditor()
+
return (
-
-
- {CodeMirror && (
-
(editor.current = e)}
- value={content}
- options={editorOptions(theme)}
- onBeforeChange={onChangeHandler}
- onChange={onChangeHandler}
- onScroll={onScroll}
- />
+
+ {tabs.length > 0 && (
+
+ )}
+
+
+ {workspacePath && (
+
+
+
)}
+
+
+
+ {CodeMirror && (
+ (editor.current = e)}
+ value={content}
+ options={editorOptions(theme)}
+ onBeforeChange={onChangeHandler}
+ onChange={onChangeHandler}
+ onScroll={onScroll}
+ />
+ )}
+
+
+ {previewVisible && (
+
+
+
+ )}
+
-
-
-
+
+ {settingsOpen && (
+
+
+
Settings
+
Settings UI coming soon...
+
+
+
+ )}
+ 
+