Merge pull request #100 from easyops-cn/steve/fix-source-editor-with-…

…chinese

Fix that a line with Chinese chars can't be selected when expand the source editor

src/components/MonacoEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useColorMode } from "@docusaurus/theme-common";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import {
@@ -68,7 +68,7 @@ export default function MonacoEditor({
     }
   }, [code, type]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (automaticLayoutRef.current) {
       return;
     }

src/components/NextExample/index.tsx

@@ -192,6 +192,13 @@ export default function NextExample({
     setSourceShown((prev) => !prev);
   }, []);
 
+  const sourceShownOnceRef = useRef(false);
+  useEffect(() => {
+    if (!sourceShownOnceRef.current && sourceShown) {
+      sourceShownOnceRef.current = true;
+    }
+  }, [sourceShown]);
+
   const [playgroundUrl, setPlaygroundUrl] = useState("/playground");
 
   useEffect(() => {
@@ -260,7 +267,8 @@ export default function NextExample({
           [styles.sourceShown]: sourceShown,
         })}
       >
-        {wait || !ready ? (
+        {!(sourceShown || sourceShownOnceRef.current) ? null : wait ||
+          !ready ? (
           <LoadingRingBox height={editorInitialHeight} />
         ) : (
           <BrowserOnly