Merge pull request #146 from WebCoder49/let-textareas-do-their-job

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

Author: WebCoder49

code-input.css

@@ -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;
@@ -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%;
@@ -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;
@@ -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 */
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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 {
@@ -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;
 }

code-input.d.ts

@@ -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.**
    * 
@@ -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
 }
 
 /**