@uiw/react-codemirror 4.7.0 → 4.9.0

package/README.md

@@ -27,8 +27,9 @@ CodeMirror component for React. Demo Preview: [@uiwjs.github.io/react-codemirror
 
 ## Install
 
+**Not dependent on uiw.**
+
 ```bash
-# Not dependent on uiw.
 npm install @uiw/react-codemirror --save
 ```
 
@@ -36,11 +37,12 @@ npm install @uiw/react-codemirror --save
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-slvju?fontsize=14&hidenavigation=1&theme=dark)
 
-```jsx
+```jsx mdx:preview
+import React from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 
-export default function App() {
+function App() {
   return (
     <CodeMirror
       value="console.log('hello world!');"
@@ -52,6 +54,7 @@ export default function App() {
     />
   );
 }
+export default App;
 ```
 
 ## Support Language
@@ -60,7 +63,7 @@ export default function App() {
 
 ```jsx
 import CodeMirror from '@uiw/react-codemirror';
-import { StreamLanguage } from '@codemirror/stream-parser';
+import { StreamLanguage } from '@codemirror/language';
 import { go } from '@codemirror/legacy-modes/mode/go';
 
 const goLang = `package main
@@ -170,16 +173,46 @@ export default function App() {
 ## Using custom theme
 
 ```jsx
-import { oneDark } from '@codemirror/theme-one-dark';
 import CodeMirror from '@uiw/react-codemirror';
+import { createTheme } from '@uiw/codemirror-themes';
 import { javascript } from '@codemirror/lang-javascript';
+import { tags as t } from '@lezer/highlight';
+
+const myTheme = createTheme({
+  variant: 'light',
+  settings: {
+    background: '#ffffff',
+    foreground: '#75baff',
+    caret: '#5d00ff',
+    selection: '#036dd626',
+    lineHighlight: '#8a91991a',
+    gutterBackground: '#fff',
+    gutterForeground: '#8a919966',
+  },
+  styles: [
+    { tag: t.comment, color: '#787b8099' },
+    { tag: t.variableName, color: '#0080ff' },
+    { tag: [t.string, t.special(t.brace)], color: '#5c6166' },
+    { tag: t.number, color: '#5c6166' },
+    { tag: t.bool, color: '#5c6166' },
+    { tag: t.null, color: '#5c6166' },
+    { tag: t.keyword, color: '#5c6166' },
+    { tag: t.operator, color: '#5c6166' },
+    { tag: t.className, color: '#5c6166' },
+    { tag: t.definition(t.typeName), color: '#5c6166' },
+    { tag: t.typeName, color: '#5c6166' },
+    { tag: t.angleBracket, color: '#5c6166' },
+    { tag: t.tagName, color: '#5c6166' },
+    { tag: t.attributeName, color: '#5c6166' },
+  ],
+});
 
 export default function App() {
   return (
     <CodeMirror
       value="console.log('hello world!');"
-      height="100%"
-      theme={oneDark}
+      height="200px"
+      theme={myTheme}
       extensions={[javascript({ jsx: true })]}
       onChange={(value, viewUpdate) => {
         console.log('value:', value);
@@ -240,7 +273,7 @@ export interface ReactCodeMirrorProps
    * Whether to optional basicSetup by default
    * @default true
    */
-  basicSetup?: boolean;
+  basicSetup?: boolean | BasicSetupOptions;
   /**
    * This disables editing of the editor content by the user.
    * @default true
@@ -282,6 +315,32 @@ declare const ReactCodeMirror: React.ForwardRefExoticComponent<
   ReactCodeMirrorProps & React.RefAttributes<ReactCodeMirrorRef>
 >;
 export default ReactCodeMirror;
+export interface BasicSetupOptions {
+  lineNumbers?: boolean;
+  highlightActiveLineGutter?: boolean;
+  highlightSpecialChars?: boolean;
+  history?: boolean;
+  foldGutter?: boolean;
+  drawSelection?: boolean;
+  dropCursor?: boolean;
+  allowMultipleSelections?: boolean;
+  indentOnInput?: boolean;
+  syntaxHighlighting?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  autocompletion?: boolean;
+  rectangularSelection?: boolean;
+  crosshairCursor?: boolean;
+  highlightActiveLine?: boolean;
+  highlightSelectionMatches?: boolean;
+  closeBracketsKeymap?: boolean;
+  defaultKeymap?: boolean;
+  searchKeymap?: boolean;
+  historyKeymap?: boolean;
+  foldKeymap?: boolean;
+  completionKeymap?: boolean;
+  lintKeymap?: boolean;
+}
 ```
 
 ### Related

package/cjs/basicSetup.d.ts

@@ -0,0 +1,65 @@
+import { Extension } from '@codemirror/state';
+export interface BasicSetupOptions {
+    lineNumbers?: boolean;
+    highlightActiveLineGutter?: boolean;
+    highlightSpecialChars?: boolean;
+    history?: boolean;
+    foldGutter?: boolean;
+    drawSelection?: boolean;
+    dropCursor?: boolean;
+    allowMultipleSelections?: boolean;
+    indentOnInput?: boolean;
+    syntaxHighlighting?: boolean;
+    bracketMatching?: boolean;
+    closeBrackets?: boolean;
+    autocompletion?: boolean;
+    rectangularSelection?: boolean;
+    crosshairCursor?: boolean;
+    highlightActiveLine?: boolean;
+    highlightSelectionMatches?: boolean;
+    closeBracketsKeymap?: boolean;
+    defaultKeymap?: boolean;
+    searchKeymap?: boolean;
+    historyKeymap?: boolean;
+    foldKeymap?: boolean;
+    completionKeymap?: boolean;
+    lintKeymap?: boolean;
+}
+/**
+This is an extension value that just pulls together a number of
+extensions that you might want in a basic editor. It is meant as a
+convenient helper to quickly set up CodeMirror without installing
+and importing a lot of separate packages.
+
+Specifically, it includes...
+
+ - [the default command bindings](https://codemirror.net/6/docs/ref/#commands.defaultKeymap)
+ - [line numbers](https://codemirror.net/6/docs/ref/#view.lineNumbers)
+ - [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars)
+ - [the undo history](https://codemirror.net/6/docs/ref/#commands.history)
+ - [a fold gutter](https://codemirror.net/6/docs/ref/#language.foldGutter)
+ - [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection)
+ - [drop cursor](https://codemirror.net/6/docs/ref/#view.dropCursor)
+ - [multiple selections](https://codemirror.net/6/docs/ref/#state.EditorState^allowMultipleSelections)
+ - [reindentation on input](https://codemirror.net/6/docs/ref/#language.indentOnInput)
+ - [the default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle) (as fallback)
+ - [bracket matching](https://codemirror.net/6/docs/ref/#language.bracketMatching)
+ - [bracket closing](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets)
+ - [autocompletion](https://codemirror.net/6/docs/ref/#autocomplete.autocompletion)
+ - [rectangular selection](https://codemirror.net/6/docs/ref/#view.rectangularSelection) and [crosshair cursor](https://codemirror.net/6/docs/ref/#view.crosshairCursor)
+ - [active line highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLine)
+ - [active line gutter highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLineGutter)
+ - [selection match highlighting](https://codemirror.net/6/docs/ref/#search.highlightSelectionMatches)
+ - [search](https://codemirror.net/6/docs/ref/#search.searchKeymap)
+ - [linting](https://codemirror.net/6/docs/ref/#lint.lintKeymap)
+
+(You'll probably want to add some language package to your setup
+too.)
+
+This extension does not allow customization. The idea is that,
+once you decide you want to configure your editor more precisely,
+you take this package's source (which is just a bunch of imports
+and an array literal), copy it into your own code, and adjust it
+as desired.
+*/
+export declare const basicSetup: (options?: BasicSetupOptions) => Extension[];

package/cjs/basicSetup.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.basicSetup = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _view = require("@codemirror/view");
+
+var _state = require("@codemirror/state");
+
+var _commands = require("@codemirror/commands");
+
+var _search = require("@codemirror/search");
+
+var _autocomplete = require("@codemirror/autocomplete");
+
+var _language = require("@codemirror/language");
+
+var _lint = require("@codemirror/lint");
+
+/**
+This is an extension value that just pulls together a number of
+extensions that you might want in a basic editor. It is meant as a
+convenient helper to quickly set up CodeMirror without installing
+and importing a lot of separate packages.
+
+Specifically, it includes...
+
+ - [the default command bindings](https://codemirror.net/6/docs/ref/#commands.defaultKeymap)
+ - [line numbers](https://codemirror.net/6/docs/ref/#view.lineNumbers)
+ - [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars)
+ - [the undo history](https://codemirror.net/6/docs/ref/#commands.history)
+ - [a fold gutter](https://codemirror.net/6/docs/ref/#language.foldGutter)
+ - [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection)
+ - [drop cursor](https://codemirror.net/6/docs/ref/#view.dropCursor)
+ - [multiple selections](https://codemirror.net/6/docs/ref/#state.EditorState^allowMultipleSelections)
+ - [reindentation on input](https://codemirror.net/6/docs/ref/#language.indentOnInput)
+ - [the default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle) (as fallback)
+ - [bracket matching](https://codemirror.net/6/docs/ref/#language.bracketMatching)
+ - [bracket closing](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets)
+ - [autocompletion](https://codemirror.net/6/docs/ref/#autocomplete.autocompletion)
+ - [rectangular selection](https://codemirror.net/6/docs/ref/#view.rectangularSelection) and [crosshair cursor](https://codemirror.net/6/docs/ref/#view.crosshairCursor)
+ - [active line highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLine)
+ - [active line gutter highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLineGutter)
+ - [selection match highlighting](https://codemirror.net/6/docs/ref/#search.highlightSelectionMatches)
+ - [search](https://codemirror.net/6/docs/ref/#search.searchKeymap)
+ - [linting](https://codemirror.net/6/docs/ref/#lint.lintKeymap)
+
+(You'll probably want to add some language package to your setup
+too.)
+
+This extension does not allow customization. The idea is that,
+once you decide you want to configure your editor more precisely,
+you take this package's source (which is just a bunch of imports
+and an array literal), copy it into your own code, and adjust it
+as desired.
+*/
+var basicSetup = function basicSetup() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var keymaps = [];
+
+  if (options.closeBracketsKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_autocomplete.closeBracketsKeymap));
+  }
+
+  if (options.defaultKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_commands.defaultKeymap));
+  }
+
+  if (options.searchKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_search.searchKeymap));
+  }
+
+  if (options.historyKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_commands.historyKeymap));
+  }
+
+  if (options.foldKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_language.foldKeymap));
+  }
+
+  if (options.completionKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_autocomplete.completionKeymap));
+  }
+
+  if (options.lintKeymap !== false) {
+    keymaps.push((0, _toConsumableArray2["default"])(_lint.lintKeymap));
+  }
+
+  var extensions = [];
+  if (options.lineNumbers !== false) extensions.push((0, _view.lineNumbers)());
+  if (options.highlightActiveLineGutter !== false) extensions.push((0, _view.highlightActiveLineGutter)());
+  if (options.highlightSpecialChars !== false) extensions.push((0, _view.highlightSpecialChars)());
+  if (options.history !== false) extensions.push((0, _commands.history)());
+  if (options.foldGutter !== false) extensions.push((0, _language.foldGutter)());
+  if (options.drawSelection !== false) extensions.push((0, _view.drawSelection)());
+  if (options.dropCursor !== false) extensions.push((0, _view.dropCursor)());
+  if (options.allowMultipleSelections !== false) extensions.push(_state.EditorState.allowMultipleSelections.of(true));
+  if (options.indentOnInput !== false) extensions.push((0, _language.indentOnInput)());
+  if (options.syntaxHighlighting !== false) extensions.push((0, _language.syntaxHighlighting)(_language.defaultHighlightStyle, {
+    fallback: true
+  }));
+  if (options.bracketMatching !== false) extensions.push((0, _language.bracketMatching)());
+  if (options.closeBrackets !== false) extensions.push((0, _autocomplete.closeBrackets)());
+  if (options.autocompletion !== false) extensions.push((0, _autocomplete.autocompletion)());
+  if (options.rectangularSelection !== false) extensions.push((0, _view.rectangularSelection)());
+  if (options.crosshairCursor !== false) extensions.push((0, _view.crosshairCursor)());
+  if (options.highlightActiveLine !== false) extensions.push((0, _view.highlightActiveLine)());
+  if (options.highlightSelectionMatches !== false) extensions.push((0, _search.highlightSelectionMatches)());
+  return [].concat(extensions, [_view.keymap.of(keymaps.flat())]).filter(Boolean);
+};
+
+exports.basicSetup = basicSetup;
+//# sourceMappingURL=basicSetup.js.map

