Fix newline rendering

Author: kishikawakatsumi

Sources/App/Controllers/TokenVisitor.swift

@@ -231,5 +231,7 @@ final class TokenVisitor: SyntaxRewriter {
       newString = newString.replacingOccurrences(of: unescaped, with: escaped, options: .literal, range: nil)
     }
     return newString
+      .replacingOccurrences(of: " ", with: " ")
+      .replacingOccurrences(of: "\n", with: "<br>")
   }
 }

Tests/AppTests/Fixtures/test-1-1.html

@@ -1,18 +1,18 @@
-<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='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='Token' data-title='let' data-content='letKeyword' data-type='Token' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":4}'>
 <span class='token keyword' data-title='let' data-content='letKeyword' data-type='Token' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":4}'>let</span>&nbsp;
 </span>
-<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='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='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}'>number</span>&nbsp;
 </span>
 </span>
-<span class='InitializerClause' data-title='= 0' data-content='InitializerClauseSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":12,"endRow":1,"endColumn":15}'>
+<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='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}'>=</span>&nbsp;
 </span>

Tests/AppTests/Fixtures/test-1-2.html

@@ -3383,7 +3383,7 @@
     "text": "",
     "token": {
       "kind": "eof",
-      "leadingTrivia": "↲↲<span class='lineComment' data-title='// Prints &quot;It&apos;s really warm. Don&apos;t forget to wear sunscreen.&quot;' data-content='lineComment' data-type='Trivia'>// Prints &quot;It&apos;s really warm. Don&apos;t forget to wear sunscreen.&quot;</span>",
+      "leadingTrivia": "↲↲<span class='lineComment' data-title='//␣Prints␣&quot;It&apos;s␣really␣warm.␣Don&apos;t␣forget␣to␣wear␣sunscreen.&quot;' data-content='lineComment' data-type='Trivia'>//␣Prints␣&quot;It&apos;s␣really␣warm.␣Don&apos;t␣forget␣to␣wear␣sunscreen.&quot;</span>",
       "trailingTrivia": ""
     },
     "type": "other"

Tests/AppTests/Fixtures/test-1-2.json

@@ -809,7 +809,7 @@
     "text": "enum",
     "token": {
       "kind": "enumKeyword",
-      "leadingTrivia": "↲␣␣<span class='lineComment' data-title='// nested Suit enumeration' data-content='lineComment' data-type='Trivia'>// nested Suit enumeration</span>↲␣␣",
+      "leadingTrivia": "↲␣␣<span class='lineComment' data-title='//␣nested␣Suit␣enumeration' data-content='lineComment' data-type='Trivia'>//␣nested␣Suit␣enumeration</span>↲␣␣",
       "trailingTrivia": "␣"
     },
     "type": "other"
@@ -3357,7 +3357,7 @@
     "text": "enum",
     "token": {
       "kind": "enumKeyword",
-      "leadingTrivia": "↲↲␣␣<span class='lineComment' data-title='// nested Rank enumeration' data-content='lineComment' data-type='Trivia'>// nested Rank enumeration</span>↲␣␣",
+      "leadingTrivia": "↲↲␣␣<span class='lineComment' data-title='//␣nested␣Rank␣enumeration' data-content='lineComment' data-type='Trivia'>//␣nested␣Rank␣enumeration</span>↲␣␣",
       "trailingTrivia": "␣"
     },
     "type": "other"
@@ -11198,7 +11198,7 @@
     "text": "let",
     "token": {
       "kind": "letKeyword",
-      "leadingTrivia": "↲↲␣␣<span class='lineComment' data-title='// BlackjackCard properties and methods' data-content='lineComment' data-type='Trivia'>// BlackjackCard properties and methods</span>↲␣␣",
+      "leadingTrivia": "↲↲␣␣<span class='lineComment' data-title='//␣BlackjackCard␣properties␣and␣methods' data-content='lineComment' data-type='Trivia'>//␣BlackjackCard␣properties␣and␣methods</span>↲␣␣",
       "trailingTrivia": "␣"
     },
     "type": "other"

Tests/AppTests/Fixtures/test-1-3.html

