fix

app/web/src/render/ed/logic/ed-global.ts

@@ -86,6 +86,12 @@ export const EDGlobal = {
   ui: {
     tree: {
       search: "",
+      searchMode: {
+        Name: true,
+        JS: false,
+        HTML: false,
+        CSS: false,
+      },
       open: {} as Record<string, string[]>,
     },
     popup: {

app/web/src/render/ed/panel/tree/search.tsx

@@ -21,7 +21,20 @@ export const EdTreeSearch = () => {
   }, [local.sref, local.cursor, p.ui.tree.search]);
 
   return (
-    <div className="flex items-stretch h-[24px] border-b">
+    <div
+      className="flex flex-col items-stretch border-b"
+      onMouseOver={() => {
+        if (local.focus) {
+          local.hover = true;
+          local.render();
+        }
+      }}
+      onMouseLeave={() => {
+        local.hover = false;
+        local.render();
+      }}
+    >
+      <div className="flex items-stretch h-[24px] ">
         <input
           name="search"
           ref={(ref) => {
@@ -50,11 +63,38 @@ export const EdTreeSearch = () => {
           }}
         />
       </div>
+      {(local.focus || local.hover || p.ui.tree.search) && (
+        <div className="p-1 bg-white text-xs border-t flex space-x-1 justify-between">
+          <div className="flex space-x-1">
+            {Object.entries(p.ui.tree.searchMode).map(([name, active]) => {
+              return (
+                <div
+                  className={cx(
+                    "px-1 cursor-pointer rounded-sm border-blue-500 border",
+                    active ? "bg-blue-500 text-white" : "hover:bg-blue-100"
+                  )}
+                  onClick={() => {
+                    (p.ui.tree.searchMode as any)[name] = !active;
+                    local.render();
+                    local.sref?.focus();
+                  }}
+                  key={name}
+                >
+                  {name}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
   );
 };
 
 export const doTreeSearch = (p: PG) => {
-  let tree: NodeModel<EdMeta>[] = [];
+  let tree: Record<string, { idx: number; node: NodeModel<EdMeta> }> = {};
+
+  if (p.ui.tree.searchMode.Name) {
     const [idxs, info] = uf.search(
       p.page.tree.map((e) => e.text),
       p.ui.tree.search
@@ -63,7 +103,7 @@ export const doTreeSearch = (p: PG) => {
       let i = 0;
       for (const idx of idxs) {
         const item = p.page.tree[idx];
-      const range = info.ranges[i++];
+        const range = info.ranges[i];
         let text = "";
 
         let cur = range.shift();
@@ -97,7 +137,9 @@ export const doTreeSearch = (p: PG) => {
             dangerouslySetInnerHTML={{ __html: text }}
           />
         );
-      tree.push({
+        tree[item.id] = {
+          idx: i,
+          node: {
             ...item,
             parent: "root",
             data: item.data
@@ -106,8 +148,48 @@ export const doTreeSearch = (p: PG) => {
                   el,
                 }
               : undefined,
-      });
+          },
+        };
+        i++;
       }
     }
-  return tree;
+  }
+
+  const search = p.ui.tree.search.toLowerCase();
+  let i = 0;
+  for (const row of p.page.tree) {
+    const item = row.data?.item;
+    if (item) {
+      const js = item.adv?.js;
+      if (js) {
+        if (p.ui.tree.searchMode.JS) {
+          if ((js as string).toLowerCase().includes(search)) {
+            console.log(js);
+            tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
+          }
+        }
+      }
+      const css = item.adv?.css;
+      if (css) {
+        if (p.ui.tree.searchMode.CSS) {
+          if (css.toString().toLowerCase().includes(search)) {
+            tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
+          }
+        }
+      }
+
+      const html = item.adv?.html;
+      if (html) {
+        if (p.ui.tree.searchMode.HTML) {
+          if (html.toString().toLowerCase().includes(search)) {
+            tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
+          }
+        }
+      }
+    }
+  }
+
+  return Object.values(tree)
+    .sort((a, b) => a.idx - b.idx)
+    .map((e) => e.node);
 };