https://github.com/fengkx/plastic-editor-react 业余（工作不饱和）时间糊的一个小项目，一个多层级的“大纲笔记”软件。商业化的软件有 workflowy , 幕布。 plastic editor 的原作在此，使用svelte实现的。按理说这种编辑器这种dom操作比较多的玩意是很适合用svelte做的。但svelte没有 react-dnd , Next.js , 再加上我想玩玩 jotai （安利一下,很好用），于是用react实现了一波。相比原版，实现了拖拽排序。上班读代码，用它记了两天笔记，把一些遇到的问题都修了一下，习惯了之后用起来应该是比较顺手了。 TODO：支持登陆帐号同步用 supabase 。目标是完全不用Next.js的API route功能，只用supabase的sdk实现数据同步还有是否公开笔记等功能。读写权限控制要通过RLS来做，暂时想到这样的表结构支持像幕布一样画出层级图（思维导图）类似workflowy的面包导航，只显示某个子树 ...... 想做的有很多，但是日常要搬砖，慢慢做，有生之年（说不定哪天又弃坑了）有空更一下从plastic-editor学到的一些东西编辑块是用textarea做的，非编辑状态是div,点击编辑如何确定光标位置 ...坑按Enter会触发换行创建新的块，如何防止（中文）输入法按回车直接键入英文时触发这玩意 ...坑

Plastic Editor （React）

0x709394

https://github.com/fengkx/plastic-editor-react

业余（工作不饱和）时间糊的一个小项目，一个多层级的“大纲笔记”软件。商业化的软件有workflowy, 幕布。
plastic editor的原作在此，使用svelte实现的。按理说这种编辑器这种dom操作比较多的玩意是很适合用svelte做的。但svelte没有react-dnd, Next.js, 再加上我想玩玩jotai （安利一下,很好用），于是用react实现了一波。

相比原版，实现了拖拽排序。上班读代码，用它记了两天笔记，把一些遇到的问题都修了一下，习惯了之后用起来应该是比较顺手了。

TODO：

支持登陆帐号同步
用supabase。目标是完全不用Next.js的API route功能，只用supabase的sdk实现数据同步还有是否公开笔记等功能。

读写权限控制要通过RLS来做，暂时想到这样的表结构
支持像幕布一样画出层级图（思维导图）
类似workflowy的面包导航，只显示某个子树
......
想做的有很多，但是日常要搬砖，慢慢做，有生之年（说不定哪天又弃坑了）

有空更一下从plastic-editor学到的一些东西

编辑块是用textarea做的，非编辑状态是div,点击编辑如何确定光标位置
...坑
按Enter会触发换行创建新的块，如何防止（中文）输入法按回车直接键入英文时触发这玩意
...坑

0x709394

Update

把帐号登录同步的部分接起来了。 https://plastic-editor-react.vercel.app/login
主要的改动是：直接在jotai中传入自定义Storage,再在必要的地方加上Suspense基本完事。但是过程总是曲折踩了许多坑，根本原因是jotai玩不转。
当然这样做的缺点也很明显，请求数太多了。

接下来想先把层级图的部分给解决了。初步想法是用D3画（~~在学了...~~），想问一下各位有没有比较好的library 可以方便的画图。
我想做到可以做编辑，折叠的功能。节点能够自定义，渲染“富文本”。

Note

填坑

编辑块是用textarea做的，非编辑状态是div,点击编辑如何确定光标位置
一开始想的是计算点击的位置除字体宽度，但字体宽度在不同字体不同缩放的情况下都不确定。所以肯定不行。
在点击事件的时候，浏览器会有一个长度为0的Selection可以用window.getSelection拿到anchorOffset计算光标位置。代码
按Enter会触发换行创建新的块，如何防止（中文）输入法按回车直接键入英文时触发这玩意
在composition 相关事件记录个状态变量就好

给纯静态 Nextjs 构建个 Docker image

