@uiw/react-codemirror 4.3.0 → 4.4.0

package/dist/codemirror.min.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/esm/index.js

@@ -11,7 +11,7 @@ export * from './useCodeMirror';
 var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
   var {
     className,
-    value,
+    value = '',
     selection,
     extensions = [],
     onChange,
@@ -63,7 +63,7 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
     editor: container,
     state,
     view
-  }));
+  }), [container, state, view]);
   useEffect(() => {
     setContainer(editor.current);
     return () => {
@@ -71,10 +71,16 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
         view.destroy();
       }
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, []); // check type of value
+
+  if (typeof value !== 'string') {
+    throw new Error("value must be typeof string but got " + typeof value);
+  }
+
+  var defaultClassNames = typeof theme === 'string' ? "cm-theme-" + theme : 'cm-theme';
   return /*#__PURE__*/_jsx("div", _extends({
     ref: editor,
-    className: "cm-theme-" + theme + (className ? " " + className : '')
+    className: "" + defaultClassNames + (className ? " " + className : '')
   }, other));
 });
 ReactCodeMirror.displayName = 'CodeMirror';

package/esm/index.js.map

@@ -40,10 +40,12 @@
     "setContainer",
     "current",
     "destroy",
+    "Error",
+    "defaultClassNames",
     "displayName"
   ],