@@ -1,14 +1,20 @@
-<span class='SourceFile' data-title='struct Result&lt; {{↲  let text: String↲  let someOtherThing: String↲}' data-content='SourceFileSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":4,"endColumn":2}'>
-<span class='CodeBlockItemList' data-title='struct Result&lt; {{↲  let text: String↲  let someOtherThing: String↲}' data-content='CodeBlockItemListSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":4,"endColumn":2}'>
-<span class='CodeBlockItem' data-title='struct Result&lt; {' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":17}'>
-<span class='StructDecl' data-title='struct Result&lt; {' data-content='StructDeclSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":17}'>
+<span class='SourceFile' data-title='struct&nbsp;Result&lt;&nbsp;{{
+<br>&nbsp;&nbsp;let&nbsp;text:&nbsp;String
+<br>&nbsp;&nbsp;let&nbsp;someOtherThing:&nbsp;String
+<br>}' data-content='SourceFileSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":4,"endColumn":2}'>
+<span class='CodeBlockItemList' data-title='struct&nbsp;Result&lt;&nbsp;{{
+<br>&nbsp;&nbsp;let&nbsp;text:&nbsp;String
+<br>&nbsp;&nbsp;let&nbsp;someOtherThing:&nbsp;String
+<br>}' data-content='CodeBlockItemListSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":4,"endColumn":2}'>
+<span class='CodeBlockItem' data-title='struct&nbsp;Result&lt;&nbsp;{' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":17}'>
+<span class='StructDecl' data-title='struct&nbsp;Result&lt;&nbsp;{' data-content='StructDeclSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":17}'>
 <span class='Token' data-title='struct' data-content='structKeyword' data-type='Token' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":7}'>
 <span class='token keyword' data-title='struct' data-content='structKeyword' data-type='Token' data-range='{"startRow":1,"startColumn":1,"endRow":1,"endColumn":7}'>struct</span>&nbsp;
 </span>
 <span class='Token' data-title='Result' data-content='identifier(&quot;Result&quot;)' data-type='Token' data-range='{"startRow":1,"startColumn":8,"endRow":1,"endColumn":14}'>
 <span class='token identifier' data-title='Result' data-content='identifier(&quot;Result&quot;)' data-type='Token' data-range='{"startRow":1,"startColumn":8,"endRow":1,"endColumn":14}'>Result</span>
 </span>
-<span class='GenericParameterClause' data-title='&lt; ' data-content='GenericParameterClauseSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":14,"endRow":1,"endColumn":15}'>
+<span class='GenericParameterClause' data-title='&lt;&nbsp;' data-content='GenericParameterClauseSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":14,"endRow":1,"endColumn":15}'>
 <span class='Token' data-title='&lt;' data-content='leftAngle' data-type='Token' data-range='{"startRow":1,"startColumn":14,"endRow":1,"endColumn":15}'>
 <span class='token leftAngle' data-title='&lt;' data-content='leftAngle' data-type='Token' data-range='{"startRow":1,"startColumn":14,"endRow":1,"endColumn":15}'>&lt;</span>&nbsp;
 </span>
@@ -31,26 +37,33 @@
 <span class='token semicolon' data-title='' data-content='semicolon' data-type='Token' data-range='{"startRow":1,"startColumn":17,"endRow":1,"endColumn":17}'></span>
 </span>
 </span>
