@uiw/react-codemirror 4.25.9 → 4.25.11

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/theme/dimensionTheme.d.ts

@@ -0,0 +1,3 @@
+import type { Extension } from '@codemirror/state';
+export declare const scrollerTheme: Extension;
+export declare function getDimensionTheme(height: string | null, minHeight: string | null, maxHeight: string | null, width: string | null, minWidth: string | null, maxWidth: string | null): Extension | null;

package/esm/theme/dimensionTheme.js

@@ -0,0 +1,36 @@
+import { EditorView } from '@codemirror/view';
+export var scrollerTheme = EditorView.theme({
+  '& .cm-scroller': {
+    height: '100% !important'
+  }
+});
+var lastDimensionKey = null;
+var lastDimensionTheme = null;
+export function getDimensionTheme(height, minHeight, maxHeight, width, minWidth, maxWidth) {
+  if (!height && !minHeight && !maxHeight && !width && !minWidth && !maxWidth) {
+    return null;
+  }
+  var cacheKey = JSON.stringify({
+    height,
+    minHeight,
+    maxHeight,
+    width,
+    minWidth,
+    maxWidth
+  });
+  if (cacheKey === lastDimensionKey) {
+    return lastDimensionTheme;
+  }
+  lastDimensionKey = cacheKey;
+  lastDimensionTheme = EditorView.theme({
+    '&': {
+      height,
+      minHeight,
+      maxHeight,
+      width,
+      minWidth,
+      maxWidth
+    }
+  });
+  return lastDimensionTheme;
+}

package/esm/useCodeMirror.js

@@ -4,57 +4,63 @@ import { EditorView } from '@codemirror/view';
 import { getDefaultExtensions } from "./getDefaultExtensions.js";
 import { getStatistics } from "./utils.js";
 import { TimeoutLatch, getScheduler } from "./timeoutLatch.js";
+import { scrollerTheme, getDimensionTheme } from "./theme/dimensionTheme.js";
 export var ExternalChange = Annotation.define();
 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];
   var pendingUpdate = useState(() => ({
     current: null
   }))[0];
-  var defaultThemeOption = EditorView.theme({
-    '&': {
-      height,
-      minHeight,
-      maxHeight,
-      width,
-      minWidth,
-      maxWidth
-    },
-    '& .cm-scroller': {
-      height: '100% !important'
-    }
-  });
+  var defaultThemeOption = getDimensionTheme(height, minHeight, maxHeight, width, minWidth, maxWidth);
   var updateListener = EditorView.updateListener.of(vu => {
     if (vu.docChanged && typeof onChange === 'function' &&
     // Fix echoing of the remote changes:
@@ -87,7 +93,7 @@ export function useCodeMirror(props) {
     indentWithTab: defaultIndentWithTab,
     basicSetup: defaultBasicSetup
   });
-  var getExtensions = [updateListener, defaultThemeOption, ...defaultExtensions];
+  var getExtensions = [updateListener, ...(defaultThemeOption ? [defaultThemeOption] : []), scrollerTheme, ...defaultExtensions];
   if (onUpdate && typeof onUpdate === 'function') {
     getExtensions.push(EditorView.updateListener.of(onUpdate));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.25.9",
+  "version": "4.25.11",
   "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.9",
+    "@uiw/codemirror-extensions-basic-setup": "4.25.11",
     "codemirror": "^6.0.0"
   },
   "keywords": [

package/src/theme/dimensionTheme.ts

@@ -0,0 +1,42 @@
+import { EditorView } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+
+export const scrollerTheme = EditorView.theme({
+  '& .cm-scroller': {
+    height: '100% !important',
+  },
+});
+
+let lastDimensionKey: string | null = null;
+let lastDimensionTheme: Extension | null = null;
+
+export function getDimensionTheme(
+  height: string | null,
+  minHeight: string | null,
+  maxHeight: string | null,
+  width: string | null,
+  minWidth: string | null,
+  maxWidth: string | null,
+): Extension | null {
+  if (!height && !minHeight && !maxHeight && !width && !minWidth && !maxWidth) {
+    return null;
+  }
+
+  const cacheKey = JSON.stringify({ height, minHeight, maxHeight, width, minWidth, maxWidth });
+  if (cacheKey === lastDimensionKey) {
+    return lastDimensionTheme;
+  }
+
+  lastDimensionKey = cacheKey;
+  lastDimensionTheme = EditorView.theme({
+    '&': {
+      height,
+      minHeight,
+      maxHeight,
+      width,
+      minWidth,
+      maxWidth,
+    },
+  });
+  return lastDimensionTheme;
+}

package/src/useCodeMirror.ts

@@ -5,6 +5,7 @@ import { getDefaultExtensions } from './getDefaultExtensions';
 import { getStatistics } from './utils';
 import { type ReactCodeMirrorProps } from '.';
 import { TimeoutLatch, getScheduler } from './timeoutLatch';
+import { scrollerTheme, getDimensionTheme } from './theme/dimensionTheme';
 
 export const ExternalChange = Annotation.define<boolean>();
 const TYPING_TIMOUT = 200; // ms
@@ -45,19 +46,7 @@ export function useCodeMirror(props: UseCodeMirror) {
   const [state, setState] = useState<EditorState>();
   const typingLatch = useState<{ current: TimeoutLatch | null }>(() => ({ current: null }))[0];
   const pendingUpdate = useState<{ current: (() => void) | null }>(() => ({ current: null }))[0];
-  const defaultThemeOption = EditorView.theme({
-    '&': {
-      height,
-      minHeight,
-      maxHeight,
-      width,
-      minWidth,
-      maxWidth,
-    },
-    '& .cm-scroller': {
-      height: '100% !important',
-    },
-  });
+  const defaultThemeOption = getDimensionTheme(height, minHeight, maxHeight, width, minWidth, maxWidth);
   const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
     if (
       vu.docChanged &&
@@ -96,7 +85,12 @@ export function useCodeMirror(props: UseCodeMirror) {
     basicSetup: defaultBasicSetup,
   });
 
-  let getExtensions = [updateListener, defaultThemeOption, ...defaultExtensions];
+  let getExtensions = [
+    updateListener,
+    ...(defaultThemeOption ? [defaultThemeOption] : []),
+    scrollerTheme,
+    ...defaultExtensions,
+  ];
 
   if (onUpdate && typeof onUpdate === 'function') {
     getExtensions.push(EditorView.updateListener.of(onUpdate));