-  "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,cAAc,kBAAd;AACA,cAAc,yBAAd;AACA,cAAc,mBAAd;AACA,cAAc,iBAAd;AA6DA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjG,MAAM;AACJC,IAAAA,SADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,UAAU,GAAG,EAJT;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA,SAPI;AAQJC,IAAAA,KAAK,GAAG,OARJ;AASJC,IAAAA,MATI;AAUJC,IAAAA,SAVI;AAWJC,IAAAA,SAXI;AAYJC,IAAAA,KAZI;AAaJC,IAAAA,QAbI;AAcJC,IAAAA,QAdI;AAeJC,IAAAA,UAfI;AAgBJC,IAAAA,WAhBI;AAiBJC,IAAAA,aAjBI;AAkBJC,IAAAA,QAlBI;AAmBJC,IAAAA;AAnBI,MAqBFpB,KArBJ;AAAA,MAoBKqB,KApBL,iCAqBIrB,KArBJ;;AAsBA,MAAMsB,MAAM,GAAG3B,MAAM,CAAiB,IAAjB,CAArB;AACA,MAAM;AAAE4B,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA;AAA1B,MAA2C7B,aAAa,CAAC;AAC7D4B,IAAAA,SAAS,EAAEH,MAAM,CAACK,OAD2C;AAE7DP,IAAAA,IAF6D;AAG7DjB,IAAAA,KAH6D;AAI7DK,IAAAA,SAJ6D;AAK7DC,IAAAA,KAL6D;AAM7DC,IAAAA,MAN6D;AAO7DC,IAAAA,SAP6D;AAQ7DC,IAAAA,SAR6D;AAS7DC,IAAAA,KAT6D;AAU7DC,IAAAA,QAV6D;AAW7DC,IAAAA,QAX6D;AAY7DC,IAAAA,UAZ6D;AAa7DC,IAAAA,WAb6D;AAc7DC,IAAAA,aAd6D;AAe7DC,IAAAA,QAf6D;AAgB7Df,IAAAA,SAhB6D;AAiB7DE,IAAAA,QAjB6D;AAkB7DC,IAAAA,QAlB6D;AAmB7DF,IAAAA;AAnB6D,GAAD,CAA9D;AAqBAT,EAAAA,mBAAmB,CAACK,GAAD,EAAM,OAAO;AAAEqB,IAAAA,MAAM,EAAEG,SAAV;AAAqBF,IAAAA,KAArB;AAA4BC,IAAAA;AAA5B,GAAP,CAAN,CAAnB;AACA9B,EAAAA,SAAS,CAAC,MAAM;AACdgC,IAAAA,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ;AACA,WAAO,MAAM;AACX,UAAIH,IAAJ,EAAU;AACRA,QAAAA,IAAI,CAACI,OAAL;AACD;AACF,KAJD,CAFc,CAOd;AACD,GARQ,EAQN,EARM,CAAT;AAUA,sBAAO;AAAK,IAAA,GAAG,EAAEN,MAAV;AAAkB,IAAA,SAAS,gBAAcb,KAAd,IAAsBP,SAAS,SAAOA,SAAP,GAAqB,EAApD;AAA3B,KAAyFmB,KAAzF,EAAP;AACD,CAzDuB,CAAxB;AA2DAvB,eAAe,CAAC+B,WAAhB,GAA8B,YAA9B;AAEA,eAAe/B,eAAf",
+  "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,cAAc,kBAAd;AACA,cAAc,yBAAd;AACA,cAAc,mBAAd;AACA,cAAc,iBAAd;AA6DA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjG,MAAM;AACJC,IAAAA,SADI;AAEJC,IAAAA,KAAK,GAAG,EAFJ;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,UAAU,GAAG,EAJT;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA,SAPI;AAQJC,IAAAA,KAAK,GAAG,OARJ;AASJC,IAAAA,MATI;AAUJC,IAAAA,SAVI;AAWJC,IAAAA,SAXI;AAYJC,IAAAA,KAZI;AAaJC,IAAAA,QAbI;AAcJC,IAAAA,QAdI;AAeJC,IAAAA,UAfI;AAgBJC,IAAAA,WAhBI;AAiBJC,IAAAA,aAjBI;AAkBJC,IAAAA,QAlBI;AAmBJC,IAAAA;AAnBI,MAqBFpB,KArBJ;AAAA,MAoBKqB,KApBL,iCAqBIrB,KArBJ;;AAsBA,MAAMsB,MAAM,GAAG3B,MAAM,CAAiB,IAAjB,CAArB;AACA,MAAM;AAAE4B,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA;AAA1B,MAA2C7B,aAAa,CAAC;AAC7D4B,IAAAA,SAAS,EAAEH,MAAM,CAACK,OAD2C;AAE7DP,IAAAA,IAF6D;AAG7DjB,IAAAA,KAH6D;AAI7DK,IAAAA,SAJ6D;AAK7DC,IAAAA,KAL6D;AAM7DC,IAAAA,MAN6D;AAO7DC,IAAAA,SAP6D;AAQ7DC,IAAAA,SAR6D;AAS7DC,IAAAA,KAT6D;AAU7DC,IAAAA,QAV6D;AAW7DC,IAAAA,QAX6D;AAY7DC,IAAAA,UAZ6D;AAa7DC,IAAAA,WAb6D;AAc7DC,IAAAA,aAd6D;AAe7DC,IAAAA,QAf6D;AAgB7Df,IAAAA,SAhB6D;AAiB7DE,IAAAA,QAjB6D;AAkB7DC,IAAAA,QAlB6D;AAmB7DF,IAAAA;AAnB6D,GAAD,CAA9D;AAqBAT,EAAAA,mBAAmB,CAACK,GAAD,EAAM,OAAO;AAAEqB,IAAAA,MAAM,EAAEG,SAAV;AAAqBF,IAAAA,KAArB;AAA4BC,IAAAA;AAA5B,GAAP,CAAN,EAAkD,CAACC,SAAD,EAAYF,KAAZ,EAAmBC,IAAnB,CAAlD,CAAnB;AACA9B,EAAAA,SAAS,CAAC,MAAM;AACdgC,IAAAA,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ;AACA,WAAO,MAAM;AACX,UAAIH,IAAJ,EAAU;AACRA,QAAAA,IAAI,CAACI,OAAL;AACD;AACF,KAJD,CAFc,CAOd;AACD,GARQ,EAQN,EARM,CAAT,CA9CiG,CAwDjG;;AACA,MAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;AAC7B,UAAM,IAAI0B,KAAJ,0CAAiD,OAAO1B,KAAxD,CAAN;AACD;;AAED,MAAM2B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;AACA,sBAAO;AAAK,IAAA,GAAG,EAAEa,MAAV;AAAkB,IAAA,SAAS,OAAKQ,iBAAL,IAAyB5B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;AAA3B,KAA4FmB,KAA5F,EAAP;AACD,CA/DuB,CAAxB;AAiEAvB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf",
   "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';\n\nexport * from '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\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;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: 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 a change occurs to the document. There is a certain difference with `onChange`. */\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    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    selection,\n    onChange,\n    onUpdate,\n    extensions,\n  });\n  useImperativeHandle(ref, () => ({ editor: container, state, view }));\n  useEffect(() => {\n    setContainer(editor.current);\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
+    "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\nexport * from '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\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;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: 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 a change occurs to the document. There is a certain difference with `onChange`. */\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    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    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    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\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"
   ]
 }

package/esm/useCodeMirror.js

