Show content invisible characters

Author: kishikawakatsumi

Resources/branch_main/Sources/parser/TokenVisitor.swift

@@ -41,9 +41,9 @@ final class TokenVisitor: SyntaxRewriter {
 
     list.append(
       "<span class='\(className)' " +
-      "data-title='\("\(escapeHTML("\(node.trimmed)"))".replacingOccurrences(of: "\n", with: "↲"))' " +
-      "data-content='\(escapeHTML(content))' " +
-      "data-type='\(escapeHTML(type))' " +
+      "data-title='\("\(node.trimmed)".htmlEscaped().displayInvisibles())' " +
+      "data-content='\(content.htmlEscaped().substituteInvisibles())' " +
+      "data-type='\(type.htmlEscaped())' " +
       #"data-range='{"startRow":\#(start.line),"startColumn":\#(start.column),"endRow":\#(end.line),"endColumn":\#(end.column)}'>"#
     )
 
@@ -142,7 +142,12 @@ final class TokenVisitor: SyntaxRewriter {
   }
 
   override func visit(_ token: TokenSyntax) -> TokenSyntax {
-    current.text = escapeHTML(token.text)
+    current.text = token
+      .text
+      .htmlEscaped()
+      .substituteInvisibles()
+      .replacingOccurrences(of: "&nbsp;", with: "␣")
+      .replacingOccurrences(of: "<br/>", with: "↲<br/>")
     current.token = Token(kind: "\(token.tokenKind)", leadingTrivia: "", trailingTrivia: "")
 
     token.leadingTrivia.forEach { (piece) in
@@ -183,18 +188,21 @@ final class TokenVisitor: SyntaxRewriter {
     let end = sourceRange.end
     let text = token.presence == .present ? token.text : ""
     list.append(
-      "<span class='token \(escapeHTML(kind))' " +
-      "data-title='\(escapeHTML("\(token.trimmed)"))' " +
-      "data-content='\(escapeHTML("\(token.tokenKind)"))' " +
+      "<span class='token \(kind.htmlEscaped())' " +
+      "data-title='\("\(token.trimmed)".htmlEscaped().displayInvisibles())' " +
+      "data-content='\("\(token.tokenKind)".htmlEscaped().substituteInvisibles())' " +
       "data-type='Token' " +
       #"data-range='{"startRow":\#(start.line),"startColumn":\#(start.column),"endRow":\#(end.line),"endColumn":\#(end.column)}'>"# +
-      "\(escapeHTML(text).replacingOccurrences(of: "<br>", with: "<br/>"))</span>"
+      "\(text.htmlEscaped().substituteInvisibles())</span>"
     )
   }
 
   private func processTriviaPiece(_ piece: TriviaPiece) -> String {
     func wrapWithSpanTag(class c: String, text: String) -> String {
-      "<span class='\(escapeHTML(c))' data-title='\(escapeHTML("\(piece)"))' data-content='\(escapeHTML(c))' data-type='Trivia'>\(escapeHTML(text).replacingOccurrences(of: "<br>", with: "<br/>"))</span>"
+      "<span class='\(c.htmlEscaped())' " +
+      "data-title='\("\(piece)".htmlEscaped().displayInvisibles())' " +
+      "data-content='\(c.htmlEscaped().substituteInvisibles())' " +
+      "data-type='Trivia'>\(text.htmlEscaped().substituteInvisibles())</span>"
     }
 
     var trivia = ""
@@ -234,19 +242,31 @@ final class TokenVisitor: SyntaxRewriter {
   }
 }
 
-func escapeHTML(_ string: String) -> String {
-  var newString = string
-  let specialCharacters = [
-    ("&", "&amp;"),
-    ("<", "&lt;"),
-    (">", "&gt;"),
-    ("\"", "&quot;"),
-    ("'", "&apos;"),
-  ];
-  for (unescaped, escaped) in specialCharacters {
-    newString = newString.replacingOccurrences(of: unescaped, with: escaped, options: .literal, range: nil)
+private extension String {
+  func htmlEscaped() -> String {
+    var string = self
+    let specialCharacters = [
+      ("&", "&amp;"),
+      ("<", "&lt;"),
+      (">", "&gt;"),
+      ("\"", "&quot;"),
+      ("'", "&apos;"),
+    ];
+    for (unescaped, escaped) in specialCharacters {
+      string = string.replacingOccurrences(of: unescaped, with: escaped, options: .literal, range: nil)
+    }
+    return string
+  }
+
+  func substituteInvisibles() -> String {
+    self
+      .replacingOccurrences(of: " ", with: "&nbsp;")
+      .replacingOccurrences(of: "\n", with: "<br/>")
+  }
+
+  func displayInvisibles() -> String {
+    self
+      .replacingOccurrences(of: " ", with: "␣")
+      .replacingOccurrences(of: "\n", with: "↲")
   }
-  return newString
-    .replacingOccurrences(of: " ", with: "&nbsp;")
-    .replacingOccurrences(of: "\n", with: "<br>")
 }

Resources/branch_main/Sources/parser/TreeNode.swift

@@ -12,7 +12,7 @@ final class TreeNode: Codable {
 
   init(id: Int, text: String, range: Range, type: SyntaxType) {
     self.id = id
-    self.text = escapeHTML(text)
+    self.text = text.htmlEscaped()
     self.range = range
     self.type = type
   }
@@ -72,13 +72,9 @@ struct StructureProperty: Codable, Equatable {
   let ref: String?
 
   init(name: String, value: StructureValue? = nil, ref: String? = nil) {
-    self.name = escapeHTML(name)
+    self.name = name.htmlEscaped()
     self.value = value
-    if let ref {
-      self.ref = escapeHTML(ref)
-    } else {
-      self.ref = nil
-    }
+    self.ref = ref?.htmlEscaped()
   }
 }
 
@@ -99,12 +95,8 @@ struct StructureValue: Codable, Equatable {
   let kind: String?
 
   init(text: String, kind: String? = nil) {
-    self.text = escapeHTML(text)
-    if let kind {
-      self.kind = escapeHTML(kind)
-    } else {
-      self.kind = nil
-    }
+    self.text = text.htmlEscaped()
+    self.kind = kind?.htmlEscaped()
   }
 }
 
@@ -134,7 +126,7 @@ struct Token: Codable, Equatable {
   var trailingTrivia: String
 
   init(kind: String, leadingTrivia: String, trailingTrivia: String) {
-    self.kind = escapeHTML(kind)
+    self.kind = kind.htmlEscaped()
     self.leadingTrivia = leadingTrivia
     self.trailingTrivia = trailingTrivia
   }
@@ -151,3 +143,22 @@ extension Token: CustomStringConvertible {
     """
   }
 }
+
+private extension String {
+  func htmlEscaped() -> String {
+    var string = self
+    let specialCharacters = [
+      ("&", "&"),
+      ("<", "&lt;"),
+      (">", "&gt;"),
+      ("\"", "&quot;"),
+      ("'", "&apos;"),
+    ];
+    for (unescaped, escaped) in specialCharacters {
+      string = string.replacingOccurrences(of: unescaped, with: escaped, options: .literal, range: nil)
+    }
+    return string
+      .replacingOccurrences(of: " ", with: "&nbsp;")
+      .replacingOccurrences(of: "\n", with: "<br>")
+  }
+}

Resources/branch_main/Tests/Tests/Fixtures/test-1-1.html

@@ -1,15 +1,15 @@
-<span class='SourceFile' data-title='let&nbsp;number&nbsp;=&nbsp;0' data-content='SourceFileSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
-<span class='CodeBlockItemList' data-title='let&nbsp;number&nbsp;=&nbsp;0' data-content='CodeBlockItemListSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
-<span class='CodeBlockItem' data-title='let&nbsp;number&nbsp;=&nbsp;0' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
-<span class='VariableDecl' data-title='let&nbsp;number&nbsp;=&nbsp;0' data-content='VariableDeclSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
+<span class='SourceFile' data-title='let␣number␣=␣0' data-content='SourceFileSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
+<span class='CodeBlockItemList' data-title='let␣number␣=␣0' data-content='CodeBlockItemListSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
+<span class='CodeBlockItem' data-title='let␣number␣=␣0' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
+<span class='VariableDecl' data-title='let␣number␣=␣0' data-content='VariableDeclSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":15}'>
 <span class='Token' data-title='let' data-content='keyword(SwiftSyntax.Keyword.let)' data-type='Token' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":4}'>
 <span class='token keyword' data-title='let' data-content='keyword(SwiftSyntax.Keyword.let)' data-type='Token' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":4}'>
 let
 </span>
 &nbsp;
 </span>
-<span class='PatternBindingList' data-title='number&nbsp;=&nbsp;0' data-content='PatternBindingListSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":15}'>
-<span class='PatternBinding' data-title='number&nbsp;=&nbsp;0' data-content='PatternBindingSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":15}'>
+<span class='PatternBindingList' data-title='number␣=␣0' data-content='PatternBindingListSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":15}'>
+<span class='PatternBinding' data-title='number␣=␣0' data-content='PatternBindingSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":15}'>
 <span class='IdentifierPattern' data-title='number' data-content='IdentifierPatternSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":11}'>
 <span class='Token' data-title='number' data-content='identifier(&quot;number&quot;)' data-type='Token' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":11}'>
 <span class='token identifier' data-title='number' data-content='identifier(&quot;number&quot;)' data-type='Token' data-range='{"startRow":1,"startColumn":5,"endRow":1,"endColumn":11}'>
@@ -18,7 +18,7 @@
 &nbsp;
 </span>
 </span>
-<span class='InitializerClause' data-title='=&nbsp;0' data-content='InitializerClauseSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":12,"endRow":1,"endColumn":15}'>
+<span class='InitializerClause' data-title='=␣0' data-content='InitializerClauseSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":12,"endRow":1,"endColumn":15}'>
 <span class='Token' data-title='=' data-content='equal' data-type='Token' data-range='{"startRow":1,"startColumn":12,"endRow":1,"endColumn":13}'>
 <span class='token equal' data-title='=' data-content='equal' data-type='Token' data-range='{"startRow":1,"startColumn":12,"endRow":1,"endColumn":13}'>
 =