Slate JSON

Slate.js 的標準規範中，最頂層「一定」是由陣列（Array）包起來的。

---

這個名字其實很有意思，它結合了工具名稱與它的設計哲學。

簡單來說，「Slate JSON」指的是 Slate.js 這一款富文本編輯器框架所規定、使用的特定 JSON 資料結構。

拆開來看，之所以這樣命名，背後有以下三個核心原因：

• 1. 編輯器框架的名字就叫 "Slate"

Slate 這個英文單字的本意是「石板」或「板岩」。

在西方文化中，有一個常用的成語叫 "Clean slate"（字面意思是乾淨的石板），引申為「洗心革面、從頭開始、一張白紙」的意思。

這非常符合 Slate.js 的定位：它不像早期的 CKEditor 或 TinyMCE 那樣直接塞給你一套現成的 UI 和固定的 HTML 標籤。Slate 刻意維持「一張白紙（Clean slate）」的狀態。

它不幫你做任何 UI 決定，只提供最底層的「資料結構」與「操作邏輯」，讓開發者完全自由地去定義自己的編輯器。

• 2. 它與傳統的 HTML 字串做區隔

在 Slate 出現之前，多數網頁編輯器存檔時，都是直接存一整串 HTML 字串：

<!-- 傳統做法：直接存 HTML 字串 -->
<p>這是一段<strong>粗體</strong>文字</p>

但這種做法在現代前端框架（如 Vue、React）中非常痛苦，因為 HTML 字串很難進行結構化解析、組件化渲染（Component Rendering），也很難做協同寫作（OT/CRDT 演算法）。

Slate 徹底拋棄了 HTML 字串，改用物件樹（Object Tree）來代表文件。為了跟過去的 HTML 做法做出明確區隔，大家就會把這種特定的樹狀結構稱為 Slate JSON 或 Slate Document。

• 3. "JSON" 代表它只是「純資料」

Slate 官方有一個非常重要的設計哲學：「編輯器的狀態就只是一個純粹的 JSON 檔案（The editor's state is just a JSON file）。」

它沒有任何隱藏的複雜類別（Class）執行個體或無法序列化的 DOM 節點。這意味著：

• 只要你的資料符合上述的 Element 和 Text 規則，它就是合法的 Slate JSON。

• 你可以隨時用 JSON.stringify() 把它變成字串丟進資料庫、傳給後端、或是透過 WebSockets 傳給其他協同線上使用者。

💡 一句話總結：

叫 Slate JSON，就是指「符合 Slate 編輯器規範、像一張白紙般完全由你自定義、純粹由 JSON 陣列與物件構成的文件結構」。

• ex1:

[
  {
    "type": "paragraph",
    "children": [
      { "text": "" }
    ]
  }
]

• ex2:

[
  {
    "type": "paragraph",
    "children": [
      { "text": "這是一段 " },
      { "text": "粗體文字", "bold": true },
      { "text": "，以及一個 " },
      { "text": "code 標籤", "code": true },
      { "text": "。" }
    ]
  }
]

• ex3:

[
  {
    "type": "bulleted-list",
    "children": [
      {
        "type": "list-item",
        "children": [{ "text": "第一項產品功能" }]
      },
      {
        "type": "list-item",
        "children": [{ "text": "第二項產品功能" }]
      }
    ]
  }
]