Rails + Trix + Stimulusで作るドキュメント管理ツール — Trix導入編

Photo by rawpixel on Unsplash

前回まで以下の2つの記事を書いてきました。

• Rails + Trix + Stimulusで作るドキュメント管理ツール — 導入編 — Ruffnote — Medium
• Rails + Trix + Stimulusで作るドキュメント管理ツール — 編集履歴編 — Ruffnote — Medium

今回はタイトルにも書かれているTrixを使ってwysiwygエディターを実装していきたいと思います。

• Trix: A rich text editor for everyday writing

この連載？記事を書いている間にAction TextなるRailsの新しい機能が紹介されましたが、この記事では自前で実装していきたいと思います。

• Introducing Action Text for Rails 6 | Riding Rails
• rails/actiontext: Edit and display rich text in Rails applications

まずはTrixを導入します。

Rails 6からはwebpackerがデフォルトのJavaScriptコンパイラになるということで、今回はwebpackerも合わせて導入したいと思います。

• Make Webpacker the default JavaScript compiler for Rails 6 by dhh · Pull Request #33079 · rails/rails

Installationを参考にして導入していきます。

webpackerをインストールすると以下のようなメッセージが表示されます。

You need to allow webpack-dev-server host as allowed origin for connect-src.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

超訳すると「Rails 5.2以上では開発環境用にCSPの設定ができるので対応してね。」ということのようです。

コードのライブリロード機能を使いたい場合や、JavaScriptの量が多すぎてオンデマンドコンパイルが遅い場合にwebpack-dev-serverを使うことになるのですが、今のところは必要なさそうです。

• Rails 5: Webpacker公式README — Webpack v4対応版（翻訳）

とは言え、後々利用する時に設定を忘れていてハマるのも嫌なので、該当のファイルに設定を追加しておきます。

以下のように「Hello World from Webpacker」という文字がコンソールに表示されれば導入完了です。

それではいよいよTrixを導入していきたいと思います。

webpackerを導入したのでJavaScriptのライブラリはyarnに任せたいと思います。

$ yarn add trix

インストールが完了したらフォームに専用のフィールドを用意してあげます。

--- a/app/views/documents/_form.html.erb
+++ b/app/views/documents/_form.html.erb
@@ -18,7 +18,8 @@
<div class="field">
     <%= form.label :content %>
-    <%= form.text_area :content %>
+    <%= form.hidden_field :content %>
+    <trix-editor input="document_content" class="trix-content"></trix-editor>
   </div>
<div class="actions">

trix-editorというCustom Elementsを用意して、実際のコンテンツはhidden_fieldに挿入されるという仕組みになっています。

次にapp/javascript/packs/application.jsでTrixをインポートしてあげます。

import * as Trix from "trix";

これだけだと以下のようにスタイルが設定されていない状態なのでcssを読み込むようにします。

同じくapplication.jsにインポート文を追加します。

import '../src/application.css';

そしてapp/javascript/src/application.cssを用意してTrixのcssをインポートするようにします。

@import 'trix/dist/trix';

すると以下のようにスッキリとしたwysiwygエディターが表示されます。

最後に、簡単にスタイルを整えてあげるとあら不思議、自分専用のテキストエディターが出来上がりました。（bootstrap感半端ないですが 😜

これでスタイル付きの文章が書けるようになりました。

技術者はやはりMarkdownで書きたいなどの欲求があるとは思いますが、やはりシンプルな文章を書くだけであればwysiwygエディターもとても便利だと思います。（ハマりどころは満載だと思いますが…

次回は初めに設定したゴールの最終段階「編集前後で差分を表示できる」という機能を追加したいと思います！