package/cjs/basicSetup.js.map

@@ -0,0 +1,49 @@
+{
+  "version": 3,
+  "names": [
+    "basicSetup",
+    "options",
+    "keymaps",
+    "closeBracketsKeymap",
+    "push",
+    "defaultKeymap",
+    "searchKeymap",
+    "historyKeymap",
+    "foldKeymap",
+    "completionKeymap",
+    "lintKeymap",
+    "extensions",
+    "lineNumbers",
+    "highlightActiveLineGutter",
+    "highlightSpecialChars",
+    "history",
+    "foldGutter",
+    "drawSelection",
+    "dropCursor",
+    "allowMultipleSelections",
+    "EditorState",
+    "of",
+    "indentOnInput",
+    "syntaxHighlighting",
+    "defaultHighlightStyle",
+    "fallback",
+    "bracketMatching",
+    "closeBrackets",
+    "autocompletion",
+    "rectangularSelection",
+    "crosshairCursor",
+    "highlightActiveLine",
+    "highlightSelectionMatches",
+    "keymap",
+    "flat",
+    "filter",
+    "Boolean"
+  ],
+  "sources": [
+    "../src/basicSetup.ts"
+  ],
+  "sourcesContent": [
+    "import {\n  KeyBinding,\n  lineNumbers,\n  highlightActiveLineGutter,\n  highlightSpecialChars,\n  drawSelection,\n  dropCursor,\n  rectangularSelection,\n  crosshairCursor,\n  highlightActiveLine,\n  keymap,\n} from '@codemirror/view';\nimport { EditorState, Extension } from '@codemirror/state';\nimport { history, defaultKeymap, historyKeymap } from '@codemirror/commands';\nimport { highlightSelectionMatches, searchKeymap } from '@codemirror/search';\nimport { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';\nimport {\n  foldGutter,\n  indentOnInput,\n  syntaxHighlighting,\n  defaultHighlightStyle,\n  bracketMatching,\n  foldKeymap,\n} from '@codemirror/language';\nimport { lintKeymap } from '@codemirror/lint';\n\nexport interface BasicSetupOptions {\n  lineNumbers?: boolean;\n  highlightActiveLineGutter?: boolean;\n  highlightSpecialChars?: boolean;\n  history?: boolean;\n  foldGutter?: boolean;\n  drawSelection?: boolean;\n  dropCursor?: boolean;\n  allowMultipleSelections?: boolean;\n  indentOnInput?: boolean;\n  syntaxHighlighting?: boolean;\n  bracketMatching?: boolean;\n  closeBrackets?: boolean;\n  autocompletion?: boolean;\n  rectangularSelection?: boolean;\n  crosshairCursor?: boolean;\n  highlightActiveLine?: boolean;\n  highlightSelectionMatches?: boolean;\n\n  closeBracketsKeymap?: boolean;\n  defaultKeymap?: boolean;\n  searchKeymap?: boolean;\n  historyKeymap?: boolean;\n  foldKeymap?: boolean;\n  completionKeymap?: boolean;\n  lintKeymap?: boolean;\n}\n\n/**\nThis is an extension value that just pulls together a number of\nextensions that you might want in a basic editor. It is meant as a\nconvenient helper to quickly set up CodeMirror without installing\nand importing a lot of separate packages.\n\nSpecifically, it includes...\n\n - [the default command bindings](https://codemirror.net/6/docs/ref/#commands.defaultKeymap)\n - [line numbers](https://codemirror.net/6/docs/ref/#view.lineNumbers)\n - [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars)\n - [the undo history](https://codemirror.net/6/docs/ref/#commands.history)\n - [a fold gutter](https://codemirror.net/6/docs/ref/#language.foldGutter)\n - [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection)\n - [drop cursor](https://codemirror.net/6/docs/ref/#view.dropCursor)\n - [multiple selections](https://codemirror.net/6/docs/ref/#state.EditorState^allowMultipleSelections)\n - [reindentation on input](https://codemirror.net/6/docs/ref/#language.indentOnInput)\n - [the default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle) (as fallback)\n - [bracket matching](https://codemirror.net/6/docs/ref/#language.bracketMatching)\n - [bracket closing](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets)\n - [autocompletion](https://codemirror.net/6/docs/ref/#autocomplete.autocompletion)\n - [rectangular selection](https://codemirror.net/6/docs/ref/#view.rectangularSelection) and [crosshair cursor](https://codemirror.net/6/docs/ref/#view.crosshairCursor)\n - [active line highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLine)\n - [active line gutter highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLineGutter)\n - [selection match highlighting](https://codemirror.net/6/docs/ref/#search.highlightSelectionMatches)\n - [search](https://codemirror.net/6/docs/ref/#search.searchKeymap)\n - [linting](https://codemirror.net/6/docs/ref/#lint.lintKeymap)\n\n(You'll probably want to add some language package to your setup\ntoo.)\n\nThis extension does not allow customization. The idea is that,\nonce you decide you want to configure your editor more precisely,\nyou take this package's source (which is just a bunch of imports\nand an array literal), copy it into your own code, and adjust it\nas desired.\n*/\nexport const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {\n  const keymaps: KeyBinding[][] = [];\n  if (options.closeBracketsKeymap !== false) {\n    keymaps.push([...closeBracketsKeymap]);\n  }\n  if (options.defaultKeymap !== false) {\n    keymaps.push([...defaultKeymap]);\n  }\n  if (options.searchKeymap !== false) {\n    keymaps.push([...searchKeymap]);\n  }\n  if (options.historyKeymap !== false) {\n    keymaps.push([...historyKeymap]);\n  }\n  if (options.foldKeymap !== false) {\n    keymaps.push([...foldKeymap]);\n  }\n  if (options.completionKeymap !== false) {\n    keymaps.push([...completionKeymap]);\n  }\n  if (options.lintKeymap !== false) {\n    keymaps.push([...lintKeymap]);\n  }\n  const extensions: Extension[] = [];\n  if (options.lineNumbers !== false) extensions.push(lineNumbers());\n  if (options.highlightActiveLineGutter !== false) extensions.push(highlightActiveLineGutter());\n  if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());\n  if (options.history !== false) extensions.push(history());\n  if (options.foldGutter !== false) extensions.push(foldGutter());\n  if (options.drawSelection !== false) extensions.push(drawSelection());\n  if (options.dropCursor !== false) extensions.push(dropCursor());\n  if (options.allowMultipleSelections !== false) extensions.push(EditorState.allowMultipleSelections.of(true));\n  if (options.indentOnInput !== false) extensions.push(indentOnInput());\n  if (options.syntaxHighlighting !== false)\n    extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }));\n  if (options.bracketMatching !== false) extensions.push(bracketMatching());\n  if (options.closeBrackets !== false) extensions.push(closeBrackets());\n  if (options.autocompletion !== false) extensions.push(autocompletion());\n  if (options.rectangularSelection !== false) extensions.push(rectangularSelection());\n  if (options.crosshairCursor !== false) extensions.push(crosshairCursor());\n  if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine());\n  if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches());\n\n  return [...extensions, keymap.of(keymaps.flat())].filter(Boolean);\n};\n"
+  ],
+  "mappings": "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"
+}

