site: site code style optimization (#40088)

.dumi/theme/common/JSONEditor/index.tsx

@@ -1,33 +1,30 @@
-import { JSONEditor as Editor, Mode, type JSONEditorPropsOptional } from 'vanilla-jsoneditor';
+import React, { useEffect, useRef } from 'react';
-import React from 'react';
+import { JSONEditor, Mode } from 'vanilla-jsoneditor';
+import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
 
-const JSONEditor = (props: JSONEditorPropsOptional) => {
+const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
-  const refContainer = React.useRef(null);
+  const editorRef = useRef<JSONEditor>(null);
-  const refEditor = React.useRef(null);
+  const container = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
-    refEditor.current = new Editor({
+    editorRef.current = new JSONEditor({
-      target: refContainer.current,
+      target: container.current,
-      props: {
+      props: { mode: Mode.text },
-        mode: Mode.text,
-      },
     });
-
     return () => {
-      if (refEditor.current) {
+      if (editorRef.current) {
-        refEditor.current.destroy();
+        editorRef.current.destroy();
-        refEditor.current = null;
       }
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
-    if (refEditor.current) {
+    if (editorRef.current) {
-      refEditor.current.updateProps(props);
+      editorRef.current.updateProps(props);
     }
   }, [props]);
 
-  return <div className="vanilla-jsoneditor-react" ref={refContainer} />;
+  return <div ref={container} className="vanilla-jsoneditor-react" />;
 };
 
-export default JSONEditor;
+export default Editor;