@uiw/react-codemirror 4.25.8 → 4.25.10

package/esm/getDefaultExtensions.js

@@ -10,14 +10,19 @@ export var getDefaultExtensions = function getDefaultExtensions(optios) {
   if (optios === void 0) {
     optios = {};
   }
-  var {
-    indentWithTab: defaultIndentWithTab = true,
-    editable = true,
-    readOnly = false,
-    theme = 'light',
-    placeholder: placeholderStr = '',
-    basicSetup: defaultBasicSetup = true
-  } = optios;
+  var _optios = optios,
+    _optios$indentWithTab = _optios.indentWithTab,
+    defaultIndentWithTab = _optios$indentWithTab === void 0 ? true : _optios$indentWithTab,
+    _optios$editable = _optios.editable,
+    editable = _optios$editable === void 0 ? true : _optios$editable,
+    _optios$readOnly = _optios.readOnly,
+    readOnly = _optios$readOnly === void 0 ? false : _optios$readOnly,
+    _optios$theme = _optios.theme,
+    theme = _optios$theme === void 0 ? 'light' : _optios$theme,
+    _optios$placeholder = _optios.placeholder,
+    placeholderStr = _optios$placeholder === void 0 ? '' : _optios$placeholder,
+    _optios$basicSetup = _optios.basicSetup,
+    defaultBasicSetup = _optios$basicSetup === void 0 ? true : _optios$basicSetup;
   var getExtensions = [];
   if (defaultIndentWithTab) {
     getExtensions.unshift(keymap.of([indentWithTab]));

package/esm/index.js

@@ -11,17 +11,39 @@ export * from "./useCodeMirror.js";
 export * from "./getDefaultExtensions.js";
 export * from "./utils.js";
 var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
-  var {
-      className,
-      value = '',
-      selection,
-      extensions = [],
-      onChange,
-      onStatistics,
-      onCreateEditor,
-      onUpdate,
+  var className = props.className,
+    _props$value = props.value,
+    value = _props$value === void 0 ? '' : _props$value,
+    selection = props.selection,
+    _props$extensions = props.extensions,
+    extensions = _props$extensions === void 0 ? [] : _props$extensions,
+    onChange = props.onChange,
+    onStatistics = props.onStatistics,
+    onCreateEditor = props.onCreateEditor,
+    onUpdate = props.onUpdate,
+    autoFocus = props.autoFocus,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    height = props.height,
+    minHeight = props.minHeight,
+    maxHeight = props.maxHeight,
+    width = props.width,
+    minWidth = props.minWidth,
+    maxWidth = props.maxWidth,
+    basicSetup = props.basicSetup,
+    placeholder = props.placeholder,
+    indentWithTab = props.indentWithTab,
+    editable = props.editable,
+    readOnly = props.readOnly,
+    root = props.root,
+    initialState = props.initialState,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var editor = useRef(null);
+  var _useCodeMirror = useCodeMirror({
+      root,
+      value,
       autoFocus,
-      theme = 'light',
+      theme,
       height,
       minHeight,
       maxHeight,
@@ -33,40 +55,18 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
       indentWithTab,
       editable,
       readOnly,
-      root,
+      selection,
+      onChange,
+      onStatistics,
+      onCreateEditor,
+      onUpdate,
+      extensions,
       initialState
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  var editor = useRef(null);
-  var {
-    state,
-    view,
-    container,
-    setContainer
-  } = useCodeMirror({
-    root,
-    value,
-    autoFocus,
-    theme,
-    height,
-    minHeight,
-    maxHeight,
-    width,
-    minWidth,
-    maxWidth,
-    basicSetup,
-    placeholder,
-    indentWithTab,
-    editable,
-    readOnly,
-    selection,
-    onChange,
-    onStatistics,
-    onCreateEditor,
-    onUpdate,
-    extensions,
-    initialState
-  });
+    }),
+    state = _useCodeMirror.state,
+    view = _useCodeMirror.view,
+    container = _useCodeMirror.container,
+    setContainer = _useCodeMirror.setContainer;
   useImperativeHandle(ref, () => ({
     editor: editor.current,
     state: state,

package/esm/useCodeMirror.js

@@ -9,33 +9,50 @@ var TYPING_TIMOUT = 200; // ms
 
 var emptyExtensions = [];
 export function useCodeMirror(props) {
-  var {
-    value,
-    selection,
-    onChange,
-    onStatistics,
-    onCreateEditor,
-    onUpdate,
-    extensions = emptyExtensions,
-    autoFocus,
-    theme = 'light',
-    height = null,
-    minHeight = null,
-    maxHeight = null,
-    width = null,
-    minWidth = null,
-    maxWidth = null,
-    placeholder: placeholderStr = '',
-    editable = true,
-    readOnly = false,
-    indentWithTab: defaultIndentWithTab = true,
-    basicSetup: defaultBasicSetup = true,
-    root,
-    initialState
-  } = props;
-  var [container, setContainer] = useState();
-  var [view, setView] = useState();
-  var [state, setState] = useState();
+  var value = props.value,
+    selection = props.selection,
+    onChange = props.onChange,
+    onStatistics = props.onStatistics,
+    onCreateEditor = props.onCreateEditor,
+    onUpdate = props.onUpdate,
+    _props$extensions = props.extensions,
+    extensions = _props$extensions === void 0 ? emptyExtensions : _props$extensions,
+    autoFocus = props.autoFocus,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    _props$height = props.height,
+    height = _props$height === void 0 ? null : _props$height,
+    _props$minHeight = props.minHeight,
+    minHeight = _props$minHeight === void 0 ? null : _props$minHeight,
+    _props$maxHeight = props.maxHeight,
+    maxHeight = _props$maxHeight === void 0 ? null : _props$maxHeight,
+    _props$width = props.width,
+    width = _props$width === void 0 ? null : _props$width,
+    _props$minWidth = props.minWidth,
+    minWidth = _props$minWidth === void 0 ? null : _props$minWidth,
+    _props$maxWidth = props.maxWidth,
+    maxWidth = _props$maxWidth === void 0 ? null : _props$maxWidth,
+    _props$placeholder = props.placeholder,
+    placeholderStr = _props$placeholder === void 0 ? '' : _props$placeholder,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$indentWithTab = props.indentWithTab,
+    defaultIndentWithTab = _props$indentWithTab === void 0 ? true : _props$indentWithTab,
+    _props$basicSetup = props.basicSetup,
+    defaultBasicSetup = _props$basicSetup === void 0 ? true : _props$basicSetup,
+    root = props.root,
+    initialState = props.initialState;
+  var _useState = useState(),
+    container = _useState[0],
+    setContainer = _useState[1];
+  var _useState2 = useState(),
+    view = _useState2[0],
+    setView = _useState2[1];
+  var _useState3 = useState(),
+    state = _useState3[0],
+    setState = _useState3[1];
   var typingLatch = useState(() => ({
     current: null
   }))[0];

package/package.json

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

package/src/__tests__/index.test.tsx

@@ -6,6 +6,65 @@ import { render, fireEvent, screen } from '@testing-library/react';
 // import '@testing-library/jest-dom';
 import CodeMirror, { ReactCodeMirrorRef } from '..';
 
+// Setup JSDOM mocks for CodeMirror
+beforeAll(() => {
+  // Mock Range.getClientRects
+  Object.defineProperty(global.Range.prototype, 'getClientRects', {
+    writable: true,
+    value: jest.fn(() => ({
+      length: 1,
+      item: () => ({ bottom: 16, height: 16, left: 0, right: 100, top: 0, width: 100 }),
+      [Symbol.iterator]: function* () {
+        yield { bottom: 16, height: 16, left: 0, right: 100, top: 0, width: 100 };
+      },
+    })),
+  });
+
+  Object.defineProperty(global.Range.prototype, 'getBoundingClientRect', {
+    writable: true,
+    value: jest.fn(() => ({ bottom: 16, height: 16, left: 0, right: 100, top: 0, width: 100 })),
+  });
+
+  // Mock observers used by CodeMirror internals in JSDOM.
+  class MockIntersectionObserver {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    disconnect = jest.fn();
+    takeRecords = jest.fn(() => []);
+  }
+  class MockResizeObserver {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    disconnect = jest.fn();
+  }
+  class MockMutationObserver {
+    observe = jest.fn();
+    disconnect = jest.fn();
+    takeRecords = jest.fn(() => []);
+  }
+  global.IntersectionObserver = MockIntersectionObserver as unknown as typeof IntersectionObserver;
+  global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  global.MutationObserver = MockMutationObserver as unknown as typeof MutationObserver;
+  window.IntersectionObserver = global.IntersectionObserver;
+  window.ResizeObserver = global.ResizeObserver;
+  window.MutationObserver = global.MutationObserver;
+
+  // Mock element properties
+  Object.defineProperty(global.HTMLElement.prototype, 'clientHeight', { get: () => 100 });
+  Object.defineProperty(global.HTMLElement.prototype, 'clientWidth', { get: () => 500 });
+  Object.defineProperty(global.HTMLElement.prototype, 'offsetHeight', { get: () => 100 });
+  Object.defineProperty(global.HTMLElement.prototype, 'offsetWidth', { get: () => 500 });
+  Object.defineProperty(global.Element.prototype, 'scrollIntoView', { writable: true, value: jest.fn() });
+
+  // Suppress CodeMirror JSDOM warnings
+  const originalError = console.error;
+  console.error = (...args) => {
+    if (args[0]?.toString?.().includes('getClientRects') || args[0]?.toString?.().includes('observe is not a function'))
+      return;
+    originalError.apply(console, args);
+  };
+});
+
 it('CodeMirror', async () => {
   const component = renderer.create(<CodeMirror />);
   let tree = component.toJSON();