♻️ refactor: Refactor inject with react hook (#489)

* ♻️ refactor: Refactor inject with react hook * ♻️ refactor: Refactor inject with react hook * ♻️ refactor: Refactor inject
lobehub · Dec 12, 2023 · c376aa6 · c376aa6
1 parent d864e39
commit c376aa6
Show file tree

Hide file tree

Showing 40 changed files with 800 additions and 691 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -3,5 +3,4 @@
 
 git add .
 npx --no-install lint-staged
-npm run test
-git add .
+git add .
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/package.json b/package.json
@@ -89,14 +89,16 @@
     "react-rnd": "^10",
     "react-tag-input": "^6",
     "semver": "^7",
-    "shikiji": "^0.7",
+    "shikiji": "^0.8",
     "swr": "^2",
     "zustand": "^4.4.1",
     "zustand-utils": "^1.3.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
     "@lobehub/lint": "latest",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^14",
     "@types/lodash-es": "^4",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -105,7 +107,7 @@
     "@types/react-tag-input": "^6",
     "@types/semver": "^7",
     "@vitejs/plugin-react-swc": "^3",
-    "@vitest/coverage-v8": "latest",
+    "@vitest/coverage-v8": "^1",
     "commitlint": "^18",
     "dotenv": "^16",
     "eslint": "^8",

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -2,6 +2,7 @@ import { LayoutHeader, LayoutMain, LayoutSidebar } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect } from 'react';
 
+import PromptFormator from '@/features/PromptFormator';
 import '@/locales/config';
 import ImageInfo from '@/modules/ImageInfo/page';
 import PromptHighlight from '@/modules/PromptHighlight/page';
@@ -50,6 +51,7 @@ const Index = memo(() => {
           </LayoutSidebar>
         )}
         <Content className={cx(!setting.enableSidebar && styles.quicksettings)} />
