From a77d2922ebd60b2697ef217134239dc226ce451b Mon Sep 17 00:00:00 2001
From: Julie Muzina <julie.muzina@canonical.com>
Date: Fri, 26 Jul 2024 14:48:42 -0400
Subject: [PATCH] refactor js_beautify to use a formatSource() fn

---
 templates/_layouts/docs.html   |  1 +
 templates/static/js/example.js | 27 ++++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/templates/_layouts/docs.html b/templates/_layouts/docs.html
index 146904f43..51ccc020d 100644
--- a/templates/_layouts/docs.html
+++ b/templates/_layouts/docs.html
@@ -127,6 +127,7 @@ <h4 class="p-table-of-contents__header">On this page:</h4>
       Prism.manual = true;
     </script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js"></script>
     <script defer src="{{ versioned_static('js/prism.min.js') }}"></script>
     <script defer src="{{ versioned_static('js/example.js') }}"></script>
diff --git a/templates/static/js/example.js b/templates/static/js/example.js
index 1ed3b9fd7..0d2e8e213 100644
--- a/templates/static/js/example.js
+++ b/templates/static/js/example.js
@@ -54,9 +54,28 @@
     request.send(null);
   }
 
+  /**
+   * Format source code based on language
+   * @param {String} source - source code to format
+   * @param {String} lang - language of the source code
+   * @returns {String} formatted source code
+   */
+  function formatSource(source, lang) {
+    switch (lang) {
+      case 'html':
+        return html_beautify(source, {indent_size: 2});
+      case 'js':
+        return js_beautify(source, {indent_size: 2});
+      case 'css':
+        return css_beautify(source, {indent_size: 2});
+      default:
+        return source;
+    }
+  }
+
   function createPreCode(source, lang) {
     var code = document.createElement('code');
-    code.appendChild(document.createTextNode(source));
+    code.appendChild(document.createTextNode(formatSource(source, lang)));
 
     var pre = document.createElement('pre');
     pre.classList.add('p-code-snippet__block');
@@ -78,7 +97,6 @@
   }
 
   function renderExample(placementElement, html) {
-    html = html_beautify(html);
     var bodyPattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
     var titlePattern = /<title[^>]*>((.|[\n\r])*)<\/title>/im;
     var headPattern = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
@@ -87,11 +105,10 @@
     var bodyHTML = bodyPattern.exec(html)[1].trim();
     var headHTML = headPattern.exec(html)[1].trim();
 
-    var htmlSource = html_beautify(stripScriptsFromSource(bodyHTML));
-    var jsSource = js_beautify(getScriptFromSource(bodyHTML));
+    var htmlSource = stripScriptsFromSource(bodyHTML);
+    var jsSource = getScriptFromSource(bodyHTML);
     var cssSource = getStyleFromSource(headHTML);
     var externalScripts = getExternalScriptsFromSource(html);
-
     var codePenData = {
       html: htmlSource,
       css: cssSource,