Feat/local client

.github/workflows/build.yml

@@ -82,8 +82,8 @@ jobs:
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: mds-macos
-          path: dist/mds-macos.zip
+          name: markdown-editor-macos
+          path: dist/markdown-editor-macos.zip
           retention-days: 90
 
   build-windows:
@@ -124,8 +124,8 @@ jobs:
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: mds-windows
-          path: dist/mds-windows.zip
+          name: markdown-editor-windows
+          path: dist/markdown-editor-windows.zip
           retention-days: 90
 
   deploy-pages:
@@ -166,6 +166,12 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v4
 
+      - name: Delete old pages artifact
+        uses: geekyeggo/delete-artifact@v5
+        with:
+          name: github-pages
+          failOnError: false
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
@@ -186,13 +192,13 @@ jobs:
       - name: Download macOS artifact
         uses: actions/download-artifact@v4
         with:
-          name: mds-macos
+          name: markdown-editor-macos
           path: dist/
 
       - name: Download Windows artifact
         uses: actions/download-artifact@v4
         with:
-          name: mds-windows
+          name: markdown-editor-windows
           path: dist/
 
       - name: Get version
@@ -205,8 +211,8 @@ jobs:
         uses: softprops/action-gh-release@v1
         with:
           files: |
-            dist/mds-macos.zip
-            dist/mds-windows.zip
+            dist/markdown-editor-macos.zip
+            dist/markdown-editor-windows.zip
           tag_name: ${{ steps.version.outputs.version }}
           name: Release ${{ steps.version.outputs.version }}
           draft: false

.gitignore

@@ -23,6 +23,7 @@ yarn-debug.log*
 yarn-error.log*
 
 dist
+dist-local
 
 config.json
 
@@ -86,5 +87,6 @@ pids
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 editor-settings.json
-MDS-Server.app
-mds-macos.zip
+Markdown-Editor.app
+markdown-editor-macos.zip
+markdown-editor-windows.zip

README.md

@@ -4,9 +4,24 @@
 
 A web-based WYSIWYG markdown editor that works with your local files. Simply specify the root path of your documents to start editing.
 
+Built with [Milkdown](https://milkdown.dev/getting-started) and [React CodeMirror](https://uiwjs.github.io/react-codemirror/) for editing and displaying local markdown files.
+
+## Quick Start
+
 **🌐 [Try it online](https://s-elo.github.io/Markdown-editor)**
 
-Built with [Milkdown](https://milkdown.dev/getting-started) and [React CodeMirror](https://uiwjs.github.io/react-codemirror/) for editing and displaying local markdown files.
+### 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`.
+
+2. Unzip the file and run the binary file.
+
+> [!TIP]
+> For MacOS, rignt click to open the App.
+>
+> For windows, right click to run the executable as **administrator**.
 
 ## Key Features
 

client/package.json

@@ -15,10 +15,10 @@
     "@emotion/css": "11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@milkdown/crepe": "7.18.0",
-    "@milkdown/kit": "7.18.0",
-    "@milkdown/react": "7.18.0",
-    "@milkdown/utils": "7.18.0",
+    "@milkdown/crepe": "7.19.0",
+    "@milkdown/kit": "7.19.0",
+    "@milkdown/react": "7.19.0",
+    "@milkdown/utils": "7.19.0",
     "@mui/icons-material": "^7.2.0",
     "@reduxjs/toolkit": "^1.7.1",
     "@uiw/codemirror-theme-github": "^4.24.2",
@@ -58,4 +58,4 @@
     "@types/react-redux": "7.1.34",
     "typescript": "^5.8.3"
   }
-}
+}

client/rsbuild.config.ts

@@ -12,7 +12,8 @@ const SERVER_PORT = process.env.SERVER_PORT ?? defaultPort;
 // For project pages: /repo-name/
 // For user/organization pages: /
 const basePath = process.env.GITHUB_PAGES_BASE_PATH ?? '/';
-console.log(`Using base path: "${basePath}"`);
+const distRoot = process.env.CLIENT_DIST_PATH ?? '../dist';
+console.log(`Using base path: "${basePath}", dist: "${distRoot}"`);
 
 const version = pkgJson.version;
 
