@uiw/react-codemirror 4.9.4 → 4.10.0

package/esm/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
+import { Statistics } from './utils';
 import { BasicSetupOptions } from './basicSetup';
 export * from './basicSetup';
 export * from './useCodeMirror';
+export * from './utils';
 export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'extensions'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
     /** value of the auto created model in the editor. */
     value?: string;
@@ -44,6 +46,8 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
     indentWithTab?: boolean;
     /** Fired whenever a change occurs to the document. */
     onChange?(value: string, viewUpdate: ViewUpdate): void;
+    /** Some data on the statistics editor. */
+    onStatistics?(data: Statistics): void;
     /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
     onUpdate?(viewUpdate: ViewUpdate): void;
     /**

package/esm/index.js

@@ -1,18 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root"];
-import React, { useEffect, useRef, useImperativeHandle } from 'react';
+var _excluded = ["className", "value", "selection", "extensions", "onChange", "onStatistics", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root"];
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { useCodeMirror } from './useCodeMirror';
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from './basicSetup';
 export * from './useCodeMirror';
-var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
+export * from './utils';
+var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
   var {
     className,
     value = '',
     selection,
     extensions = [],
     onChange,
+    onStatistics,
     onUpdate,
     autoFocus,
     theme = 'light',
@@ -56,17 +58,15 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
     readOnly,
     selection,
     onChange,
+    onStatistics,
     onUpdate,
     extensions
   });
   useImperativeHandle(ref, () => ({
-    editor: container,
-    state,
-    view
-  }), [container, state, view]);
-  useEffect(() => {
-    setContainer(editor.current); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // check type of value
+    editor: editor.current,
+    state: state,
+    view: view
+  }), [editor, container, state, view]); // check type of value
 
   if (typeof value !== 'string') {
     throw new Error("value must be typeof string but got " + typeof value);

package/esm/index.js.map

@@ -2,12 +2,11 @@
   "version": 3,
   "names": [
     "React",
-    "useEffect",
     "useRef",
+    "forwardRef",
     "useImperativeHandle",
     "useCodeMirror",
     "ReactCodeMirror",
-    "forwardRef",
     "props",
     "ref",
     "className",
@@ -15,6 +14,7 @@
     "selection",
     "extensions",
     "onChange",
+    "onStatistics",
     "onUpdate",
     "autoFocus",
     "theme",
@@ -45,7 +45,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n  /** value of the auto created model in the editor. */\n  value?: string;\n  height?: string;\n  minHeight?: string;\n  maxHeight?: string;\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  /** focus on the editor. */\n  autoFocus?: boolean;\n  /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n  placeholder?: string | HTMLElement;\n  /**\n   * `light` / `dark` / `Extension` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark' | Extension;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  basicSetup?: boolean | BasicSetupOptions;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  indentWithTab?: boolean;\n  /** Fired whenever a change occurs to the document. */\n  onChange?(value: string, viewUpdate: ViewUpdate): void;\n  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n  onUpdate?(viewUpdate: ViewUpdate): void;\n  /**\n   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n   * They can either be built-in extension-providing objects,\n   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n   */\n  extensions?: Extension[];\n  /**\n   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n   */\n  root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n  editor?: HTMLDivElement | null;\n  state?: EditorState;\n  view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n  const {\n    className,\n    value = '',\n    selection,\n    extensions = [],\n    onChange,\n    onUpdate,\n    autoFocus,\n    theme = 'light',\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    root,\n    ...other\n  } = props;\n  const editor = useRef<HTMLDivElement>(null);\n  const { state, view, container, setContainer } = useCodeMirror({\n    container: editor.current,\n    root,\n    value,\n    autoFocus,\n    theme,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    selection,\n    onChange,\n    onUpdate,\n    extensions,\n  });\n  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);\n  useEffect(() => {\n    setContainer(editor.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // check type of value\n  if (typeof value !== 'string') {\n    throw new Error(`value must be typeof string but got ${typeof value}`);\n  }\n\n  const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n  return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
+    "import React, { useRef, forwardRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\nimport { Statistics } from './utils';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\nexport * from './useCodeMirror';\nexport * from './utils';\n\nexport interface ReactCodeMirrorProps\n  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n  /** value of the auto created model in the editor. */\n  value?: string;\n  height?: string;\n  minHeight?: string;\n  maxHeight?: string;\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  /** focus on the editor. */\n  autoFocus?: boolean;\n  /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n  placeholder?: string | HTMLElement;\n  /**\n   * `light` / `dark` / `Extension` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark' | Extension;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  basicSetup?: boolean | BasicSetupOptions;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  indentWithTab?: boolean;\n  /** Fired whenever a change occurs to the document. */\n  onChange?(value: string, viewUpdate: ViewUpdate): void;\n  /** Some data on the statistics editor. */\n  onStatistics?(data: Statistics): void;\n  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n  onUpdate?(viewUpdate: ViewUpdate): void;\n  /**\n   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n   * They can either be built-in extension-providing objects,\n   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n   */\n  extensions?: Extension[];\n  /**\n   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n   */\n  root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n  editor?: HTMLDivElement | null;\n  state?: EditorState;\n  view?: EditorView;\n}\n\nconst ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n  const {\n    className,\n    value = '',\n    selection,\n    extensions = [],\n    onChange,\n    onStatistics,\n    onUpdate,\n    autoFocus,\n    theme = 'light',\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    root,\n    ...other\n  } = props;\n  const editor = useRef<HTMLDivElement>(null);\n  const { state, view, container, setContainer } = useCodeMirror({\n    container: editor.current,\n    root,\n    value,\n    autoFocus,\n    theme,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    selection,\n    onChange,\n    onStatistics,\n    onUpdate,\n    extensions,\n  });\n\n  useImperativeHandle(ref, () => ({ editor: editor.current, state: state, view: view }), [\n    editor,\n    container,\n    state,\n    view,\n  ]);\n\n  // check type of value\n  if (typeof value !== 'string') {\n    throw new Error(`value must be typeof string but got ${typeof value}`);\n  }\n\n  const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n  return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
   ],
-  "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAGA,cAAc,cAAd;AACA,cAAc,iBAAd;AAkEA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;EACjG,IAAM;IACJC,SADI;IAEJC,KAAK,GAAG,EAFJ;IAGJC,SAHI;IAIJC,UAAU,GAAG,EAJT;IAKJC,QALI;IAMJC,QANI;IAOJC,SAPI;IAQJC,KAAK,GAAG,OARJ;IASJC,MATI;IAUJC,SAVI;IAWJC,SAXI;IAYJC,KAZI;IAaJC,QAbI;IAcJC,QAdI;IAeJC,UAfI;IAgBJC,WAhBI;IAiBJC,aAjBI;IAkBJC,QAlBI;IAmBJC,QAnBI;IAoBJC;EApBI,IAsBFrB,KAtBJ;EAAA,IAqBKsB,KArBL,iCAsBItB,KAtBJ;;EAuBA,IAAMuB,MAAM,GAAG5B,MAAM,CAAiB,IAAjB,CAArB;EACA,IAAM;IAAE6B,KAAF;IAASC,IAAT;IAAeC,SAAf;IAA0BC;EAA1B,IAA2C9B,aAAa,CAAC;IAC7D6B,SAAS,EAAEH,MAAM,CAACK,OAD2C;IAE7DP,IAF6D;IAG7DlB,KAH6D;IAI7DK,SAJ6D;IAK7DC,KAL6D;IAM7DC,MAN6D;IAO7DC,SAP6D;IAQ7DC,SAR6D;IAS7DC,KAT6D;IAU7DC,QAV6D;IAW7DC,QAX6D;IAY7DC,UAZ6D;IAa7DC,WAb6D;IAc7DC,aAd6D;IAe7DC,QAf6D;IAgB7DC,QAhB6D;IAiB7DhB,SAjB6D;IAkB7DE,QAlB6D;IAmB7DC,QAnB6D;IAoB7DF;EApB6D,CAAD,CAA9D;EAsBAT,mBAAmB,CAACK,GAAD,EAAM,OAAO;IAAEsB,MAAM,EAAEG,SAAV;IAAqBF,KAArB;IAA4BC;EAA5B,CAAP,CAAN,EAAkD,CAACC,SAAD,EAAYF,KAAZ,EAAmBC,IAAnB,CAAlD,CAAnB;EACA/B,SAAS,CAAC,MAAM;IACdiC,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ,CADc,CAEd;EACD,CAHQ,EAGN,EAHM,CAAT,CAhDiG,CAqDjG;;EACA,IAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;IAC7B,MAAM,IAAI0B,KAAJ,0CAAiD,OAAO1B,KAAxD,CAAN;EACD;;EAED,IAAM2B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;EACA,oBAAO;IAAK,GAAG,EAAEc,MAAV;IAAkB,SAAS,OAAKO,iBAAL,IAAyB5B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;EAA3B,GAA4FoB,KAA5F,EAAP;AACD,CA5DuB,CAAxB;AA8DAxB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf"
+  "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,UAAxB,EAAoCC,mBAApC,QAA+D,OAA/D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAIA,cAAc,cAAd;AACA,cAAc,iBAAd;AACA,cAAc,SAAd;AAoEA,IAAMC,eAAe,gBAAGH,UAAU,CAA2C,CAACI,KAAD,EAAQC,GAAR,KAAgB;EAC3F,IAAM;IACJC,SADI;IAEJC,KAAK,GAAG,EAFJ;IAGJC,SAHI;IAIJC,UAAU,GAAG,EAJT;IAKJC,QALI;IAMJC,YANI;IAOJC,QAPI;IAQJC,SARI;IASJC,KAAK,GAAG,OATJ;IAUJC,MAVI;IAWJC,SAXI;IAYJC,SAZI;IAaJC,KAbI;IAcJC,QAdI;IAeJC,QAfI;IAgBJC,UAhBI;IAiBJC,WAjBI;IAkBJC,aAlBI;IAmBJC,QAnBI;IAoBJC,QApBI;IAqBJC;EArBI,IAuBFtB,KAvBJ;EAAA,IAsBKuB,KAtBL,iCAuBIvB,KAvBJ;;EAwBA,IAAMwB,MAAM,GAAG7B,MAAM,CAAiB,IAAjB,CAArB;EACA,IAAM;IAAE8B,KAAF;IAASC,IAAT;IAAeC,SAAf;IAA0BC;EAA1B,IAA2C9B,aAAa,CAAC;IAC7D6B,SAAS,EAAEH,MAAM,CAACK,OAD2C;IAE7DP,IAF6D;IAG7DnB,KAH6D;IAI7DM,SAJ6D;IAK7DC,KAL6D;IAM7DC,MAN6D;IAO7DC,SAP6D;IAQ7DC,SAR6D;IAS7DC,KAT6D;IAU7DC,QAV6D;IAW7DC,QAX6D;IAY7DC,UAZ6D;IAa7DC,WAb6D;IAc7DC,aAd6D;IAe7DC,QAf6D;IAgB7DC,QAhB6D;IAiB7DjB,SAjB6D;IAkB7DE,QAlB6D;IAmB7DC,YAnB6D;IAoB7DC,QApB6D;IAqB7DH;EArB6D,CAAD,CAA9D;EAwBAR,mBAAmB,CAACI,GAAD,EAAM,OAAO;IAAEuB,MAAM,EAAEA,MAAM,CAACK,OAAjB;IAA0BJ,KAAK,EAAEA,KAAjC;IAAwCC,IAAI,EAAEA;EAA9C,CAAP,CAAN,EAAoE,CACrFF,MADqF,EAErFG,SAFqF,EAGrFF,KAHqF,EAIrFC,IAJqF,CAApE,CAAnB,CAlD2F,CAyD3F;;EACA,IAAI,OAAOvB,KAAP,KAAiB,QAArB,EAA+B;IAC7B,MAAM,IAAI2B,KAAJ,0CAAiD,OAAO3B,KAAxD,CAAN;EACD;;EAED,IAAM4B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;EACA,oBAAO;IAAK,GAAG,EAAEc,MAAV;IAAkB,SAAS,OAAKO,iBAAL,IAAyB7B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;EAA3B,GAA4FqB,KAA5F,EAAP;AACD,CAhEiC,CAAlC;AAkEAxB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf"
 }

package/esm/useCodeMirror.d.ts

@@ -9,6 +9,6 @@ export declare function useCodeMirror(props: UseCodeMirror): {
     setState: import("react").Dispatch<import("react").SetStateAction<EditorState | undefined>>;
     view: EditorView | undefined;
     setView: import("react").Dispatch<import("react").SetStateAction<EditorView | undefined>>;
-    container: HTMLDivElement | null | undefined;
-    setContainer: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
+    container: HTMLDivElement | undefined;
+    setContainer: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | undefined>>;
 };

package/esm/useCodeMirror.js

@@ -4,11 +4,13 @@ import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { basicSetup } from './basicSetup';
+import { getStatistics } from './utils';
 export function useCodeMirror(props) {
   var {
     value,
     selection,
     onChange,
+    onStatistics,
     onUpdate,
     extensions = [],
     autoFocus,
@@ -26,7 +28,7 @@ export function useCodeMirror(props) {
     basicSetup: defaultBasicSetup = true,
     root
   } = props;
-  var [container, setContainer] = useState(props.container);
+  var [container, setContainer] = useState();
   var [view, setView] = useState();
   var [state, setState] = useState();
   var defaultLightThemeOption = EditorView.theme({
@@ -54,6 +56,8 @@ export function useCodeMirror(props) {
 
       onChange(_value, vu);
     }
+
+    onStatistics && onStatistics(getStatistics(vu));
   });
   var getExtensions = [updateListener, defaultThemeOption];
 
@@ -121,10 +125,12 @@ export function useCodeMirror(props) {
 
     return () => {
       if (view) {
+        setState(undefined);
         setView(undefined);
       }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [container, state]);
+  useEffect(() => setContainer(props.container), [props.container]);
   useEffect(() => () => {
     if (view) {
       view.destroy();

package/esm/useCodeMirror.js.map

@@ -11,11 +11,13 @@
     "placeholder",
     "oneDark",
     "basicSetup",
+    "getStatistics",
     "useCodeMirror",
     "props",
     "value",
     "selection",
     "onChange",
+    "onStatistics",
     "onUpdate",
     "extensions",
     "autoFocus",
@@ -73,7 +75,7 @@
     "../src/useCodeMirror.ts"
   ],
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n  container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n  const {\n    value,\n    selection,\n    onChange,\n    onUpdate,\n    extensions = [],\n    autoFocus,\n    theme = 'light',\n    height = '',\n    minHeight = '',\n    maxHeight = '',\n    placeholder: placeholderStr = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    readOnly = false,\n    indentWithTab: defaultIndentWithTab = true,\n    basicSetup: defaultBasicSetup = true,\n    root,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\n  const defaultLightThemeOption = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: '#fff',\n      },\n    },\n    {\n      dark: false,\n    },\n  );\n  const defaultThemeOption = EditorView.theme({\n    '&': {\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n    },\n  });\n  const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {\n    if (vu.docChanged && typeof onChange === 'function') {\n      const doc = vu.state.doc;\n      const value = doc.toString();\n      onChange(value, vu);\n    }\n  });\n\n  let getExtensions = [updateListener, defaultThemeOption];\n  if (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    if (typeof defaultBasicSetup === 'boolean') {\n      getExtensions.unshift(basicSetup());\n    } else {\n      getExtensions.unshift(basicSetup(defaultBasicSetup));\n    }\n  }\n\n  if (placeholderStr) {\n    getExtensions.unshift(placeholder(placeholderStr));\n  }\n\n  switch (theme) {\n    case 'light':\n      getExtensions.push(defaultLightThemeOption);\n      break;\n    case 'dark':\n      getExtensions.push(oneDark);\n      break;\n    default:\n      getExtensions.push(theme);\n      break;\n  }\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\n  }\n  if (readOnly) {\n    getExtensions.push(EditorState.readOnly.of(true));\n  }\n\n  if (onUpdate && typeof onUpdate === 'function') {\n    getExtensions.push(EditorView.updateListener.of(onUpdate));\n  }\n  getExtensions = getExtensions.concat(extensions);\n\n  useEffect(() => {\n    if (container && !state) {\n      const stateCurrent = EditorState.create({\n        doc: value,\n        selection,\n        extensions: getExtensions,\n      });\n      setState(stateCurrent);\n      if (!view) {\n        const viewCurrent = new EditorView({\n          state: stateCurrent,\n          parent: container,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    return () => {\n      if (view) {\n        setView(undefined);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(\n    () => () => {\n      if (view) {\n        view.destroy();\n        setView(undefined);\n      }\n    },\n    [view],\n  );\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  useEffect(() => {\n    if (view) {\n      view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    theme,\n    extensions,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    placeholderStr,\n    editable,\n    readOnly,\n    defaultIndentWithTab,\n    defaultBasicSetup,\n    onChange,\n    onUpdate,\n  ]);\n\n  useEffect(() => {\n    const currentValue = view ? view.state.doc.toString() : '';\n    if (view && value !== currentValue) {\n      view.dispatch({\n        changes: { from: 0, to: currentValue.length, insert: value || '' },\n      });\n    }\n  }, [value, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
+    "import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { getStatistics } from './utils';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n  container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n  const {\n    value,\n    selection,\n    onChange,\n    onStatistics,\n    onUpdate,\n    extensions = [],\n    autoFocus,\n    theme = 'light',\n    height = '',\n    minHeight = '',\n    maxHeight = '',\n    placeholder: placeholderStr = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    readOnly = false,\n    indentWithTab: defaultIndentWithTab = true,\n    basicSetup: defaultBasicSetup = true,\n    root,\n  } = props;\n  const [container, setContainer] = useState<HTMLDivElement>();\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\n  const defaultLightThemeOption = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: '#fff',\n      },\n    },\n    {\n      dark: false,\n    },\n  );\n  const defaultThemeOption = EditorView.theme({\n    '&': {\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n    },\n  });\n  const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {\n    if (vu.docChanged && typeof onChange === 'function') {\n      const doc = vu.state.doc;\n      const value = doc.toString();\n      onChange(value, vu);\n    }\n    onStatistics && onStatistics(getStatistics(vu));\n  });\n\n  let getExtensions = [updateListener, defaultThemeOption];\n  if (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    if (typeof defaultBasicSetup === 'boolean') {\n      getExtensions.unshift(basicSetup());\n    } else {\n      getExtensions.unshift(basicSetup(defaultBasicSetup));\n    }\n  }\n\n  if (placeholderStr) {\n    getExtensions.unshift(placeholder(placeholderStr));\n  }\n\n  switch (theme) {\n    case 'light':\n      getExtensions.push(defaultLightThemeOption);\n      break;\n    case 'dark':\n      getExtensions.push(oneDark);\n      break;\n    default:\n      getExtensions.push(theme);\n      break;\n  }\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\n  }\n  if (readOnly) {\n    getExtensions.push(EditorState.readOnly.of(true));\n  }\n\n  if (onUpdate && typeof onUpdate === 'function') {\n    getExtensions.push(EditorView.updateListener.of(onUpdate));\n  }\n  getExtensions = getExtensions.concat(extensions);\n\n  useEffect(() => {\n    if (container && !state) {\n      const stateCurrent = EditorState.create({\n        doc: value,\n        selection,\n        extensions: getExtensions,\n      });\n      setState(stateCurrent);\n      if (!view) {\n        const viewCurrent = new EditorView({\n          state: stateCurrent,\n          parent: container,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    return () => {\n      if (view) {\n        setState(undefined);\n        setView(undefined);\n      }\n    };\n  }, [container, state]);\n\n  useEffect(() => setContainer(props.container!), [props.container]);\n\n  useEffect(\n    () => () => {\n      if (view) {\n        view.destroy();\n        setView(undefined);\n      }\n    },\n    [view],\n  );\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  useEffect(() => {\n    if (view) {\n      view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    theme,\n    extensions,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    placeholderStr,\n    editable,\n    readOnly,\n    defaultIndentWithTab,\n    defaultBasicSetup,\n    onChange,\n    onUpdate,\n  ]);\n\n  useEffect(() => {\n    const currentValue = view ? view.state.doc.toString() : '';\n    if (view && value !== currentValue) {\n      view.dispatch({\n        changes: { from: 0, to: currentValue.length, insert: value || '' },\n      });\n    }\n  }, [value, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/esm/utils.d.ts

@@ -0,0 +1,20 @@
+import { EditorSelection, SelectionRange } from '@codemirror/state';
+import { ViewUpdate } from '@codemirror/view';
+export interface Statistics {
+    /** Get the number of lines in the editor. */
+    lineCount: number;
+    /** Cursor Position */
+    selection: EditorSelection;
+    /** Retrieves a list of all current selections. */
+    ranges: readonly SelectionRange[];
+    /** Get the currently selected code. */
+    selectionCode: string;
+    /**
+     * The length of the given array should be the same as the number of active selections.
+     * Replaces the content of the selections with the strings in the array.
+     */
+    selections: string[];
+    /** Return true if any text is selected. */
+    selectedText: boolean;
+}
+export declare const getStatistics: (view: ViewUpdate) => Statistics;

package/esm/utils.js

@@ -0,0 +1,9 @@
+export var getStatistics = view => ({
+  lineCount: view.state.doc.lines,
+  selection: view.state.selection,
+  ranges: view.state.selection.ranges,
+  selectionCode: view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to),
+  selections: view.state.selection.ranges.map(r => view.state.sliceDoc(r.from, r.to)),
+  selectedText: view.state.selection.ranges.some(r => !r.empty)
+});
+//# sourceMappingURL=utils.js.map

package/esm/utils.js.map

@@ -0,0 +1,31 @@
+{
+  "version": 3,
+  "names": [
+    "getStatistics",
+    "view",
+    "lineCount",
+    "state",
+    "doc",
+    "lines",
+    "selection",
+    "ranges",
+    "selectionCode",
+    "sliceDoc",
+    "main",
+    "from",
+    "to",
+    "selections",
+    "map",
+    "r",
+    "selectedText",
+    "some",
+    "empty"
+  ],
+  "sources": [
+    "../src/utils.ts"
+  ],
+  "sourcesContent": [
+    "import { EditorSelection, SelectionRange } from '@codemirror/state';\nimport { ViewUpdate } from '@codemirror/view';\n\nexport interface Statistics {\n  /** Get the number of lines in the editor. */\n  lineCount: number;\n  /** Cursor Position */\n  selection: EditorSelection;\n  /** Retrieves a list of all current selections. */\n  ranges: readonly SelectionRange[];\n  /** Get the currently selected code. */\n  selectionCode: string;\n  /**\n   * The length of the given array should be the same as the number of active selections.\n   * Replaces the content of the selections with the strings in the array.\n   */\n  selections: string[];\n  /** Return true if any text is selected. */\n  selectedText: boolean;\n}\n\nexport const getStatistics = (view: ViewUpdate): Statistics => ({\n  lineCount: view.state.doc.lines,\n  selection: view.state.selection,\n  ranges: view.state.selection.ranges,\n  selectionCode: view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to),\n  selections: view.state.selection.ranges.map((r) => view.state.sliceDoc(r.from, r.to)),\n  selectedText: view.state.selection.ranges.some((r) => !r.empty),\n});\n"
+  ],
+  "mappings": "AAqBA,OAAO,IAAMA,aAAa,GAAIC,IAAD,KAAmC;EAC9DC,SAAS,EAAED,IAAI,CAACE,KAAL,CAAWC,GAAX,CAAeC,KADoC;EAE9DC,SAAS,EAAEL,IAAI,CAACE,KAAL,CAAWG,SAFwC;EAG9DC,MAAM,EAAEN,IAAI,CAACE,KAAL,CAAWG,SAAX,CAAqBC,MAHiC;EAI9DC,aAAa,EAAEP,IAAI,CAACE,KAAL,CAAWM,QAAX,CAAoBR,IAAI,CAACE,KAAL,CAAWG,SAAX,CAAqBI,IAArB,CAA0BC,IAA9C,EAAoDV,IAAI,CAACE,KAAL,CAAWG,SAAX,CAAqBI,IAArB,CAA0BE,EAA9E,CAJ+C;EAK9DC,UAAU,EAAEZ,IAAI,CAACE,KAAL,CAAWG,SAAX,CAAqBC,MAArB,CAA4BO,GAA5B,CAAiCC,CAAD,IAAOd,IAAI,CAACE,KAAL,CAAWM,QAAX,CAAoBM,CAAC,CAACJ,IAAtB,EAA4BI,CAAC,CAACH,EAA9B,CAAvC,CALkD;EAM9DI,YAAY,EAAEf,IAAI,CAACE,KAAL,CAAWG,SAAX,CAAqBC,MAArB,CAA4BU,IAA5B,CAAkCF,CAAD,IAAO,CAACA,CAAC,CAACG,KAA3C;AANgD,CAAnC,CAAtB"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.9.4",
+  "version": "4.10.0",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "author": "kenny wong <wowohoo@qq.com>",

package/src/index.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useCodeMirror } from './useCodeMirror';
+import { Statistics } from './utils';
 import { BasicSetupOptions } from './basicSetup';
 
 export * from './basicSetup';
 export * from './useCodeMirror';
+export * from './utils';
 
 export interface ReactCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
@@ -49,6 +51,8 @@ export interface ReactCodeMirrorProps
   indentWithTab?: boolean;
   /** Fired whenever a change occurs to the document. */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
+  /** Some data on the statistics editor. */
+  onStatistics?(data: Statistics): void;
   /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
   onUpdate?(viewUpdate: ViewUpdate): void;
   /**
@@ -71,13 +75,14 @@ export interface ReactCodeMirrorRef {
   view?: EditorView;
 }
 
-const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
+const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
   const {
     className,
     value = '',
     selection,
     extensions = [],
     onChange,
+    onStatistics,
     onUpdate,
     autoFocus,
     theme = 'light',
@@ -115,14 +120,17 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     readOnly,
     selection,
     onChange,
+    onStatistics,
     onUpdate,
     extensions,
   });
-  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);
-  useEffect(() => {
-    setContainer(editor.current);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+  useImperativeHandle(ref, () => ({ editor: editor.current, state: state, view: view }), [
+    editor,
+    container,
+    state,
+    view,
+  ]);
 
   // check type of value
   if (typeof value !== 'string') {

package/src/useCodeMirror.ts

@@ -4,6 +4,7 @@ import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { basicSetup } from './basicSetup';
+import { getStatistics } from './utils';
 import { ReactCodeMirrorProps } from '.';
 
 export interface UseCodeMirror extends ReactCodeMirrorProps {
@@ -15,6 +16,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     value,
     selection,
     onChange,
+    onStatistics,
     onUpdate,
     extensions = [],
     autoFocus,
@@ -32,7 +34,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     basicSetup: defaultBasicSetup = true,
     root,
   } = props;
-  const [container, setContainer] = useState(props.container);
+  const [container, setContainer] = useState<HTMLDivElement>();
   const [view, setView] = useState<EditorView>();
   const [state, setState] = useState<EditorState>();
   const defaultLightThemeOption = EditorView.theme(
@@ -61,6 +63,7 @@ export function useCodeMirror(props: UseCodeMirror) {
       const value = doc.toString();
       onChange(value, vu);
     }
+    onStatistics && onStatistics(getStatistics(vu));
   });
 
   let getExtensions = [updateListener, defaultThemeOption];
@@ -122,12 +125,14 @@ export function useCodeMirror(props: UseCodeMirror) {
     }
     return () => {
       if (view) {
+        setState(undefined);
         setView(undefined);
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [container, state]);
 
+  useEffect(() => setContainer(props.container!), [props.container]);
+
   useEffect(
     () => () => {
       if (view) {

package/src/utils.ts

@@ -0,0 +1,29 @@
+import { EditorSelection, SelectionRange } from '@codemirror/state';
+import { ViewUpdate } from '@codemirror/view';
+
+export interface Statistics {
+  /** Get the number of lines in the editor. */
+  lineCount: number;
+  /** Cursor Position */
+  selection: EditorSelection;
+  /** Retrieves a list of all current selections. */
+  ranges: readonly SelectionRange[];
+  /** Get the currently selected code. */
+  selectionCode: string;
+  /**
+   * The length of the given array should be the same as the number of active selections.
+   * Replaces the content of the selections with the strings in the array.
+   */
+  selections: string[];
+  /** Return true if any text is selected. */
+  selectedText: boolean;
+}
+
+export const getStatistics = (view: ViewUpdate): Statistics => ({
+  lineCount: view.state.doc.lines,
+  selection: view.state.selection,
+  ranges: view.state.selection.ranges,
+  selectionCode: view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to),
+  selections: view.state.selection.ranges.map((r) => view.state.sliceDoc(r.from, r.to)),
+  selectedText: view.state.selection.ranges.some((r) => !r.empty),
+});