feat: toggle query text format

Author: pnd280

src/components/ThreadAnchor.tsx

@@ -164,7 +164,8 @@ const useThreadAnchorObserver = () => {
 
     setWrapperPos({
       top: $messageContainer.offset()?.top || 0,
-      left: $messageContainer.width()! + ($messageContainer.offset()?.left || 0),
+      left:
+        $messageContainer.width()! + ($messageContainer.offset()?.left || 0),
     });
 
     setAnchorsProps([]);

src/components/ThreadQueryFormatSwitch.tsx

@@ -0,0 +1,124 @@
+import {
+  Fragment,
+  useEffect,
+  useState,
+} from 'react';
+import ReactDOM from 'react-dom';
+
+import $ from 'jquery';
+import { Text } from 'lucide-react';
+import { FaMarkdown } from 'react-icons/fa';
+import { useImmer } from 'use-immer';
+
+import { ui } from '@/utils/ui';
+import { whereAmI } from '@/utils/utils';
+
+import useElementObserver from './hooks/useElementObserver';
+import TooltipWrapper from './TooltipWrapper';
+
+export default function ThreadQueryFormatSwitch() {
+  const [containers, setContainers] = useState<
+    {
+      messageBlock: Element;
+      query: Element;
+    }[]
+  >([]);
+
+  const [isMarkdown, setIsMarkdown] = useImmer<boolean[]>([]);
+
+  useEffect(() => {
+    containers.forEach((container, index) => {
+      if ($(container.query).find('#markdown-query-wrapper.tw-hidden').length) {
+        setIsMarkdown((draft) => {
+          draft[index] = false;
+        });
+      } else {
+        setIsMarkdown((draft) => {
+          draft[index] = true;
+        });
+      }
+    });
+  }, [containers, setIsMarkdown]);
+
+  useElementObserver({
+    selector: () =>
+      ui.getMessageBlocks().map(({ $query, $messageBlock }) => ({
+        element: $query[0],
+        args: { $messageBlock },
+      })),
+    callback: ({ element, args }) => {
+      if (whereAmI() !== 'thread') return setContainers([]);
+
+      $(element).addClass('tw-relative');
+
+      setContainers((prev) => [
+        ...prev,
+        {
+          query: element,
+          messageBlock: args.$messageBlock[0],
+        },
+      ]);
+    },
+    observedIdentifier: 'thread-query-format-switch',
+  });
+
+  useElementObserver({
+    selector: () =>
+      ui
+        .getMessageBlocks()
+        .map(
+          ({ $messageBlock }) =>
+            $messageBlock.find('.whitespace-pre-line.break-words')[0]
+        ),
+    callback: ({ element }) => {
+      if (whereAmI() !== 'thread') return;
+
+      const isMarkdown =
+        $(element).parent().find('#markdown-query-wrapper:not(.tw-hidden)')
+          .length > 0 || !$(element).parent().find('#markdown-query-wrapper').length;
+
+      $(element).toggleClass('tw-hidden', isMarkdown);
+    },
+    observedIdentifier: 'append-tw-block-to-plain-text-block',
+  });
+
+  return containers.map((container, index) => (
+    <Fragment key={index}>
+      {ReactDOM.createPortal(
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setIsMarkdown((draft) => {
+              $(container.query)
+                .find('.whitespace-pre-line.break-words')
+                .toggleClass('tw-hidden', !draft[index]);
+              $(container.query)
+                .find('#markdown-query-wrapper')
+                .toggleClass('tw-hidden', draft[index]);
+              draft[index] = !draft[index];
+            });
+          }}
+          className="tw-absolute tw-right-0 tw-top-0 tw-w-max tw-h-max tw-bg-secondary tw-text-secondary-foreground tw-p-2 tw-rounded-md tw-cursor-pointer tw-border tw-border-border tw-shadow-lg tw-opacity-10 hover:tw-opacity-100 tw-transition-all tw-animate-in tw-fade-in active:tw-scale-95"
+        >
+          <TooltipWrapper
+            content={
+              isMarkdown[index] ? 'Switch to Markdown' : 'Switch to Plain Text'
+            }
+            contentOptions={{
+              sideOffset: 15,
+            }}
+            delayDuration={0}
+          >
+            {isMarkdown[index] ? (
+              <Text className="tw-w-4 tw-h-4 tw-text-accent-foreground" />
+            ) : (
+              <FaMarkdown className="tw-w-4 tw-h-4 tw-text-accent-foreground" />
+            )}
+          </TooltipWrapper>
+        </div>,
+        container.query
+      )}
+    </Fragment>
+  ));
+}

src/components/hooks/useElementObserver.ts

@@ -5,9 +5,7 @@ import {
 
 import observer, { OnElementExistOptions } from '@/utils/observer';
 
-type useElementObserverProps = Omit<OnElementExistOptions<any>, 'callback'> & {
-  callback?: ({ element }: { element: Element }) => void;
-};
+type useElementObserverProps = OnElementExistOptions<any>;
 
 export default function useElementObserver({
   selector,
@@ -20,9 +18,9 @@ export default function useElementObserver({
   useEffect(() => {
     const myObserver = observer.onElementExist({
       selector,
-      callback: ({ element }) => {
-        callback?.({ element });
-        setContainer(element);
+      callback: (args) => {
+        callback?.(args);
+        setContainer(args.element);
       },
       observedIdentifier,
       recurring,

src/content-script/Root.tsx

@@ -6,6 +6,7 @@ import useElementObserver from '@/components/hooks/useElementObserver';
 import MainPage from '@/components/MainPage';
 import QueryBox from '@/components/QueryBox';
 import ThreadAnchor from '@/components/ThreadAnchor';
+import ThreadQueryFormatSwitch from '@/components/ThreadQueryFormatSwitch';
 import { Toaster } from '@/components/ui/toaster';
 import { useToast } from '@/components/ui/use-toast';
 import {
@@ -32,6 +33,7 @@ export default function Root() {
         <QueryBox />
         <Commander />
         {popupSettingsStore.getState().qolTweaks.threadTOC && <ThreadAnchor />}
+        {popupSettingsStore.getState().visualTweaks.threadQueryMarkdown && <ThreadQueryFormatSwitch />}
         <Toaster />
         <IncompatibleInterfaceLanguageNotice />
         <ReactQueryDevtools initialIsOpen={false} />

src/content-script/base.css

@@ -218,13 +218,13 @@ body[data-scroll-locked].bg-transparent {
   display: none;
 }
 
-body:has(#markdown-query-wrapper) {
+/* body:has(#markdown-query-wrapper) {
 
   & h1.whitespace-pre-line.break-words,
   & div.whitespace-pre-line.break-words {
     display: none;
   }
-}
+} */
 
 html.dark #markdown-query-wrapper {
   & pre code {

src/content-script/ui-tweaks.ts

@@ -283,7 +283,6 @@ function alternateMessageQuery({
   $query.append($newQueryWrapper);
 
   $query.off('dblclick').on('dblclick', () => {
-    if ($query.find('textarea').length) return;
     const $buttonBar = $messageBlock.find(
       '.mt-sm.flex.items-center.justify-between'
     );