Merge pull request #632 from Badgerati/Issue-579

New lines in Paragraph/Text Element values are now properly rendered

examples/paragraphs.ps1

@@ -0,0 +1,24 @@
+Import-Module Pode -MaximumVersion 2.99.99 -Force
+Import-Module ..\src\Pode.Web.psm1 -Force
+
+Start-PodeServer {
+    # add a simple endpoint
+    Add-PodeEndpoint -Address localhost -Port 8090 -Protocol Http
+    New-PodeLoggingMethod -Terminal | Enable-PodeErrorLogging
+
+    # set the use of templates, and set a login page
+    Use-PodeWebTemplates -Title 'Paragraphs' -Theme Dark
+
+    # set the home page controls (just a simple paragraph)
+    $card1 = New-PodeWebCard -Content @(
+        New-PodeWebParagraph -Value "Example paragraph`r`nover two lines"
+    )
+
+    $card2 = New-PodeWebCard -Content @(
+        New-PodeWebParagraph -Content @(
+            New-PodeWebText -Value "Example text`r`nover two lines"
+        )
+    )
+
+    Add-PodeWebPage -Name 'Home' -Path '/' -HomePage -Content $card1, $card2 -Title 'Paragraphs'
+}

src/Templates/Public/scripts/default.js

@@ -1389,4 +1389,12 @@ function mergeObjects(obj1, obj2, excludeProps) {
     }
 
     return obj1;
+}
+
+function encodeNewlines(text) {
+    if (!text) {
+        return '';
+    }
+
+    return text.replace(/\r?\n/g, "<br/>");
 }

src/Templates/Public/scripts/templates.js

@@ -1809,7 +1809,7 @@ class PodeText extends PodeTextualElement {
             class='pode-text'
             pode-object='${this.getType()}'
             pode-id='${this.uuid}'>
-                ${data.Value}
+                ${encodeNewlines(data.Value)}
         </span>`;
 
         switch (data.Style.toLowerCase()) {
@@ -3603,7 +3603,7 @@ class PodeParagraph extends PodeTextualElement {
             pode-object="${this.getType()}"
             pode-id="${this.uuid}">
                 <span pode-content-for='${this.uuid}' pode-content-order='0' class='pode-text'>
-                    ${data.Value ? data.Value : ''}
+                    ${data.Value ? encodeNewlines(data.Value) : ''}
                 </span>
         </p>`;
     }