+        <PromptFormator />
         <Share />
         {setting?.enableExtraNetworkSidebar && (
           <LayoutSidebar

diff --git a/src/components/Giscus/index.tsx b/src/components/Giscus/index.tsx
@@ -7,27 +7,33 @@ import {
   type ModalProps,
 } from '@lobehub/ui';
 import { Button } from 'antd';
-import { useTheme } from 'antd-style';
+import { useTheme, useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { Github } from 'lucide-react';
+import { Github, Heart } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import { homepage } from '@/../package.json';
 import VersionTag from '@/components/VersionTag';
+import {
+  DISCORD_URL,
+  GISCUS_REPO_ID,
+  GITHUB_REPO_URL,
+  REPO_NAME,
+  SPONSOR_IMG,
+  SPONSOR_URL,
+} from '@/const/url';
 import { selectors, useAppStore } from '@/store';
 
 export interface GiscusProps {
   onCancel?: ModalProps['onCancel'];
   open?: ModalProps['open'];
 }
 
-const repoName = homepage.replace('https://github.com/', '') as `${string}/${string}`;
-
 const Giscus = memo<GiscusProps>(({ open, onCancel }) => {
   const setting = useAppStore(selectors.currentSetting, isEqual);
   const theme = useTheme();
+  const { isDarkMode } = useThemeMode();
   const { t } = useTranslation();
   return (
     <Modal
@@ -44,24 +50,39 @@ const Giscus = memo<GiscusProps>(({ open, onCancel }) => {
       <Flexbox gap={32}>
         <Center
           gap={16}
-          horizontal
           style={{
             background: theme.colorBgLayout,
             border: `1px solid ${theme.colorBorderSecondary}`,
             borderRadius: theme.borderRadiusLG,
             padding: '16px 0',
           }}
         >
-          <a href={'https://discord.gg/AYFPHvv2jT'} rel="noreferrer" target="_blank">
-            <Button icon={<Icon icon={DiscordIcon} />} size={'large'}>
-              Join Discover
-            </Button>
-          </a>
-          <a href={homepage} rel="noreferrer" target="_blank">
-            <GradientButton icon={<Icon icon={Github} />}>LobeTheme Github</GradientButton>
+          <Flexbox gap={16} horizontal>
+            <a href={DISCORD_URL} rel="noreferrer" target="_blank">
+              <Button icon={<Icon icon={DiscordIcon} />} size={'large'}>
+                Join Discover
+              </Button>
+            </a>
+            <a href={GITHUB_REPO_URL} rel="noreferrer" target="_blank">
+              <Button icon={<Icon icon={Github} />} size={'large'}>
+                Github
+              </Button>
+            </a>
+            <a href={SPONSOR_URL} rel="noreferrer" target="_blank">
+              <GradientButton icon={<Icon icon={Heart} />}>Sponsor</GradientButton>
+            </a>
+          </Flexbox>
+          <a href={SPONSOR_URL} rel="noreferrer" target="_blank">
+            <img alt={'sponsor'} src={`${SPONSOR_IMG}${isDarkMode ? '?themeMode=dark' : ''}`} />
           </a>
         </Center>
-        <G lang={setting.i18n} mapping="number" repo={repoName} repoId="R_kgDOJCPcNg" term="53" />
+        <G
+          lang={setting.i18n}
+          mapping="number"
+          repo={REPO_NAME}
+          repoId={GISCUS_REPO_ID}
+          term="53"
+        />
       </Flexbox>
     </Modal>
   );

diff --git a/src/components/VersionTag/index.tsx b/src/components/VersionTag/index.tsx
@@ -2,7 +2,7 @@ import { Tag, TagProps } from 'antd';
 import { memo } from 'react';
 import semver from 'semver';
 
-import { homepage } from '@/../package.json';
+import { GITHUB_REPO_URL } from '@/const/url';
 import { useAppStore } from '@/store';
 
 const VersionTag = memo<TagProps>((props) => {
@@ -14,7 +14,7 @@ const VersionTag = memo<TagProps>((props) => {
   const isLatest = semver.gte(version, latestVersion);
 
   return (
-    <a href={homepage} rel="noreferrer" target="_blank">
+    <a href={GITHUB_REPO_URL} rel="noreferrer" target="_blank">
       {isLatest ? (
         <Tag color="success" {...props}>
           v{version}

diff --git a/src/const/url.ts b/src/const/url.ts
@@ -0,0 +1,11 @@
+import pkg from '@/../package.json';
+
+export const DISCORD_URL = 'https://discord.gg/AYFPHvv2jT';
+export const SPONSOR_URL = 'https://opencollective.com/lobehub';
+export const SPONSOR_IMG = 'https://readme-wizard.lobehub.com/api/sponsor';
+export const GISCUS_REPO_ID = 'R_kgDOJCPcNg';
+export const GITHUB_REPO_URL = pkg.homepage;
+export const REPO_NAME = GITHUB_REPO_URL.replace(
+  'https://github.com/',
+  '',
+) as `${string}/${string}`;
diff --git a/src/features/Content/index.tsx b/src/features/Content/index.tsx
@@ -1,9 +1,9 @@
 import { useResponsive } from 'antd-style';
-import { consola } from 'consola';
 import isEqual from 'fast-deep-equal';
-import { memo, useEffect, useRef } from 'react';
+import { memo, useRef } from 'react';
 
-import formatPrompt from '@/scripts/formatPrompt';
+import { removePromptScrollHide } from '@/features/Content/removePromptScrollHide';
+import { useInject } from '@/hooks/useInject';
 import { selectors, useAppStore } from '@/store';
 import { type DivProps } from '@/types';
 
@@ -14,60 +14,32 @@ const Content = memo<DivProps>(({ className, ...props }) => {
   const mainReference = useRef<HTMLDivElement>(null);
   const { mobile } = useResponsive();
   const setting = useAppStore(selectors.currentSetting, isEqual);
-
   const { cx, styles } = useStyles({
     isPromptResizable: setting.promptTextareaType === 'resizable',
     layoutSplitPreview: setting.layoutSplitPreview,
   });
 
-  useEffect(() => {
-    try {
-      // Content
-      const main = gradioApp().querySelector('.app');
-      if (main) {
-        mainReference.current?.append(main);
-      }
-
-      // remove prompt scroll-hide
-      const textares = gradioApp().querySelectorAll(
-        `[id$="_prompt_container"] textarea`,
-      ) as NodeListOf<HTMLTextAreaElement>;
-      if (textares) {
-        for (const textarea of textares) {
-          textarea.classList.remove('scroll-hide');
-          textarea.style.height = 'auto';
-        }
-      }
-
-      // textarea
-      const interrogate = gradioApp().querySelector(
-        '#img2img_toprow .interrogate-col',
-      ) as HTMLDivElement;
-      const actions = gradioApp().querySelector('#img2img_actions_column') as HTMLDivElement;
-      if (interrogate && actions) {
-        actions.append(interrogate);
-      }
-
-      formatPrompt();
-      consola.success('🤯 [layout] inject - Content');
-    } catch (error) {
-      consola.error('🤯 [layout] inject - Content', error);
-    }
-  }, []);
+  useInject(mainReference, '.app', {
+    debug: '[layout] inject - Content',
+    onSuccess: () => {
+      removePromptScrollHide();
+    },
+  });
 
   return (
     <>
       <div
         className={cx(
           styles.container,
           styles.textares,
-          styles.text2img,
+          styles.txt2img,
           setting.layoutSplitPreview && styles.splitView,
           className,
         )}
         ref={mainReference}
         {...props}
       />
+
       {setting.layoutSplitPreview && mobile === false && <SplitView />}
     </>
   );

diff --git a/src/features/Content/removePromptScrollHide.ts b/src/features/Content/removePromptScrollHide.ts
@@ -0,0 +1,10 @@
+export const removePromptScrollHide = () => {
+  const textares = gradioApp().querySelectorAll(
+    `[id$="_prompt_container"] textarea`,
+  ) as NodeListOf<HTMLTextAreaElement>;
+  if (!textares) return;
+  for (const textarea of textares) {
+    textarea.classList.remove('scroll-hide');
+    textarea.style.height = 'auto';
+  }
+};