Skip to content
Bblog
返回项目列表
Markdown Notebook

Markdown Notebook

本地优先的 Markdown 编辑器，实时预览、分栏布局、IndexedDB 离线存储。

ReactViteIndexedDB
源码

做了什么

一个本地优先的 Markdown 笔记本：左编辑右预览，所有内容存在 IndexedDB，断网也能写。

存储抽象

db.ts
const DB_NAME = 'md-notebook';
const STORE = 'notes';
 
export async function putNote(note: Note) {
  const db = await openDB();
  return db.put(STORE, note);
}

把 IndexedDB 包成 Promise 风格的 put/get/all，上层调用就跟普通异步函数一样，屏蔽掉繁琐的事务 API。

编辑体验

  • 输入防抖 150ms 再渲染预览，避免每次按键都重排。
  • 滚动联动：左侧滚到哪，右侧预览跟到哪。

工具是给自己用的——顺手，就是全部的标准。