@@ -23,7 +24,7 @@ export default defineConfig({
   },
   output: {
     distPath: {
-      root: '../dist',
+      root: distRoot,
     },
     assetPrefix: basePath,
   },

client/src/components/Editor/DraftEditor.tsx

@@ -5,11 +5,12 @@ import React, { useEffect, useId, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
-import { getGuideDoc } from './internalDocs/guide';
+import { getGuideDoc, getLocalModeGuideDoc } from './internalDocs/guide';
 import { getVersionMismatchDoc } from './internalDocs/versionMismatch';
 import { CrepeEditor, CrepeEditorRef } from './MilkdownEditor';
 import { EditorRef } from './type';
 
+import { ONLINE_MODE } from '@/constants';
 import { updateCurDoc, selectCurTabs, DocType, selectCurDoc, clearCurDoc } from '@/redux-feature/curDocSlice';
 import { selectNarrowMode, selectReadonly, selectTheme, updateGlobalOpts } from '@/redux-feature/globalOptsSlice';
 
@@ -23,7 +24,7 @@ const getDoc = (docId: string, type: DocType) => {
       return {
         id: docId,
         title: `Guide`,
-        content: getGuideDoc(),
+        content: ONLINE_MODE ? getGuideDoc() : getLocalModeGuideDoc(),
       };
     }
     if (docId === 'version-mismatch') {

client/src/components/Editor/configs/uploadConfig.ts

@@ -4,19 +4,19 @@ import { uploadConfig, Uploader } from '@milkdown/kit/plugin/upload';
 import type { Ctx } from '@milkdown/kit/ctx';
 import type { Node } from '@milkdown/kit/prose/model';
 
-import { SERVER_PORT } from '@/constants';
+import { SERVER_BASE_URL } from '@/constants';
 
 export function getImageUrl(url: string) {
   if (url.startsWith('/')) {
-    return `http://127.0.0.1:${SERVER_PORT}/api/imgs${url}`;
+    return `${SERVER_BASE_URL}/imgs${url}`;
   }
   return url;
 }
 
 export async function uploadImage(file: File) {
   const formData = new FormData();
   formData.append('file', file);
-  const res = await fetch(`http://127.0.0.1:${SERVER_PORT}/api/imgs/upload`, {
+  const res = await fetch(`${SERVER_BASE_URL}/imgs/upload`, {
     method: 'POST',
     body: formData,
   });

client/src/components/Editor/internalDocs/guide.ts

@@ -5,23 +5,34 @@ export const getGuideDoc = () => {
   const serverDownloadUrl = getServerDownloadUrl(APP_VERSION);
 
   return `
-  ## Guide (${APP_VERSION})
+  # Guide (${APP_VERSION})
 
-  Welcome to use the Markdown Editor.
+  Welcome to use the online version of [Markdown Editor](https://github.com/s-elo/Markdown-editor).
 
   ## Install the local server
 
   To unlock the full features of the editor, you need to install the local server.
 
   1. Install the [local server](${serverDownloadUrl}).
 
-  2. Unzip the file and run the binary file **as administrator**.
+  2. Unzip the file and run the binary file.
 
-  :::warning
-  The file will automatically register auto start when you open your computer.
-  :::
+  > It will also open the local client in your default browser.
 
   :::tip
+  For MacOS, rignt click to open the App.
+
+  For windows, right click to run the executable as **administrator**.
+  :::
+
+  ## Setup Workspace
+
+  Now you should be able to connect to local server.
+
+  Open the Menu/Settings to select a folder as workspace.
+
+  ## Manage local server
+
   you can manage the server in terminal
 
   \`\`\`bash
@@ -32,10 +43,34 @@ export const getGuideDoc = () => {
   $ mds stop
   # checkout server status
   $ mds status
+  \`\`\`
+  `;
+};
+
+export const getLocalModeGuideDoc = () => {
+  return `
+  # Guide (${APP_VERSION})
+
+  Welcome to use the [Markdown Editor](https://github.com/s-elo/Markdown-editor).
+
+  ## Setup Workspace
 
-  # uninstall the server, this will remove the cli
-  $ mds uninstall
+  Since you can open this editor, you should be able to connect to local server.
+
+  Open the Menu/Settings to select a folder as workspace.
+
+  ## Manage local server
+
+  you can manage the server in terminal
+
+  \`\`\`bash
+  # checkout the help information
+  $ mds -h
+
+  # stop the server
+  $ mds stop
+  # checkout server status
+  $ mds status
   \`\`\`
-  :::
   `;
 };

client/src/components/Editor/internalDocs/versionMismatch.ts

@@ -10,13 +10,19 @@ export const getVersionMismatchDoc = () => {
 
   Current version: ${APP_VERSION}
 
-  The version of the local server is different from the current version of the editor.
+  The version of the local server is different from the current version of this oneline editor.
 
   Please install the latest version of the local server.
 
   1. Install the [local server](${serverDownloadUrl}).
 
-  2. Unzip the file and run the binary file **as administrator**.
+  2. Unzip the file and run the binary file.
+
+  :::tip
+  For MacOS, rignt click to open the App.
+
+  For windows, right click to run the executable as **administrator**.
+  :::
 
   For more information, please refer to the [guide](${guideHref}).
   `;

client/src/components/EditorContainer/EditorContainer.tsx

@@ -46,7 +46,13 @@ export const EditorContainer: FC = () => {
   const globalContent = useSelector(selectCurContent);
 
   const defaultPagePath = useMemo(() => {
-    return curTab ? `/article/${curTab.ident}` : '/purePage';
+    if (!curTab) return '/purePage';
+
+    if (curTab.type === 'workspace') return `/article/${curTab.ident}`;
+    if (curTab.type === 'draft') return `/draft/${curTab.ident}`;
+    if (curTab.type === 'internal') return `/internal/${curTab.ident}`;
+
+    return '/purePage';
   }, [curTab]);
 
   const handleDocMirrorChange = (value: string) => {

client/src/components/Footer/Footer.scss

@@ -10,6 +10,9 @@
   justify-content: space-between;
   padding: 0 10px;
   .left-group {
+    display: flex;
+    align-items: center;
+    gap: 7px;
     .app-info-version-mismatch {
       svg {
         path {

client/src/components/GitBox/GitBox.scss

@@ -11,7 +11,7 @@
   }
   border-radius: $borderRadius;
   width: 25rem;
-  height: 400px;
+  height: 500px;
   padding: 0.5rem;
   background-color: $backgroundColor;
   display: flex;
@@ -53,6 +53,7 @@
   }
   .space-box {
     width: 100%;
+    max-height: calc((100% - 2rem) / 2);
     .clean-space {
       margin-top: 10px;
       width: 100%;
@@ -92,7 +93,7 @@
       display: flex;
       flex-direction: column;
       align-items: flex-end;
-      max-height: 15rem;
+      max-height: calc(100% - 2rem - 2rem);
       overflow: auto;
       .change-item {
         width: 95%;