Skip to content

jaydenluo/md_note_book

BranchesTags

Repository files navigation

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

开发和生产命令

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev
pnpm tauri dev

生产环境

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run preview

rm node_modules

.table-drag-handle::before { content: ''; position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px; }

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

开发和生产命令

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev
pnpm tauri dev

生产环境

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run preview

项目配置分析 已完成的配置： 安装了 Tauri CLI: @tauri-apps/cli 初始化了 Tauri 配置文件 src-tauri/tauri.conf.json 修改了前端构建路径为 ../dist（与 Vite 默认输出一致） 修改了开发服务器地址为 http://localhost:5173（Vite 默认端口） 自定义了应用标识符 com.notebook.app 添加了打包相关命令到 package.json 打包命令： 通用打包：pnpm tauri:build Windows 专用打包：pnpm tauri:build:windows macOS 专用打包：pnpm tauri:build:macos 打包前的准备： 确保 Rust 环境已安装（Tauri 依赖 Rust） Windows 需要安装 Visual Studio 构建工具 macOS 需要安装 Xcode Command Line Tools 打包流程： 运行打包命令会先执行前端构建（pnpm build） 然后 Tauri 会将前端资源和 Rust 后端打包成原生应用 输出的安装包将位于 src-tauri/target/release/bundle/ 目录 自定义选项： 可以在 tauri.conf.json 中修改窗口大小、标题等 可以添加自定义图标（需要替换 src-tauri/icons/ 中的图标文件） 可以配置权限、系统托盘、更新机制等高级功能 要开始打包，只需运行相应的命令即可。如果您需要更多自定义配置，可以进一步修改 tauri.conf.json 文件。

底部状态栏 右侧大纲区域 的颜色 需要调整与主界面一致，请检查

分类列表 笔记列表 文档大纲 宽度 设计为可拖动调整，并保存，退出时也不清空

@WysiwygMarkdownEditor.tsx 加强这个功能 ，帮我好好想一想怎么写文档会更好用

下面是你提到的几个编辑器的开源/免费情况和实际效果简要对比：

1. Milkdown

  • 开源/免费：完全免费，MIT License。
  • 效果：专为Markdown设计的所见即所得（WYSIWYG）编辑器，支持React/Vue，体验现代，支持主题、插件、协作等。格式化渲染效果好，扩展性强，适合做笔记、博客等场景。
  • 适用场景：需要高质量Markdown所见即所得体验的应用。

2. Remirror

  • 开源/免费：核心免费，MIT License。部分高级功能/企业服务可能收费，但个人/普通项目足够用。
  • 效果：基于ProseMirror，支持富文本和Markdown，功能丰富，插件体系完善，支持协作、表格、公式等。可自定义UI和行为，适合复杂富文本需求。
  • 适用场景：需要高度可定制、支持多种格式（不止Markdown）的富文本编辑场景。

3. Tiptap

  • 开源/免费：核心免费，MIT License。部分高级协作/云服务收费，但本地开发和大部分功能免费。
  • 效果：基于ProseMirror，现代、灵活，支持富文本、Markdown、协作、拖拽、表格、图片等。社区活跃，文档完善，React/Vue/Svelte等均支持。
  • 适用场景：需要现代富文本、所见即所得、可扩展的编辑器。

4. Monaco Editor

  • 开源/免费：完全免费，MIT License。由微软维护，是VS Code的编辑器内核。
  • 效果：专业代码编辑器，支持多语言语法高亮、自动补全、错误提示、行号、分屏等。体验接近VS Code，适合代码编辑场景。
  • 适用场景：需要代码编辑体验（如Markdown源码、编程、配置文件等）。

5. CodeMirror

  • 开源/免费：完全免费，MIT License。老牌代码编辑器，社区活跃。
  • 效果：轻量、快速，支持多语言高亮、自动补全、主题、插件等。新版CodeMirror 6体验更现代，适合嵌入式代码编辑。
  • 适用场景：需要轻量级代码编辑、嵌入式编辑器、移动端适配等。

效果对比简表

编辑器 免费/开源 主要用途 所见即所得 语法高亮 自动补全 插件/扩展 适合场景
Milkdown 是 Markdown 是 是 否 强 笔记/博客/文档
Remirror 是 富文本/Markdown 是 是 是 很强 富文本/协作编辑
Tiptap 是 富文本/Markdown 是 是 是 很强 富文本/协作/自定义
Monaco Editor 是 代码编辑 否 很强 很强 强 代码/配置/源码
CodeMirror 是 代码编辑 否 很强 很强 强 代码/嵌入/轻量

总结建议

  • 写Markdown文档/笔记：推荐Milkdown、Tiptap、Remirror（所见即所得体验好，扩展性强）。
  • 写代码/源码编辑：推荐Monaco Editor、CodeMirror（专业代码编辑体验）。
  • 全部都免费且开源，可放心商用和二次开发。

如需具体某个编辑器的集成方案或效果演示，可以指定一个，我可以帮你详细介绍或给出代码示例！

默认features: common-controls-v6、compression、wry 与窗口相关的features: macos-private-api、devtools、tray-icon 等

下面是标题折叠功能的实现流程：

标题折叠功能简化实现

2. 用户点击标题时（折叠/展开操作）

当用户点击某个标题元素时：

  1. handleFoldingClick函数触发：

    • 阻止事件冒泡和默认行为，防止编辑器捕获事件
    • 临时禁用编辑器编辑功能
    • 检查标题当前折叠状态
    • 根据状态切换折叠/展开

  2. 折叠操作时：

    • 为点击的标题元素添加data-folded="true"属性
    • 获取该标题下所有需要隐藏的元素，包括子标题和内容
    • 为这些元素添加hidden-by-fold类，使其隐藏
    • 标题本身不增加hidden-by-fold类，使其显示，data-folded="true"属性是显示的

  3. 展开操作时：

    • 移除标题的data-folded属性
    • 获取之前被隐藏的元素
    • 移除这些元素的hidden-by-fold类，使其显示

1. 初始化阶段

简化后的初始化只需注册事件监听器：

  • 在编辑器DOM准备好时，添加点击事件监听器handleFoldingClick
  • 利用CSS样式自动应用折叠效果，不需要额外的初始化逻辑

帮我修改为以下的流程，其他不在下面列表的功能删除：

2. 用户点击标题时（折叠/展开操作）

当用户点击某个标题元素时：

  1. handleFoldingClick函数触发：

    • 阻止事件冒泡和默认行为，防止编辑器捕获事件
    • 临时禁用编辑器编辑功能
    • 检查标题当前折叠状态
    • 根据状态切换折叠/展开

  2. 折叠操作时：

    • 为点击的标题本身体元素添加data-folded="true"属性
    • 获取该标题下所有需要隐藏的元素，包括子标题和内容
    • 为这些元素添加hidden-by-fold类，使其隐藏
    • 标题本身不增加hidden-by-fold类，使其显示，data-folded="true"属性是显示的

  3. 展开操作时：

    • 移除标题的data-folded属性
    • 获取之前被隐藏的元素
    • 移除这些元素的hidden-by-fold类，使其显示

1. 初始化阶段 并不需要作处理，因为隐藏的元素已经通过CSS样式隐藏了

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages