# Visual Editor Spec

## 目標

提供行銷可直接操作的同頁編輯體驗，對齊 Google Optimize / Optimize99 的使用感。

## 核心互動規則

### 1. 選取回饋

- hover 顯示藍色虛線框
- selected 顯示藍色實線框
- 滑鼠移動時可快速預覽可選區域

### 2. 直接編輯

- 點選元素後可直接開啟編輯泡泡
- 支援文字、按鈕文字、按鈕連結、圖片來源、樣式
- 編輯為即時同步（不用再按套用）

### 3. 結構操作

- 上移 / 下移 / 拖移
- 隱藏 / 顯示
- 複製 / 刪除
- 前插 / 後插

### 4. 歷史機制

- 內容編輯與結構操作都必須可 undo/redo
- restore 後畫布狀態、選取狀態、泡泡狀態要一致

## 編輯泡泡規格

- 可拖拉、可關閉、固定於視窗可用位置
- Header 保持簡潔：拖拉點 + 關閉
- 內容區為可捲動區塊
- icon hover 要有 tooltip（清楚告知作用）

## Bridge Protocol（頁面與 editor）

### page -> editor

- ready
- hover/selection 變更
- structure change 結果
- history 狀態更新

### editor -> page

- focus selector
- start inline edit
- set text / attr / style
- structure actions
- restore state

## Selector 與定位策略

- 頁面載入時補唯一 `data-mkt-selector`
- 插入與複製後重建 selector，避免衝突
- 相似兄弟節點必須可各自選取

## 不做事項（此階段）

- 不走 Chrome Extension 路線
- 不增加大型資訊面板干擾畫面
- 不先做自由版面拖拉排版（以區塊重排為主）