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

[akagane99]

概要

コードスタディプラグインで使われている JSライブラリのCodeMirror(v5.58.1) は直置きして使われていました。
バージョン管理やセキュリティ管理、他でも使えるようにする観点から、npmでインストールする形式(v5.65.19)に見直しました。
これにより、CodeMirror は (v5.58.1 → v5.65.19) にアップデートしました。

詳細

• public/codemirror/lib/codemirror_cc.css の内容は、public/css/connect.css にまとめて、codemirror_cc.cssを削除しました。
• public/codemirror/mode/php/php.js は指定しても、JSエラー(※)でテキストエリアが非表示になり、使えなくなっていましたが、npmでインストールしたものは、mode:"php"指定で使えました。
• コードスタディでは javascript, php, javaの3種類が選べます。
  • mode 指定でコードの色を変更しますが、今までは無指定でどの言語も javascript の色が表示されていました。
  • これからは php の場合、自動でphpのコード色で表示するように対応しました。

【※ public/codemirror/mode/php/php.js のJSエラー】

Uncaught TypeError: htmlMode.indent is not a function
    at Object.dispatch [as token] (php.js:163:79)
    at Ee (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:19600)
    at Le (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:21405)
    at xe (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:17920)
    at Se (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:18612)
    at wn (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:28773)
    at $n (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:34926)
    at Un (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:36936)
    at Xi (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:72779)
    at qi (app.js?id=5ed9fd670c558fe7a612a825dbe65fba:2:71149)

修正後画面

コードスタディ（JS）

javascriptのコード色

コードスタディ（php）

phpのコード色

コードスタディ（java）

javascriptのコード色 （codemirrorの公式にjavaのコード色なしのため）

• → 後日 [テーマ管理][コードスタディ] テーマ管理＞編集画面にCodeMirror適用, コードスタディ＞javaのコード色適用に対応 #2163 でjava色対応しました。

npmライブラリ コマンド

npm i --save-dev codemirror@5

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

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

コマンド実行結果

root@580f4f913c01:/var/www/html/connect-cms# npm i --save-dev codemirror@5

added 1 package, and audited 792 packages in 2s

116 packages are looking for funding
  run `npm fund` for details

3 vulnerabilities (1 low, 2 moderate)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


root@580f4f913c01:/var/www/html/connect-cms# npm run prod

> prod
> npm run production


> production
> mix --production


● Mix █████████████████████████ done (99%) plugins 
 BuildCallbackPlugin




● Mix █████████████████████████ done (99%) plugins 
 WebpackBar:done


✔ Mix
  Compiled successfully in 14.18s


                         
   Laravel Mix v6.0.49   
                         

✔ Compiled Successfully in 13899ms
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                                                                                                      File │ Size     │
├───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                                                                                                /js/app.js │ 768 KiB  │
│                                                                                                                                                                                    /js/app.js.LICENSE.txt │ 2.7 KiB  │
│                                                                                                                                                                                               css/app.css │ 291 KiB  │
│                                                                                                          fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?1815e00441357e01619e5793e1caa78a │ 206 KiB  │
│                                                                                                        fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?c210719e60948b211a1260f79812efe5 │ 116 KiB  │
│                                                                                                         fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?914997e1bdfc990d0897cdaba877a0b3 │ 66.5 KiB │
│                                                                                                       fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?89999bdf5d835c0120257222e5568fec │ 24.9 KiB │
│                                                                                                           fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?2582b0e4bcf85eceead0de3fd9035c90 │ 416 KiB  │
│                                                                                                         fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?2463b90d9a316e4e5294e6706b6a7a72 │ 155 KiB  │
│                                                                                                                                                                                                 js/707.js │ 19.1 KiB │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

github actionsで簡易テスト

• 回帰テスト（他機能に悪影響出てないか）として実行しました。
• Laravel Dusk Connect-cms-test matrix · 893991c
  https://github.com/opensource-workshop/connect-cms/actions/runs/14240865160
  • エラーなしを確認しました。

レビュー完了希望日

なし

関連Pull requests/Issues

なし

参考

影響範囲

https://github.com/search?q=org%3Aopensource-workshop%20codemirror&type=code

codemirror 5

• https://github.com/codemirror/codemirror5
• https://codemirror.net/5/
• CodeMirrorでオリジナルのエディタを作る #JavaScript - Qiita
  https://qiita.com/nhiroyasu/items/a767ff0a82f006060454

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