@uiw/react-codemirror 4.25.10 → 4.25.11

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,6 +4,7 @@ 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
 
@@ -59,19 +60,7 @@ export function useCodeMirror(props) {
   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:
@@ -104,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.10",
+  "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.10",
+    "@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));