@uiw/react-codemirror 4.8.1 → 4.9.2

package/esm/index.js

@@ -4,6 +4,7 @@ var _excluded = ["className", "value", "selection", "extensions", "onChange", "o
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
 import { useCodeMirror } from './useCodeMirror';
 import { jsx as _jsx } from "react/jsx-runtime";
+export * from './basicSetup';
 export * from './useCodeMirror';
 var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
   var {

package/esm/index.js.map

@@ -45,7 +45,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\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": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,cAAc,iBAAd;AA8DA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;EACjG,IAAM;IACJC,SADI;IAEJC,KAAK,GAAG,EAFJ;IAGJC,SAHI;IAIJC,UAAU,GAAG,EAJT;IAKJC,QALI;IAMJC,QANI;IAOJC,SAPI;IAQJC,KAAK,GAAG,OARJ;IASJC,MATI;IAUJC,SAVI;IAWJC,SAXI;IAYJC,KAZI;IAaJC,QAbI;IAcJC,QAdI;IAeJC,UAfI;IAgBJC,WAhBI;IAiBJC,aAjBI;IAkBJC,QAlBI;IAmBJC,QAnBI;IAoBJC;EApBI,IAsBFrB,KAtBJ;EAAA,IAqBKsB,KArBL,iCAsBItB,KAtBJ;;EAuBA,IAAMuB,MAAM,GAAG5B,MAAM,CAAiB,IAAjB,CAArB;EACA,IAAM;IAAE6B,KAAF;IAASC,IAAT;IAAeC,SAAf;IAA0BC;EAA1B,IAA2C9B,aAAa,CAAC;IAC7D6B,SAAS,EAAEH,MAAM,CAACK,OAD2C;IAE7DP,IAF6D;IAG7DlB,KAH6D;IAI7DK,SAJ6D;IAK7DC,KAL6D;IAM7DC,MAN6D;IAO7DC,SAP6D;IAQ7DC,SAR6D;IAS7DC,KAT6D;IAU7DC,QAV6D;IAW7DC,QAX6D;IAY7DC,UAZ6D;IAa7DC,WAb6D;IAc7DC,aAd6D;IAe7DC,QAf6D;IAgB7DC,QAhB6D;IAiB7DhB,SAjB6D;IAkB7DE,QAlB6D;IAmB7DC,QAnB6D;IAoB7DF;EApB6D,CAAD,CAA9D;EAsBAT,mBAAmB,CAACK,GAAD,EAAM,OAAO;IAAEsB,MAAM,EAAEG,SAAV;IAAqBF,KAArB;IAA4BC;EAA5B,CAAP,CAAN,EAAkD,CAACC,SAAD,EAAYF,KAAZ,EAAmBC,IAAnB,CAAlD,CAAnB;EACA/B,SAAS,CAAC,MAAM;IACdiC,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ,CADc,CAEd;EACD,CAHQ,EAGN,EAHM,CAAT,CAhDiG,CAqDjG;;EACA,IAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;IAC7B,MAAM,IAAI0B,KAAJ,0CAAiD,OAAO1B,KAAxD,CAAN;EACD;;EAED,IAAM2B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;EACA,oBAAO;IAAK,GAAG,EAAEc,MAAV;IAAkB,SAAS,OAAKO,iBAAL,IAAyB5B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;EAA3B,GAA4FoB,KAA5F,EAAP;AACD,CA5DuB,CAAxB;AA8DAxB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf"
+  "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAGA,cAAc,cAAd;AACA,cAAc,iBAAd;AAkEA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;EACjG,IAAM;IACJC,SADI;IAEJC,KAAK,GAAG,EAFJ;IAGJC,SAHI;IAIJC,UAAU,GAAG,EAJT;IAKJC,QALI;IAMJC,QANI;IAOJC,SAPI;IAQJC,KAAK,GAAG,OARJ;IASJC,MATI;IAUJC,SAVI;IAWJC,SAXI;IAYJC,KAZI;IAaJC,QAbI;IAcJC,QAdI;IAeJC,UAfI;IAgBJC,WAhBI;IAiBJC,aAjBI;IAkBJC,QAlBI;IAmBJC,QAnBI;IAoBJC;EApBI,IAsBFrB,KAtBJ;EAAA,IAqBKsB,KArBL,iCAsBItB,KAtBJ;;EAuBA,IAAMuB,MAAM,GAAG5B,MAAM,CAAiB,IAAjB,CAArB;EACA,IAAM;IAAE6B,KAAF;IAASC,IAAT;IAAeC,SAAf;IAA0BC;EAA1B,IAA2C9B,aAAa,CAAC;IAC7D6B,SAAS,EAAEH,MAAM,CAACK,OAD2C;IAE7DP,IAF6D;IAG7DlB,KAH6D;IAI7DK,SAJ6D;IAK7DC,KAL6D;IAM7DC,MAN6D;IAO7DC,SAP6D;IAQ7DC,SAR6D;IAS7DC,KAT6D;IAU7DC,QAV6D;IAW7DC,QAX6D;IAY7DC,UAZ6D;IAa7DC,WAb6D;IAc7DC,aAd6D;IAe7DC,QAf6D;IAgB7DC,QAhB6D;IAiB7DhB,SAjB6D;IAkB7DE,QAlB6D;IAmB7DC,QAnB6D;IAoB7DF;EApB6D,CAAD,CAA9D;EAsBAT,mBAAmB,CAACK,GAAD,EAAM,OAAO;IAAEsB,MAAM,EAAEG,SAAV;IAAqBF,KAArB;IAA4BC;EAA5B,CAAP,CAAN,EAAkD,CAACC,SAAD,EAAYF,KAAZ,EAAmBC,IAAnB,CAAlD,CAAnB;EACA/B,SAAS,CAAC,MAAM;IACdiC,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ,CADc,CAEd;EACD,CAHQ,EAGN,EAHM,CAAT,CAhDiG,CAqDjG;;EACA,IAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;IAC7B,MAAM,IAAI0B,KAAJ,0CAAiD,OAAO1B,KAAxD,CAAN;EACD;;EAED,IAAM2B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;EACA,oBAAO;IAAK,GAAG,EAAEc,MAAV;IAAkB,SAAS,OAAKO,iBAAL,IAAyB5B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;EAA3B,GAA4FoB,KAA5F,EAAP;AACD,CA5DuB,CAAxB;AA8DAxB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf"
 }

package/esm/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;
 }

