Merge pull request #670 from A-kirami/feat/click-to-refresh-text-preview

feat(text-preview): add click interaction to force refresh preview

Author: MakinoharaShoko

packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx

@@ -7,6 +7,7 @@ import useTrans from '@/hooks/useTrans';
 import { getTextSize } from '@/UI/getTextSize';
 import IMSSTextbox from '@/Stage/TextBox/IMSSTextbox';
 import { compileSentence } from '@/Stage/TextBox/TextBox';
+import { useState } from 'react';
 
 export const TextPreview = (props: any) => {
   const t = useTrans('menu.options.pages.display.options.');
@@ -29,6 +30,12 @@ export const TextPreview = (props: any) => {
 
   const Textbox = IMSSTextbox;
 
+  const [previewKey, setPreviewKey] = useState<number>(0);
+
+  const forcePreviewUpdate = () => {
+    setPreviewKey((prevKey) => prevKey + 1);
+  };
+
   const textboxProps = {
     textArray: previewTextArray,
     isText: true,
@@ -37,7 +44,7 @@ export const TextPreview = (props: any) => {
     showName: showNameArray,
     currentConcatDialogPrev: '',
     fontSize: size,
-    currentDialogKey: '',
+    currentDialogKey: String(previewKey),
     isSafari: isSafari,
     isFirefox: isFirefox,
     miniAvatar: '',
@@ -55,6 +62,7 @@ export const TextPreview = (props: any) => {
       style={{
         background: previewBackground ? `bottom / cover no-repeat url(${previewBackground})` : 'rgba(0, 0, 0, 0.1)',
       }}
+      onClick={forcePreviewUpdate}
     >
       <div key={`previewTextbox-${textDelay}`} className={styles.textbox}>
         <Textbox {...textboxProps} />