feat: add search in json modal

package.json

@@ -23,7 +23,6 @@
     "codemirror": "^6.0.1",
     "fuse.js": "^6.6.2",
     "i18next": "^23.1.0",
-    "renderjson": "^1.4.0",
     "solid-codemirror": "^2.3.0",
     "solid-command-palette": "github:on3iro/solid-command-palette#update-dependencies",
     "solid-contextmenu": "^0.0.2",

src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx

@@ -1,10 +1,9 @@
 import { Row } from "interfaces";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect } from "solid-js";
 import { TabulatorFull as Tabulator } from "tabulator-tables";
-import renderjson from "renderjson";
+import { debounce } from "utils/utils";
 
 export const ResultsTable = (props: { rows: Row[] }) => {
-  const [modalData, setModalData] = createSignal("");
   createEffect(() => {
     let columns: { title: string; field: string; resizeable: boolean }[] = [];
     if (props.rows.length) {
@@ -34,19 +33,26 @@ export const ResultsTable = (props: { rows: Row[] }) => {
       rowContextMenu: [
         {
           label: "Show row in JSON",
-          action: function(e, column) {
-            renderjson.set_show_to_level(10);
+          action: function(_e, row) {
             // @ts-ignore
-            setModalData(column._row.data);
+            const data = { ...row._row.data };
+            for (const key in data) {
+              if (data[key].startsWith('{"')) {
+                data[key] = JSON.parse(data[key]);
+              }
+            }
+
+            const div = document.getElementById("json-data");
+            div!.innerHTML = JSON.stringify(data, null, 4);
             // @ts-ignore
             document.getElementById("my_modal_1").showModal();
           },
         },
         {
           label: "Copy row to clipboard",
-          action: function(e, column) {
+          action: function(_e, row) {
             // @ts-ignore
-            navigator.clipboard.writeText(JSON.stringify(column._row.data));
+            navigator.clipboard.writeText(JSON.stringify(row._row.data));
           },
         },
         {
@@ -67,12 +73,31 @@ export const ResultsTable = (props: { rows: Row[] }) => {
     });
   });
 
+  const search = (input: string) => {
+    if (input === "") return;
+    const pre = document.getElementById("json-data");
+    const special = /[\\[{().+*?|^$]/g;
+    if (special.test(input)) input = input.replace(special, "\\$&");
+    const regExp = new RegExp(input, "gi");
+    const html = pre?.textContent?.replace(regExp, `<mark>$&</mark>`);
+    pre!.innerHTML = html + "";
+  };
+
   return (
     <>
       <dialog id="my_modal_1" class="modal">
         <div class="modal-box">
-          <h3 class="font-bold text-lg">Hello!</h3>
-          <div>{renderjson(modalData())}</div>
+          <div class="flex items-center mb-6">
+            <input
+              type="text"
+              placeholder="Search"
+              onkeydown={debounce((e: any) => search(e.target.value), 200)}
+              class="input input-bordered input-sm w-full max-w-xs"
+            />
+          </div>
+          <div>
+            <pre id="json-data"></pre>
+          </div>
         </div>
         <form method="dialog" class="modal-backdrop">
           <button>close</button>

src/index.css

@@ -180,34 +180,3 @@ dialog {
   width: 6rem;
 }
 
-.renderjson a {
-  text-decoration: none;
-}
-.renderjson .disclosure {
-  color: primary;
-  font-size: 150%;
-}
-.renderjson .syntax {
-  color: grey;
-}
-.renderjson .string {
-  @apply text-primary text-lg;
-}
-.renderjson .number {
-  color: cyan;
-}
-.renderjson .boolean {
-  color: plum;
-}
-.renderjson .key {
-  @apply text-accent text-lg;
-}
-.renderjson .keyword {
-  color: lightgoldenrodyellow;
-}
-.renderjson .object.syntax {
-  color: lightseagreen;
-}
-.renderjson .array.syntax {
-  color: lightsalmon;
-}

src/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-declare module 'renderjson';