Highlight search terms

Author: Timothy Johnson

src/nodes/Block.svelte

@@ -1,5 +1,6 @@
 <script>
   import Collapse from './Collapse.svelte'
+  import SearchTerm from './SearchTerm.svelte'
 
   export let style
   export let hover
@@ -31,12 +32,24 @@
   {style}
   on:dblclick={e => (collapsed = !collapsed)}>
   <Collapse {selected} bind:collapsed />
-  {#if source}{source}{:else}&lbrace;#{tagName}&rbrace;{/if}
-  {#if collapsed}&hellip;&lbrace;/{tagName}&rbrace;{/if}
+  {#if source}
+    {source}
+  {:else}
+    &lbrace;#
+    <SearchTerm text={tagName} />
+    &rbrace;
+  {/if}
+  {#if collapsed}
+    &hellip;&lbrace;/
+    <SearchTerm text={tagName} />
+    &rbrace;
+  {/if}
 </div>
 {#if !collapsed}
   <slot />
   <div class="tag-close tag-name" class:hover {style}>
-    &lbrace;/{tagName}&rbrace;
+    &lbrace;/
+    <SearchTerm text={tagName} />
+    &rbrace;
   </div>
 {/if}

src/nodes/Element.svelte

@@ -1,5 +1,6 @@
 <script>
   import Collapse from './Collapse.svelte'
+  import SearchTerm from './SearchTerm.svelte'
 
   export let style
   export let hasChildren
@@ -72,17 +73,20 @@
   <span class:flash>
     <span class="attr-name">
       {#if isBound}bind:{/if}
-      {key}
+      <SearchTerm text={key} />
     </span>
     =
-    <span class="attr-value">{value}</span>
+    <span class="attr-value">
+      <SearchTerm text={value} />
+    </span>
   </span>
 {/each}
 
 {#each listeners as { event, handler, modifiers }}
   &nbsp;
   <span class="attr-name" data-tooltip={handler}>
-    on:{event}
+    on:
+    <SearchTerm text={event} />
     {#if modifiers}|{modifiers.join('|')}{/if}
   </span>
 {/each}
@@ -96,27 +100,35 @@
     on:dblclick={e => (collapsed = !collapsed)}>
     <Collapse {selected} bind:collapsed />
     &lt;
-    <span class="tag-name">{tagName}</span>
+    <span class="tag-name">
+      <SearchTerm text={tagName} />
+    </span>
     <!--use attributes-->
     &gt;
     {#if collapsed}
       &hellip;&lt;/
-      <span class="tag-name">{tagName}</span>
+      <span class="tag-name">
+        <SearchTerm text={tagName} />
+      </span>
       &gt;
     {/if}
   </div>
   {#if !collapsed}
     <slot />
     <div class:hover {style}>
       &lt;/
-      <span class="tag-name">{tagName}</span>
+      <span class="tag-name">
+        <SearchTerm text={tagName} />
+      </span>
       &gt;
     </div>
   {/if}
 {:else}
   <div class:hover class:selected {style}>
     &lt;
-    <span class="tag-name">{tagName}</span>
+    <span class="tag-name">
+      <SearchTerm text={tagName} />
+    </span>
     <!--use attributes-->
     &nbsp;/&gt;
   </div>

src/nodes/SearchTerm.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { searchValue } from '../store.js'
+
+  export let text
+
+  $: i = text.indexOf($searchValue)
+  $: pre = text.substring(0, i)
+  $: highlight = text.substring(i, i + $searchValue.length)
+  $: post = text.substring(i + $searchValue.length)
+</script>
+
+<style>
+  span {
+    background-color: yellow !important;
+    color: black !important;
+  }
+</style>
+
+{#if i == -1 || $searchValue.length < 2}
+  {text}
+{:else}
+  {pre}
+  <span>{highlight}</span>
+  {post}
+{/if}

src/nodes/Slot.svelte

@@ -1,5 +1,6 @@
 <script>
   import Collapse from './Collapse.svelte'
+  import SearchTerm from './SearchTerm.svelte'
 
   export let style
   export let hover
@@ -31,10 +32,20 @@
   {style}
   on:dblclick={e => (collapsed = !collapsed)}>
   <Collapse {selected} bind:collapsed />
-  &lt;{tagName}&gt;
-  {#if collapsed}&hellip;&lt;/{tagName}&gt;{/if}
+  &lt;
+  <SearchTerm text={tagName} />
+  &gt;
+  {#if collapsed}
+    &hellip;&lt;/
+    <SearchTerm text={tagName} />
+    &gt;
+  {/if}
 </div>
 {#if !collapsed}
   <slot />
-  <div class="tag-close tag-name" class:hover {style}>&lt;/{tagName}&gt;</div>
+  <div class="tag-close tag-name" class:hover {style}>
+    &lt;/
+    <SearchTerm text={tagName} />
+    &gt;
+  </div>
 {/if}

src/nodes/Text.svelte

@@ -1,6 +1,10 @@
 <script>
+  import SearchTerm from './SearchTerm.svelte'
+
   export let style
   export let nodeValue
 </script>
 
-<div {style}>{nodeValue}</div>
+<div {style}>
+  <SearchTerm text={nodeValue} />
+</div>

src/toolbar/Search.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { rootNodes, selectedNode } from '../store.js'
+  import { rootNodes, selectedNode, searchValue } from '../store.js'
   import Button from './Button.svelte'
 
   function next() {
@@ -15,23 +15,21 @@
   function search(nodeList = $rootNodes) {
     for (const node of nodeList) {
       if (
-        node.tagName.includes(value) ||
-        (node.detail && JSON.stringify(node.detail).includes(value))
+        node.tagName.includes($searchValue) ||
+        (node.detail && JSON.stringify(node.detail).includes($searchValue))
       )
         results.push(node)
       search(node.children)
     }
   }
 
-  let value
   let results
   let resultsPosition
-
   $: {
-    value
+    $searchValue
     results = []
     resultsPosition = -1
-    if (value && value.length > 1) search()
+    if ($searchValue.length > 1) search()
   }
 </script>
 
@@ -95,7 +93,7 @@
       fill-rule="evenodd"
       d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2A6 6 0 1 0 6 0a6 6 0 0 0 0 12z" />
   </svg>
-  <input placeholder="Search" bind:value />
+  <input placeholder="Search" bind:value={$searchValue} />
   {#if resultsPosition > -1}
     {resultsPosition + 1}&nbsp;of&nbsp;{results.length}&nbsp;
   {/if}