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

package.json

@@ -10,12 +10,16 @@
         "production": "mix --production"
     },
     "devDependencies": {
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-java": "^6.0.1",
+        "@codemirror/lang-javascript": "^6.2.3",
+        "@codemirror/lang-php": "^6.0.1",
         "@eonasdan/tempus-dominus": "^6.10.2",
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@popperjs/core": "^2.11.8",
         "axios": "^1.6.1",
         "bootstrap": "^4.0.0",
-        "codemirror": "^5.65.19",
+        "codemirror": "^6.0.1",
         "jquery": "^3.7.0",
         "laravel-mix": "^6.0.49",
         "lodash": "^4.17.19",

public/css/connect.css

@@ -687,21 +687,3 @@ a.cc-cursor-text:hover {
     0% {opacity: 0;}
     100% {opacity: 1;}
 }
-
-/* CodeMirror 5
-------------------------------------- */
-.CodeMirror {
-    border: 1px solid #ced4da;
-    border-radius: 0.25rem;
-}
-.CodestudyLanguageVersionFrame {
-    border: 1px solid #ced4da;
-    border-radius: 0.25rem;
-}
-.CodestudyLanguageVersion {
-}
-
-/* プレースホルダー */
-.CodeMirror pre.CodeMirror-placeholder {
-    color: #999;
-}

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=9919b8127c05d0aa0f675063f336c00a",
-    "/css/app.css": "/css/app.css?id=a4ee9a32e4cb2efb9ec5e137e9c7feed"
+    "/js/app.js": "/js/app.js?id=241c9aed31c079b16abc7905dd6cd802",
+    "/css/app.css": "/css/app.css?id=94110667e125790f9646ca8f0c9d2382"
 }

resources/js/bootstrap.js

@@ -63,12 +63,19 @@ window.tempusDominus = require('@eonasdan/tempus-dominus');
 // Default SortableJS
 window.Sortable = require('sortablejs').default;
 
-// --- codemirror 5
-window.CodeMirror = require('codemirror');
+// --- codemirror 6
+import { EditorView, placeholder } from "@codemirror/view";
+window.EditorView = EditorView;
+window.placeholder = placeholder;   // プレースホルダー有効化
+import { basicSetup } from "codemirror"
+window.basicSetup = basicSetup;
 // 言語モード
-require('codemirror/mode/javascript/javascript');
-require('codemirror/mode/php/php');
-require('codemirror/mode/clike/clike'); // c, c++, java
-require('codemirror/mode/css/css');
-// プレースホルダー有効化
-require('codemirror/addon/display/placeholder.js');
+// ※ 対応言語はgithubのcodemirrorでlang-xxxを確認 https://github.com/codemirror?q=lang-&type=all&language=&sort=
+import {javascript} from "@codemirror/lang-javascript"
+window.javascript = javascript;
+import {css} from "@codemirror/lang-css"
+window.css = css;
+import {java} from "@codemirror/lang-java"
+window.java = java;
+import {php} from "@codemirror/lang-php"
+window.php = php;

resources/sass/app.scss

@@ -13,9 +13,6 @@
 // Tempus Dominus Date/Time Picker
 @import '~@eonasdan/tempus-dominus/src/scss/tempus-dominus';
 
-// codemirror 5
-@import '~codemirror/lib/codemirror';
-
 // --- Connect-CMS
 //mixin
 @import 'mixin/layout';

resources/views/plugins/common/codemirror.blade.php

@@ -8,18 +8,39 @@
 @php
     // CodeMirrorの設定
     $element_id = $element_id ?? null;
-    $mode = $mode ?? null;
-    $height = $height ?? 'null';
+    $mode = $mode ?? 'javascript()';
+    $height = $height ?? '300px';
 @endphp
 
+<style>
+    .cm-editor {
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        height: {{$height}};
+    }
+</style>
 <script type="text/javascript">
