Base64 Image Hider for Obsidian

中文说明见下方

When you use plugins like Image Inline to embed images as data:image/png;base64,... data URIs, each image injects a massive block of text into your Markdown file:

![photo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...5000+ characters...)

Problem: These multi-kilobyte data URIs cause the CodeMirror editor to lag during scrolling, typing, and file switching. Clicking on them expands the cursor into the base64 blob, making editing painful. The horizontal scrollbar stretches to accommodate the single long line.

Solution: This plugin uses a CodeMirror 6 ViewPlugin with Decoration.replace to permanently fold every base64 data URI into a compact … widget. The widget is deliberately locked — it consumes all mouse and keyboard events, so you can never accidentally expand into the base64 content.

How It Works

Before:  ![photo](data:image/png;base64,iVBORw0KGgoAA...5000 chars...)
After:   …

• Matches ![alt](data:image/*;base64,...) from Image Inline and any bare data:...;base64,... URIs
• Replaces the entire match with a WidgetType that renders …
• Blocks all events on the widget (ignoreEvent returns true), making expansion impossible
• Scroll-safe: CSS constraints prevent the hidden text from stretching the editor horizontally
• Keyboard navigable: arrow keys still pass through normally; you can select and delete around the widget
• Settings panel: toggle the plugin on/off (requires restart)
• Startup-friendly: CM6 extension registered after onLayoutReady, avoiding contribution to Obsidian's startup timer

Installation

From Obsidian Community Plugins (pending review)

Not yet listed. Use manual installation below.

Manual Installation

cd /path/to/your/vault/.obsidian/plugins
git clone https://github.com/Air-0000/obsidian-base64-hider.git

Then enable "Base64 Image Hider" in Settings → Community Plugins.

BRAT (Beta Reviewers Auto-update Tester)

Add Air-0000/obsidian-base64-hider as a beta plugin in BRAT.

Compatibility

Plugin	Status
Image Inline	Fully compatible
Excalidraw	Does not interfere with .excalidraw.md files
Any plugin inserting data:...;base64,...	Covered by bare-URI regex

Requires Obsidian >= 1.4.0 (CodeMirror 6 editor).

Why Not Use Obsidian's Built-in Folding?

Obsidian's native fold API (applyFoldInfo) requires heading-based fold ranges (# Section → content). Inline base64 data URIs have no heading wrapper, so the fold API cannot hide them.

Technical Details

The plugin uses three CodeMirror 6 primitives:

1. Decoration.replace — substitutes the base64 range with a compact widget, removing the text from layout calculations
2. WidgetType subclass — implements toDOM, eq, compare, destroy, updateDOM, coordsAt, estimatedHeight, and critically ignoreEvent (returns true)
3. ViewPlugin.fromClass — re-scans the document on every change or viewport shift to keep all base64 ranges folded

Two regex patterns are applied in descending-from order (to prevent position drift):

Pattern	Matches
!\[(.*?)\]\((data:image\/[^;]+;base64,[A-Za-z0-9+/=]+)\)	Image Inline syntax
data:[^;]+;base64,[A-Za-z0-9+/=]{40,}	Any bare data URI (≥40 chars)

How to Temporarily View the Base64

If you need to edit the base64 content (e.g., to change the image source), disable the plugin in Settings → Community Plugins, edit the file, then re-enable.

License

MIT

---

中文说明 {#chinese}

问题

当你使用 Image Inline 等插件将图片以 base64 形式嵌入 Markdown 时，每张图片会插入巨量的 data:image/png;base64,... 文本：

![photo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...5000+ 字符...)

这会导致编辑器滚动卡顿、输入延迟、文件切换变慢。点击展开后的水平滚动条会拉得很远，编辑体验极差。

解决方案

这个插件通过 CodeMirror 6 的 Decoration.replace 机制，将所有 base64 数据 URI 永久替换为 … 小组件。该组件拦截所有点击和键盘事件，无论如何操作都不会展开 base64 内容。

效果

替换前:  ![photo](data:image/png;base64,iVBORw0KGgoAA...5000 字符...)
替换后:  …

• 自动匹配 ![alt](data:image/*;base64,...) 和裸 data:...;base64,... 两种格式
• 完整的 WidgetType 实现，含 eq、compare、destroy、updateDOM、coordsAt、estimatedHeight
• ignoreEvent 返回 true，彻底阻止展开
• CSS 兜底防止水平滚动条被撑开
• 与 Excalidraw 插件互不干扰

安装

cd /你的仓库/.obsidian/plugins
git clone https://github.com/Air-0000/obsidian-base64-hider.git

然后在设置 → 第三方插件中启用即可。

原理

Obsidian 内置的折叠 API（applyFoldInfo）依赖标题层级（# Section → content），无法处理行内的 base64。本插件直接使用 CodeMirror 6 的 ViewPlugin + Decoration.replace，在编辑器渲染层做替换，不修改原文内容。

如何临时查看原文

禁用此插件 → 编辑文件 → 重新启用。

许可证

MIT