Merge pull request #107 from WebCoder49/special-chars-ignore-trailing-space

Remove final newline fix as no longer needed and causes problems with…

Author: WebCoder49

code-input.d.ts

@@ -183,7 +183,7 @@ export namespace plugins {
      * Create a special characters plugin instance.
      * Default = covers many non-renderable ASCII characters.
      * @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code
-     * @param {Boolean} inheritTextColor If `colorInSpecialChars` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
+     * @param {Boolean} inheritTextColor If `inheritTextColor` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
      * @param {RegExp} specialCharRegExp The regular expression which matches special characters
      */
     constructor(colorInSpecialChars?: boolean, inheritTextColor?: boolean, specialCharRegExp?: RegExp);
@@ -286,7 +286,7 @@ export namespace templates {
   /**
    * Constructor to create a proof-of-concept template that shows text in a repeating series of colors.
    * @param {string[]} rainbowColors - An array of CSS colors, in the order each color will be shown
-   * @param {string} delimiter - The character used to split up parts of text where each part is a different colour (e.g. "" = characters, " " = words)
+   * @param {string} delimiter - The character used to split up parts of text where each part is a different color (e.g. "" = characters, " " = words)
    * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
    * @returns template object
    */

code-input.js

@@ -511,11 +511,6 @@ var codeInput = {
             let resultElement = this.codeElement;
             let value = this.value;
 
-            // Handle final newlines
-            if (value[value.length - 1] == "\n" || value.length == 0) {
-                value += " ";
-            }
-
             // Update code
             resultElement.innerHTML = this.escapeHtml(value);
             this.pluginEvt("beforeHighlight");

plugins/special-chars.css

@@ -62,7 +62,7 @@
 
     mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);
     mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-    mask-size: 40%, 40%, 40%, 40%;
+    mask-size: min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em), min(40%, 0.25em);
     mask-position: 10% 10%, 90% 10%, 10% 90%, 90% 90%;
 
     -webkit-mask-image: var(--hex-0), var(--hex-1), var(--hex-2), var(--hex-3);

plugins/special-chars.js

@@ -14,7 +14,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
      * Create a special characters plugin instance.
      * Default = covers many non-renderable ASCII characters.
      * @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code
-     * @param {Boolean} inheritTextColor If `colorInSpecialChars` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base colour of the `pre code` element is used to give contrast to the small characters.
+     * @param {Boolean} inheritTextColor If `inheritTextColor` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
      * @param {RegExp} specialCharRegExp The regular expression which matches special characters
      */
     constructor(colorInSpecialChars = false, inheritTextColor = false, specialCharRegExp = /(?!\n)(?!\t)[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]|[\u{0200}-\u{FFFF}]/ug) { // By default, covers many non-renderable ASCII characters
@@ -71,6 +71,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
 
                     if(nextNode.textContent != "") {
                         let replacementElement = this.getStylisedSpecialChar(codeInput, nextNode.textContent);
+                        // This next node will become the i+1th node so automatically iterated to
                         nextNode.parentNode.insertBefore(replacementElement, nextNode);
                         nextNode.textContent = "";
                     }
@@ -120,14 +121,15 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
 
     /* Get the colors a stylised representation of a given character must be shown in; lazy load and return [background color, text color] */
     getCharacterColors(asciiCode) {
-        let backgroundColor;
         let textColor;
         if(!(asciiCode in this.cachedColors)) {
-            // Get background color - arbitrary bit manipulation to get a good range of colours
-            backgroundColor = asciiCode^(asciiCode << 3)^(asciiCode << 7)^(asciiCode << 14)^(asciiCode << 16); // Arbitrary
-            backgroundColor = backgroundColor^0x1fc627; // Arbitrary
-            backgroundColor = backgroundColor.toString(16);
-            backgroundColor = ("000000" + backgroundColor).substring(backgroundColor.length); // So 6 chars with leading 0
+            // Get background color
+            let asciiHex = asciiCode.toString(16);
+            let backgroundColor = "";
+            for(let i = 0; i < asciiHex.length; i++) {
+                backgroundColor += asciiHex[i] + asciiHex[i];
+            }
+            backgroundColor = ("000000" + backgroundColor).substring(backgroundColor.length); // So valid HEX color with 6 characters
 
             // Get most suitable text color - white or black depending on background brightness
             let colorBrightness = 0;
@@ -148,7 +150,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
     /* Get the width of a character in em (relative to font size), for use in creation of the stylised hexadecimal representation with the same width */
     getCharacterWidthEm(codeInput, char) {
         // Force zero-width characters
-        if(new RegExp("\u00AD|\u02de|[\u0300-\u036F]|[\u0483-\u0489]|\u200b").test(char) ) { return 0 }
+        if(new RegExp("\u00AD|\u02DE|[\u0300-\u036F]|[\u0483-\u0489]|[\u200B-\u200D]|\uFEFF").test(char) ) { return 0 }
         // Non-renderable ASCII characters should all be rendered at same size
         if(char != "\u0096" && new RegExp("[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]", "g").test(char)) {
             let fallbackWidth = this.getCharacterWidthEm(codeInput, "\u0096");