by Pipi_huang
Column layout, drag & drop, inline editing, remote image paste auto-download.
Picote(Obsidian Columns)
Picote 是给设计师和重度笔记用户用的 Obsidian 分栏插件:偏重拖拽采集与尽量不打扰编辑流程的实现。
为什么选择 Picote
- 低摩擦采集:网页/花瓣/小红书/Pinterest 等场景下,倾向用拖拽把图放进分栏(比依赖粘贴更稳)。
- 智能本地化:能嗅探远程图 URL,静默下载并重命名后,把链接换成本地
![[image.png]]。 - 写入节奏:配合
requestAnimationFrame等节奏,减轻高频写回导致的卡顿或报错。 - 复杂 CDN:对无扩展名、防盗链等链接有专门嗅探链路。
插件界面与交互由作者按 UI/UX 思路做过拖拽反馈等方面的打磨。
功能概要
- 简洁的分栏书写方式,预览下布局顺滑。
- 跨平台 CDN / 外链识别管线。
- 建议优先使用拖拽,作为与 Obsidian/CodeMirror 配合最稳的路径。
- 图片单击放大(正文与分栏通用):滚轮缩放,底部提示「鼠标滚轮支持图片放大缩小」。
安装与升级(通用)
- 从 GitHub Releases 下载对应版本的
main.js、manifest.json、styles.css(以 Release 资产为准)。 - 放到
.obsidian/plugins/picote/(目录名必须与manifest.json里的id一致)。 - 在「第三方插件」中启用;升级后建议关闭插件再启用,或重启 Obsidian。
下文各版本若在「所含文件」中未写明 styles.css,则表示该版本未改样式文件,只需按需替换所列文件。
版本号以仓库
manifest.json的version字段为准。
更新日志(精简)
[2.3.8] — 2026-05-19
类型:功能增强(图片预览)
所含文件:main.js、styles.css、manifest.json
升级:替换上述三个文件后,完全退出 Obsidian 再打开(或关闭 Picote 再启用),确保样式与脚本生效。
图片单击放大(全文 + 分栏)
适用范围:笔记正文与 Picote 分栏内的图片(PNG / JPG / JPEG / WebP / GIF / SVG 等),无论来自外链、本地 ![[...]]、网页拖入或分栏内拖放。
交互:
| 操作 | 说明 |
|---|---|
| 单击图片 | 打开全屏预览(暗色遮罩) |
| 鼠标滚轮 | 放大 / 缩小图片 |
| Ctrl + 滚轮 | 更精细的缩放步进 |
| Esc | 关闭预览,回到笔记 |
| 点击右上角 × | 关闭预览 |
| 点击暗色背景 | 关闭预览 |
分栏内额外说明:
- Shift + 单击图片:仍可选中媒体,用 Delete / Backspace 删除(与「单击放大」并存)。
- 分栏图片上的下载按钮不受影响,不会误开大图。
Esc 关闭修复(2026-05-19)
原先 Esc 绑在 document 冒泡阶段,常被 CodeMirror / Obsidian 先拦截,只能点 × 关闭。
处理:在 window 捕获阶段监听 keydown;预览层设置 tabindex 并在打开时聚焦;灯箱自身也监听 Esc。
预览文案与层级(2026-05-19)
- 底部提示固定为:「鼠标滚轮支持图片放大缩小」(
position: fixed贴底显示)。 - 层级:放大后的图片在上层(
z-index: 20),文案在底层(z-index: 10),关闭按钮在最上(z-index: 30);滚轮放大时图片可叠在文案之上,避免文案挡住画面主体。
[2.3.7] — 2026-05-19
类型:稳定性修复 + 面向 Obsidian 社区目录的内部整理
所含文件:main.js、manifest.json
Bug 11:两栏分别放入多张图片(≈7 张)后,分栏下方仍漏出一行「三个点」(闭合围栏)
原 MutationObserver 挂在 .cm-embed-block,但 Live Preview 下闭合围栏(三个反引号)经常被渲染成外层 .cm-content 的另一条 .cm-line,观察器收不到通知;多图加载又超出原本 1.4s 的兜底延时窗口。
处理:观察器改挂 .cm-content / .markdown-preview-section,加 requestAnimationFrame 节流并去掉昂贵的 characterData;新增 bindMediaLoadFenceCleanup,每张 <img> / <video> 的 load / loadeddata / error 都触发清理,与图片就绪时刻对齐;scheduleCleanupStrayFences 延时档位由 8 档延伸到 10 档(追加 2200 / 3600ms),覆盖慢网或远程图最长尾。
面向社区目录的内部整理(不影响功能):
manifest.json:name改Picote,description去句末点号,minAppVersion从1.0.0提到1.4.0。- 新增
DT_DEBUG(默认关)+dlog/dwarn包装,将 16 处console.log/console.info静音;console.error/console.warn不动,真错误仍可见。 - 所有外露日志前缀由
DingTalk Columns/DT-Columns统一为Picote。 - 浮窗外部点击关闭:
_outsideHandler由document.addEventListener改为this.registerDomEvent,由 Obsidian 卸载时自动清理。 - 历史标识保留:代码块语言
dt-columns、命令 idinsert-dingtalk-columns、内部类名DingTalkColumnsPlugin全部不动,与已有笔记 / 已绑快捷键严格兼容。
[2.3.6] — 2026-05-12
类型:稳定性 / 拖放修复
所含文件:main.js、manifest.json
回滚 window 捕获 drop,修复 PNG 等图片拖入失败
v2.3.1 起在 window 捕获阶段拦截分栏上的 dragover / drop,部分环境下 Obsidian 与分栏逻辑冲突,导致 PNG 等格式拖入分栏无反应(文件可能已进库但预览不更新)。
处理:禁用 installDtColumnWindowDropCapture,drop 重新挂在 .dt-column 上,并恢复 v2.2.7 的顺序兜底逻辑。
权衡:极端情况下「首次拖入」仍可能需要再拖一次(与 v2.3.1 针对 Bug 1 的 window 捕获方案互有取舍)。
文档:同步精简 README 结构与表述(GitHub Release 说明为「Revise README for clarity and localization」)。
[2.3.5] — 2026-05-12
类型:稳定性 / 交互修复
所含文件:main.js、manifest.json
Bug 10:分栏内打字后字符消失或跑到分栏外
输入法、停顿或 Enter 后会触发防抖写回,Live Preview 会整段换掉分栏 DOM,原先加在 wrapper 上的「跳过重建」标记无法迁移到新节点,导致焦点落到编辑器、观感上像丢字或「跑到外面」。
处理:输入 / compositionend / Enter 期间只更新内存里的列数据,不写回源码;失焦时再统一防抖同步(并保留孤儿列不写回的守卫)。
[2.3.4] — 2026-05-12
类型:稳定性 / 排版修复
所含文件:main.js、manifest.json
Bug 9:视频 + 文字分栏下,底下仍露出单独一行闭合围栏(「三个点」)
原判断过严、扫描步数与邻接关系不够,且视频加载后 DOM 二次重拍发生在固定延时之后,清理逻辑碰不到。
处理:按「整行是否为纯围栏」放宽判断并跳过插件自身容器;扩大向上回溯与扫描步数;用 MutationObserver 补齐异步重排;延时档位加密并叠加 requestAnimationFrame。
[2.3.3] — 2026-05-12
类型:稳定性 / 拖放修复
所含文件:main.js、manifest.json
Bug 8:一侧有视频/文字时,拖图「没反应」;拖视频后另一侧文字闪烁
- blur 在列已从 DOM 移除后仍用旧 DOM 序列化,把刚写入的内容盖掉 → 增加
col.isConnected守卫。 - 多处
syncToSource与异步重建打架 → 统一走debouncedSync,与_dtSkipRebuild配合减少双次重建。 - 同笔记内从
<video>拖拽缺兜底 →dragstart对齐 VIDEO。 - 带
text/html的内部 wikilink 被误判为外链 →isInternalWikilinkRef强制走笔记内分支。
[2.3.2] — 2026-05-12
类型:稳定性修复
所含文件:main.js、styles.css、manifest.json
- Bug 6:Enter 用
execCommand在 CM6 嵌套contenteditable下不可靠 → 改为 Range 插<br>并拦事件冒泡;buildContainer增加force;聚焦期_dtSkipRebuild,debouncedSync编辑中不草率放开。 - Bug 7:首张图写入后第二张拖中间栏失败 → drop 入口重置跳过标记与定时器;异步回调从
wrapperEl._dtColumns取最新数组再写入。
[2.3.1] — 2026-05-12
类型:首批稳定性修复
所含文件:main.js、styles.css、manifest.json
- Bug 1:Obsidian 先处理 drop → 在 window 捕获阶段处理落在分栏上的拖放;
items→getAsFile()兜底。 - Bug 2:
<div><br></div>序列化多出空行 →serializeColumnContent区分空块与单媒体块。 - Bug 3:IME 期间防抖写回打断组字 → composition 门禁 + 失焦轮询等待。
- Bug 4:点分栏误入代码块视图 → z-index / isolation,收窄
.dt-inserter热区,事件stopPropagation。 - Bug 5:闭合围栏单独成行的「假三个点」→
cleanupStrayFenceNearWrapper(可能误伤分栏外故意写的单独围栏,属权衡)。
[2.3.0] 及更早
更早变更见仓库提交历史或 Release 说明。
关于开发与作者
Picote 是在 Obsidian / CodeMirror 6 环境下的工程取舍:在保证可维护的前提下,用拖拽优先与异步写回节拍换来的稳定体验。
Designed with ❤️ by Pipi_huang
For plugin developers
Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.