feat: Render whitespace and tab in formatter setting editor (#624)

* render whitespace and tab

Author: CsCherrYY

src/formatter-settings/assets/SpaceDiff.woff2

@@ -1,14 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
 
-import React from "react";
+import React, { useEffect } from "react";
 import { Col, Container, Nav, Row } from "react-bootstrap";
 import { useSelector, useDispatch } from "react-redux";
 import { Dispatch } from "@reduxjs/toolkit";
 import { changeActiveCategory } from "./formatterSettingViewSlice";
 import { highlight } from "./components/Highlight";
 import { Category } from "../../../types";
 import Setting from "./components/Setting";
+import { renderWhitespace } from "../../whitespace";
 
 const FormatterSettingsView = (): JSX.Element => {
   const activeCategory: Category = useSelector((state: any) => state.formatterSettings.activeCategory);
@@ -62,6 +63,10 @@ const FormatterSettingsView = (): JSX.Element => {
     </Nav>
   );
 
+  useEffect(() => {
+    renderWhitespace();
+  }, [contentText]);
+
   return (
     <Container className="root d-flex flex-column">
       <Row>

src/formatter-settings/assets/features/formatterSettings/FormatterSettingView.tsx

@@ -212,4 +212,53 @@ code.hljs {
   }
 }
 
+@font-face {
+  font-family: SpaceDiff;
+  src: url("./SpaceDiff.woff2");
+}
+
+body.vscode-dark {
+  .whitespace-style {
+    color: rgba(212, 212, 212, 0.3);
+  }
+  .tab-style {
+    color: rgba(212, 212, 212, 0.3);
+  }
+}
+
+body.vscode-light {
+  .whitespace-style {
+    color: rgba(0, 0, 0, 0.3);
+  }
+  .tab-style {
+    color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+body.vscode-high-contrast {
+  .whitespace-style {
+    color: rgba(255, 255, 255, 0.3);
+  }
+  .tab-style {
+    color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.whitespace-style {
+  font-style: normal;
+  font-family: SpaceDiff;
+}
+
+.tab-style {
+  font-style: normal;
+}
+
+.tab-style::before {
+  content: "→";
+  position: relative;
+  width: 0px;
+  height: 0px;
+  display: inline-block;
+}
+
 @import "../../assets/vscode.scss";

src/formatter-settings/assets/style.scss

@@ -0,0 +1,75 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+const SPACE_STYLE = "whitespace-style";
+const TAB_STYLE = "tab-style";
+const STYLE_ID = "whitespaceStyle";
+
+export function renderWhitespace(): void {
+    const style: HTMLElement | null = document.getElementById(STYLE_ID);
+    if (!style) {
+        const styleElement: HTMLStyleElement = document.createElement("style");
+        styleElement.id = STYLE_ID;
+        styleElement.textContent = ``;
+        document.head.appendChild(styleElement);
+    }
+    const elements = document.querySelectorAll("code");
+    for (let i = 0; i < elements.length; i++) {
+        const treeWalker: TreeWalker = document.createTreeWalker(elements[i], NodeFilter.SHOW_TEXT);
+        const nodes: Node[] = [];
+        while (treeWalker.nextNode()) {
+            nodes.push(treeWalker.currentNode);
+        }
+        for (const node of nodes) {
+            replace(node);
+        }
+    }
+}
+
+function replace(node: Node): void {
+    const textValue: string | null = node.nodeValue;
+    if (!textValue) {
+        return;
+    }
+    const parent: (Node & ParentNode) | null = node.parentNode;
+    if (!parent) {
+        return;
+    }
+    const tabs: string[] = textValue.split("\t");
+    const tabSpaces: string[][] = tabs.map(s => s.split(" "));
+    if (tabSpaces.length === 1 && tabSpaces[0].length === 1) {
+        return;
+    }
+    for (let i = 0; i < tabSpaces.length; i++) {
+        if (i > 0) {
+            parent.insertBefore<HTMLSpanElement>(createTabElement(), node);
+        }
+        let spaceCount = 0;
+        for (let j = 0; j < tabSpaces[i].length; j++) {
+            if (tabSpaces[i][j] === "" && j !== tabSpaces[i].length - 1) {
+                spaceCount = spaceCount + 1;
+                continue;
+            }
+            if (spaceCount > 0) {
+                parent.insertBefore<HTMLSpanElement>(createSpaceElement(spaceCount), node);
+            }
+            parent.insertBefore<Text>(document.createTextNode(tabSpaces[i][j]), node);
+            spaceCount = 1;
+        }
+    }
+    parent.removeChild(node);
+}
+
+function createSpaceElement(count: number): HTMLSpanElement {
+    const node: HTMLSpanElement = document.createElement("span");
+    node.classList.add(SPACE_STYLE);
+    node.textContent = " ".repeat(count);
+    return node;
+}
+
+function createTabElement(): HTMLSpanElement {
+    const node: HTMLSpanElement = document.createElement("span");
+    node.classList.add(TAB_STYLE);
+    node.textContent = "\t";
+    return node;
+}

src/formatter-settings/assets/whitespace.ts

@@ -51,7 +51,10 @@ module.exports = function (env, argv) {
         }, {
           loader: 'css-loader'
         }]
-      }
+      }, {
+        test: /\.woff2$/,
+        loader: 'url-loader',
+      },
       ]
     },
     output: {