Format Bubble

A Google Docs–style selection toolbar for Obsidian. Obsidian 的 Google 文件式選字工具列。

Select text, get a floating toolbar. No more typing ** by hand. 反白文字，工具列就浮出來。不用再手打 **。

English · 繁體中文

English

What it does

Highlight any text in the editor and a small toolbar appears above the cursor:

Pressing Bold on text that is already bold removes the markers. The link and clear-formatting buttons are one-directional — pressing them again does not undo them.

Heading is the only block-level button. It applies ## to every line the selection touches, not just the selected words. Select across two lines and both become headings.

Design principles

• Native Markdown only. Never writes HTML. Your notes stay portable and render correctly in any other Markdown editor.
• Never steals your shortcuts. Cmd/Ctrl+B and Cmd/Ctrl+I behave exactly as they do in stock Obsidian. The bubble is an additional entry point, not a replacement.
• Works beyond the main editor. Implemented as a CodeMirror 6 editor extension rather than through Obsidian's Editor API, so it attaches to Canvas cards, sidebar embeds, and pop-out windows — places where workspace.activeEditor is null and simpler implementations do nothing.

Requirements

Obsidian 1.4.0 or later.

Installation

Not yet in the community plugin store. Two options:

Manual

1. Download main.js, manifest.json and styles.css from the latest release
2. Create a folder <your vault>/.obsidian/plugins/format-bubble/
3. Put the three files in it
4. Restart Obsidian, then enable Format Bubble under Settings → Community plugins

BRAT (for automatic updates)

Install BRAT, then add <your-username>/obsidian-format-bubble as a beta plugin.

Settings

Settings → Format Bubble lets you hide any of the eight buttons individually. Changes apply immediately to open editors — no restart needed.

Notes and limitations

• Canvas cards must be double-clicked into edit mode before text can be selected. That is Obsidian's own behaviour, not something this plugin changes.
• Heading level is fixed at H2 in this version.
• With a multi-cursor selection active the bubble deliberately stays hidden, rather than formatting one range and silently discarding the others.
• Mobile is not specifically handled. The plugin runs there, but the bubble may overlap the OS text-selection menu.

Development

npm install
npm test        # unit tests
npm run dev     # watch build
npm run build   # type-check + production build

formatting.ts (Markdown transforms) and positioning.ts (placement maths) are pure functions — no DOM, no Obsidian imports — so the test suite runs in plain Node in milliseconds.

To develop against a vault, symlink the repo into its plugins folder:

ln -s "$(pwd)" "/path/to/vault/.obsidian/plugins/format-bubble"

Note that iCloud does not sync symlinks reliably. For an iCloud-backed vault, copy the built files instead.

License

MIT © 朱劭恩

繁體中文

這是什麼

在編輯器裡反白任何文字，游標上方就會浮出一條小工具列：

對已經是粗體的文字再按一次粗體，標記會被移除。連結與清除格式不是切換式——再按 一次不會還原。

標題是唯一的區塊級按鈕。 它作用於選取範圍碰到的每一整行，而不只是選到的 那幾個字。選取跨越兩行，兩行都會變成標題。

設計原則

• 只產生原生 Markdown。 絕不寫入 HTML。筆記保持可攜，在任何其他 Markdown 編輯器裡都能正確顯示。
• 不搶你的快捷鍵。 Cmd/Ctrl+B、Cmd/Ctrl+I 與原生 Obsidian 行為完全相同。 氣泡是多一個入口，不是取代。
• 不只在主編輯器能用。 以 CodeMirror 6 editor extension 實作，而非透過 Obsidian 的 Editor API，因此能掛上 Canvas 卡片、側欄嵌入編輯器與彈出視窗—— 這些地方 workspace.activeEditor 是 null，用比較簡單的做法會完全沒有反應。

需求

Obsidian 1.4.0 以上。

安裝

尚未上架社群外掛，兩種方式：

手動安裝

1. 從 最新 release 下載 main.js、manifest.json、styles.css
2. 建立資料夾 <你的 vault>/.obsidian/plugins/format-bubble/
3. 把三個檔案放進去
4. 重啟 Obsidian，在「設定 → 第三方外掛」啟用 Format Bubble

BRAT（可自動更新）

安裝 BRAT 之後，把 <your-username>/obsidian-format-bubble 加為 beta 外掛。

設定

「設定 → Format Bubble」可以個別隱藏八顆按鈕。修改後立即套用到已開啟的編輯器， 不需重啟。

已知行為與限制

• Canvas 卡片必須先雙擊進入編輯狀態才能選字。這是 Obsidian 本身的行為，不是這個 外掛造成的。
• 本版標題層級固定為 H2。
• 多重選取（按住 Cmd 點選多處）時氣泡會刻意不出現，以免只格式化其中一段、又把其他 選取無聲清掉。
• 未針對行動端特別處理。外掛在手機上能運作，但氣泡可能與系統的選字選單重疊。

開發

npm install
npm test        # 單元測試
npm run dev     # 監看重建
npm run build   # 型別檢查 + production build

formatting.ts（Markdown 轉換）與 positioning.ts（定位計算）都是純函式——不碰 DOM、不引用 Obsidian——所以測試在純 Node 環境下毫秒級跑完。

要在 vault 裡開發，把 repo symlink 進外掛資料夾：

ln -s "$(pwd)" "/path/to/vault/.obsidian/plugins/format-bubble"

注意 iCloud 無法可靠同步 symlink。iCloud 上的 vault 請改用複製檔案的方式。

授權

MIT © 朱劭恩