Merge pull request #31 from opcodesio/feature/highlight-search-results

Feature / highlight search results

Author: arukompas

composer.json

@@ -38,7 +38,10 @@
     "autoload": {
         "psr-4": {
             "Opcodes\\LogViewer\\": "src"
-        }
+        },
+        "files": [
+            "src/helpers.php"
+        ]
     },
     "autoload-dev": {
         "psr-4": {

public/app.css

@@ -274,6 +274,11 @@
                 @apply h-4 w-4 ml-1 transition duration-200;
             }
         }
+
+        code, mark {
+            @apply bg-amber-200 text-gray-900 px-1 py-0.5 rounded
+              dark:bg-yellow-800 dark:text-white;
+        }
     }
 }
 

resources/css/app.scss

@@ -72,12 +72,12 @@ class="table-fixed min-w-full max-w-full border-separate"
 @else <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><use href="#icon-info" /></svg>@endif
         </td>
         <td class="log-level truncate hidden lg:table-cell">{{ $log->level->getName() }}</td>
-        <td class="whitespace-nowrap text-gray-900 dark:text-gray-200">{{ $log->time->toDateTimeString() }}</td>
-        <td class="whitespace-nowrap text-gray-500 dark:text-gray-300 dark:opacity-90 hidden lg:table-cell">{{ $log->environment }}</td>
-        <td class="max-w-[1px] w-full truncate text-gray-500 dark:text-gray-300 dark:opacity-90">{{ $log->text }}</td>
+        <td class="whitespace-nowrap text-gray-900 dark:text-gray-200">{!! highlight_search_result($log->time->toDateTimeString(), $query) !!}</td>
+        <td class="whitespace-nowrap text-gray-500 dark:text-gray-300 dark:opacity-90 hidden lg:table-cell">{!! highlight_search_result($log->environment, $query) !!}</td>
+        <td class="max-w-[1px] w-full truncate text-gray-500 dark:text-gray-300 dark:opacity-90">{!! highlight_search_result($log->text, $query) !!}</td>
         <td class="whitespace-nowrap text-gray-500 dark:text-gray-300 dark:opacity-90 text-xs">@include('log-viewer::partials.log-list-link-button')</td>
     </tr>
-    <tr x-show="$store.logViewer.isOpen({{$index}})"><td colspan="6"><pre class="log-stack">{{ $log->fullText }}</pre></td></tr>
+    <tr x-show="$store.logViewer.isOpen({{$index}})"><td colspan="6"><pre class="log-stack">{!! highlight_search_result($log->fullText, $query) !!}</pre></td></tr>
 </tbody>
 @empty
 <tbody class="log-group">

resources/views/livewire/log-list.blade.php

@@ -0,0 +1,36 @@
+<?php
+
+if (! function_exists('highlight_search_result')) {
+    /**
+     * Highlights search query results and escapes HTML.
+     * Safe to use within {!! !!} in Blade.
+     *
+     * @param  string  $text
+     * @param  string|null  $query
+     * @return string
+     */
+    function highlight_search_result(string $text, string $query = null): string
+    {
+        if (! empty($query)) {
+            if (! \Illuminate\Support\Str::endsWith($query, '/i')) {
+                $query = '/'.$query.'/i';
+            }
+
+            $text = preg_replace_callback(
+                $query,
+                function ($matches) {
+                    return '<mark>'.$matches[0].'</mark>';
+                },
+                $text
+            );
+        }
+
+        // Let's return the <mark> tags which we use for highlighting the search results
+        // while escaping the rest of the HTML entities
+        return str_replace(
+            [htmlspecialchars('<mark>'), htmlspecialchars('</mark>')],
+            ['<mark>', '</mark>'],
+            htmlspecialchars($text)
+        );
+    }
+}