[コードスタディ][テーマ管理] codemirror5→6にアップデート OW-2552

[akagane99]

概要

• コード入力のシンタックスハイライト(コードの単語の色変え)等を行うライブラリ codemirror5→6にアップデートしました。
  • codemirror6になった事で resources/sass/app.scss の追記は不要になりました。
  • codemirror6ではtextareaに適用できなくなった(codemirror6はdiv適用)ため、codemirror5互換function editorFromTextArea() を追加して対応しました。

修正後画面

コードスタディ（javascript）

コードスタディ（php）

コードスタディ（java）

テーマ管理＞CSS編集

テーマ管理＞JS編集

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

※ javascript表示

npmライブラリ コマンド

npm uninstall codemirror
npm i --save-dev codemirror @codemirror/lang-javascript @codemirror/lang-php @codemirror/lang-css @codemirror/lang-java

# ライブラリの最新化
npm update

# app.js, app.cssの最新化
npm run prod

github actionsで簡易テスト

• https://github.com/opensource-workshop/connect-cms/actions/runs/14400299940
  • エラーなしを確認しました。

レビュー完了希望日

なし

関連Pull requests/Issues

• [コードスタディ][JSライブラリ] CodeMirrorを直置きからnpmでインストールする形式に切替 OW-2552 #2161
• [テーマ管理][コードスタディ] テーマ管理＞編集画面にCodeMirror適用, コードスタディ＞javaのコード色適用に対応 #2163

参考

• CodeMirror 5 to 6 Migration Guide
  https://codemirror.net/docs/migration/
• codemirror5互換function editorFromTextArea()
  • https://codemirror.net/docs/migration/#codemirror.fromtextarea
• CodeMirror 6 Demo
  • https://codemirror.net/try/
• 行を折り返すオプション。EditorView.lineWrapping
  • How to use line wrapping in CodeMirror 6 - v6 - discuss.CodeMirror
    https://discuss.codemirror.net/t/how-to-use-line-wrapping-in-codemirror-6/4924

    • Your style is probably being overridden by the built-in styles. Try including in your set of extensions.EditorView.lineWrapping

• codemirror - javascript [ともやん・どっと・ねっと]
  https://www.tomoyan.net/javascript/codemirror

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