package/esm/useCodeMirror.js

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
-import { basicSetup } from 'codemirror';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
+import { basicSetup } from './basicSetup';
 export function useCodeMirror(props) {
   var {
     value,
@@ -62,7 +62,11 @@ export function useCodeMirror(props) {
   }
 
   if (defaultBasicSetup) {
-    getExtensions.unshift(basicSetup);
+    if (typeof defaultBasicSetup === 'boolean') {
+      getExtensions.unshift(basicSetup());
+    } else {
+      getExtensions.unshift(basicSetup(defaultBasicSetup));
+    }
   }
 
   if (placeholderStr) {

package/esm/useCodeMirror.js.map

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

package/package.json

@@ -1,60 +1,31 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.8.1",
+  "version": "4.9.2",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "exports": {
-    "import": "./esm/index.js",
-    "require": "./cjs/index.js"
-  },
+  "author": "kenny wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
   "scripts": {
-    "prepare": "husky install && npm run build",
+    "bundle": "ncc build src/index.tsx --target web --filename mdeditor && npm run bundle:min",
+    "bundle:watch": "ncc watch src/index.tsx --target web --filename mdeditor",
+    "bundle:min": "ncc build src/index.tsx --target web --filename mdeditor --minify",
     "watch": "tsbb watch",
     "build": "tsbb build",
-    "bundle": "ncc build src/index.tsx --target web --filename codemirror",
-    "bundle:min": "ncc build src/index.tsx --target web --filename codemirror --minify",
     "test": "tsbb test --env=jsdom",
-    "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}'"
+    "coverage": "tsbb test --env=jsdom --coverage --bail"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/uiwjs/react-codemirror.git"
   },
-  "keywords": [
-    "react",
-    "codemirror",
-    "codemirror6",
-    "react-codemirror",
-    "editor",
-    "syntax",
-    "ide",
-    "code"
-  ],
   "files": [
     "dist",
     "src",
     "esm",
     "cjs"
   ],
-  "author": "kenny wong <wowohoo@qq.com>",
-  "license": "MIT",
-  "jest": {
-    "coverageReporters": [
-      "lcov",
-      "json-summary"
-    ]
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "peerDependencies": {
     "@babel/runtime": ">=7.11.0",
     "react": ">=16.8.0",
@@ -65,55 +36,20 @@
     "@codemirror/theme-one-dark": "^6.0.0",
     "codemirror": "^6.0.0"
   },
-  "devDependencies": {
-    "@codemirror/lang-cpp": "~6.0.0",
-    "@codemirror/lang-html": "~6.0.0",
-    "@codemirror/lang-java": "~6.0.0",
-    "@codemirror/lang-javascript": "~6.0.0",
-    "@codemirror/lang-json": "~6.0.0",
-    "@codemirror/lang-lezer": "~6.0.0",
-    "@codemirror/lang-markdown": "~6.0.0",
-    "@codemirror/lang-php": "~6.0.0",
-    "@codemirror/lang-python": "~6.0.0",
-    "@codemirror/lang-rust": "~6.0.0",
-    "@codemirror/lang-sql": "~6.0.0",
-    "@codemirror/lang-xml": "~6.0.0",
-    "@codemirror/legacy-modes": "~6.0.0",
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/ncc": "~1.0.8",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
-    "@testing-library/react": "^13.0.0",
-    "@types/react": "~18.0.1",
-    "@types/react-dom": "~18.0.0",
-    "@types/react-test-renderer": "~18.0.0",
-    "@uiw/react-github-corners": "~1.5.14",
-    "@uiw/react-markdown-preview": "~4.0.5",
-    "@uiw/react-shields": "~1.1.3",
-    "@uiw/reset.css": "~1.0.5",
-    "@wcj/dark-mode": "~1.0.12",
-    "code-example": "~3.3.1",
-    "husky": "~8.0.0",
-    "kkt": "~7.1.5",
-    "lint-staged": "~13.0.0",
-    "markdown-react-code-preview-loader": "^2.1.2",
-    "prettier": "~2.6.0",
-    "react": "~18.1.0",
-    "react-code-preview-layout": "^2.0.2",
-    "react-dom": "~18.1.0",
-    "react-test-renderer": "~18.1.0",
-    "tsbb": "~3.7.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+  "keywords": [
+    "react",
+    "codemirror",
+    "codemirror6",
+    "react-codemirror",
+    "editor",
+    "syntax",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
     ]
   }
 }

package/src/basicSetup.ts

@@ -0,0 +1,136 @@
+import {
+  KeyBinding,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  drawSelection,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  highlightActiveLine,
+  keymap,
+} from '@codemirror/view';
+import { EditorState, Extension } from '@codemirror/state';
+import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+import {
+  foldGutter,
+  indentOnInput,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  bracketMatching,
+  foldKeymap,
+} from '@codemirror/language';
+import { lintKeymap } from '@codemirror/lint';
+
+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 const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
+  const keymaps: KeyBinding[][] = [];
+  if (options.closeBracketsKeymap !== false) {
+    keymaps.push([...closeBracketsKeymap]);
+  }
+  if (options.defaultKeymap !== false) {
+    keymaps.push([...defaultKeymap]);
+  }
+  if (options.searchKeymap !== false) {
+    keymaps.push([...searchKeymap]);
+  }
+  if (options.historyKeymap !== false) {
+    keymaps.push([...historyKeymap]);
+  }
+  if (options.foldKeymap !== false) {
+    keymaps.push([...foldKeymap]);
+  }
+  if (options.completionKeymap !== false) {
+    keymaps.push([...completionKeymap]);
+  }
+  if (options.lintKeymap !== false) {
+    keymaps.push([...lintKeymap]);
+  }
+  const extensions: Extension[] = [];
+  if (options.lineNumbers !== false) extensions.push(lineNumbers());
+  if (options.highlightActiveLineGutter !== false) extensions.push(highlightActiveLineGutter());
+  if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());
+  if (options.history !== false) extensions.push(history());
+  if (options.foldGutter !== false) extensions.push(foldGutter());
+  if (options.drawSelection !== false) extensions.push(drawSelection());
+  if (options.dropCursor !== false) extensions.push(dropCursor());
+  if (options.allowMultipleSelections !== false) extensions.push(EditorState.allowMultipleSelections.of(true));
+  if (options.indentOnInput !== false) extensions.push(indentOnInput());
+  if (options.syntaxHighlighting !== false)
+    extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }));
+  if (options.bracketMatching !== false) extensions.push(bracketMatching());
+  if (options.closeBrackets !== false) extensions.push(closeBrackets());
+  if (options.autocompletion !== false) extensions.push(autocompletion());
+  if (options.rectangularSelection !== false) extensions.push(rectangularSelection());
+  if (options.crosshairCursor !== false) extensions.push(crosshairCursor());
+  if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine());
+  if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches());
+
+  return [...extensions, keymap.of(keymaps.flat())].filter(Boolean);
+};

