[テーマ管理][コードスタディ] テーマ管理＞編集画面にCodeMirror適用, コードスタディ＞javaのコード色適用に対応

[akagane99]

概要

• テーマ管理
  • CSS編集, JS編集, テンプレート編集画面に、入力したコード色を付けてわかりやすく表示する CodeMirror を適用しました。
    行数なども表示します。
• コードスタディ
  • javaのコード色適用に対応しました。
• CodeMirror を適用するscriptタグを共通bladeにまとめました。

修正後画面

テーマ管理＞CSS編集

テーマ管理＞JS編集

テーマ管理＞テンプレート編集

コードスタディ(java)

github actionsで簡易テスト

• 回帰テストとして実行しました。
• https://github.com/opensource-workshop/connect-cms/actions/runs/14262817334
  • エラーなしを確認しました。

レビュー完了希望日

なし

関連Pull requests/Issues

• [コードスタディ][JSライブラリ] CodeMirrorを直置きからnpmでインストールする形式に切替 OW-2552 #2161

参考

• codemirror
  • setSize()
    • https://codemirror.net/5/doc/manual.html#api_sizing
  • C-like mode(Java example)
    • https://codemirror.net/5/mode/clike/index.html
• tinymce＞テンプレートサンプル
  • https://www.tiny.cloud/docs/tinymce/5/template/

DB変更の有無

無し

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule