feat: auto-close preview screen when input value is longer than 30000 chars

src/TransformGridItem/index.tsx

@@ -24,6 +24,8 @@ interface TransformGridItemProp {
 export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const [value, setValue] = useRecoilState(EditorValueState)
   const [options, setOptions] = useState(transform.options)
+  const [previewDisabled, setPreviewDisabled] = useState(false)
+  const [alreadyClosed, setAlreadyClosed] = useState(false)
   const [closed, setClosed] = useLocalStorage(`transform_closed__${transform.name}`, false)
   const [result, setResult] = useState<WrappedTransformResult>({
     error: false,
@@ -31,10 +33,28 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   })
 
   useEffect(() => {
+    setAlreadyClosed(closed)
+  }, [])
+  
+  useEffect(() => {
+    if (closed)
+      return
+
     transform
       .fn(value, options)
       .then(setResult.bind(this))
-  }, [value, options])
+  }, [value, options, closed])
+
+  useEffect(() => {
+    if (value.length > 30000) {
+      setClosed(true)
+      setPreviewDisabled(true)
+      return
+    }
+
+    setClosed(alreadyClosed)
+    setPreviewDisabled(false)
+  }, [value])
 
   const onCheckboxOptionChanged =
     (option: TransformCheckboxOption) =>
@@ -92,6 +112,14 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
     setValue(result.value)
   }
 
+  const onLabelClicked = () => {
+    if (previewDisabled)
+      return
+
+    setClosed(!closed)
+    setAlreadyClosed(!closed)
+  }
+
   return (
     <div className={clsx(style.item, closed && style.closed)}>
       <div className={style.toolbar}>
@@ -100,8 +128,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         </Button>
         
         <h2
-          onClick={() => setClosed(!closed)}
+          onClick={onLabelClicked}
-          className={style.name}>
+          className={clsx(style.name, previewDisabled && style.previewDisabled)}>
 
           {transform.name}
         </h2>

src/TransformGridItem/style.module.scss

@@ -16,9 +16,9 @@
     .name {
       font-size: inherit;
       padding: 14px 6px;
-      cursor: pointer;
       
-      &:hover {
+      &:hover:not(.previewDisabled) {
+        cursor: pointer;
         text-decoration: underline dotted;
       }
     }

vite.config.ts

@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react-swc'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler' // or "modern"
+      }
+    }
+  }
 })