diff --git a/plugins/prism-line-numbers.css b/plugins/prism-line-numbers.css index 036d373..3542034 100644 --- a/plugins/prism-line-numbers.css +++ b/plugins/prism-line-numbers.css @@ -16,6 +16,20 @@ code-input.line-numbers, .line-numbers code-input { } /* Make keyboard navigation still fill width */ -code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions { +code-input.line-numbers .code-input_dialog-container .code-input_keyboard-navigation-instructions, .line-numbers code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions { width: calc(100% + max(3.8em, var(--padding, 16px)))!important; } + +/* Override Prism styles so there's no display:inline, relatively-positioned code element which breaks offsetTop, used in FindAndReplace, in Firefox. */ +code-input pre[class*=language-].line-numbers>code { + position: static; +} +/* Line numbers now positioned relative to the pre element not the code element. */ +code-input .line-numbers .line-numbers-rows { + left: 0; + top: var(--padding); +} +/* Things with padding when instructions are present */ +code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) .line-numbers .line-numbers-rows { + top: calc(var(--padding) + 3em); +} diff --git a/tests/tester.js b/tests/tester.js index 2e1b7d8..80b54b3 100644 --- a/tests/tester.js +++ b/tests/tester.js @@ -398,7 +398,7 @@ console.log("I've got another line!", 2 < 3, "should be true."); textarea.selectionStart = 0; textarea.selectionEnd = textarea.value.length; backspace(textarea); - addText(textarea, "// hello /\\S/g\nhe('llo', /\\s/g);\nhello"); + addText(textarea, "// hello /\\S/g\nhe('llo', /\\s/g);\nhello\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline"); textarea.selectionStart = textarea.selectionEnd = 0; // So focuses on first match await waitAsync(50); // Wait for highlighting so text updates @@ -437,7 +437,7 @@ console.log("I've got another line!", 2 < 3, "should be true."); replaceInput.value = "do('hello"; replaceButton.click(); await waitAsync(50); // Wait for buttons to work - assertEqual("FindAndReplace", "Replaces Once Correctly", textarea.value, "// hello /\\S/g\ndo('hello', /\\s/g);\nhello"); + assertEqual("FindAndReplace", "Replaces Once Correctly", textarea.value, "// hello /\\S/g\ndo('hello', /\\s/g);\nhello\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline"); nextMatchButton.click(); // Back to first match // Exit find input box @@ -458,7 +458,26 @@ console.log("I've got another line!", 2 < 3, "should be true."); replaceInput.value = "hi"; replaceAllButton.click(); - assertEqual("FindAndReplace", "Replaces All Correctly", textarea.value, "// hi /\\S/g\ndo('hi', /\\s/g);\nhi"); + assertEqual("FindAndReplace", "Replaces All Correctly", textarea.value, "// hi /\\S/g\ndo('hi', /\\s/g);\nhi\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\na very very very very very very very very very very very very long line with many many many many many many many many many many many words\nline\nline\nline\nline\nline\nline\nline"); + + findInput.value = "line"; + regExpCheckbox.click(); // Now no regex + await waitAsync(200); // Wait for value to update + + // Go to "line" on very long line + codeInputElement.style = "height: 100px; width: 1000px;"; + previousMatchButton.click(); + previousMatchButton.click(); + previousMatchButton.click(); + previousMatchButton.click(); + previousMatchButton.click(); + previousMatchButton.click(); + previousMatchButton.click(); + previousMatchButton.click(); + + await waitAsync(200); // Wait for highlighting so matches update + testAssertion("FindAndReplace", "Scrolls to Match Correctly", confirm("Is the match on the very long line highlighted orange and near the centre of the element?"), "user-judged"); + codeInputElement.style = ""; // Exit find input box codeInputElement.querySelector(".code-input_find-and-replace_dialog").dispatchEvent(new KeyboardEvent("keydown", { "key": "Escape" }));