diff --git a/README.md b/README.md index 2804e43..db337ba 100644 --- a/README.md +++ b/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 `` 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 `` 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 - + ``` *or* ```HTML - < href='https://github.com/WebCoder49/code-input'>code-input</a> + < href='https://github.com/WebCoder49/code-input'>code-input</a> ``` ## Contributing diff --git a/code-input.css b/code-input.css index 461f85c..8fd5eb5 100644 --- a/code-input.css +++ b/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; } \ No newline at end of file diff --git a/code-input.js b/code-input.js index fec9cce..844c541 100644 --- a/code-input.js +++ b/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. diff --git a/plugins/find-and-replace.js b/plugins/find-and-replace.js index 26919e3..4a022df 100644 --- a/plugins/find-and-replace.js +++ b/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(); } diff --git a/tests/prism.html b/tests/prism.html index 38abdfb..fc72c0b 100644 --- a/tests/prism.html +++ b/tests/prism.html @@ -7,7 +7,7 @@ - +