feat: new rendererOption: spaceToHtmlTag (#60)

Author: jfcherng

example/demo_base.php

@@ -35,6 +35,10 @@
     'separateBlock' => true,
     // show the (table) header
     'showHeader' => true,
+    // convert spaces/tabs into HTML codes like `<span class="ch sp"> </span>`
+    // and the frontend is responsible for rendering them with CSS.
+    // when using this, "spacesToNbsp" should be false and "tabSize" is not respected.
+    'spaceToHtmlTag' => false,
     // the frontend HTML could use CSS "white-space: pre;" to visualize consecutive whitespaces
     // but if you want to visualize them in the backend with "&nbsp;", you can set this to true
     'spacesToNbsp' => false,

example/diff-table.css

@@ -73,6 +73,22 @@
 }
 .diff-wrapper.diff.diff-html {
   white-space: pre-wrap;
+  tab-size: var(--tab-size);
+}
+.diff-wrapper.diff.diff-html .ch {
+  line-height: 1em;
+  background-clip: border-box;
+  background-repeat: repeat-x;
+  background-position: left center;
+}
+.diff-wrapper.diff.diff-html .ch.sp {
+  background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba%2860, 60, 60, 50%25%29"/%3E%3C/svg%3E');
+  background-size: 1ch 1.25em;
+}
+.diff-wrapper.diff.diff-html .ch.tab {
+  background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="rgba%2860, 60, 60, 50%25%29"/%3E%3C/svg%3E');
+  background-size: calc(var(--tab-size) * 1ch) 1.25em;
+  background-position: 2px center;
 }
 .diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep {
   white-space: normal;

example/diff-table.scss

@@ -28,7 +28,13 @@ $diff-border-color: $diff-text-color !default;
 $diff-bg-color-none-block: mix($diff-bg-color, $diff-table-sidebar-color, 80%) !default;
 $diff-bg-color-none-block-alternative: mix($diff-bg-color, $diff-table-sidebar-color, 55%) !default;
 
+// symbol images
+$img-space: 'data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba%2860, 60, 60, 50%25%29"/%3E%3C/svg%3E' !default;
+$img-tab: 'data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="rgba%2860, 60, 60, 50%25%29"/%3E%3C/svg%3E' !default;
+
 .diff-wrapper.diff {
+  --tab-size: 4;
+
   background: repeating-linear-gradient(
     -45deg,
     $diff-bg-color-none-block,
@@ -121,6 +127,24 @@ $diff-bg-color-none-block-alternative: mix($diff-bg-color, $diff-table-sidebar-c
 
   &.diff-html {
     white-space: pre-wrap;
+    tab-size: var(--tab-size);
+
+    .ch {
+      line-height: 1em;
+      background-clip: border-box;
+      background-repeat: repeat-x;
+      background-position: left center;
+
+      &.sp {
+        background-image: url($img-space);
+        background-size: 1ch 1.25em;
+      }
+      &.tab {
+        background-image: url($img-tab);
+        background-size: calc(var(--tab-size) * 1ch) 1.25em;
+        background-position: 2px center;
+      }
+    }
 
     &.diff-combined {
       .change.change-rep {

src/Renderer/AbstractRenderer.php

@@ -64,6 +64,10 @@ abstract class AbstractRenderer implements RendererInterface
         'separateBlock' => true,
         // show the (table) header
         'showHeader' => true,
+        // convert spaces/tabs into HTML codes like `<span class="ch sp"> </span>`
+        // and the frontend is responsible for rendering them with CSS.
+        // when using this, "spacesToNbsp" should be false and "tabSize" is not respected.
+        'spaceToHtmlTag' => false,
         // the frontend HTML could use CSS "white-space: pre;" to visualize consecutive whitespaces
         // but if you want to visualize them in the backend with "&nbsp;", you can set this to true
         'spacesToNbsp' => false,

src/Renderer/Html/AbstractHtml.php

@@ -255,13 +255,20 @@ protected function formatLines(array $lines): array
      */
     protected function formatStringFromLines(string $string): string
     {
-        $string = $this->expandTabs($string, $this->options['tabSize']);
+        if (!$this->options['spaceToHtmlTag']) {
+            $string = $this->expandTabs($string, $this->options['tabSize']);
+        }
+
         $string = $this->htmlSafe($string);
 
         if ($this->options['spacesToNbsp']) {
             $string = $this->htmlFixSpaces($string);
         }
 
+        if ($this->options['spaceToHtmlTag']) {
+            $string = $this->htmlReplaceSpacesToHtmlTag($string);
+        }
+
         return $string;
     }
 
@@ -317,6 +324,21 @@ protected function htmlFixSpaces(string $string): string
         return \str_replace(' ', ' ', $string);
     }
 
+    /**
+     * Replace spaces/tabs with HTML tags, which may be styled in frontend with CSS.
+     *
+     * @param string $string the string of spaces
+     *
+     * @return string the HTML representation of the string
+     */
+    protected function htmlReplaceSpacesToHtmlTag(string $string): string
+    {
+        return strtr($string, [
+            ' ' => '<span class="ch sp"> </span>',
+            "\t" => "<span class=\"ch tab\">\t</span>",
+        ]);
+    }
+
     /**
      * Make sure the "changes" array uses int "tag".
      *