Merge pull request #84 from WebCoder49/several-bug-fixes

Several bug fixes - Fixes #80, #81, #82, #83

Author: WebCoder49

README.md

@@ -118,13 +118,13 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
 
 ### 4. Using the component
-Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `lang` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events to make your element as simple or interactive as you like! 
+Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events to make your element as simple or interactive as you like! 
   ```HTML
-  <code-input lang="HTML"></code-input>
+  <code-input language="HTML"></code-input>
   ```
   *or*
   ```HTML
-  <code-input lang="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>
+  <code-input language="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>
   ```
 
 ## Contributing

code-input.css

@@ -137,4 +137,7 @@ code-input .code-input_dialog-container {
   left: 0;
   width: 100%;
   height: 0;
+
+  /* Dialog boxes' text is left-aligned */
+  text-align: left;
 }

code-input.js

@@ -427,7 +427,7 @@ var codeInput = {
         * Exposed child pre element where syntax-highlighted code is outputted.
         * Contains this.codeElement as its only child.
         */
-        preElement = null;
+        preElement = null
         /**
         * Exposed child pre element's child code element where syntax-highlighted code is outputted.
         * Has this.preElement as its parent.

plugins/find-and-replace.js

@@ -34,6 +34,7 @@ codeInput.plugins.FindAndReplace = class extends codeInput.Plugin {
             if(!codeInput.pluginData.findAndReplace.dialog.classList.contains("code-input_find-and-replace_hidden-dialog")) {
                 // Code updated and dialog open - re-highlight find matches
                 codeInput.pluginData.findAndReplace.dialog.findMatchState.rehighlightMatches();
+                this.updateMatchDescription(codeInput.pluginData.findAndReplace.dialog);
 
                 if(codeInput.pluginData.findAndReplace.dialog.findMatchState.numMatches == 0) {
                     // No more matches after editing
@@ -429,15 +430,7 @@ codeInput.plugins.FindAndReplace.FindMatchState = class {
 
     /* Highlight all currently found matches again if there are any matches */
     rehighlightMatches() {
-        if(this.codeInput.value != this.lastValue) {
-            this.updateMatches(this.lastSearchRegexp);
-        } else {
-            if(this.matchStartIndexes.length > 0) {
-                for(let i = 0; i < this.matchStartIndexes.length; i++) {
-                    this.highlightMatch(i, this.codeInput.codeElement, this.matchStartIndexes[i], this.matchEndIndexes[i]);
-                }
-            }
-        }
+        this.updateMatches(this.lastSearchRegexp);
         this.focusMatch();
     }
 

tests/prism.html

@@ -7,7 +7,7 @@
 
     <!--Import Prism-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">