greyovo/markditorapp

✍️ Yet another WYSIWYG Markdown editor written in TypeScript and Tauri. Aiming to be an open-source alternative to Typora. (🤗WIP)

Markditor

English | 简体中文

Yet another WYSIWYG Markdown editor written in TypeScript and Tauri. Aims to be an open-source alternative to Typora.

[Markditor] = [Mark] down + e [ditor]. Supports Windows 10 / 11 by now.

⚠️ WIP. Be careful when editing your important documents.

light	dark

Technology Stack

Markditor is heavily based on Vditor, and we used a modified version of it. (Check out repo). In addition, we also built on top of the following technology stack:

• React
• Tauri (preferred) / Electron
• Zustand
• Radix-UI
• Tailwind CSS
• Vite

Features

• Instant-render for Markdown typing
• User-friendly table editor
• Auto-save within internal seconds
• Dark mode support

Download

Go to releases page.

TODOs

• Internationalization (i18n)
• Insert images by: dropping, pasting (automatically copy to asset folder)
• Drag & drop to: open files, or insert images
• Enhance file management: drag and drop to move files, watch file changes from outside, automatically save when switching windows.
• Source code mode
• Export to: PDF or HTML
• Support macOS, Linux (technically available, but lack of testing devices to confirm)

Project Architecture

├─build           // Build assets used by electron-builder
├─dist            // Web contents build output
├─dist-electron   // Electron prebuilt files
├─electron        // Electron main process
├─public          // Public files to be used in HTML
├─release         // Electron build output
├─shared          // Shared types definitions between renderer and main processes
├─src             // Front-end sources
│  ├─assets       // Static assets, i.e., fonts
│  ├─components   // Global components
│  ├─feat         // Feature modules
│  ├─ipc          // IPC communication
│  ├─store        // Zustand stores and business logics
│  ├─types        // Global type definitions
│  └─utils        // Utility functions
└─src-tauri       // Tauri backend process and build output

Development

Note: Markditor is initially made with Electron, but currently Tauri is preferred. So far Electron is still in development but has some unimplemented Platform API. See electron/main/handler. Electron backend may be deprecated in the future.

By encapsulating IPC communication (see shared/platform_api.d.ts and src/ipc), Markditor can be easily migrated to other backends such as Tauri.

Install dependencies:

npm install

Run in dev mode:

# Run with Tauri (preferred)
npm run dev:tauri

# Run with Electron
npm run dev:electron

Build product:

# Build with Tauri (preferred)
npm run build:tauri

# Build with Electron
npm run build:electron

markditorapp's Issues

若有未保存的文件，在切换文件或关闭程序前询问

i18n support

更直观的插入图片的方式

• 使用右键菜单插入
• 直接拖拽到编辑器中
• vditor 工具栏插入
• 粘贴插入 （插入文件？插入链接？插入图片blob数据？）
  • Ctrl V
  • 菜单中的粘贴键

允许用户自定义一些设置

• 主题模式：深色/浅色/跟随系统
• 自动保存开关、自动保存间隔
• 是否默认隐藏顶部工具栏
• 是否默认隐藏底部工具栏
• 切换语言
• 插入图片时自动复制到当前目录下的某个目录：开关 / 目录名称

实现常见快捷键，如保存

• 保存文档：Ctrl + S
• 新建文档：Ctrl + N
• 关闭文档：Ctrl + W

打开某个文件在系统文件管理器中的具体位置

Use shell in Tauri.

Windows 命令参考:

Explorer /root, <dir_path>  # 在资源管理器打开指定文件夹

Explorer /select, <dir_path> # 在资源管理器打开指定文件并选中（如果是文件夹，则打开其上一层，并选中该文件夹）

macOS、Linux 未知

编辑器：允许切换到源码模式（Vditor的SV模式）

点击顶部菜单刷新时，左侧已打开的文件夹内容显示会被清空（实际文件还在）

使用markditor直接打开md文件

深色模式

允许用户自定义快捷键

友好的快捷键提示语或教程有助于提升用户体验

• 默认快捷键给出提示语
• 用户自定义快捷键