# flex-html-render
`flex-html-render` 是一個將 HTML 字串轉換為 LINE Flex Message JSON 結構的工具，方便開發者以 HTML 標記語法設計 Flex Message，並自動轉換為 LINE Messaging API 所需的格式。
## Demo 頁面
- [Flex Message HTML Simulator](https://spa.maju-web.club/flex-message-html-simulator/)
## 特色
- 以 HTML 字串描述 Flex Message 結構
- 自動解析 HTML 並轉換為 Flex Message JSON
- 支援多種 Flex Message 元素
- 易於整合於 Node.js 或前端專案
## 安裝
```bash
npm install flex-html-render
```
## 使用方式
```js
import convertHtmlToFlexMessage from 'flex-html-render';
const htmlString = `
這是一個 Flex Message
`;
const flexMessage = convertHtmlToFlexMessage(htmlString);
console.log(JSON.stringify(flexMessage, null, 2));
// 將產生的 JSON 放入 LINE Messaging API 的訊息結構中
const message = {
type: 'flex',
altText: 'Flex Message',
contents: flexMessage[0] // 因為 convertHtmlToFlexMessage 回傳陣列，取第一個元素
};
```
**注意**：此套件產生的 JSON 物件應放置在 LINE Messaging API 中 `type` 為 `flex` 的訊息物件的 `contents` 區塊內。詳細請參考 [LINE Flex Message 官方文件](https://developers.line.biz/en/reference/messaging-api/#flex-message)。
## API
### `convertHtmlToFlexMessage(htmlString)`
- **參數**：`htmlString` (string) - Flex Message 對應的 HTML 字串
- **回傳**：Flex Message JSON 物件陣列
- **說明**：此函數將 Flex Message HTML 字串轉為 JSON 結構，可用於編輯或顯示目的
### `convertJsonToHtml(json)`
- **參數**：`json` (object) - Flex Message JSON 物件
- **回傳**：對應的格式化 HTML 字串
- **說明**：此函數將 Flex Message JSON 結構轉為 HTML 字串，可用於編輯或顯示目的
## 支援的 Flex Message 元素
本工具支援大部分 [LINE Flex Message](https://developers.line.biz/en/reference/messaging-api/#flex-message) 元素，包括：
- bubble
- carousel
- box
- text
- image
- video
- button
- icon
- separator
詳細 Flex Message 元素與屬性請參考 [LINE 官方文件](https://developers.line.biz/en/reference/messaging-api/#flex-message)。
## 標籤類型說明 (types.js)
### 容器標籤 (Container Tags)
- `` - Flex Message 的基本容器，只能包含 top-level 區塊標籤
- `` - 輪播容器，只能包含 `` 標籤，最多 12 個
### 頂層區塊標籤 (Top-level Section Tags)
這些標籤只能直接放在 `` 內，且每個只能有一個子元素：
- `` - 標題區塊
- `` - 英雄圖區塊
- `` - 主體內容區塊
- `