Skip to content

Return scrolling to the textarea and pre code element, not the code-input #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jul 18, 2025
Merged

Return scrolling to the textarea and pre code element, not the code-input #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2c6f354
Remove janky blur/focus
WebCoder49 Jun 20, 2025
9eeca46
Merge pull request #137 from WebCoder49/classes-for-templates
WebCoder49 Jul 14, 2025
926fb75
Merge pull request #144 from WebCoder49/main
WebCoder49 Jul 16, 2025
457b0a9
Make textarea rather than code-input element scroll
WebCoder49 Jul 16, 2025
2fd5d48
Return textarea's scroll attributes and methods from code-input element
WebCoder49 Jul 17, 2025
bea73fa
Add placeholder to last empty line (to ensure alignment) if template …
WebCoder49 Jul 17, 2025
9659416
Make keyboard navigation instructions correct size with new scrolling
WebCoder49 Jul 17, 2025
a142a7b
Enable wrapping to be enabled/disabled by CSS properties of code-input
WebCoder49 Jul 17, 2025
2e5cf0a
Add some tests for CSS and scrolling; fix scroll handling so errors c…
WebCoder49 Jul 18, 2025
2eca69e
Merge branch 'main' into let-textareas-do-their-job
WebCoder49 Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 27 additions & 26 deletions code-input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
code-input {
/* Allow other elements to be inside */
display: block;
overflow-y: auto;
overflow-x: auto;
overflow: hidden;
position: relative;
top: 0;
left: 0;
Expand All @@ -22,6 +21,10 @@ code-input {
tab-size: 2;
caret-color: darkgrey;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;

padding: 0!important; /* Use --padding to set the code-input element's padding */
display: grid;
grid-template-columns: 100%;
Expand All @@ -38,21 +41,16 @@ 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: calc(100% - var(--padding) * 2);
min-height: calc(100% - var(--padding) * 2);
width: calc(100% - var(--padding) * 2);
height: calc(100% - var(--padding) * 2);
box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
overflow: hidden;
overflow: auto;
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;
width: max-content;
}

code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
/* Remove all margin and padding from others */
margin: 0px!important;
Expand All @@ -68,6 +66,11 @@ code-input textarea, code-input pre, code-input pre * {
line-height: inherit!important;
tab-size: inherit!important;
text-align: inherit!important;

white-space: inherit!important;
word-spacing: inherit!important;
word-break: inherit!important;
word-wrap: inherit!important;
}

/* Make changing the text direction propogate */
Expand All @@ -84,7 +87,7 @@ code-input textarea[dir=rtl] + pre {
}


code-input textarea, code-input pre {
code-input textarea, code-input pre, code-input pre code {
/* In the same place */
grid-column: 1;
grid-row: 1;
Expand All @@ -104,20 +107,12 @@ code-input pre {
code-input textarea {
color: transparent;
background: transparent;
caret-color: inherit!important; /* Or choose your favourite color */
caret-color: inherit!important;
}
code-input textarea::placeholder {
color: lightgrey;
}

/* Can be scrolled */
code-input textarea, code-input pre {
white-space: inherit;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
}

/* No resize on textarea; transfer outline on focus to code-input element */
code-input textarea {
resize: none;
Expand Down Expand Up @@ -158,12 +153,8 @@ Sticks to the top of the code-input element */
code-input .code-input_dialog-container {
z-index: 2;

position: sticky;
grid-row: 1;
grid-column: 1;

top: 0;
left: 0;

margin: 0;
padding: 0;
Expand All @@ -173,6 +164,10 @@ code-input .code-input_dialog-container {
/* Dialog boxes' text is based on text-direction */
text-align: inherit;
}
code-input.code-input_pre-element-styled .code-input_dialog-container {
width: calc(100% + 2 * var(--padding));
}

[dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
left: unset;
right: 0;
Expand All @@ -187,13 +182,18 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
position: absolute;
background-color: black;
color: white;

padding: 2px;
line-height: 2em;
box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */

padding-left: 10px;
margin: 0;
text-wrap: balance;
overflow: hidden;
overflow: auto;
text-overflow: ellipsis;
width: calc(100% - 12px);
box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors. */
max-height: 3em;
}
code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {
Expand All @@ -212,5 +212,6 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
padding-top: calc(var(--padding) + 3em)!important;
padding-top: calc(var(--padding) + 2em + 4px)!important;
height: calc(100% - var(--padding) * 2 - 2em - 4px)!important;
}
18 changes: 5 additions & 13 deletions code-input.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,11 +295,11 @@ export class Template {
* @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
* @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
* @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
* @param {boolean} autoDisableDuplicateSearching - Leaving this as true uses code-input's default fix for preventing duplicate results in Ctrl+F searching from the input and result elements, and setting this to false indicates your highlighting function implements its own fix. The default fix works by moving text content from elements to CSS `::before` pseudo-elements after highlighting.
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
* @param {boolean} addPlaceholderToLastEmptyLine - Setting this to true adds a space character to the end of the `<code>` element before highlighting when its last line is empty, ensuring that last line is displayed and aligns with the editing.
* @returns template object
*/
constructor(highlight?: (codeElement: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
constructor(highlight?: (codeElement: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, plugins?: Plugin[], addPlaceholderToLastEmptyLine?: boolean)
/**
* **When `includeCodeInputInHighlightFunc` is `true`, `highlight` takes two parameters: the `<pre><code>` element, and the `<code-input>` element.**
*
Expand All @@ -309,25 +309,17 @@ export class Template {
* @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
* @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
* @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
* @param {boolean} autoDisableDuplicateSearching - Leaving this as true uses code-input's default fix for preventing duplicate results in Ctrl+F searching from the input and result elements, and setting this to false indicates your highlighting function implements its own fix. The default fix works by moving text content from elements to CSS `::before` pseudo-elements after highlighting.
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
* @param {boolean} addPlaceholderToLastEmptyLine - Setting this to true adds a space character to the end of the `<code>` element before highlighting when its last line is empty, ensuring that last line is displayed and aligns with the editing.
* @returns template object
*/
constructor(highlight?: (codeElement: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, autoDisableDuplicateSearching?: boolean, plugins?: Plugin[])
constructor(highlight?: (codeElement: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, plugins?: Plugin[], addPlaceholderToLastEmptyLine?: boolean)
highlight: Function
preElementStyled: boolean
isCode: boolean
includeCodeInputInHighlightFunc: boolean
autoDisableDuplicateSearching: boolean
plugins: Plugin[]
/**
* @deprecated Please give a value for the `autoDisableDuplicateSearching` parameter.
*/
constructor(highlight?: (code: HTMLElement) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: false, plugins?: Plugin[])
/**
* @deprecated Please give a value for the `autoDisableDuplicateSearching` parameter.
*/
constructor(highlight?: (code: HTMLElement, codeInput: CodeInput) => void, preElementStyled?: boolean, isCode?: boolean, includeCodeInputInHighlightFunc?: true, plugins?: Plugin[])
addPlaceholderToLastEmptyLine: boolean
}

/**
Expand Down
Loading