feat: hold shift to bypass file creation on long text paste

Author: pnd280

docs/changelog.md

@@ -6,6 +6,12 @@ Consider giving a star ⭐ on [Github](https://github.com/pnd280/complexity).
 
 💖 Support the development via [Ko-fi](https://ko-fi.com/pnd280) or [Paypal](https://paypal.me/pnd280).
 
+## v0.0.3.11
+
+_Release date: 8th Oct, 2024_
+
+-   **IMPROVE**: `Ctrl (Cmd) + Shift + V` to bypass file creation on long text paste. Normal paste will still create a file.
+
 ## v0.0.3.6
 
 _Release date: 23rd Sep, 2024_

package.json

@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity.ai supercharged",
-  "version": "0.0.3.10",
+  "version": "0.0.3.11",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity.ai",
   "type": "module",

src/content-script/hooks/useQueryBoxObserver.ts

@@ -201,10 +201,25 @@ function interceptPasteEvent() {
 
   $textarea.attr("data-paste-event-intercepted", "true");
 
+  $(document).off("keydown.interceptPasteEvent keyup.interceptPasteEvent");
+
+  let isShiftKeyPressed = false;
+
+  const handleKeyDown = (e: JQuery.TriggeredEvent) => {
+    if (e.key === "Shift") isShiftKeyPressed = true;
+  };
+
+  const handleKeyUp = (e: JQuery.TriggeredEvent) => {
+    if (e.key === "Shift") isShiftKeyPressed = false;
+  };
+
+  $(document).on("keydown.interceptPasteEvent", handleKeyDown);
+  $(document).on("keyup.interceptPasteEvent", handleKeyUp);
+
   $textarea.on("paste", (e) => {
     const clipboardEvent = e.originalEvent as ClipboardEvent;
 
-    if (clipboardEvent.clipboardData) {
+    if (clipboardEvent.clipboardData && isShiftKeyPressed) {
       if (clipboardEvent.clipboardData.types.includes("text/plain")) {
         e.stopImmediatePropagation();
       }

src/content-script/index.ts

@@ -42,7 +42,6 @@ function initUiUxTweaks() {
   UiTweaks.correctColorScheme();
 
   UxTweaks.restoreLogoContextMenu();
-  UxTweaks.removeConflictedMobileOverlay();
 
   const observe = (url: string) => {
     const location = whereAmI(url);

src/cplx-user-settings/GeneralSettings.ts renamed to src/cplx-user-settings/GeneralSettings.tsx

@@ -1,9 +1,12 @@
+import { ReactNode } from "react";
+
 import { CplxUserSettings } from "@/cplx-user-settings/types/cplx-user-settings.types";
+import KeyCombo from "@/shared/components/KeyCombo";
 
 export type PopupSetting<T> = {
   id: string;
   label: string;
-  description?: string;
+  description?: ReactNode;
   settingKey?: T;
   versionRelease?: string;
   experimental?: boolean;
@@ -63,7 +66,7 @@ export default class GeneralSettings {
       id: "custom-markdown-block",
       label: "Custom markdown block",
       description:
-        "Precisely display the language of your code and enable syntax highlighting for natively unsupported languages. e.g. `gdscript`, `blade`, etc.",
+        "Precisely display the language of your code and enable syntax highlighting for natively unsupported languages. e.g. `vue`, `gdscript`, `blade`, etc.",
       settingKey: "customMarkdownBlock",
     },
     {
@@ -93,7 +96,15 @@ export default class GeneralSettings {
       id: "no-file-creation-on-paste",
       label: "No file creation on long text paste",
       settingKey: "noFileCreationOnPaste",
-      description: "Pasting long text no longer creates a file.",
+      description: (
+        <span>
+          <KeyCombo
+            className="tw-inline"
+            keys={["Control (⌘)", "Shift", "V"]}
+          />{" "}
+          to paste long text without creating a file.
+        </span>
+      ),
       versionRelease: "0.0.1.0",
     },
     {

src/cplx-user-settings/components/GeneralSettings.tsx

@@ -173,7 +173,7 @@ function SettingGroup<
               key={id}
               id={id}
               className={cn({
-                "tw-items-start": !!description,
+                "tw-items-start": description != null,
               })}
               textLabel={
                 <div className="tw-flex tw-flex-col tw-gap-1">
@@ -194,7 +194,7 @@ function SettingGroup<
                     </span>
                     <span>{label}</span>
                   </div>
-                  {description && (
+                  {description != null && (
                     <div className="tw-ml-2 tw-text-xs tw-text-muted-foreground">
                       {description}
                     </div>

src/shared/components/KeyCombo.tsx

@@ -1,6 +1,11 @@
-export default function KeyCombo({ keys }: { keys: string[] }) {
+import { HTMLProps } from "react";
+
+export default function KeyCombo({
+  keys,
+  ...props
+}: HTMLProps<HTMLSpanElement> & { keys: string[] }) {
   return (
-    <span className="tw-flex tw-gap-1">
+    <span className={cn("tw-flex tw-gap-1")} {...props}>
       {keys.map((key) => (
         <span
           key={key}

src/utils/UxTweaks.ts

@@ -1,5 +1,3 @@
-import { throttle } from "lodash-es";
-
 import CplxUserSettings from "@/cplx-user-settings/CplxUserSettings";
 import UiUtils from "@/utils/UiUtils";
 import { whereAmI } from "@/utils/utils";
@@ -65,21 +63,4 @@ export default class UxTweaks {
       e.stopPropagation();
     });
   }
-
-  static removeConflictedMobileOverlay() {
-    const handler = throttle(function () {
-      if (window.innerWidth < 768) {
-        const $navs = $(".h-mobileNavHeight");
-
-        if ($navs.length < 2) return;
-
-        $navs.first().remove();
-      }
-    }, 200);
-
-    requestIdleCallback(() => {
-      handler();
-      $(window).on("resize", handler);
-    });
-  }
 }