Rails7+Tailwind css+esbuildでAction Textを使用する方法

# Action TextとTailwind cssを組み合わせるとcss効かなくなった😇

・Action Textでリッチテキストを実装したい人
・Tailwind cssと一緒に使ってcssが効かない問題が起こっている人
・Action Textのcssをカスタマイズしたい人

の参考になれば幸いです。

## Railsは公式のリッチテキスト実装Gem：Action Textがある
https://railsguides.jp/action_text_overview.html

公式にリッチテキスト用意されてるのすごいよね。
基本的に書いてあるままですぐ実装できます。
Railsガイドの手順に沿って記載していきます。

#### インストール
```ターミナル.
$ rails action_text:install
```
コマンドを打つと下記ファイルが作成されます
```
[Action_Text d65a95a] ⌨️ rails action_text:install
 11 files changed, 166 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/actiontext.css
 create mode 100644 app/views/active_storage/blobs/_blob.html.erb
 create mode 100644 app/views/layouts/action_text/contents/_content.html.erb
 create mode 100644 db/migrate/20230628051607_create_active_storage_tables.active_storage.rb
 create mode 100644 db/migrate/20230628051608_create_action_text_tables.action_text.rb
 create mode 100644 test/fixtures/action_text/rich_texts.yml
```
migrationファイルも追加されたので
```$ rails db:migrate```


#### application.jsにimport （esbuildを使用しています。）
コマンドを打ったら自動で追加されますが、私の場合、他のimportの後に改行されずに追加されていて適用されていなかったので、入っているか確認してください。

```application.js
import "trix"
import "@rails/actiontext"
```
#### application.tailwind.cssにimport
##### ⚠️この部分、Tailwindのスタイルが適用されない問題が起こりました。
が、まずはAction Textの導入について全て書いた後説明します。

actiontext.cssも、コマンドを打つと最下部に自動で追加されますが、Tailwind cssを使用している場合@import文は@tailwindよりも上に置かないと読み込まれません。

https://qiita.com/MIDO-ruby7/items/7e7608d03061ae5047c2

```application.tailwind.css
@import './top.css';
@import 'actiontext.css'; /*@tailwindよりも上に追加*/

@tailwind base;
@tailwind components;
@tailwind utilities;
```

#### リッチテキストを導入したいモデルにコードを追加する
postでもboardでも使いたいモデルに追記。ここではRailsガイド通りmessageモデルで。
```message.rb
class Message < ApplicationRecord
  has_rich_text :content
end
```
新しいモデルを作成するときは
```bin/rails generate model Message content:rich_text```
コマンドで作れるそうです

#### リッチテキストにしたいformをrich_text_areaにする

```app/views/messages/_form.html.erb
<%= form_with model: message do |form| %>
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>　　#ここがリッチテキストになる
  </div>
<% end %>
```
~~カラム名はcontentじゃなくてもbodyとかnoteとかなんでも大丈夫です。~~

申し訳ありません、contentじゃないとダメだった😇bodyとかnoteとかでもcontent。カラムを追加する必要はありません。

ちなみに、contentじゃないbodyとかnoteのカラムを指定するとhtml形式で表示されました。
![スクリーンショット 2023-06-29 10.52.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/156cf97d-83f3-94fa-5d3d-c188921c464a.png)

contentにするとこうなる
![スクリーンショット 2023-06-29 10.52.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/2e4679ca-07c9-2953-568b-8232903b16b4.png)


#### controllerで受け取る
paramsに:contentを追加
```
class MessagesController < ApplicationController
  def create
    message = Message.create!　params.require(:message).permit(:title, :content)　#:contentを追加
    redirect_to message
  end
end
```
#### viewで表示するには
```
<%= @message.content %>
```

これだけ。簡単です。すごい。
自動で作成された_content.html.erbが<%= yield %>に読み込まれ、リッチテキストフォームが表示されているはずです。
![スクリーンショット 2023-06-28 14.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/a09469cc-99c8-5f6f-2736-d689ad0b6f62.png)

