@uiw/react-codemirror 4.23.8 → 4.23.10

package/esm/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["className", "value", "selection", "extensions", "onChange", "onStatistics", "onCreateEditor", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root", "initialState"];
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
 import { useCodeMirror } from './useCodeMirror';
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from '@codemirror/view';
@@ -41,9 +41,9 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
   var {
     state,
     view,
-    container
+    container,
+    setContainer
   } = useCodeMirror({
-    container: editor.current,
     root,
     value,
     autoFocus,
@@ -72,6 +72,10 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
     state: state,
     view: view
   }), [editor, container, state, view]);
+  var setEditorRef = useCallback(el => {
+    editor.current = el;
+    setContainer(el);
+  }, [setContainer]);
 
   // check type of value
   if (typeof value !== 'string') {
@@ -79,7 +83,7 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
   }
   var defaultClassNames = typeof theme === 'string' ? "cm-theme-" + theme : 'cm-theme';
   return /*#__PURE__*/_jsx("div", _extends({
-    ref: editor,
+    ref: setEditorRef,
     className: "" + defaultClassNames + (className ? " " + className : '')
   }, other));
 });

package/esm/useCodeMirror.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { Annotation, EditorState, StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { getDefaultExtensions } from './getDefaultExtensions';
@@ -70,7 +70,7 @@ export function useCodeMirror(props) {
     getExtensions.push(EditorView.updateListener.of(onUpdate));
   }
   getExtensions = getExtensions.concat(extensions);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (container && !state) {
       var config = {
         doc: value,
@@ -96,7 +96,11 @@ export function useCodeMirror(props) {
       }
     };
   }, [container, state]);
-  useEffect(() => setContainer(props.container), [props.container]);
+  useEffect(() => {
+    if (props.container) {
+      setContainer(props.container);
+    }
+  }, [props.container]);
   useEffect(() => () => {
     if (view) {
       view.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.23.8",
+  "version": "4.23.10",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "funding": "https://jaywcjlove.github.io/#/sponsor",
@@ -46,7 +46,7 @@
     "@codemirror/commands": "^6.1.0",
     "@codemirror/state": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.0.0",
-    "@uiw/codemirror-extensions-basic-setup": "4.23.8",
+    "@uiw/codemirror-extensions-basic-setup": "4.23.10",
     "codemirror": "^6.0.0"
   },
   "keywords": [

package/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';

package/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(
     () => () => {