src/TransformGridItem/index.tsx

@@ -24,8 +24,6 @@ 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,
@@ -33,28 +31,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   })
   
   useEffect(() => {
-    setAlreadyClosed(closed)
-  }, [])
-  
-  useEffect(() => {
-    if (closed)
-      return
-
     transform
       .fn(value, options)
       .then(setResult.bind(this))
-  }, [value, options, closed])
-
-  useEffect(() => {
-    if (value.length > 30000) {
-      setClosed(true)
-      setPreviewDisabled(true)
-      return
-    }
-
-    setClosed(alreadyClosed)
-    setPreviewDisabled(false)
-  }, [value])
+  }, [value, options])
 
   const onCheckboxOptionChanged =
     (option: TransformCheckboxOption) =>
@@ -112,14 +92,6 @@ 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}>
@@ -128,8 +100,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         </Button>
         
         <h2
-          onClick={onLabelClicked}
-          className={clsx(style.name, previewDisabled && style.previewDisabled)}>
+          onClick={() => setClosed(!closed)}
+          className={style.name}>
 
           {transform.name}
         </h2>

src/TransformGridItem/style.module.scss

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

vite.config.ts

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