feat: 新增仿notion设计的markdown编辑器

[Crokily]

开发方案见：https://www.notion.so/MD-2a39919329548107a259c6a1cec5a089
除了按方案完成了编辑器以外

还执行了以下可能阻塞开发的修复

1. 缺少可回调的登录页，现在如果用户没登陆页面，路由守卫会将其跳转到一个有回调地址的登录提示页，登录后自动跳回原页面
2. 改了pre-commit的脚本，之前会默认直接提交所有文件，但有时候用户会有stage部分文件再提交的需求，所以改成了可以兼容stage的代码
3. 目前对next-img的替换似乎不完全，仍然会有外链文件使用next-js的问题，导致外链一直会出尺寸无法获取的bug，于是彻底替换，目前完全使用img组件了。
4. 目前的Shiki代码高亮插件不支持大小写区分，对JavaScript的代码段就无法识别，导致系统build出错，必须javasciprt才行，因为考虑到用户的自用的编辑器也有可能会有使用JavaScript等大写代码段，所以最好的解决办法是加个remark插件，每次对md,mdx文件做统一处理转换大小写。
5. 把原理的投稿流程做了解耦2a52b0709fba4f046dde988551b10ebe82c8b3de，拆成了3个文件，现在代码不超过200行了。

后续计划

1. 目前的UI是有点简陋的，但后续有空的时候再改进吧，主要是编辑器本体布局要放大，期望做成notion的双栏样式
2. AI元数据和目录识别功能
3. 加入indexDB存用户编辑记录

预览

由于R2的CORS规则问题，只加了localhost，involutionhell到白名单，因此预览的随机vercel路径是没法使用上传功能的。
请拉到本地部署测试

测试流程

1. 先登录，再点击 我要投稿 按钮，或直接点击 我要投稿 进入提示登录页完成登录，然后自动跳转进入编辑器页
2. 测试编辑器功能，编辑文本，粘贴图片等等——目前发现的问题是编辑器本体太小了，有时候会挡住菜单，但不是非常影响使用，下次UI优化会解决
3. 发布并测试发布后的效果是否正常。

env

1. 需要增加几个R2相关的环境变量，已发给对应人员
2. 目前使用的是involutionhell@gmail.com的cloudflare账户开的R2, 由于域名不在该账户，导致没法把R2绑定上公共域名，因此R2的访问和功能会被限制，用量小的时候问题不大，但最好这个需要longlong把域名的DNS管理换到involutionhell@gmail.com的cloudflare账户上，这样R2才能绑定域名。

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
website-preview	Ready	Preview	Comment	Dec 12, 2025 0:52am

[vercel]

@Crokily is attempting to deploy a commit to the longsizhuo's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

This PR introduces a comprehensive Notion-style markdown editor for user article submissions, integrating Cloudflare R2 for image uploads, along with several infrastructure improvements and bug fixes.

Key Changes:

• New Milkdown-based markdown editor with real-time preview and drag-and-drop image support
• R2 integration for automatic image uploads with presigned URLs
• Enhanced authentication flow with callback URL support and dedicated login page
• Fixed Shiki code highlighting case-sensitivity issues via remark plugin
• Improved pre-commit hooks to respect staged files

Reviewed changes

Copilot reviewed 23 out of 25 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
source.config.ts	Adds remark plugin to normalize code block language identifiers and updates image handling configuration with detailed documentation
next.config.mjs	Disables Next.js image optimization due to Vercel quota limits, removes conflicting remarkImage configuration
package.json	Adds Milkdown editor dependencies (@milkdown/crepe, @milkdown/kit), AWS SDK for R2 integration, and mdast types
mdx-components.tsx	Overrides default img component to use native HTML img tags instead of Next.js Image component
lib/submission.ts	New utility functions for filename validation and markdown extension handling
lib/editor-store.ts	Zustand store for managing editor state (title, description, tags, markdown content)
auth.config.ts	Adds /editor route protection and implements redirect callback for post-login navigation
app/login/page.tsx	New login page that accepts redirectTo/callbackUrl parameters for seamless navigation after authentication
app/editor/page.tsx	Server component that verifies authentication and renders editor client component
app/editor/EditorPageClient.tsx	Main editor UI orchestrating metadata form, directory selection, markdown editor, and publish workflow
app/components/MarkdownEditor.tsx	Milkdown editor wrapper with image buffer integration and auto-sync to store
app/components/EditorMetadataForm.tsx	Form component for article metadata (title, description, tags, filename)
app/components/DocsDestinationForm.tsx	Tree-based directory selector for choosing submission destination
app/components/hooks/useImageBuffer.ts	Custom hook for managing local image cache before upload
app/components/SignInButton.tsx	Updated to accept redirectTo parameter for post-login navigation
app/components/Contribute.tsx	Modified "我要投稿" button to navigate directly to /editor instead of opening dialog
app/components/contribute/tree-utils.tsx	Extracted tree utility functions for reuse across components
app/api/upload/route.ts	New API endpoint generating R2 presigned URLs for client-side image uploads
app/globals.css	Comprehensive Milkdown editor styling with dark mode and responsive support
.husky/pre-commit	Updated to only stage migration-generated changes instead of all modified files
.gitignore	Updated AGENTS.md pattern and added .claude directory
.env.sample	Added R2 configuration variables (account ID, access keys, bucket, public URL)
.github/workflows/sync-uuid.yml	Formatting improvement for multi-line condition

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[longsizhuo]

我觉得安全的事情可以稍微放一放，毕竟没那么多人为了打爆图床来的。而且我记得图床上应该也可以限制大小来避免恶意使用的

[Crokily]

我觉得安全的事情可以稍微放一放，毕竟没那么多人为了打爆图床来的。而且我记得图床上应该也可以限制大小来避免恶意使用的

主要还是R2图床不支持限制文件大小

这几天我在cf社区上看到有人说可以用post预签名的方式来实现限制上传文件，我实现了（Crokily:feat/Crokily/PostURL）以后发现一直不行，查了文档才发现R2也不支持POST预签名，这个是AWS S3的功能，哈哈哈：https://developers.cloudflare.com/r2/api/s3/presigned-urls/

最后确认，安全的事情先放一放了。大概情况如下

为了节省vercel资源，上传策略采用的是不经过后端的预签名URL模式，因此文件会直接从前端进入图床，节省后端资源，也避免了后端直接被传文件攻击的问题，因此后端没有做文件大小和类型的限制，因为后端不涉及。

但这也确实有可能存在图床会被打爆的问题。
经过仔细研究，发现

目前解决方案：

1. 要么是放弃预签名模式，采用传统的经过后端上传的模式，
2. 要么是直接在前端加大小验证（但前端验证存在被绕过的风险）——正常来说一般都是用前端限制+图床限制的办法，但R2不支持自定义的文件大小限制（AWS S3是可以的，R2阉割了），R2只有自带的单次请求最大5G限制。
3. 加个cloudflare worker , 先把图片传到worker，再由worker处理传到R2，这一步其实就等于是传统的后端上传模式，只是把这部分后端代码搬到cloudflare上，节省自己的资源，这是可行的，有点麻烦，我等v2再做吧。

根据当前项目的资源情况考虑，还是暂时不动安全这块，后续优化的时候再换worker方式处理