Pull to refresh
tech Public rails action-text lexxy lexical rich-text-editor trix

Rails ActionText 的新編輯器 Lexxy：基於 Meta Lexical 的 Trix 接班人

Lexxy 是 37signals 為 Rails Action Text 打造、建構在 Meta Lexical 之上的新一代富文字編輯器，要取代缺乏表格與 Markdown 的 Trix。本文介紹 Lexical 底層、Lexxy 特性、與 Action Text/Trix 的關係、安裝使用方式，並更正常見的「Lexi」名稱誤植。

| Ingested 2026-06-13 |

Rails ActionText 的新編輯器 Lexxy：基於 Meta Lexical 的 Trix 接班人

主題整理｜分類：tech｜日期：2026-06-13
緣起：DHH 在 On Rails podcast（2026-06-12）提到 ActionText 將換上基於 Meta Lexical 的新編輯器。詳見〈DHH 談 Basecamp 5、Vibe Coding 與 Rails 的未來〉。

重要更正：正確名稱是 Lexxy，不是「Lexi」

DHH 在影片中口述的編輯器名稱，被自動字幕（與本站稍早的整理）轉寫成「Lexi」。經查 37signals 官方來源，正確名稱是 Lexxy（GitHub：basecamp/lexxy，2025-09-04 公開）。本文一律以 Lexxy 為準。

摘要

Lexxy 是 37signals 為 Rails Action Text 打造的新一代富文字編輯器，建構在 Meta 的 Lexical 文字編輯框架之上（同一套底層驅動 Facebook、Messenger、WhatsApp、Instagram）。它要取代 Action Text 沿用多年的自家編輯器 Trix——因為 Trix 在表格、Markdown 等需求上長期受限，且社群幾乎無人協助維護。Lexxy 的設計目標是「Action Text 的 drop-in 替代品」：產生與 Action Text 相同的 canonical HTML 附件格式，沿用 has_rich_text 與 rich text area 表單輔助方法，可與 Trix 並存逐步遷移。目前為 early beta（gem ~> 0.1.4.beta），roadmap 包含表格、文字標示、設定 hook、獨立 JS 打包、圖片藝廊與自動安裝任務。

一、背景：Action Text 與 Trix 的限制

  • Action Text 是 Rails 內建的富文字方案（Rails 6 起），把富文字內容存進資料庫、整合 Active Storage 處理附件，前端預設搭配 Trix 編輯器。
  • Trix 是 37signals 早年自建、完全 in-house 的編輯器。DHH 的說法是：Trix 在「它能掌控的盒子大小內」是個很棒的編輯器，但有幾個長期硬傷：
    • 沒有表格（Basecamp 想要表格想了將近十年）
    • 沒有 Markdown 支援
    • 想擴充某些功能時遇到技術瓶頸
    • 37signals 以外幾乎沒人想幫忙維護 Trix，於是它停滯了
  • 對某些應用，「Trix 不支援我要的東西 → 只能自己 roll 一套」變成無謂的時間黑洞。

二、什麼是 Meta Lexical（底層框架）

Lexical 是 Meta 開源、可擴充的 JavaScript 文字編輯框架，主打可靠性、無障礙、效能：

  • 核心極小：core 套件僅約 22kb（min+gzip），「只為你用到的功能付出成本」。
  • 不可變的 EditorState：以 createEditor() 建立的編輯器實例為中樞，管理狀態、監聽器、命令與 transforms，並處理 DOM 對帳（reconciliation）；EditorState 是某時間點內容的不可變資料模型。
  • 外掛導向：plugin 系統讓開發者不必改動 core 就能加功能。
  • 框架無關：核心 framework-agnostic，另提供官方 React 綁定 @lexical/react。
  • 無障礙：遵循 WCAG，相容螢幕報讀器。
  • 大規模驗證：驅動 Facebook、Messenger、WhatsApp、Instagram 等數十億人在用的平台。

Lexxy 就是把這套「跑 Facebook/WhatsApp 的底層」帶進 Rails，讓 Action Text 直接受惠。

三、Lexxy 的主要特性

特性 說明
良好 HTML 語意 段落是真正的 <p> 標籤（Trix 用 <div>），輸出更乾淨
Markdown 支援 快捷鍵即時格式化、貼上時自動套用格式
即時程式碼語法高亮 編輯器內 real-time syntax highlighting
貼網址即建連結 選取文字後貼上 URL 直接變超連結
可設定的 prompts 支援 mentions（@提及）與其他互動式 prompt
附件預覽 在編輯器內預覽 PDF、影片等附件
Action Text／Active Storage 無縫整合 產生 Action Text 期望的 canonical HTML 附件格式

