fix: Fix flash of content on initialization (#717)

* Fix flash on initialization

* Update example to remove state setting on load

---------

Co-authored-by: Colson Donohue <colsondonohue@Colsons-MBP.localdomain>

Author: colsondonohue

core/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
 import type { EditorState, EditorStateConfig, Extension, StateField } from '@codemirror/state';
 import type { EditorView, ViewUpdate } from '@codemirror/view';
 import { type BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
@@ -116,9 +116,8 @@ const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((pr
     initialState,
     ...other
   } = props;
-  const editor = useRef<HTMLDivElement>(null);
-  const { state, view, container } = useCodeMirror({
-    container: editor.current,
+  const editor = useRef<HTMLDivElement | null>(null);
+  const { state, view, container, setContainer } = useCodeMirror({
     root,
     value,
     autoFocus,
@@ -150,13 +149,23 @@ const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((pr
     view,
   ]);
 
+  const setEditorRef = useCallback(
+    (el: HTMLDivElement) => {
+      editor.current = el;
+      setContainer(el);
+    },
+    [setContainer],
+  );
+
   // check type of value
   if (typeof value !== 'string') {
     throw new Error(`value must be typeof string but got ${typeof value}`);
   }
 
   const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';
-  return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;
+  return (
+    <div ref={setEditorRef} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>
+  );
 });
 
 ReactCodeMirror.displayName = 'CodeMirror';

core/src/useCodeMirror.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { Annotation, EditorState, StateEffect, type Extension } from '@codemirror/state';
 import { EditorView, type ViewUpdate } from '@codemirror/view';
 import { getDefaultExtensions } from './getDefaultExtensions';
@@ -85,7 +85,7 @@ export function useCodeMirror(props: UseCodeMirror) {
   }
   getExtensions = getExtensions.concat(extensions);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (container && !state) {
       const config = {
         doc: value,
@@ -114,7 +114,11 @@ export function useCodeMirror(props: UseCodeMirror) {
     };
   }, [container, state]);
 
-  useEffect(() => setContainer(props.container), [props.container]);
+  useEffect(() => {
+    if (props.container) {
+      setContainer(props.container);
+    }
+  }, [props.container]);
 
   useEffect(
     () => () => {

www/src/pages/home/Example.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { color } from '@uiw/codemirror-extensions-color';
 import DocumentStr from '@uiw/react-codemirror/README.md';
@@ -10,6 +10,7 @@ import { langs } from '@uiw/codemirror-extensions-langs';
 import { Select } from './Select';
 import { Options } from '../extensions/basic-setup/example';
 import { useTheme } from '../../utils/useTheme';
+import javascriptExample from 'code-example/txt/sample.javascript.txt';
 
 const themeOptions = ['dark', 'light']
   .concat(Object.keys(alls))
@@ -61,7 +62,7 @@ export default function Example() {
   const [autofocus, setAutofocus] = useState(false);
   const [editable, setEditable] = useState(true);
   const { theme, setTheme } = useTheme();
-  const [code, setCode] = useState('');
+  const [code, setCode] = useState(javascriptExample);
   const [extensions, setExtensions] = useState<Extension[]>();
   const [height, setHeight] = useState('500px');
   const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({
@@ -91,9 +92,7 @@ export default function Example() {
       }
     } catch (error) {}
   }
-  useEffect(() => {
-    handleLangChange('javascript');
-  }, []);
+
   return (
     <Warpper className="wmde-markdown-var">
       <CodemirrorWarpper>