reimplement the onClick event with difrent method to prevent not firi…

…ng event in some cases

src/class/DomManipulator.ts

@@ -16,8 +16,26 @@ class DomManipulator {
   url: Url = { path: "", params: {} };
   eventsListener: Record<string, ((e: Event) => void)[]> = {};
   observerCalls: MutationCallback[] = [];
+  clickMap: Record<string, Function[]> = {};
 
   constructor(private readonly main: HTMLElement, private readonly storage: LocalStorage) {
+    document.addEventListener(
+      "click",
+      (e) => {
+        for (const selector in this.clickMap) {
+          const el = document.querySelector(selector);
+          if (el) {
+            const { top, left, width, height } = el.getBoundingClientRect();
+            const { pageX, pageY } = e;
+            if (pageX >= left && pageX <= left + width && pageY >= top && pageY <= top + height) {
+              this.clickMap[selector].forEach((callback) => callback());
+            }
+          }
+        }
+      },
+      { capture: true }
+    );
+
     const globalObserver = new MutationObserver((mutations) => {
       this.observerCalls.forEach((callback) => {
         callback(mutations, globalObserver);
@@ -96,6 +114,10 @@ class DomManipulator {
       }
     });
   }
+  public async onClick(selector: string, callback: Function) {
+    if (!this.clickMap[selector]) this.clickMap[selector] = [];
+    this.clickMap[selector].push(callback);
+  }
   static async getElement<T>(selector: string) {
     while (document.querySelector(selector) === null) {
       await new Promise((resolve) => requestAnimationFrame(resolve));

src/class/index.ts

@@ -11,9 +11,11 @@ class ChatGuard {
   root = selectors[window.location.hostname];
   selector: Selector["selector"]["desktop"];
   state = writable({ value: "", encrypted: "", submit: false, loading: false });
+  isTouch = false;
 
   constructor() {
     const type = getDeviceType();
+    if (type === "mobile") this.isTouch = true;
     const selector = selectors[window.location.hostname].selector[type];
     if (selector) this.selector = selector;
     else this.selector = selectors[window.location.hostname].selector.desktop;

src/content/index.ts

@@ -18,8 +18,15 @@ import { get } from "svelte/store";
     new Status({ target, props: { cipher, app, dom, name: "status" } });
   });
 
+  dom.onClick(app.selector.submitButton, () => {
+    const state = get(app.state);
+    if (!state.encrypted) return;
+    DomManipulator.typeTo(app.selector.textField, state.encrypted);
+    app.state.update((prev) => ({ ...prev, value: "", encrypted: "", submit: true }));
+  });
+
   dom.on(app.selector.textFieldWrapper, "input", async (event: Event) => {
-    app.state.update((state) => ({ ...state, value: (event.target as HTMLElement).innerText }));
+    app.state.update((state) => ({ ...state, value: (event.target as HTMLElement).textContent || "" }));
     const state = get(app.state);
 
     if (state.value.startsWith(config.ENCRYPT_PREFIX) && !state.submit) {
@@ -33,20 +40,15 @@ import { get } from "svelte/store";
     if (encrypted) app.state.update((prev) => ({ ...prev, encrypted }));
   });
   dom.on(app.selector.textField, "keydown", (event) => {
-    app.state.update((prev) => ({ ...prev, value: (event.target as HTMLElement).innerText }));
+    app.state.update((prev) => ({ ...prev, value: (event.target as HTMLElement).textContent || "" }));
     const state = get(app.state);
     const e = event as KeyboardEvent;
-    if (e.key === "Enter" && state.value && !e.shiftKey && e.detail !== 11 && state.encrypted) {
+
+    if (e.key === "Enter" && state.value && !e.shiftKey && e.detail !== 11 && state.encrypted && !app.isTouch) {
       DomManipulator.typeTo(app.selector.textField, state.encrypted);
       app.state.update((prev) => ({ ...prev, value: "", encrypted: "", submit: true }));
     }
   });
-  dom.on(app.selector.submitButton, "click", async (e) => {
-    console.log("click");
-    const state = get(app.state);
-    DomManipulator.typeTo(app.selector.textField, state.encrypted);
-    app.state.update((prev) => ({ ...prev, value: "", encrypted: "", submit: true }));
-  });
 
   dom.observerGlobal(() => {
     dom.urlObserver(() => {