# 編輯器工具列

本頁說明 `editorTab` 建立的浮動工具列：顯示位置、按鈕清單，以及透過 `event.upload` 加入的圖片上傳按鈕。

## 顯示位置

工具列是編輯器容器內的 `<section class="input-button">`（`contentEditable=false`），圖示使用 Material Symbols。

| 狀態 | 行為 |
|---|---|
| 游標進入某一列 | 工具列移到該列正下方，`data-hide="0"` |
| 編輯器失焦 | 工具列移到容器末端，`data-hide="1"` |
| `tabPin` 為真或按下釘選 | 容器 `data-pin="1"`，由 CSS 固定顯示 |

按鈕綁定 `pointerup` 而非 `click`；按鈕的 `title` 提示文字固定為繁體中文。

## 按鈕

| 圖示 | 呼叫 | 出現條件 |
|---|---|---|
| `format_bold` | `bold()` | 一律 |
| `format_italic` | `italic()` | 一律 |
| `strikethrough_s` | `strikethrough()` | 一律 |
| `format_underlined` | `underline()` | 一律 |
| `ink_marker` | `marker()` | 一律 |
| `superscript` | `sup()` | 一律 |
| `subscript` | `sub()` | 一律 |
| `format_quote` | `blockquote()` | 一律 |
| `format_list_bulleted` | `ul()` | 一律 |
| `format_list_numbered` | `ol()` | 一律 |
| `code` | `code()` | 一律 |
| `link` | `link("連結文字", "連結")` | 一律；插入佔位文字供使用者改寫 |
| `landscape` | `image("圖片連結", "圖片名稱")` | 一律；插入 `![圖片名稱](圖片連結)` |
| `smb_share` | `event.upload()` 後 `image()` | 有設定 `event.upload` |
| `autorenew` | `save()` | `autosave` 為假 |
| `keep`／`keep_off` | 切換 `data-pin` | 一律 |
| `wrap_text` | 切換 `data-wrap` | 一律 |
| `cloud_upload` | 部署 | 只在網址含 `nanomd.pardn.io` 時出現 |

工具列按鈕觸發的事件沒有修飾鍵，因此插入的是 Markdown 記號。

## 圖片上傳

```javascript
const editor = new MDEditor({
    id: "editor",
    event: {
        upload: async () => {
            const file = await pickFile();
            const res = await fetch("/api/upload", { method: "POST", body: file });
            const { url } = await res.json();
            return { href: url, alt: file.name };
        }
    }
});
```

| 規則 | 說明 |
|---|---|
| 參數 | `upload()` 不會收到任何參數，選檔與上傳由你實作 |
| 回傳 | 物件 `{ href, alt }`；`href` 缺少時為空字串，`alt` 缺少時為 `"測試"` |
| `href` 為空 | `image()` 直接忽略，不插入任何內容 |
| 例外 | `upload()` reject 時沒有捕捉，錯誤會變成未處理的 Promise rejection |

## 部署按鈕

`cloud_upload` 只服務 nanomd.pardn.io 線上編輯器：把轉換後的 HTML POST 到 `nanomd-deploy.pardn.workers.dev`，成功後詢問是否開啟 `nanomd-cloud.pardn.workers.dev` 上的頁面。嵌入其他網站時不會出現。