Roadmap（beta 階段持續開發中）：表格、文字標示（highlight）、設定 hooks、獨立 JS 打包、圖片藝廊、自動安裝 task。

四、與 Action Text／Trix 的關係

  • drop-in 替代：Lexxy「產生 Action Text 期望的同一種 canonical HTML 附件格式」，因此能直接取代預設的 Trix，沿用 rich_text_area、has_rich_text。
  • 可並存、漸進遷移：可關閉 Lexxy 對 Action Text 預設的覆寫，讓 Lexxy 與 Trix 同時存在——常見策略是先在後台/admin 區用 Lexxy，對外使用者內容仍留 Trix，逐步驗證後再全面切換。
  • 未來方向：Lexxy 會讓 Action Text 支援可設定的編輯器（configurable editors），等於替「未來在 Rails 整合更多編輯器」開了門。DHH 也預告，會在 Rails World（9 月） 把 Lexxy 整進 ActionText、與 Trix 相容並可遷移，作為 Action Text 的新預設。

五、安裝與使用（Rails）

以下為 beta 階段的設定方式（以 Sprockets + importmap 為例），版本/步驟可能隨 beta 演進調整，正式用法以 basecamp/lexxy README 為準。

1. Gemfile
ruby
gem "lexxy", "~> 0.1.4.beta"

bash
bundle install

2. 資產管線（importmap.rb）
ruby
pin "lexxy"
pin "@rails/activestorage", to: "activestorage.esm.js"

3. manifest.js
javascript
//= link lexxy.js
//= link lexxy.css

4. application.js
javascript
import "lexxy"

5. layout（application.html.erb）
erb
<%= stylesheet_link_tag "lexxy" %>

6. 與 Trix 並存時，先關掉預設覆寫（config/application.rb）
ruby
config.lexxy.override_action_text_defaults = false

7. 表單中改用 Lexxy 的 helper
erb
<%= form.lexxy_rich_text_area :body,
placeholder: "Placeholder text...",
required: true,
class: "lexxy-content form-input" %>

8. 顯示已渲染內容時，外層套上 lexxy-content
erb
<div class="lexxy-content">
<%= @example.body %>
</div>

注意：Lexxy 仍是 early beta；建議先在 admin 區試用、對外內容暫留 Trix。若 Lexxy 接管 Action Text 預設（override_action_text_defaults 為 true），一般就用標準的 has_rich_text 與 rich_text_area 即可。

六、為什麼這件事重要

  • 富文字輸入是現代 web app 的 table stakes：幾乎每個應用都要解這個問題。如果 Rails 用 Lexxy（背靠 Lexical）內建解到位，等於幫所有人省下「自己 roll 編輯器」的時間。
  • 站在巨人肩上：Trix 是 in-house、維護乏力；Lexxy 改站在驅動 Facebook/WhatsApp 的 Lexical 之上，擴充性與長期維護前景都更好。
  • 體現 DHH 的取捨哲學：把對人最透明、語意最乾淨的東西內建進框架（真正的 <p>、Markdown、表格），符合他在同場 podcast 強調的「後端穩定、前端持續革新」路線。

關係圖

flowchart TD
    LEX["Meta Lexical\n（開源 JS 編輯框架, ~22kb core\n驅動 FB/Messenger/WhatsApp/IG）"] --> LEXXY["Lexxy\n（basecamp/lexxy, beta）"]
    TRIX["Trix（舊 in-house 編輯器）\n無表格 / 無 Markdown / 維護停滯"] -.被取代.-> LEXXY
    LEXXY --> AT["Action Text\n（Rails 內建富文字）"]
    AT --> AS["Active Storage（附件）"]
    AT --> DB["資料庫（rich_text 內容）"]
    LEXXY -. 可並存漸進遷移 .- TRIX
    AT --> FUTURE["未來：configurable editors\nRails World 9 月整進 ActionText"]

延伸閱讀（站內）

來源連結

分類：tech｜標籤：rails, action-text, lexxy, lexical, rich-text-editor, trix

Back to Wiki

© 2025-2026 Nickle Cheng Built with Ruby Ruby on Rails