diff --git a/code-input.css b/code-input.css index ffddc48..03ffe70 100644 --- a/code-input.css +++ b/code-input.css @@ -30,10 +30,7 @@ code-input { code-input:not(.code-input_loaded) { - margin: 0px!important; - margin-bottom: calc(-1 * var(--padding, 16px))!important; padding: var(--padding, 16px)!important; - border: 0; } code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre { @@ -41,9 +38,8 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co margin: 0px!important; padding: var(--padding, 16px)!important; border: 0; - min-width: 100%; - min-height: 100%; - box-sizing: border-box; /* Don't need to worry about padding to calculate width! */ + min-width: calc(100% - var(--padding) * 2); + min-height: calc(100% - var(--padding) * 2); overflow: hidden; resize: none; grid-row: 1; @@ -87,13 +83,6 @@ code-input pre { z-index: 0; } -code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea { - opacity: 0; -} -code-input:not(.code-input_loaded)::before { - color: #ccc; -} - /* Make textarea almost completely transparent, except for caret and placeholder */ code-input textarea { @@ -119,11 +108,29 @@ code-input textarea { outline: none!important; } -code-input:not(.code-input_registered)::before { +/* Before registering give a hint about how to register. */ +code-input:not(.code-input_registered) { + overflow: hidden; + display: block; + box-sizing: border-box; /* Include padding in width/height */ +} + +code-input:not(.code-input_registered)::after { /* Display message to register */ content: "Use codeInput.registerTemplate to set up."; display: block; - color: grey; + position: absolute; + bottom: var(--padding); + left: var(--padding); + width: calc(100% - 2 * var(--padding)); + + border-top: 1px solid grey; + outline: var(--padding) solid white; + background-color: white; +} + +code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea { + opacity: 0; } /* Contains dialog boxes that might appear as the result of a plugin. diff --git a/code-input.js b/code-input.js index 230903c..3ec50e4 100644 --- a/code-input.js +++ b/code-input.js @@ -521,11 +521,13 @@ var codeInput = { this.syncSize(); - // Scroll to the caret by focusing, though this shouldn't count as a focus event - this.passEventsToTextarea = false; - this.textareaElement.blur(); - this.textareaElement.focus(); - this.passEventsToTextarea = true; + // If editing here, scroll to the caret by focusing, though this shouldn't count as a focus event + if(this.textareaElement === document.activeElement) { + this.passEventsToTextarea = false; + this.textareaElement.blur(); + this.textareaElement.focus(); + this.passEventsToTextarea = true; + } this.pluginEvt("afterHighlight"); } @@ -990,16 +992,12 @@ var codeInput = { * has loaded (or now if it has already loaded) */ runOnceWindowLoaded(callback, codeInputElem) { - if(codeInput.windowLoaded) { + if(document.readyState == "complete") { callback(); // Fully loaded } else { window.addEventListener("load", callback); } - }, - windowLoaded: false + } } -window.addEventListener("load", function() { - codeInput.windowLoaded = true; -}); customElements.define("code-input", codeInput.CodeInput); \ No newline at end of file diff --git a/tests/prism.html b/tests/prism.html index 1ddc06d..9b35832 100644 --- a/tests/prism.html +++ b/tests/prism.html @@ -48,6 +48,7 @@

Test for highlight.js

// A third line with <html> tags +