-<span class='CodeBlockItem' data-title='{↲  let text: String↲  let someOtherThing: String↲}' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":17,"endRow":4,"endColumn":2}'>
-<span class='ClosureExpr' data-title='{↲  let text: String↲  let someOtherThing: String↲}' data-content='ClosureExprSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":17,"endRow":4,"endColumn":2}'>
+<span class='CodeBlockItem' data-title='{
+<br>&nbsp;&nbsp;let&nbsp;text:&nbsp;String
+<br>&nbsp;&nbsp;let&nbsp;someOtherThing:&nbsp;String
+<br>}' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":17,"endRow":4,"endColumn":2}'>
+<span class='ClosureExpr' data-title='{
+<br>&nbsp;&nbsp;let&nbsp;text:&nbsp;String
+<br>&nbsp;&nbsp;let&nbsp;someOtherThing:&nbsp;String
+<br>}' data-content='ClosureExprSyntax' data-type='Syntax' data-range='{"startRow":1,"startColumn":17,"endRow":4,"endColumn":2}'>
 <span class='Token' data-title='{' data-content='leftBrace' data-type='Token' data-range='{"startRow":1,"startColumn":17,"endRow":1,"endColumn":18}'>
 <span class='token leftBrace' data-title='{' data-content='leftBrace' data-type='Token' data-range='{"startRow":1,"startColumn":17,"endRow":1,"endColumn":18}'>{</span>
 </span>
-<span class='CodeBlockItemList' data-title='let text: String↲  let someOtherThing: String' data-content='CodeBlockItemListSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":3,"endRow":3,"endColumn":29}'>
-<span class='CodeBlockItem' data-title='let text: String' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":3,"endRow":2,"endColumn":19}'>
-<span class='VariableDecl' data-title='let text: String' data-content='VariableDeclSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":3,"endRow":2,"endColumn":19}'>
+<span class='CodeBlockItemList' data-title='let&nbsp;text:&nbsp;String
+<br>&nbsp;&nbsp;let&nbsp;someOtherThing:&nbsp;String' data-content='CodeBlockItemListSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":3,"endRow":3,"endColumn":29}'>
+<span class='CodeBlockItem' data-title='let&nbsp;text:&nbsp;String' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":3,"endRow":2,"endColumn":19}'>
+<span class='VariableDecl' data-title='let&nbsp;text:&nbsp;String' data-content='VariableDeclSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":3,"endRow":2,"endColumn":19}'>
 <span class='Token' data-title='let' data-content='letKeyword' data-type='Token' data-range='{"startRow":2,"startColumn":3,"endRow":2,"endColumn":6}'>
 <br>&nbsp;&nbsp;
 <span class='token keyword' data-title='let' data-content='letKeyword' data-type='Token' data-range='{"startRow":2,"startColumn":3,"endRow":2,"endColumn":6}'>let</span>&nbsp;
 </span>
-<span class='PatternBindingList' data-title='text: String' data-content='PatternBindingListSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":19}'>
-<span class='PatternBinding' data-title='text: String' data-content='PatternBindingSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":19}'>
+<span class='PatternBindingList' data-title='text:&nbsp;String' data-content='PatternBindingListSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":19}'>
+<span class='PatternBinding' data-title='text:&nbsp;String' data-content='PatternBindingSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":19}'>
 <span class='IdentifierPattern' data-title='text' data-content='IdentifierPatternSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":11}'>
 <span class='Token' data-title='text' data-content='identifier(&quot;text&quot;)' data-type='Token' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":11}'>
 <span class='token identifier' data-title='text' data-content='identifier(&quot;text&quot;)' data-type='Token' data-range='{"startRow":2,"startColumn":7,"endRow":2,"endColumn":11}'>text</span>
 </span>
 </span>
-<span class='TypeAnnotation' data-title=': String' data-content='TypeAnnotationSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":11,"endRow":2,"endColumn":19}'>
+<span class='TypeAnnotation' data-title=':&nbsp;String' data-content='TypeAnnotationSyntax' data-type='Syntax' data-range='{"startRow":2,"startColumn":11,"endRow":2,"endColumn":19}'>
 <span class='Token' data-title=':' data-content='colon' data-type='Token' data-range='{"startRow":2,"startColumn":11,"endRow":2,"endColumn":12}'>
 <span class='token colon' data-title=':' data-content='colon' data-type='Token' data-range='{"startRow":2,"startColumn":11,"endRow":2,"endColumn":12}'>:</span>&nbsp;
 </span>
@@ -64,20 +77,20 @@
 </span>
 </span>
 </span>
-<span class='CodeBlockItem' data-title='let someOtherThing: String' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":3,"endRow":3,"endColumn":29}'>
-<span class='VariableDecl' data-title='let someOtherThing: String' data-content='VariableDeclSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":3,"endRow":3,"endColumn":29}'>
+<span class='CodeBlockItem' data-title='let&nbsp;someOtherThing:&nbsp;String' data-content='CodeBlockItemSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":3,"endRow":3,"endColumn":29}'>
+<span class='VariableDecl' data-title='let&nbsp;someOtherThing:&nbsp;String' data-content='VariableDeclSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":3,"endRow":3,"endColumn":29}'>
 <span class='Token' data-title='let' data-content='letKeyword' data-type='Token' data-range='{"startRow":3,"startColumn":3,"endRow":3,"endColumn":6}'>
 <br>&nbsp;&nbsp;
 <span class='token keyword' data-title='let' data-content='letKeyword' data-type='Token' data-range='{"startRow":3,"startColumn":3,"endRow":3,"endColumn":6}'>let</span>&nbsp;
 </span>
-<span class='PatternBindingList' data-title='someOtherThing: String' data-content='PatternBindingListSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":29}'>
-<span class='PatternBinding' data-title='someOtherThing: String' data-content='PatternBindingSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":29}'>
+<span class='PatternBindingList' data-title='someOtherThing:&nbsp;String' data-content='PatternBindingListSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":29}'>
+<span class='PatternBinding' data-title='someOtherThing:&nbsp;String' data-content='PatternBindingSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":29}'>
 <span class='IdentifierPattern' data-title='someOtherThing' data-content='IdentifierPatternSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":21}'>
 <span class='Token' data-title='someOtherThing' data-content='identifier(&quot;someOtherThing&quot;)' data-type='Token' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":21}'>
 <span class='token identifier' data-title='someOtherThing' data-content='identifier(&quot;someOtherThing&quot;)' data-type='Token' data-range='{"startRow":3,"startColumn":7,"endRow":3,"endColumn":21}'>someOtherThing</span>
 </span>
 </span>
-<span class='TypeAnnotation' data-title=': String' data-content='TypeAnnotationSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":21,"endRow":3,"endColumn":29}'>
+<span class='TypeAnnotation' data-title=':&nbsp;String' data-content='TypeAnnotationSyntax' data-type='Syntax' data-range='{"startRow":3,"startColumn":21,"endRow":3,"endColumn":29}'>
 <span class='Token' data-title=':' data-content='colon' data-type='Token' data-range='{"startRow":3,"startColumn":21,"endRow":3,"endColumn":22}'>
 <span class='token colon' data-title=':' data-content='colon' data-type='Token' data-range='{"startRow":3,"startColumn":21,"endRow":3,"endColumn":22}'>:</span>&nbsp;
 </span>