feat: search and replace in table mode (#415)

josdejong · Mar 13, 2024 · 0860f3e · 0860f3e
1 parent ef6ec85
commit 0860f3e
Show file tree

Hide file tree

Showing 19 changed files with 745 additions and 428 deletions.
diff --git a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
@@ -98,6 +98,33 @@ exports[`JSONEditor > render table mode 1`] = `
                
                
               
+            </svg>
+            <!--&lt;Svg&gt;-->
+            <!--&lt;Icon&gt;-->
+             
+          </button>
+          
+          <button
+            class="jse-button jse-search s-kJert7_5e4tU"
+            title="Search (Ctrl+F)"
+            type="button"
+          >
+            <svg
+              aria-label=""
+              class="fa-icon s-T5YyQewRBd7n"
+              height="16"
+              role="presentation"
+              style=""
+              version="1.1"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
+              />
+               
+               
+              
             </svg>
             <!--&lt;Svg&gt;-->
             <!--&lt;Icon&gt;-->
@@ -211,6 +238,13 @@ exports[`JSONEditor > render table mode 1`] = `
           />
         </label>
          
+        <div
+          class="jse-search-box-container s-kw5t6hk3mCrZ"
+        >
+          
+          <!--&lt;SearchBox&gt;-->
+        </div>
+         
         <div
           class="jse-contents s-kw5t6hk3mCrZ"
         >

diff --git a/...onents/modes/treemode/menu/SearchBox.scss → src/lib/components/controls/SearchBox.scss b/...onents/modes/treemode/menu/SearchBox.scss → src/lib/components/controls/SearchBox.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles';
+@import '../../styles';
 
 $search-size: 28px;
 $button-width: 20px;
@@ -78,15 +78,13 @@ $input-min-width: 50px;
         display: flex;
         align-items: center;
         position: relative;
-        padding-left: $padding-section-left;
 
         .jse-search-icon {
           color: inherit;
           cursor: inherit;
           background: inherit;
-          position: absolute;
-          top: $padding-half;
-          left: $padding-half;
+          width: $padding-section-left;
+          text-align: center;
         }
 
         label.jse-search-input-label {