@uiw/react-codemirror 4.2.4 → 4.3.0

package/README.md

@@ -207,10 +207,10 @@ export interface ReactCodeMirrorProps
   /** Enables a placeholder—a piece of example content to show when the editor is empty. */
   placeholder?: string | HTMLElement;
   /**
-   * `light` / `dark` Defaults to `light`.
+   * `light` / `dark` / `Extension` Defaults to `light`.
    * @default light
    */
-  theme?: 'light' | 'dark';
+  theme?: 'light' | 'dark' | Extension;
   /**
    * Whether to optional basicSetup by default
    * @default true
@@ -260,7 +260,7 @@ export default ReactCodeMirror;
 - [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.
 - [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
 - [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
-- [@uiw/react-markdown-preview](https://github.com/jaywcjlove/react-monacoeditor): React component preview markdown text in web browser.
+- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
 
 ## License
 

package/cjs/index.d.ts

@@ -19,10 +19,10 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
     /** Enables a placeholder—a piece of example content to show when the editor is empty. */
     placeholder?: string | HTMLElement;
     /**
-     * `light` / `dark` Defaults to `light`.
+     * `light` / `dark` / `Extension` Defaults to `light`.
      * @default light
      */
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | Extension;
     /**
      * Whether to optional basicSetup by default
      * @default true

package/cjs/index.js.map

@@ -40,6 +40,6 @@
   ],
   "mappings": "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",
   "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` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark';\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 }));\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"
   ]
 }

package/cjs/useCodeMirror.js

@@ -105,7 +105,19 @@ function useCodeMirror(props) {
     getExtensions.unshift((0, _view.placeholder)(placeholder));
   }
 
-  theme === 'light' ? getExtensions.push(_light.defaultLightThemeOption) : getExtensions.push(_themeOneDark.oneDarkTheme);
+  switch (theme) {
+    case 'light':
+      getExtensions.push(_light.defaultLightThemeOption);
+      break;
+
+    case 'dark':
+      getExtensions.push(_themeOneDark.oneDarkTheme);
+      break;
+
+    default:
+      getExtensions.push(theme);
+      break;
+  }
 
   if (editable === false) {
     getExtensions.push(_view.EditorView.editable.of(false));

package/cjs/useCodeMirror.js.map

@@ -65,8 +65,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  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\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 { 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"
   ]
 }

package/esm/index.d.ts

@@ -19,10 +19,10 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
     /** Enables a placeholder—a piece of example content to show when the editor is empty. */
     placeholder?: string | HTMLElement;
     /**
-     * `light` / `dark` Defaults to `light`.
+     * `light` / `dark` / `Extension` Defaults to `light`.
      * @default light
      */
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | Extension;
     /**
      * Whether to optional basicSetup by default
      * @default true

package/esm/index.js.map

@@ -44,6 +44,6 @@
   ],
   "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",
   "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` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark';\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 }));\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"
   ]
 }

package/esm/useCodeMirror.js

@@ -62,7 +62,19 @@ export function useCodeMirror(props) {
     getExtensions.unshift(extendPlaceholder(placeholder));
   }
 
-  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);
+  switch (theme) {
+    case 'light':
+      getExtensions.push(defaultLightThemeOption);
+      break;
+
+    case 'dark':
+      getExtensions.push(oneDarkTheme);
+      break;
+
+    default:
+      getExtensions.push(theme);
+      break;
+  }
 
   if (editable === false) {
     getExtensions.push(EditorView.editable.of(false));

package/esm/useCodeMirror.js.map

@@ -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  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\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 { 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"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.2.4",
+  "version": "4.3.0",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "main": "cjs/index.js",
@@ -71,39 +71,39 @@
   },
   "devDependencies": {
     "@codemirror/lang-cpp": "0.19.1",
-    "@codemirror/lang-html": "0.19.3",
+    "@codemirror/lang-html": "0.19.4",
     "@codemirror/lang-java": "0.19.1",
-    "@codemirror/lang-javascript": "0.19.2",
+    "@codemirror/lang-javascript": "0.19.3",
     "@codemirror/lang-json": "0.19.1",
     "@codemirror/lang-lezer": "0.19.1",
-    "@codemirror/lang-markdown": "0.19.2",
+    "@codemirror/lang-markdown": "0.19.3",
     "@codemirror/lang-php": "0.19.1",
     "@codemirror/lang-python": "0.19.2",
     "@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.2",
+    "@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.34",
+    "@types/react": "17.0.37",
     "@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.1",
+    "@uiw/react-markdown-preview": "3.4.5",
     "@uiw/react-shields": "1.1.2",
     "@uiw/reset.css": "1.0.5",
     "code-example": "3.3.1",
     "husky": "7.0.4",
-    "jest": "27.3.1",
+    "jest": "27.4.5",
     "kkt": "6.11.0",
     "lint-staged": "11.2.6",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "tsbb": "3.4.4"
+    "tsbb": "3.5.4"
   },
   "browserslist": {
     "production": [

package/src/index.tsx

@@ -24,10 +24,10 @@ export interface ReactCodeMirrorProps
   /** Enables a placeholder—a piece of example content to show when the editor is empty. */
   placeholder?: string | HTMLElement;
   /**
-   * `light` / `dark` Defaults to `light`.
+   * `light` / `dark` / `Extension` Defaults to `light`.
    * @default light
    */
-  theme?: 'light' | 'dark';
+  theme?: 'light' | 'dark' | Extension;
   /**
    * Whether to optional basicSetup by default
    * @default true

package/src/useCodeMirror.ts

@@ -64,7 +64,17 @@ export function useCodeMirror(props: UseCodeMirror) {
     getExtensions.unshift(extendPlaceholder(placeholder));
   }
 
-  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);
+  switch (theme) {
+    case 'light':
+      getExtensions.push(defaultLightThemeOption);
+      break;
+    case 'dark':
+      getExtensions.push(oneDarkTheme);
+      break;
+    default:
+      getExtensions.push(theme);
+      break;
+  }
 
   if (editable === false) {
     getExtensions.push(EditorView.editable.of(false));