Add placeholder to last empty line (to ensure alignment) if template specifies it

Author: WebCoder49

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

code-input.js

@@ -163,14 +163,17 @@ var codeInput = {
          * @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 {boolean} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
          * @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 {codeInput.Template} template object
          */
-        constructor(highlight = function (codeElement) { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
+        constructor(highlight = function (codeElement) { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = [], addPlaceholderToLastEmptyLine = false) {
+
             this.highlight = highlight;
             this.preElementStyled = preElementStyled;
             this.isCode = isCode;
             this.includeCodeInputInHighlightFunc = includeCodeInputInHighlightFunc;
             this.plugins = plugins;
+            this.addPlaceholderToLastEmptyLine = addPlaceholderToLastEmptyLine;
         }
 
         /**
@@ -207,6 +210,13 @@ var codeInput = {
          * see `codeInput.Plugin`.
          */
         plugins = [];
+
+        /**
+         * 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.
+         */
+        addPlaceholderToLastEmptyLine = false;
     },
 
     /**
@@ -258,6 +268,7 @@ var codeInput = {
                 preElementStyled: true,
                 isCode: false,
                 plugins: plugins,
+                addPlaceholderToLastEmptyLine: false,
             }
         },
 
@@ -282,6 +293,7 @@ var codeInput = {
                 delimiter: delimiter,
 
                 plugins: plugins,
+                addPlaceholderToLastEmptyLine: false,
             }
         },
 
@@ -502,7 +514,9 @@ var codeInput = {
         update() {
             let resultElement = this.codeElement;
             let value = this.value;
-            value += "\n"; // Placeholder for next line
+            if(this.template.addPlaceholderToLastEmptyLine && (value[value.length-1] == "\n" || value.length == 0)) { // If last line empty
+                value += " "; // Add a placeholder space character to the final line
+            }
 
             // Update code
             resultElement.innerHTML = this.escapeHtml(value);
@@ -614,11 +628,6 @@ var codeInput = {
                 this.classList.remove("code-input_mouse-focused");
             });
 
-            // @deprecated Right now it's better to use the textarea element directly once it's loaded.
-            textarea.addEventListener("scroll", (evt) => {
-                this.dispatchEvent("scroll", evt);
-            });
-
             this.innerHTML = ""; // Clear Content
 
             // Synchronise attributes to textarea
@@ -1104,7 +1113,8 @@ var codeInput = {
                 true, // preElementStyled
                 true, // isCode
                 false, // includeCodeInputInHighlightFunc
-                plugins
+                plugins,
+                true // addPlaceholderToLastEmptyLine
             );
         }
     };
@@ -1131,7 +1141,8 @@ var codeInput = {
                 false, // preElementStyled
                 true, // isCode
                 false, // includeCodeInputInHighlightFunc
-                plugins
+                plugins,
+                true // addPlaceholderToLastEmptyLine
             );
         }
     };

tests/tester.js

@@ -194,8 +194,7 @@ async function startTests(textarea, isHLJS) {
     let renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
     assertEqual("Core", "Initial Rendered Value", renderedValue, `console.log("Hello, World!");
 // A second line
-// A third line with &lt;html&gt; tags
-`); // Extra newline so line numbers visible if enabled
+// A third line with &lt;html&gt; tags`);
 
 
     // Update code-input value with JavaScript, new value and num events should be correct.
@@ -214,8 +213,7 @@ console.log("I've got another line!", 2 < 3, "should be true.");`);
     assertEqual("Core", "JS-updated Rendered Value", renderedValue, `console.log("Hello, World!");
 // A second line
 // A third line with &lt;html&gt; tags
-console.log("I've got another line!", 2 &lt; 3, "should be true.");
-`); // Extra newline so line numbers visible if enabled
+console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
 
     // Event Listener Tests
     // Function type listeners
@@ -323,8 +321,7 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");
     renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
     assertEqual("Core", "Form Reset resets Rendered Value", renderedValue, `console.log("Hello, World!");
 // A second line
-// A third line with &lt;html&gt; tags
-`); // Extra newline so line numbers visible if enabled.
+// A third line with &lt;html&gt; tags`);
 
     /*--- Tests for plugins ---*/
     // AutoCloseBrackets