package/cjs/index.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
-export * from '@codemirror/view';
-export * from '@codemirror/basic-setup';
-export * from '@codemirror/state';
+import { BasicSetupOptions } from './basicSetup';
+export * from './basicSetup';
 export * from './useCodeMirror';
 export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'extensions'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
     /** value of the auto created model in the editor. */
@@ -27,12 +26,16 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
      * Whether to optional basicSetup by default
      * @default true
      */
-    basicSetup?: boolean;
+    basicSetup?: boolean | BasicSetupOptions;
     /**
      * This disables editing of the editor content by the user.
      * @default true
      */
     editable?: boolean;
+    /**
+     * This disables editing of the editor content by the user.
+     * @default false
+     */
     readOnly?: boolean;
     /**
      * Whether to optional basicSetup by default

package/cjs/index.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {};
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
@@ -34,21 +34,7 @@ Object.keys(_useCodeMirror2).forEach(function (key) {
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _view = require("@codemirror/view");
-
-Object.keys(_view).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _view[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _view[key];
-    }
-  });
-});
-
-var _basicSetup = require("@codemirror/basic-setup");
+var _basicSetup = require("./basicSetup");
 
 Object.keys(_basicSetup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -61,23 +47,9 @@ Object.keys(_basicSetup).forEach(function (key) {
     }
   });
 });
-
-var _state = require("@codemirror/state");
-
-Object.keys(_state).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _state[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _state[key];
-    }
-  });
-});
 var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root"];
 
-var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var ReactCodeMirror = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var className = props.className,
       _props$value = props.value,
       value = _props$value === void 0 ? '' : _props$value,
@@ -101,7 +73,7 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
       editable = props.editable,
       readOnly = props.readOnly,
       root = props.root,
-      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+      other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var editor = (0, _react.useRef)(null);
 
   var _useCodeMirror = (0, _useCodeMirror2.useCodeMirror)({
@@ -143,11 +115,11 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }, []); // check type of value
 
   if (typeof value !== 'string') {
-    throw new Error("value must be typeof string but got ".concat((0, _typeof2.default)(value)));
+    throw new Error("value must be typeof string but got ".concat((0, _typeof2["default"])(value)));
   }
 
   var defaultClassNames = typeof theme === 'string' ? "cm-theme-".concat(theme) : 'cm-theme';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({
     ref: editor,
     className: "".concat(defaultClassNames).concat(className ? " ".concat(className) : '')
   }, other));
@@ -155,5 +127,5 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
 ReactCodeMirror.displayName = 'CodeMirror';
 var _default = ReactCodeMirror;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1,8 +1,5 @@
 {
   "version": 3,
-  "sources": [
-    "../src/index.tsx"
-  ],
   "names": [
     "ReactCodeMirror",
     "React",
@@ -31,17 +28,24 @@
     "root",
     "other",
     "editor",
+    "useRef",
+    "useCodeMirror",
     "container",
     "current",
     "state",
     "view",
     "setContainer",
+    "useImperativeHandle",
+    "useEffect",
     "Error",
     "defaultClassNames",
     "displayName"
   ],
-  "mappings": "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",
+  "sources": [
+    "../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';\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  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 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    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, { 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 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    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"
+  ],
+  "mappings": "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"
 }

package/cjs/theme/light.js.map

@@ -1,8 +1,5 @@
 {
   "version": 3,
-  "sources": [
-    "../../src/theme/light.ts"
-  ],
   "names": [
     "defaultLightThemeOption",
     "EditorView",
@@ -10,8 +7,11 @@
     "backgroundColor",
     "dark"
   ],
-  "mappings": ";;;;;;;AAAA;;AAEO,IAAMA,uBAAuB,GAAGC,iBAAWC,KAAX,CACrC;AACE,OAAK;AACHC,IAAAA,eAAe,EAAE;AADd;AADP,CADqC,EAMrC;AACEC,EAAAA,IAAI,EAAE;AADR,CANqC,CAAhC",
+  "sources": [
+    "../../src/theme/light.ts"
+  ],
   "sourcesContent": [
     "import { EditorView } from '@codemirror/view';\n\nexport const defaultLightThemeOption = EditorView.theme(\n  {\n    '&': {\n      backgroundColor: '#fff',\n    },\n  },\n  {\n    dark: false,\n  },\n);\n"
-  ]
+  ],
+  "mappings": ";;;;;;;AAAA;;AAEO,IAAMA,uBAAuB,GAAGC,gBAAA,CAAWC,KAAX,CACrC;EACE,KAAK;IACHC,eAAe,EAAE;EADd;AADP,CADqC,EAMrC;EACEC,IAAI,EAAE;AADR,CANqC,CAAhC"
 }

package/cjs/useCodeMirror.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { ReactCodeMirrorProps } from './';
+import { ReactCodeMirrorProps } from '.';
 export interface UseCodeMirror extends ReactCodeMirrorProps {
     container?: HTMLDivElement | null;
 }