Feat/GitHub auth

.github/workflows/build.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -42,7 +42,7 @@ jobs:
         run: cargo install cargo-make
 
       - name: Run tests
-        run: pnpm ts:check && pnpm lint && cd ./crates && cargo make ci
+        run: pnpm type-check:full && pnpm lint && cd ./crates && cargo make ci
 
   build-macos:
     name: Build macOS
@@ -66,7 +66,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -106,7 +106,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -143,7 +143,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -219,4 +219,3 @@ jobs:
           prerelease: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-

.gitignore

@@ -90,3 +90,5 @@ editor-settings.json
 Markdown-Editor.app
 markdown-editor-macos.zip
 markdown-editor-windows.zip
+
+.zvec-grep

.husky/pre-commit

@@ -1 +1 @@
-pnpm ts:check && pnpm lint && cd ./crates && cargo make commit
+pnpm type-check && pnpm lint && cd ./crates && cargo make commit

README.md

@@ -2,36 +2,45 @@
 
 [![Build](https://github.com/s-elo/Markdown-editor/actions/workflows/build.yml/badge.svg)](https://github.com/s-elo/Markdown-editor/actions/workflows/build.yml)
 
-A web-based WYSIWYG markdown editor that works with your local files. Simply specify the root path of your documents to start editing.
+A web-based WYSIWYG markdown editor for local files or Markdown documents in a GitHub repository.
 
-Built with [Milkdown](https://milkdown.dev/getting-started) and [React CodeMirror](https://uiwjs.github.io/react-codemirror/) for editing and displaying local markdown files.
+Built with [Milkdown](https://milkdown.dev/getting-started) and [React CodeMirror](https://uiwjs.github.io/react-codemirror/) for rich-text and source editing.
 
 ## Quick Start
 
 **🌐 [Try it online](https://s-elo.github.io/Markdown-editor)**
 
-### Download
+### GitHub mode (online)
+
+1. Open the [online editor](https://s-elo.github.io/Markdown-editor) and select **GitHub** in **Menu → Settings → Workspace mode**.
+2. Sign in, install the GitHub App for your repository, then select a repository and branch (or create a docs repository). Choose a docs folder and select **Use workspace**.
+3. Edit your documents, stage changes, and select **Publish staged** to commit them to GitHub.
+
+### Local mode (download)
 
 1. Download from the [latest release artifact](https://github.com/s-elo/Markdown-editor/releases).
 
-Download the `markdown-editor-macos.zip` for `MacOs`, `markdown-editor-windows.zip` for `Windows`.
+Download `markdown-editor-macos.zip` for macOS or `markdown-editor-windows.zip` for Windows.
 
 2. Unzip the file and run the binary file.
 
+3. In **Menu → Settings**, select **Local** under **Workspace mode** and choose the root folder of your documents.
+
 > [!TIP]
-> For MacOS, rignt click to open the App.
+> On macOS, right-click to open the app.
 >
-> For windows, right click to run the executable as **administrator**.
+> On Windows, right-click to run the executable as **administrator**.
 
 ## Key Features
 
 - **WYSIWYG Editing**: Rich markdown editing experience with Milkdown
 - **Dual Editor Mode**: Switch between WYSIWYG and raw markdown (CodeMirror) with real-time sync
 - **File Operations**: Create, rename, copy, move, and delete files and folders directly from the editor
-- **Git Integration**: Commit, push, pull, and manage git changes if your document root is a git repository
-- **Search**: Fast file name and content search across your documents based on [ripgrep
+- **GitHub Workspaces**: Edit repository documents in the browser, stage changes, and publish commits to a selected branch
+- **Local Git Integration**: Commit, push, pull, and manage git changes if your local document root is a git repository
+- **Local Search**: Fast file name and content search across your documents based on [ripgrep
   ](https://github.com/BurntSushi/ripgrep)
-- **Image Management**: Upload and manage images stored locally.
+- **Image Management**: Upload and manage images in the selected workspace
 
 ## Development
 

client/package.json

@@ -6,56 +6,35 @@
     "dev": "cross-env SERVER_PORT=3024 rsbuild dev --port 4000",
     "build": "cross-env SERVER_PORT=7024 rsbuild build",
     "preview": "rsbuild preview",
-    "ts:check": "tsc --noEmit"
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@markdown-editor/core": "workspace:*",
+    "@markdown-editor/github-workspace": "workspace:*",
     "@codemirror/lang-markdown": "0.19.6",
-    "@codemirror/language": "^6.11.3",
     "@codemirror/language-data": "0.19.2",
-    "@emotion/css": "11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@milkdown/crepe": "7.21.2",
-    "@milkdown/kit": "7.21.2",
-    "@milkdown/react": "7.21.2",
-    "@milkdown/utils": "7.21.2",
     "@mui/icons-material": "^7.2.0",
+    "@octokit/rest": "^22.0.1",
     "@reduxjs/toolkit": "^1.7.1",
-    "@uiw/codemirror-theme-github": "^4.24.2",
     "@uiw/react-codemirror": "4.5.3",
     "@uiw/react-split": "^5.9.3",
-    "clipboard": "^2.0.11",
-    "mdast-util-from-markdown": "^2.0.2",
-    "mdast-util-to-markdown": "^2.1.2",
-    "mermaid": "^11.11.0",
-    "micromark-extension-highlight-mark": "^1.2.0",
-    "micromark-util-types": "^2.0.2",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.6",
-    "prosemirror-inputrules": "1.5.1",
     "react": "19.1.0",
     "react-complex-tree": "^2.6.0",
     "react-dom": "19.1.0",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^7.6.1",
-    "refractor": "4.9.0",
-    "remark-directive": "^4.0.0",
-    "remark-highlight-mark": "^1.4.0",
-    "unified": "^11.0.5",
-    "unist-util-add": "^1.2.0",
-    "unist-util-visit": "^5.0.0",
-    "uuid": "^13.0.0"
+    "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.3.21",
-    "@rsbuild/plugin-less": "^1.2.4",
     "@rsbuild/plugin-react": "^1.3.1",
     "@rsbuild/plugin-sass": "^1.3.1",
-    "@types/mdast": "^4.0.4",
     "@types/node": "^24.10.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
-    "@types/react-redux": "7.1.34",
-    "typescript": "^5.8.3"
+    "typescript": "^7.0.2"
   }
 }

client/src/App.scss

@@ -97,3 +97,7 @@ body {
 .p-confirm-dialog-message {
   margin: 0;
 }
+
+.p-confirm-dialog-message {
+  margin-top: 0.5rem;
+}

client/src/App.tsx

@@ -11,32 +11,38 @@ import { Menu } from './components/Menu/Menu';
 import { Sidebar } from './components/Sidebar/Sidebar';
 import { SplitBar } from './components/SplitBar';
 import { APP_VERSION } from './constants';
+import { selectWorkspaceMode } from './redux-feature/githubWorkspaceSlice';
 import { selectMenuCollapse } from './redux-feature/globalOptsSlice';
-import { useCheckServer, useWarnUnsavedOnUnload } from './utils/hooks/reduxHooks';
+import { useGitHubInstallationGuard } from './utils/hooks/githubInstallationHooks';
+import { useCheckServer, useWarnBeforeUnload } from './utils/hooks/reduxHooks';
+import { useGitHubWorkspaceSync } from './utils/hooks/workspaceHooks';
 
 import './App.scss';
 
 export const App: FC = () => {
-  useWarnUnsavedOnUnload();
+  useWarnBeforeUnload();
 
-  const { isLoading, isError, isSuccess, data: serverCheckRes } = useCheckServer();
+  const workspaceMode = useSelector(selectWorkspaceMode);
+  useGitHubInstallationGuard();
+  useGitHubWorkspaceSync();
+  const { isLoading, isError, isSuccess, data: serverCheckRes } = useCheckServer(workspaceMode === 'local');
   const menuCollapse = useSelector(selectMenuCollapse);
   const navigate = useNavigate();
 
-  const showMenu = !isError && !menuCollapse;
+  const showMenu = (workspaceMode === 'github' || !isError) && !menuCollapse;
 
   useEffect(() => {
-    if (isError) {
+    if (workspaceMode === 'local' && isError) {
       void navigate('/internal/guide');
       return;
     }
 
-    if (!isLoading && serverCheckRes?.version !== APP_VERSION) {
+    if (workspaceMode === 'local' && !isLoading && serverCheckRes?.version !== APP_VERSION) {
       void navigate('/internal/version-mismatch');
     }
-  }, [isError, isSuccess, serverCheckRes]);
+  }, [isError, isSuccess, serverCheckRes, workspaceMode]);
 
-  if (isLoading) {
+  if (workspaceMode === 'local' && isLoading) {
     return (
       <div className="app-loading-container">
         <i className="pi pi-spinner pi-spin" />

client/src/assets.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

client/src/components/DocSearch/DocSearch.scss

@@ -16,11 +16,16 @@
     white-space: nowrap;
     transition: $transition;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: $headerTextColor;
       border-color: $hoverBorderColor;
     }
 
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
+    }
+
     .search-trigger-icon {
       font-size: 0.85rem;
     }
@@ -47,11 +52,11 @@
 .doc-search-dialog {
   width: 600px;
   background-color: $backgroundColor;
-
   .search-panel {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
+    padding-top: 1rem;
   }
 
   .search-mode-toggle.p-selectbutton {
@@ -136,6 +141,30 @@
         }
       }
     }
+
+    .search-submit-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.35rem;
+      min-height: 38px;
+      padding: 0.35rem 0.75rem;
+      border: 1px solid $panelBorderColor;
+      border-radius: $borderRadius;
+      background-color: $hoverBgcColor;
+      color: $headerTextColor;
+      cursor: pointer;
+      transition: $transition;
+
+      &:hover:not(:disabled) {
+        border-color: $hoverBorderColor;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
   }
 
   .search-filters-section {
@@ -195,6 +224,57 @@
       padding: 2rem 0;
       @include flex-center();
     }
+
+    .search-status {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+      padding: 0.65rem 0.75rem;
+      border: 1px solid $panelBorderColor;
+      border-radius: $borderRadius;
+      color: $shallowTextColor;
+      font-size: 0.82rem;
+    }
+
+    .search-error {
+      border-color: rgba(220, 53, 69, 0.45);
+      color: #dc3545;
+    }
+
+    .search-warning {
+      border-color: rgba(255, 193, 7, 0.45);
+    }
+
+    .search-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding: 1rem;
+      color: $shallowTextColor;
+      font-size: 0.85rem;
+    }
+
+    .load-more-btn {
+      display: block;
+      margin: 0.75rem auto 0.25rem;
+      padding: 0.35rem 0.9rem;
+      border: 1px solid $panelBorderColor;
+      border-radius: $borderRadius;
+      background: transparent;
+      color: $headerTextColor;
+      cursor: pointer;
+
+      &:hover:not(:disabled) {
+        background-color: $hoverBgcColor;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
   }
 
   .result-item {