package/src/index.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useRef, useImperativeHandle } from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useCodeMirror } from './useCodeMirror';
+import { BasicSetupOptions } from './basicSetup';
 
+export * from './basicSetup';
 export * from './useCodeMirror';
 
 export interface ReactCodeMirrorProps
@@ -29,12 +31,16 @@ 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
    */
   editable?: boolean;
+  /**
+   * This disables editing of the editor content by the user.
+   * @default false
+   */
   readOnly?: boolean;
   /**
    * Whether to optional basicSetup by default

package/src/useCodeMirror.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { basicSetup } from 'codemirror';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { ReactCodeMirrorProps } from './';
+import { basicSetup } from './basicSetup';
+import { ReactCodeMirrorProps } from '.';
 
 export interface UseCodeMirror extends ReactCodeMirrorProps {
   container?: HTMLDivElement | null;
@@ -62,12 +62,17 @@ export function useCodeMirror(props: UseCodeMirror) {
       onChange(value, vu);
     }
   });
+
   let getExtensions = [updateListener, defaultThemeOption];
   if (defaultIndentWithTab) {
     getExtensions.unshift(keymap.of([indentWithTab]));
   }
   if (defaultBasicSetup) {
-    getExtensions.unshift(basicSetup);
+    if (typeof defaultBasicSetup === 'boolean') {
+      getExtensions.unshift(basicSetup());
+    } else {
+      getExtensions.unshift(basicSetup(defaultBasicSetup));
+    }
   }
 
   if (placeholderStr) {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 uiw
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.