Styling

Author: kishikawakatsumi

Public/index.html

@@ -229,7 +229,9 @@ <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
                 </p>
 
                 <div class="my-1" style="font-weight: 600;">Match Step <span id="debugger-match-step"></span></div>
-                <div id="debugger-regex" class="border mb-3">
+                <div class="mb-3">
+                  <input id="debugger-regex" type="text" class="form-control form-control-sm border shadow-none"
+                    style="border-radius: 0;" readonly>
                 </div>
 
                 <div class="border my-3">

Public/js/app.js

@@ -207,7 +207,7 @@ export class App {
     matchStep.textContent = "1";
 
     const debuggerPattern = document.getElementById("debugger-regex");
-    debuggerPattern.textContent = expression;
+    debuggerPattern.value = expression;
 
     this.debuggerText.value = text;
 
@@ -302,7 +302,7 @@ export class App {
     const method = "debug";
     const params = {
       method,
-      pattern: document.getElementById("debugger-regex").textContent,
+      pattern: document.getElementById("debugger-regex").value,
       text: this.debuggerText.value,
       matchOptions: this.matchOptions.value,
       step: document.getElementById("debugger-step-range").value,