Geforce File Manager

NAME	SIZE	ACTIONS
📄 CTA.js	600 B	[ EDIT ] \| [ DEL ]
📄 CheckboxControl.js	539 B	[ EDIT ] \| [ DEL ]
📄 ColorPicker.js	730 B	[ EDIT ] \| [ DEL ]
📄 ComboboxControl.js	612 B	[ EDIT ] \| [ DEL ]
📄 CustomCSS.js	1,213 B	[ EDIT ] \| [ DEL ]
📄 Disabled.js	861 B	[ EDIT ] \| [ DEL ]
📄 Fields.js	1,321 B	[ EDIT ] \| [ DEL ]
📄 Group.js	2,021 B	[ EDIT ] \| [ DEL ]
📄 Groups.js	747 B	[ EDIT ] \| [ DEL ]
📄 Integration.js	3,088 B	[ EDIT ] \| [ DEL ]
📄 Loading.js	253 B	[ EDIT ] \| [ DEL ]
📄 Media.js	1,903 B	[ EDIT ] \| [ DEL ]
📄 Notices.js	552 B	[ EDIT ] \| [ DEL ]
📄 NullView.js	47 B	[ EDIT ] \| [ DEL ]
📄 Page.js	428 B	[ EDIT ] \| [ DEL ]
📄 SaveButton.js	1,309 B	[ EDIT ] \| [ DEL ]
📄 SelectControl.js	623 B	[ EDIT ] \| [ DEL ]
📄 TextControl.js	775 B	[ EDIT ] \| [ DEL ]
📄 ToggleControl.js	1,802 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: CustomCSS.js

import { useState, useEffect } from "@wordpress/element";
import { ProgressBar } from "@wordpress/components";

export default ({ content, height, handleChange, editable }) => {
  const [CodeMirror, setCodeMirror] = useState(null);
  const [CSS, setCSS] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    const loadModules = async () => {
      try {
        const [CodeMirrorModule, CSSModule] = await Promise.all([
          import("@uiw/react-codemirror"),
          import("@codemirror/lang-css"),
        ]);
        setCodeMirror(() => CodeMirrorModule.default);
        setCSS(() => CSSModule.css);
      } catch (error) {
        console.error("Error loading CodeMirror modules:", error);
      } finally {
        setIsLoading(false);
      }
    };

loadModules();
  }, []);

return (
    <>
      {isLoading ? (
        <ProgressBar />
      ) : CodeMirror && CSS ? (
        <CodeMirror
          value={content}
          height={height}
          extensions={[CSS()]}
          onChange={handleChange}
          editable={editable}
        />
      ) : (
        <p>{__("Error loading Code Editor...", "presto-player")}</p>
      )}
    </>
  );
};