纯静态指的是没有用API Route getServerSideProps等功能， next build会显示所有页面都是
○ (Static) automatically rendered as static HTML (uses no initial props)

使用next build && next export可以生成静态文件。因为静态所以就不用装node, npm, next还有各种依赖，这堆依赖装下来docker image肯定超过100多MB了。直接在docker整个http server就好了。

但是因为nextjs会在build的时候直接用环境变量替换process.env.XXX。这样docker image启动容器时传入环境变量都没用了（主要是supabase的API url 和 jwt）。所以得想个办法把环境变量在容器启动时塞进去。

最终的解决方案是build的时候传入一个又长又臭的独特字符串做环境变量。build完在容器启动时用sed替换。

因为在next用了dynmaic route 所以简单的静态http server不行，得整个能方便配路径转发的，nginx用的熟悉就他了。
为了能用上br压缩，从0xffff-env找了个带br modules的镜像（懒。

因为登录相关的页面在没配supbase相关环境变量时是没有用的，所以想把它404掉。前端写判断404会出现打开先展示登录，js运行了才显示404页面，逼死强迫症。于是得在nginx 配置里注入环境变量把相关页面提前404掉。
这里用到了envsubst 作文本替换，再加上从h5bp抄的配置凑在一起就长这样

最终镜像体积控制在了10MB左右。真是excited。还可以把构建静态文件的过程从docker转到github action。这样就不用忍受docker buildx 生成其他架构image的超慢速度了 🙈。

0x709394

Update

画层级图

读完d3 for impatience
发现d3这种selection binding 的类声明式API在React这样的声明式框架中有点鸡肋。好在d3已经模块的分包。可以在画图的方面使用d3的包, dom节点的管理仍交给react。visx 是个不错的选择。用d3的tree可以画出图，节点用foreginObject交给dom去渲染。但是因为节点大小不固定，所以tree layout的位置，大小，摆放位置等都不太好看，还有可能会重叠。还不知道要怎么整 😅 。

Binary build

产出桌面应用~~套壳浏览器~~。这也是为什么不用next.js API route 原因之一。
自己糊的东西那肯定要试点新东西~~react@aplha~~， electron 不考虑了。tauri 整一个。跟electron不同，用的系统webview、Rust编写的后端代替Node.js调用系统API。因为这个东西不调用系统API就是纯粹的套壳, 所以调用系统API的部分没体验。不用带个chromium应用体积就是小。但是有得必有失，系统webview就意味着环境不统一，可能有浏览器兼容方面的问题。

配合GitHub Action可以build出win,mac,和deb 包： https://github.com/fengkx/plastic-editor-react/releases
然后发现在水果电脑上装得申请认证，否则每次安装还得去系统设置调。然后这认证还得收保护费。。。

0x0001

0x709394 但是有得必有失，系统webview就意味着环境不统一，可能有浏览器兼容方面的问题。

初步找了下 tauri 浏览器兼容方面，项目README.md提到：

The user interface in Tauri apps currently leverages tao as a window handling library on macOS and Windows, and gtk on Linux via the Tauri-team incubated and maintained WRY, which creates a unified interface to the system webview (and other goodies like Menu and Taskbar), leveraging WebKit on macOS, WebView2 on Windows and WebKitGTK on Linux.

它用 wry 封装了各平台的原生 WebView：

在Windows 依赖的是 WebView2
macOS 用的系统的 WebKit
Linux 是 webkit2gtk

总体来看都是 WebKit / Chromium，但搜了一通没找找，感觉可能需要一个列表，明确各系统自带的 WebKit / Chromium 最低版本、主流版本等等，让使用者心里有个底 / 前端做一个专门的 polyfill。

0x709394

0x0001
就是明确不了，系统带了啥就是啥。
比如ms出了webview2，但仍然有人在用xp。edge换了chromium内核也有人在用旧edge。

不过个人项目就不管了，怎么爽怎么来