Add multilineTextAlignment and use <br> to split spans up (#401)

Sources/TokamakCore/Tokens/TextAlignment.swift

@@ -15,10 +15,30 @@
 //  Created by Max Desiatov on 30/12/2018.
 //
 
-public enum TextAlignment: CaseIterable {
-  case left
-  case right
-  case center
-  case justified
-  case natural
+public enum TextAlignment: Hashable, CaseIterable {
+  case leading,
+    center,
+    trailing
+}
+
+extension EnvironmentValues {
+  private struct _MultilineTextAlignmentKey: EnvironmentKey {
+    static var defaultValue: TextAlignment = .leading
+  }
+
+  public var multilineTextAlignment: TextAlignment {
+    get {
+      self[_MultilineTextAlignmentKey.self]
+    }
+    set {
+      self[_MultilineTextAlignmentKey.self] = newValue
+    }
+  }
+}
+
+public extension View {
+  @inlinable
+  func multilineTextAlignment(_ alignment: TextAlignment) -> some View {
+    environment(\.multilineTextAlignment, alignment)
+  }
 }

Sources/TokamakDemo/TextDemo.swift

@@ -55,6 +55,15 @@ struct TextDemo: View {
       }
       (Text("This text has been ") + Text("concatenated").bold())
         .italic()
+      ForEach(TextAlignment.allCases, id: \.hashValue) { alignment in
+        Text(
+          """
+          Multiline
+          text
+          """
+        )
+        .multilineTextAlignment(alignment)
+      }
     }
   }
 }

Sources/TokamakStaticHTML/Views/Text/Text.swift

@@ -91,6 +91,16 @@ public extension Font {
   }
 }
 
+extension TextAlignment: CustomStringConvertible {
+  public var description: String {
+    switch self {
+    case .leading: return "left"
+    case .center: return "center"
+    case .trailing: return "right"
+    }
+  }
+}
+
 private struct TextSpan: AnyHTML {
   let content: String
   let attributes: [HTMLAttribute: String]
@@ -102,11 +112,12 @@ private struct TextSpan: AnyHTML {
 extension Text: AnyHTML {
   public var innerHTML: String? {
     let proxy = _TextProxy(self)
+    let innerHTML: String
     switch proxy.storage {
     case let .verbatim(text):
-      return text
+      innerHTML = text
     case let .segmentedText(segments):
-      return segments
+      innerHTML = segments
         .map {
           TextSpan(
             content: $0.0.rawText,
@@ -119,6 +130,7 @@ extension Text: AnyHTML {
         }
         .reduce("", +)
     }
+    return innerHTML.replacingOccurrences(of: "\n", with: "<br />")
   }
 
   public var tag: String { "span" }
@@ -189,7 +201,8 @@ extension Text {
       letter-spacing: \(kerning);
       vertical-align: \(baseline == nil ? "baseline" : "\(baseline!)em");
       text-decoration: \(textDecoration);
-      text-decoration-color: \(decorationColor)
+      text-decoration-color: \(decorationColor);
+      text-align: \(environment.multilineTextAlignment.description);
       """,
       "class": isRedacted ? "_tokamak-text-redacted" : "",
     ]