Fixed with incorrect value cm toggle on refresh (#1689)

* added a checkbox to switch between codeMirror and plain text editor * fix incorrect value of CM checkbox on refresh --------- Co-authored-by: Ashish Jhanwar <[email protected]>
botlabs-gg · Jun 27, 2024 · 6bca996 · 6bca996
1 parent 771246d
commit 6bca996
Showing 1 changed file with 35 additions and 1 deletion.
diff --git a/customcommands/assets/customcommands-editcmd.html b/customcommands/assets/customcommands-editcmd.html
@@ -284,8 +284,13 @@ <h2 class="card-title">
                         <div class="row mb-2">
                             <div class="col-lg-12">
                                 <div class="form-group">
+
                                     <label for="responses">Response (<span
                                             class="cc-length-counter">x</span>/{{.MaxCCLength}})</label>
+                                    <span style="float: right">
+                                      <input type="checkbox" class="toggle-code-mirror" checked="true" id="toggle-code-mirror">
+                                      <label for="toggle-code-mirror">Show CodeMirror Editor</label>
+                                    </span>
                                     <!-- Use .btn-add for simplicity and let the page loader adjust. -->
                                     {{range .CC.Responses}}
                                     <div id="cc-responses" class="entry input-group  input-group-sm">
@@ -309,6 +314,7 @@ <h2 class="card-title">
                                             </button>
                                         </span>
                                     </div>
+
                                     {{end}}
                                     <a class="mb-1 mt-1 mr-1 modal-basic btn btn-info btn-sm"
                                         href="#cc-help-modal">Info</a>
@@ -547,10 +553,10 @@ <h2 class="card-title">Custom Command Information</h2>
 
     $(function () {
         triggerTypeChanged();
-
         updateCCLength();
         updateTriggerLength();
         updateNameLength();
+        setCMCheckbox();
     });
 
     var intervalTriggerEls = ['#interval-cc-run-now', '#cc-time-trigger-details'];
@@ -573,6 +579,14 @@ <h2 class="card-title">Custom Command Information</h2>
         none: ['#trigger-desc-none'],
     };
 
+    function setCMCheckbox() {
+      if(localStorage.getItem('cm-editor') === 'false'){
+        $("#toggle-code-mirror").prop( "checked", false );
+      } else {
+        $("#toggle-code-mirror").prop( "checked", true );
+      }
+    }
+
     function triggerTypeChanged() {
         const curTriggerType = $('#trigger-type-dropdown').val();
 
@@ -681,6 +695,7 @@ <h2 class="card-title">Custom Command Information</h2>
             $(`#${this.warningId}`).remove();
         },
     };
+
     $('#time-trigger-channel').change(() => checkMissingIntervalTriggerChannel.run());
 
     function updateTriggerLength() {
@@ -737,7 +752,10 @@ <h2 class="card-title">Custom Command Information</h2>
     }
 </style>
 <script type="text/javascript">
+
     function setupCodeMirrorEditor(textArea) {
+        var isCMEditor = localStorage.getItem('cm-editor')
+        if(isCMEditor === 'false') return
         const codeMirror = CodeMirror.fromTextArea(textArea, {
             lineNumbers: true,
             mode: 'text/x-go',
@@ -758,9 +776,25 @@ <h2 class="card-title">Custom Command Information</h2>
         });
     }
 
+    function removeCodeMirrorEditor(editor){
+        editor.CodeMirror.toTextArea();
+    }
+
     var initialTextAreas = document.querySelectorAll('.cc-editor');
     initialTextAreas.forEach((textArea) => setupCodeMirrorEditor(textArea));
 
+    $("#toggle-code-mirror").change( value => {
+        if(value.target.checked){
+            localStorage.setItem('cm-editor', 'true')
+            var textAreas = document.querySelectorAll('.cc-editor');
+            textAreas.forEach((textArea) => setupCodeMirrorEditor(textArea));
+        } else {
+            localStorage.setItem('cm-editor', 'false')
+            document.querySelectorAll('.CodeMirror').forEach((editor) => {
+                removeCodeMirrorEditor(editor)
+            });
+        }
+    })
     // we need to reinitialize the codemirror instance for each new textarea, the script below is the old implementation coming from the spongebob.js file
     $(document).on('click', '.btn-add', function (e) {
 		e.preventDefault();