create gists

assets/js/app.js

@@ -21,6 +21,55 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
+import CodeBlockHook from "./hooks/code_block_hook";
+import {
+  DropdownAnimation,
+  SearchableDropdown,
+} from "./hooks/searchable_dropdown";
+
+let Hooks = {
+  CodeBlockHook,
+  SearchableDropdown,
+  DropdownAnimation,
+};
+
+Hooks.ClickOutside = {
+  mounted() {
+    this.handleClick = (e) => {
+      if (!this.el.contains(e.target)) {
+        this.pushEventTo(this.el, "close_dropdown", {});
+      }
+    };
+    document.addEventListener("click", this.handleClick);
+  },
+  destroyed() {
+    document.removeEventListener("click", this.handleClick);
+  },
+};
+
+Hooks.ClientSearch = {
+  mounted() {
+    this.options = JSON.parse(this.el.dataset.options);
+    this.searchInput = this.el.querySelector("input");
+    this.optionsContainer = this.el.querySelector(
+      "#dropdown-options-container",
+    );
+
+    this.searchInput.addEventListener("input", (e) => {
+      const query = e.target.value.toLowerCase();
+      const options = this.el.querySelectorAll(".dropdown-option");
+
+      options.forEach((option) => {
+        const value = option.dataset.value.toLowerCase();
+        if (value.includes(query)) {
+          option.style.display = "";
+        } else {
+          option.style.display = "none";
+        }
+      });
+    });
+  },
+};
 
 window.addEventListener("phx:copy", (event) => {
   let button = event.detail.dispatcher;
@@ -40,6 +89,7 @@ let csrfToken = document
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
+  hooks: Hooks,
 });
 
 // Show progress bar on live navigation and form submits