@@ -3,7 +3,7 @@ import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, placeholder as extendPlaceholder } from '@codemirror/view';
-import { oneDarkTheme } from '@codemirror/theme-one-dark';
+import { oneDark } from '@codemirror/theme-one-dark';
 import { defaultLightThemeOption } from './theme/light';
 export function useCodeMirror(props) {
   var {
@@ -68,7 +68,7 @@ export function useCodeMirror(props) {
       break;
 
     case 'dark':
-      getExtensions.push(oneDarkTheme);
+      getExtensions.push(oneDark);
       break;
 
     default:

package/esm/useCodeMirror.js.map

@@ -16,7 +16,7 @@
     "keymap",
     "placeholder",
     "extendPlaceholder",
-    "oneDarkTheme",
+    "oneDark",
     "defaultLightThemeOption",
     "useCodeMirror",
     "props",
@@ -68,8 +68,8 @@
     "reconfigure",
     "focus"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } from '@codemirror/theme-one-dark';\nimport { ReactCodeMirrorProps } from './';\nimport { defaultLightThemeOption } from './theme/light';\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 = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    indentWithTab = true,\n    basicSetup = 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 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  let getExtensions = [updateListener, defaultThemeOption];\n  if (indentWithTab) {\n    getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n  }\n  if (basicSetup) {\n    getExtensions.unshift(defaultBasicSetup);\n  }\n\n  if (placeholder) {\n    getExtensions.unshift(extendPlaceholder(placeholder));\n  }\n\n  switch (theme) {\n    case 'light':\n      getExtensions.push(defaultLightThemeOption);\n      break;\n    case 'dark':\n      getExtensions.push(oneDarkTheme);\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\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 as any,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(() => {\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n  }, [view]);\n\n  useEffect(() => {\n    if (view) {\n      const currentValue = view.state.doc.toString();\n      if (value !== currentValue) {\n        view.dispatch({\n          changes: { from: 0, to: currentValue.length, insert: value || '' },\n        });\n      }\n    }\n  }, [value, 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    placeholder,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    editable,\n    indentWithTab,\n    basicSetup,\n  ]);\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
+    "import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { ReactCodeMirrorProps } from './';\nimport { defaultLightThemeOption } from './theme/light';\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 = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    indentWithTab = true,\n    basicSetup = 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 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  let getExtensions = [updateListener, defaultThemeOption];\n  if (indentWithTab) {\n    getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n  }\n  if (basicSetup) {\n    getExtensions.unshift(defaultBasicSetup);\n  }\n\n  if (placeholder) {\n    getExtensions.unshift(extendPlaceholder(placeholder));\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\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 as any,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(() => {\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n  }, [view]);\n\n  useEffect(() => {\n    if (view) {\n      const currentValue = view.state.doc.toString();\n      if (value !== currentValue) {\n        view.dispatch({\n          changes: { from: 0, to: currentValue.length, insert: value || '' },\n        });\n      }\n    }\n  }, [value, 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    placeholder,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    editable,\n    indentWithTab,\n    basicSetup,\n  ]);\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "main": "cjs/index.js",
@@ -13,8 +13,10 @@
     "prepare": "husky install && npm run build",
     "watch": "tsbb watch",
     "build": "tsbb build",
+    "bundle": "kkt build --bundle",
+    "bundle:min": "kkt build --bundle --mini --no-emptyDir",
     "test": "tsbb test --env=jsdom",
-    "coverage": "tsbb test --coverage",
+    "coverage": "tsbb test --coverage --bail",
     "doc": "kkt build --app-src ./website",
     "start": "kkt start --app-src ./website",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,html,less,md,json}'"
@@ -34,6 +36,7 @@
     "code"
   ],
   "files": [
+    "dist",
     "src",
     "esm",
     "cjs"
@@ -52,11 +55,6 @@
       "react-app/jest"
     ]
   },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,html,less,md,json}": [