### ん？🥹

![スクリーンショット 2023-06-28 14.47.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/a8eec9f1-8f4a-682b-e05b-25715897ddd5.png)

### んん？？😇

![スクリーンショット 2023-06-28 14.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/28138f18-35dd-35f8-fdc6-c3494c33bd32.png)

### 思ってたんと違う🙃

どうやら、cssが効いてないらしい。加えて、Tailwind cssのスタイルも効かなくなりました🫰


## Tailwind css使用時にAction Textを読み込む方法
調べていると、こちらのissueを発見。

https://github.com/rails/rails/issues/43441

日本語訳しながら見ていくと、みんなお困りの様子。強うそうな人たちが困ってる。わかる。適用されないよね？
え、 Bootstrapも適用されない？無理系？

と思ったら、救世主。

https://github.com/rails/rails/issues/43441#issuecomment-1019426236

> app/views/layouts/application.html.erbに次の行を追加する：
```<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>```。
app/assets/config/manifest.jsにこの行を追加する：
```//= link actiontext.css```
そして、application.tailwind.cssからimport "actiontext.css "を削除した。

issue内、大絶賛の嵐。importmapやBootstrapでもこの方法が有効なようです。
Thank you　zahidalikさん！

ということで直してみると適用されました。

![スクリーンショット 2023-06-28 18.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/64ebc43a-7cef-b01e-d69d-ac1f9ef8c7b1.png)

## フォームのボタンやデザインを編集する

### フォームの高さや色の変更

actiontext.cssでスタイルを当てていきます。

```app/assets/stylesheets/actiontext.css
trix-editor {
  border: 2px outset #bbf7d0;
  height: 200px;
  rows: 10;
}
```

### ボタンの削除
Action Textの画像のアップロード機能はActive Recordを使用しています。ファイルからドロップダウンで画像を挿入できたりしてめっちゃ便利みたいです。

https://techblog.gmo-ap.jp/2018/12/22/rails6%E3%81%AEaction-text%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/

ただ今回は既にcarrierwaveを用いた画像アップロード機能や加工機能を作成してしまっていたので、クリップのボタンを消したいと思います。
![スクリーンショット 2023-06-28 18.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/b17ed78b-6a72-82a9-236a-bc60eb0ef317.png)

検証ツールで該当部分のclass名を確認します

![スクリーンショット 2023-06-29 6.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/aada9f69-5f6d-934a-694b-ad58dd0b72b8.png)

該当のクラスに対して下記のように書きます。

```app/assets/stylesheets/actiontext.css
.trix-button--icon-attach {
  display: none !important;
}
```
![スクリーンショット 2023-06-29 7.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/63af0396-e148-a5d6-02f7-c2d5657ae60b.png)

できました。他にもボタンのアイコンを変更したりできるようです。

https://www.techscore.com/blog/2019/12/19/ruby-on-rails-6-action-text/


### スクロールできるようにする

行数が増えてくると文字がフォームをはみ出してしまいますが、それをスクロールにしたいと思います。

Tailwind cssは便利なクラスがあるので紹介しておきます。

https://tailwindcss.com/docs/overflow#scrolling-if-needed

```
 <%= f.rich_text_area :content, class: "overflow-auto" %>
```

### 余談：
Railsガイドで
> デフォルトでは、Action Textは.trix-content CSSクラスを宣言した要素内でリッチテキストコンテンツをレンダリングします。

って書いてあったのでapp/views/layouts/application.html.erbの<%= yield %>を囲むdivタグにclass="trix-content"つけたら、Tailwind書いてもうんともすんとも反応しなくなりました。

最初のコマンド打った時に、自動でapp/views/layouts/action_text/contents/_content.html.erbというファイルができており、ここに既に定義されてました。

Tailwindの一部は反映されてたのでなかなか気付けずちょっと時間使ったので忘備録に。

https://railsguides.jp/action_text_overview.html#%E3%83%AA%E3%83%83%E3%83%81%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B