Finish tests; make code work with all tests

WebCoder49 · WebCoder49 · Feb 12, 2024 · Dec 15, 2023 · Dec 15, 2023 · Dec 15, 2023
commit fd08758433c1ea53dff87e0b0b9e2b5299b9cee3
diff --git a/code-input.css b/code-input.css
@@ -8,7 +8,6 @@ code-input {
   display: block;
   overflow-y: auto;
   overflow-x: auto;
-
   position: relative;
   top: 0;
   left: 0;
@@ -17,13 +16,13 @@ code-input {
   margin: 8px;
   --padding: 16px;
   height: 250px;
-  font-size: normal;
+  font-size: inherit;
   font-family: monospace;
   line-height: 1.5; /* Inherited to child elements */
   tab-size: 2;
   caret-color: darkgrey;
   white-space: pre;
-  padding: 0!important; /* Use --padding */
+  padding: 0!important; /* Use --padding to set the code-input element's padding */
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 100%;
@@ -48,6 +47,7 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   resize: none;
   grid-row: 1;
   grid-column: 1;
+  display: block;
 }
 code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
   height: max-content;

diff --git a/plugins/autocomplete.js b/plugins/autocomplete.js
@@ -42,9 +42,8 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
         }
 
         let textarea = codeInput.textareaElement;
-        textarea.addEventListener("input", this.updatePopup.bind(this, codeInput, false)); // Override this+args in bind - not just scrolling
-        textarea.addEventListener("click", this.updatePopup.bind(this, codeInput, false)); // Override this+args in bind - not just scrolling
-        textarea.addEventListener("scroll", this.updatePopup.bind(this, codeInput, true)); // Override this+args in bind - just scrolling
+        textarea.addEventListener("input", () => { this.updatePopup(codeInput, false)});
+        textarea.addEventListener("click", () => { this.updatePopup(codeInput, false)});
     }
     /**
      * Return the coordinates of the caret in a code-input

diff --git a/plugins/go-to-line.js b/plugins/go-to-line.js
@@ -33,7 +33,6 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
         const querySplitByColons = dialog.input.value.split(':');
         if(querySplitByColons.length > 2) return dialog.input.classList.add('code-input_go-to_error');
 
-
         if (event.key == 'Escape') return this.cancelPrompt(dialog, event);
 
         if (dialog.input.value) {
@@ -62,6 +61,7 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
     /* Called with a dialog box keyup event to close and clear the dialog box */    
     cancelPrompt(dialog, event) {
         let delay;
+        console.log("Cancel", event);
         event.preventDefault();
         dialog.textarea.focus();
 
@@ -98,7 +98,12 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
             dialog.textarea = textarea;
             dialog.input = input;
 
-            input.addEventListener('keyup', (event) => { this.checkPrompt(dialog, event); });
+            input.addEventListener('keypress', (event) => {
+                /* Stop enter from submitting form */
+                if (event.key == 'Enter') event.preventDefault();
+            });
+
+            input.addEventListener('keyup', (event) => { return this.checkPrompt(dialog, event); });
             cancel.addEventListener('click', (event) => { this.cancelPrompt(dialog, event); });
 
             codeInput.appendChild(dialog);

diff --git a/tests/hljs.html b/tests/hljs.html
@@ -32,13 +32,6 @@
     <script src=/proxy/https/github.com/WebCoder49/code-input/pull/76/commits/&quot;tester.js&quot;&gt;&lt;/script&gt;%3C/span>
 </head>
 <body>
-    <!--TODO: 
-        Test with real Prism &
-        Fix for hljs popup &
-        (optional) In new branch, make Ctrl+F/H functionality like gotoline (finds in value, "string combinatorics" in pre code, Regex/case-insensitive accepted); Add tests for Ctrl+F/H
-        (optional) In new branch, add one-line (input) option
-        Make tester async function using await?
-        Stop enter in go-to dialog from submitting form-->
     <h1>code-input Tester (highlight.js)</h1>
     <h4><a href=/proxy/https/github.com/WebCoder49/code-input/pull/76/commits/&quot;prism.html&quot;&gt;Test for Prism.js</a></h4>
     <p>This page carries out automated tests for the code-input library to check that both the core components and the plugins work in some ways. It doesn't fully cover every scenario so you should test any code you change by hand, but it's good for quickly checking a wide range of functionality works.</p>

diff --git a/tests/prism.html b/tests/prism.html
@@ -39,21 +39,6 @@ <h4><a href=/proxy/https/github.com/WebCoder49/code-input/pull/76/commits/&quot;hljs.html&quot;&gt;Test for highlight.js</a></h4>
         <input type="submit" value="Search Google For Code"/>
     </form>
     <script>
-        // codeInput.registerTemplate("code-editor", codeInput.templates.prism(Prism, [
-        //     new codeInput.plugins.AutoCloseBrackets(), 
-        //     new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
-        //         if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
-        //             // Show popup
-        //             popupElem.style.display = "block";
-        //             popupElem.innerHTML = "Here's your popup!";
-        //         } else {
-        //             popupElem.style.display = "none";
-        //         }
-        //     }),
-        //     new codeInput.plugins.GoToLine(),
-        //     new codeInput.plugins.Indent(true, 2),
-        //     new codeInput.plugins.SpecialChars(true),
-        // ]));
         beginTest(false);
     </script>
 </body>