-    var editor_{{$element_id}} = CodeMirror.fromTextArea(document.getElementById("{{$element_id}}"),
-    {
-        mode:"{{$mode}}",    // 言語を設定する.（laravel mixを使って resources/js/bootstrap.js に対応言語を設定し、public/js/app.js 内にまとめている）
-        lineNumbers: true,   // 行番号を表示する
-        lineWrapping: true,  // 行を折り返す
-    });
+    let view_{{$element_id}} = editorFromTextArea(document.getElementById("{{$element_id}}"))
 
-    // 高さ設定
-    editor_{{$element_id}}.setSize(null, {{$height}});
+    /**
+     * codemirror 5 互換 function
+     * @see https://codemirror.net/docs/migration/#codemirror.fromtextarea よりコピー
+     */
+    function editorFromTextArea(textarea) {
+        let view = new EditorView({
+            doc: textarea.value,
+            extensions: [
+                basicSetup,
+                placeholder(textarea.placeholder),  // プレースホルダ
+                EditorView.lineWrapping,            // 行を折り返す
+                {{$mode}},                          // 言語モード
+            ],
+        })
+        textarea.parentNode.insertBefore(view.dom, textarea)
+        textarea.style.display = "none"
+        if (textarea.form) textarea.form.addEventListener("submit", () => {
+            textarea.value = view.state.doc.toString()
+        })
+        return view
+    }
 </script>

resources/views/plugins/manage/theme/theme_css_edit.blade.php

@@ -28,7 +28,7 @@
     color: #ffff00; # デフォルトのヘッダーバー文字色を黄色にします。
 }"
             >{{$css}}</textarea>
-            @include('plugins.common.codemirror', ['element_id' => 'css', 'mode' => 'css', 'height' => 500])
+            @include('plugins.common.codemirror', ['element_id' => 'css', 'mode' => 'css()', 'height' => '500px'])
             <small class="text-muted">
                 <div>※ CSSを保存しても変更が反映されない時はブラウザのスーパーリロードを試行してください。</div>
             </small>

resources/views/plugins/manage/theme/theme_js_edit.blade.php

@@ -23,7 +23,7 @@
             {{csrf_field()}}
             <input name="dir_name" type="hidden" value="{{$dir_name}}" />
             <textarea name="js" id="js" class="form-control" rows=20>{{$js}}</textarea>
-            @include('plugins.common.codemirror', ['element_id' => 'js', 'mode' => 'javascript', 'height' => 500])
+            @include('plugins.common.codemirror', ['element_id' => 'js', 'mode' => 'javascript()', 'height' => '500px'])
 
             <div class="form-group mt-3">
                 <button type="button" class="btn btn-secondary mr-2" onclick="location.href='{{url('/')}}/manage/theme/'"><i class="fas fa-times"></i> キャンセル</button>

resources/views/plugins/manage/theme/theme_template_edit.blade.php

@@ -39,7 +39,7 @@
 <p>３行</p>`&#13;
     }&#13;
 ],">{{$template}}</textarea>
-            @include('plugins.common.codemirror', ['element_id' => 'template', 'mode' => 'javascript', 'height' => 500])
+            @include('plugins.common.codemirror', ['element_id' => 'template', 'mode' => 'javascript()', 'height' => '500px'])
 
             <div class="form-group mt-3">
                 <button type="button" class="btn btn-secondary mr-2" onclick="location.href='{{url('/')}}/manage/theme/'"><i class="fas fa-times"></i> キャンセル</button>

resources/views/plugins/user/codestudies/default/codestudies.blade.php

@@ -73,13 +73,13 @@ function submit_codestudies_run() {
     </div>
 
 @php
-    $mode = 'javascript';
+    $mode = 'javascript()';
     if ($codestudy->study_lang == 'php') {
-        $mode = 'php';
+        $mode = 'php()';
     } elseif ($codestudy->study_lang == 'javascript') {
-        $mode = 'javascript';
+        $mode = 'javascript()';
     } elseif ($codestudy->study_lang == 'java') {
-        $mode = 'text/x-java';
+        $mode = 'java()';
     }
 @endphp
 @include('plugins.common.codemirror', ['element_id' => 'txt_editor', 'mode' => $mode])