-      "prettier --write"
-    ]
-  },
   "peerDependencies": {
     "@babel/runtime": ">=7.11.0",
     "react": ">=16.8.0",
@@ -73,37 +71,37 @@
     "@codemirror/lang-cpp": "0.19.1",
     "@codemirror/lang-html": "0.19.4",
     "@codemirror/lang-java": "0.19.1",
-    "@codemirror/lang-javascript": "0.19.3",
+    "@codemirror/lang-javascript": "0.19.7",
     "@codemirror/lang-json": "0.19.1",
     "@codemirror/lang-lezer": "0.19.1",
-    "@codemirror/lang-markdown": "0.19.3",
+    "@codemirror/lang-markdown": "0.19.6",
     "@codemirror/lang-php": "0.19.1",
-    "@codemirror/lang-python": "0.19.2",
+    "@codemirror/lang-python": "0.19.4",
     "@codemirror/lang-rust": "0.19.1",
     "@codemirror/lang-sql": "0.19.4",
     "@codemirror/lang-xml": "0.19.2",
     "@codemirror/legacy-modes": "0.19.0",
-    "@codemirror/stream-parser": "0.19.3",
-    "@kkt/less-modules": "6.11.0",
-    "@kkt/raw-modules": "6.11.0",
-    "@kkt/scope-plugin-options": "6.11.0",
-    "@types/react": "17.0.37",
+    "@codemirror/stream-parser": "0.19.5",
+    "@kkt/less-modules": "7.1.0",
+    "@kkt/raw-modules": "7.1.0",
+    "@kkt/react-library": "7.1.0",
+    "@kkt/scope-plugin-options": "7.1.0",
+    "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/react-test-renderer": "17.0.1",
     "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.4.5",
+    "@uiw/react-markdown-preview": "3.4.7",
     "@uiw/react-shields": "1.1.2",
     "@uiw/reset.css": "1.0.5",
     "code-example": "3.3.1",
     "husky": "7.0.4",
-    "jest": "27.4.5",
-    "kkt": "6.11.0",
-    "lint-staged": "11.2.6",
+    "kkt": "7.1.0",
+    "lint-staged": "12.3.4",
     "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "tsbb": "3.5.4"
+    "tsbb": "3.5.6"
   },
   "browserslist": {
     "production": [

package/src/__tests__/index.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-disable jest/no-conditional-expect */
+import React, { useEffect, useRef } from 'react';
+import renderer from 'react-test-renderer';
+import { render, fireEvent, screen } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+// import '@testing-library/jest-dom';
+import CodeMirror, { ReactCodeMirrorRef } from '..';
+
+it('CodeMirror', async () => {
+  const component = renderer.create(<CodeMirror />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('cm-theme-light');
+  }
+});
+
+it('CodeMirror onChange', async () => {
+  const handleChange = jest.fn((value) => {
+    expect(value).toEqual('# title');
+    return Array.isArray(value) ? value.join() : value;
+  });
+  render(<CodeMirror autoFocus value="console.log('Hello world!')" onChange={handleChange} />);
+  const input = await screen.findByRole<HTMLInputElement>('textbox'); // findByRole('textbox');
+  fireEvent.change(input, { target: { textContent: '# title' } });
+  const elm = screen.queryByText('# title');
+  expect((elm as any).cmView.dom.innerHTML).toEqual('# title');
+});
+
+it('CodeMirror onUpdate', async () => {
+  render(
+    <CodeMirror
+      value="console.log('Hello world!')"
+      autoFocus
+      onUpdate={(viewUpdate) => {
+        expect(viewUpdate.state.doc.length).toEqual(27);
+      }}
+    />,
+  );
+});
+
+it('CodeMirror ref', async () => {
+  function Demo() {
+    const ref = useRef<ReactCodeMirrorRef>(null);
+    useEffect(() => {
+      expect(Object.keys(ref.current!)).toEqual(['editor', 'state', 'view']);
+    }, [ref]);
+
+    return <CodeMirror ref={ref} value="console.log('Hello world!')" />;
+  }
+  render(<Demo />);
+});
+
+it('CodeMirror theme', async () => {
+  const component = renderer.create(<CodeMirror theme="dark" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('cm-theme-dark');
+  }
+});
+
+it('CodeMirror className', async () => {
+  const component = renderer.create(<CodeMirror className="test" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('cm-theme-light test');
+  }
+});
+
+it('CodeMirror placeholder', async () => {
+  render(<CodeMirror placeholder="Hello World" className="test" />);
+  const elm = screen.queryByText('Hello World');
+  expect(elm!.style['pointerEvents']).toEqual('none');
+  expect(elm!.className).toEqual('cm-placeholder');
+});
+
+it('CodeMirror editable', async () => {
+  render(<CodeMirror editable={false} className="test" />);
+  const text = screen.getByRole('textbox');
+  expect(text.className).toEqual('cm-content');
+  expect(text.tagName).toEqual('DIV');
+});

package/src/index.tsx

@@ -70,7 +70,7 @@ export interface ReactCodeMirrorRef {
 const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
   const {
     className,
-    value,
+    value = '',
     selection,
     extensions = [],
     onChange,
@@ -112,7 +112,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     onUpdate,
     extensions,
   });
-  useImperativeHandle(ref, () => ({ editor: container, state, view }));
+  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);
   useEffect(() => {
     setContainer(editor.current);
     return () => {
@@ -123,7 +123,13 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;
+  // 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>;
 });
 
 ReactCodeMirror.displayName = 'CodeMirror';

package/src/useCodeMirror.ts

@@ -3,7 +3,7 @@ import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';
-import { oneDarkTheme } from '@codemirror/theme-one-dark';
+import { oneDark } from '@codemirror/theme-one-dark';
 import { ReactCodeMirrorProps } from './';
 import { defaultLightThemeOption } from './theme/light';
 
@@ -69,7 +69,7 @@ export function useCodeMirror(props: UseCodeMirror) {
       getExtensions.push(defaultLightThemeOption);
       break;
     case 'dark':
-      getExtensions.push(oneDarkTheme);
+      getExtensions.push(oneDark);
       break;
     default:
       getExtensions.push(theme);

package/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />