@uiw/react-codemirror 4.9.0 → 4.9.3

package/README.md

@@ -43,14 +43,15 @@ import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 
 function App() {
+  const onChange = React.useCallback((value, viewUpdate) => {
+    console.log('value:', value);
+  }, []);
   return (
     <CodeMirror
       value="console.log('hello world!');"
       height="200px"
       extensions={[javascript({ jsx: true })]}
-      onChange={(value, viewUpdate) => {
-        console.log('value:', value);
-      }}
+      onChange={onChange}
     />
   );
 }
@@ -79,9 +80,6 @@ export default function App() {
       value={goLang}
       height="200px"
       extensions={[StreamLanguage.define(go)]}
-      onChange={(value, viewUpdate) => {
-        console.log('value:', value);
-      }}
     />
   );
 }
@@ -208,15 +206,16 @@ const myTheme = createTheme({
 });
 
 export default function App() {
+  const onChange = React.useCallback((value, viewUpdate) => {
+    console.log('value:', value);
+  }, []);
   return (
     <CodeMirror
       value="console.log('hello world!');"
       height="200px"
       theme={myTheme}
       extensions={[javascript({ jsx: true })]}
-      onChange={(value, viewUpdate) => {
-        console.log('value:', value);
-      }}
+      onChange={onChange}
     />
   );
 }
@@ -291,7 +290,7 @@ export interface ReactCodeMirrorProps
   indentWithTab?: boolean;
   /** Fired whenever a change occurs to the document. */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
-  /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */
+  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
   onUpdate?(viewUpdate: ViewUpdate): void;
   /**
    * 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.
@@ -343,6 +342,18 @@ export interface BasicSetupOptions {
 }
 ```
 
+## Packages
+
+| Name                            | NPM Version                                                                                                                                   | Website                                                                              |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `@uiw/react-codemirror`         | [![npm version](https://img.shields.io/npm/v/@uiw/react-codemirror.svg)](https://www.npmjs.com/package/@uiw/react-codemirror)                 | [Preview Website](https://uiwjs.github.io/react-codemirror/)                         |
+| `@uiw/codemirror-themes`        | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-themes.svg)](https://www.npmjs.com/package/@uiw/codemirror-themes)               | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/doc)              |
+| `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia)     |
+| `@uiw/codemirror-theme-duotone` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-duotone.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-duotone) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/duotoneDark) |
+| `@uiw/codemirror-theme-dracula` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-dracula.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-dracula) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula)     |
+
+<!--rehype:style=width: 100%; display: inline-table;-->
+
 ### Related
 
 - [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting.

package/cjs/index.d.ts

@@ -44,7 +44,7 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
     indentWithTab?: boolean;
     /** Fired whenever a change occurs to the document. */
     onChange?(value: string, viewUpdate: ViewUpdate): void;
-    /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */
+    /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
     onUpdate?(viewUpdate: ViewUpdate): void;
     /**
      * 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.

package/cjs/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';\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"
+    "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n  /** value of the auto created model in the editor. */\n  value?: string;\n  height?: string;\n  minHeight?: string;\n  maxHeight?: string;\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  /** focus on the editor. */\n  autoFocus?: boolean;\n  /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n  placeholder?: string | HTMLElement;\n  /**\n   * `light` / `dark` / `Extension` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark' | Extension;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  basicSetup?: boolean | BasicSetupOptions;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  indentWithTab?: boolean;\n  /** Fired whenever a change occurs to the document. */\n  onChange?(value: string, viewUpdate: ViewUpdate): void;\n  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n  onUpdate?(viewUpdate: ViewUpdate): void;\n  /**\n   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n   * They can either be built-in extension-providing objects,\n   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n   */\n  extensions?: Extension[];\n  /**\n   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n   */\n  root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n  editor?: HTMLDivElement | null;\n  state?: EditorState;\n  view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n  const {\n    className,\n    value = '',\n    selection,\n    extensions = [],\n    onChange,\n    onUpdate,\n    autoFocus,\n    theme = 'light',\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    root,\n    ...other\n  } = props;\n  const editor = useRef<HTMLDivElement>(null);\n  const { state, view, container, setContainer } = useCodeMirror({\n    container: editor.current,\n    root,\n    value,\n    autoFocus,\n    theme,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    selection,\n    onChange,\n    onUpdate,\n    extensions,\n  });\n  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);\n  useEffect(() => {\n    setContainer(editor.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // check type of value\n  if (typeof value !== 'string') {\n    throw new Error(`value must be typeof string but got ${typeof value}`);\n  }\n\n  const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n  return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
   ],
   "mappings": "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"
 }

package/cjs/useCodeMirror.js

@@ -183,6 +183,14 @@ function useCodeMirror(props) {
       view.focus();
     }
   }, [autoFocus, view]);
+  (0, _react.useEffect)(function () {
+    if (view) {
+      view.dispatch({
+        effects: _state.StateEffect.reconfigure.of(getExtensions)
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth, placeholderStr, editable, readOnly, defaultIndentWithTab, defaultBasicSetup, onChange, onUpdate]);
   (0, _react.useEffect)(function () {
     var currentValue = view ? view.state.doc.toString() : '';
 
@@ -196,14 +204,6 @@ function useCodeMirror(props) {
       });
     }
   }, [value, view]);
-  (0, _react.useEffect)(function () {
-    if (view) {
-      view.dispatch({
-        effects: _state.StateEffect.reconfigure.of(getExtensions)
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [theme, extensions, height, minHeight, maxHeight, width, placeholderStr, minWidth, maxWidth, editable, defaultIndentWithTab, defaultBasicSetup]);
   return {
     state: state,
     setState: setState,

package/cjs/useCodeMirror.js.map

@@ -58,22 +58,22 @@
     "undefined",
     "destroy",
     "focus",
-    "currentValue",
     "dispatch",
+    "effects",
+    "StateEffect",
+    "reconfigure",
+    "currentValue",
     "changes",
     "from",
     "to",
     "length",
-    "insert",
-    "effects",
-    "StateEffect",
-    "reconfigure"
+    "insert"
   ],
   "sources": [
     "../src/useCodeMirror.ts"
   ],
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n  container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n  const {\n    value,\n    selection,\n    onChange,\n    onUpdate,\n    extensions = [],\n    autoFocus,\n    theme = 'light',\n    height = '',\n    minHeight = '',\n    maxHeight = '',\n    placeholder: placeholderStr = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    readOnly = false,\n    indentWithTab: defaultIndentWithTab = true,\n    basicSetup: defaultBasicSetup = true,\n    root,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\n  const defaultLightThemeOption = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: '#fff',\n      },\n    },\n    {\n      dark: false,\n    },\n  );\n  const defaultThemeOption = EditorView.theme({\n    '&': {\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n    },\n  });\n  const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {\n    if (vu.docChanged && typeof onChange === 'function') {\n      const doc = vu.state.doc;\n      const value = doc.toString();\n      onChange(value, vu);\n    }\n  });\n\n  let getExtensions = [updateListener, defaultThemeOption];\n  if (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    if (typeof defaultBasicSetup === 'boolean') {\n      getExtensions.unshift(basicSetup());\n    } else {\n      getExtensions.unshift(basicSetup(defaultBasicSetup));\n    }\n  }\n\n  if (placeholderStr) {\n    getExtensions.unshift(placeholder(placeholderStr));\n  }\n\n  switch (theme) {\n    case 'light':\n      getExtensions.push(defaultLightThemeOption);\n      break;\n    case 'dark':\n      getExtensions.push(oneDark);\n      break;\n    default:\n      getExtensions.push(theme);\n      break;\n  }\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\n  }\n  if (readOnly) {\n    getExtensions.push(EditorState.readOnly.of(true));\n  }\n\n  if (onUpdate && typeof onUpdate === 'function') {\n    getExtensions.push(EditorView.updateListener.of(onUpdate));\n  }\n  getExtensions = getExtensions.concat(extensions);\n\n  useEffect(() => {\n    if (container && !state) {\n      const stateCurrent = EditorState.create({\n        doc: value,\n        selection,\n        extensions: getExtensions,\n      });\n      setState(stateCurrent);\n      if (!view) {\n        const viewCurrent = new EditorView({\n          state: stateCurrent,\n          parent: container,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    return () => {\n      if (view) {\n        setView(undefined);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(\n    () => () => {\n      if (view) {\n        view.destroy();\n        setView(undefined);\n      }\n    },\n    [view],\n  );\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  useEffect(() => {\n    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    if (view) {\n      view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    theme,\n    extensions,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    placeholderStr,\n    editable,\n    readOnly,\n    defaultIndentWithTab,\n    defaultBasicSetup,\n    onChange,\n    onUpdate,\n  ]);\n\n  useEffect(() => {\n    const currentValue = view ? view.state.doc.toString() : '';\n    if (view && value !== currentValue) {\n      view.dispatch({\n        changes: { from: 0, to: currentValue.length, insert: value || '' },\n      });\n    }\n  }, [value, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
   ],
-  "mappings": ";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOO,SAASA,aAAT,CAAuBC,KAAvB,EAA6C;EAClD,IACEC,KADF,GAoBID,KApBJ,CACEC,KADF;EAAA,IAEEC,SAFF,GAoBIF,KApBJ,CAEEE,SAFF;EAAA,IAGEC,QAHF,GAoBIH,KApBJ,CAGEG,QAHF;EAAA,IAIEC,QAJF,GAoBIJ,KApBJ,CAIEI,QAJF;EAAA,wBAoBIJ,KApBJ,CAKEK,UALF;EAAA,IAKEA,UALF,kCAKe,EALf;EAAA,IAMEC,SANF,GAoBIN,KApBJ,CAMEM,SANF;EAAA,mBAoBIN,KApBJ,CAOEO,KAPF;EAAA,IAOEA,KAPF,6BAOU,OAPV;EAAA,oBAoBIP,KApBJ,CAQEQ,MARF;EAAA,IAQEA,MARF,8BAQW,EARX;EAAA,uBAoBIR,KApBJ,CASES,SATF;EAAA,IASEA,SATF,iCASc,EATd;EAAA,uBAoBIT,KApBJ,CAUEU,SAVF;EAAA,IAUEA,SAVF,iCAUc,EAVd;EAAA,yBAoBIV,KApBJ,CAWEW,WAXF;EAAA,IAWeC,cAXf,mCAWgC,EAXhC;EAAA,mBAoBIZ,KApBJ,CAYEa,KAZF;EAAA,IAYEA,KAZF,6BAYU,EAZV;EAAA,sBAoBIb,KApBJ,CAaEc,QAbF;EAAA,IAaEA,QAbF,gCAaa,EAbb;EAAA,sBAoBId,KApBJ,CAcEe,QAdF;EAAA,IAcEA,QAdF,gCAca,EAdb;EAAA,sBAoBIf,KApBJ,CAeEgB,QAfF;EAAA,IAeEA,QAfF,gCAea,IAfb;EAAA,sBAoBIhB,KApBJ,CAgBEiB,QAhBF;EAAA,IAgBEA,QAhBF,gCAgBa,KAhBb;EAAA,2BAoBIjB,KApBJ,CAiBEkB,aAjBF;EAAA,IAiBiBC,oBAjBjB,qCAiBwC,IAjBxC;EAAA,wBAoBInB,KApBJ,CAkBEoB,UAlBF;EAAA,IAkBcC,iBAlBd,kCAkBkC,IAlBlC;EAAA,IAmBEC,IAnBF,GAoBItB,KApBJ,CAmBEsB,IAnBF;;EAqBA,gBAAkC,IAAAC,eAAA,EAASvB,KAAK,CAACwB,SAAf,CAAlC;EAAA;EAAA,IAAOA,SAAP;EAAA,IAAkBC,YAAlB;;EACA,iBAAwB,IAAAF,eAAA,GAAxB;EAAA;EAAA,IAAOG,IAAP;EAAA,IAAaC,OAAb;;EACA,iBAA0B,IAAAJ,eAAA,GAA1B;EAAA;EAAA,IAAOK,KAAP;EAAA,IAAcC,QAAd;;EACA,IAAMC,uBAAuB,GAAGC,gBAAA,CAAWxB,KAAX,CAC9B;IACE,KAAK;MACHyB,eAAe,EAAE;IADd;EADP,CAD8B,EAM9B;IACEC,IAAI,EAAE;EADR,CAN8B,CAAhC;;EAUA,IAAMC,kBAAkB,GAAGH,gBAAA,CAAWxB,KAAX,CAAiB;IAC1C,KAAK;MACHC,MAAM,EAANA,MADG;MAEHC,SAAS,EAATA,SAFG;MAGHC,SAAS,EAATA,SAHG;MAIHG,KAAK,EAALA,KAJG;MAKHC,QAAQ,EAARA,QALG;MAMHC,QAAQ,EAARA;IANG;EADqC,CAAjB,CAA3B;;EAUA,IAAMoB,cAAc,GAAGJ,gBAAA,CAAWI,cAAX,CAA0BC,EAA1B,CAA6B,UAACC,EAAD,EAAoB;IACtE,IAAIA,EAAE,CAACC,UAAH,IAAiB,OAAOnC,QAAP,KAAoB,UAAzC,EAAqD;MACnD,IAAMoC,GAAG,GAAGF,EAAE,CAACT,KAAH,CAASW,GAArB;;MACA,IAAMtC,MAAK,GAAGsC,GAAG,CAACC,QAAJ,EAAd;;MACArC,QAAQ,CAACF,MAAD,EAAQoC,EAAR,CAAR;IACD;EACF,CANsB,CAAvB;;EAQA,IAAII,aAAa,GAAG,CAACN,cAAD,EAAiBD,kBAAjB,CAApB;;EACA,IAAIf,oBAAJ,EAA0B;IACxBsB,aAAa,CAACC,OAAd,CAAsBC,YAAA,CAAOP,EAAP,CAAU,CAAClB,uBAAD,CAAV,CAAtB;EACD;;EACD,IAAIG,iBAAJ,EAAuB;IACrB,IAAI,OAAOA,iBAAP,KAA6B,SAAjC,EAA4C;MAC1CoB,aAAa,CAACC,OAAd,CAAsB,IAAAtB,sBAAA,GAAtB;IACD,CAFD,MAEO;MACLqB,aAAa,CAACC,OAAd,CAAsB,IAAAtB,sBAAA,EAAWC,iBAAX,CAAtB;IACD;EACF;;EAED,IAAIT,cAAJ,EAAoB;IAClB6B,aAAa,CAACC,OAAd,CAAsB,IAAA/B,iBAAA,EAAYC,cAAZ,CAAtB;EACD;;EAED,QAAQL,KAAR;IACE,KAAK,OAAL;MACEkC,aAAa,CAACG,IAAd,CAAmBd,uBAAnB;MACA;;IACF,KAAK,MAAL;MACEW,aAAa,CAACG,IAAd,CAAmBC,qBAAnB;MACA;;IACF;MACEJ,aAAa,CAACG,IAAd,CAAmBrC,KAAnB;MACA;EATJ;;EAYA,IAAIS,QAAQ,KAAK,KAAjB,EAAwB;IACtByB,aAAa,CAACG,IAAd,CAAmBb,gBAAA,CAAWf,QAAX,CAAoBoB,EAApB,CAAuB,KAAvB,CAAnB;EACD;;EACD,IAAInB,QAAJ,EAAc;IACZwB,aAAa,CAACG,IAAd,CAAmBE,kBAAA,CAAY7B,QAAZ,CAAqBmB,EAArB,CAAwB,IAAxB,CAAnB;EACD;;EAED,IAAIhC,QAAQ,IAAI,OAAOA,QAAP,KAAoB,UAApC,EAAgD;IAC9CqC,aAAa,CAACG,IAAd,CAAmBb,gBAAA,CAAWI,cAAX,CAA0BC,EAA1B,CAA6BhC,QAA7B,CAAnB;EACD;;EACDqC,aAAa,GAAGA,aAAa,CAACM,MAAd,CAAqB1C,UAArB,CAAhB;EAEA,IAAA2C,gBAAA,EAAU,YAAM;IACd,IAAIxB,SAAS,IAAI,CAACI,KAAlB,EAAyB;MACvB,IAAMqB,YAAY,GAAGH,kBAAA,CAAYI,MAAZ,CAAmB;QACtCX,GAAG,EAAEtC,KADiC;QAEtCC,SAAS,EAATA,SAFsC;QAGtCG,UAAU,EAAEoC;MAH0B,CAAnB,CAArB;;MAKAZ,QAAQ,CAACoB,YAAD,CAAR;;MACA,IAAI,CAACvB,IAAL,EAAW;QACT,IAAMyB,WAAW,GAAG,IAAIpB,gBAAJ,CAAe;UACjCH,KAAK,EAAEqB,YAD0B;UAEjCG,MAAM,EAAE5B,SAFyB;UAGjCF,IAAI,EAAJA;QAHiC,CAAf,CAApB;QAKAK,OAAO,CAACwB,WAAD,CAAP;MACD;IACF;;IACD,OAAO,YAAM;MACX,IAAIzB,IAAJ,EAAU;QACRC,OAAO,CAAC0B,SAAD,CAAP;MACD;IACF,CAJD,CAjBc,CAsBd;EACD,CAvBD,EAuBG,CAAC7B,SAAD,EAAYI,KAAZ,CAvBH;EAyBA,IAAAoB,gBAAA,EACE;IAAA,OAAM,YAAM;MACV,IAAItB,IAAJ,EAAU;QACRA,IAAI,CAAC4B,OAAL;QACA3B,OAAO,CAAC0B,SAAD,CAAP;MACD;IACF,CALD;EAAA,CADF,EAOE,CAAC3B,IAAD,CAPF;EAUA,IAAAsB,gBAAA,EAAU,YAAM;IACd,IAAI1C,SAAS,IAAIoB,IAAjB,EAAuB;MACrBA,IAAI,CAAC6B,KAAL;IACD;EACF,CAJD,EAIG,CAACjD,SAAD,EAAYoB,IAAZ,CAJH;EAMA,IAAAsB,gBAAA,EAAU,YAAM;IACd,IAAMQ,YAAY,GAAG9B,IAAI,GAAGA,IAAI,CAACE,KAAL,CAAWW,GAAX,CAAeC,QAAf,EAAH,GAA+B,EAAxD;;IACA,IAAId,IAAI,IAAIzB,KAAK,KAAKuD,YAAtB,EAAoC;MAClC9B,IAAI,CAAC+B,QAAL,CAAc;QACZC,OAAO,EAAE;UAAEC,IAAI,EAAE,CAAR;UAAWC,EAAE,EAAEJ,YAAY,CAACK,MAA5B;UAAoCC,MAAM,EAAE7D,KAAK,IAAI;QAArD;MADG,CAAd;IAGD;EACF,CAPD,EAOG,CAACA,KAAD,EAAQyB,IAAR,CAPH;EASA,IAAAsB,gBAAA,EAAU,YAAM;IACd,IAAItB,IAAJ,EAAU;MACRA,IAAI,CAAC+B,QAAL,CAAc;QAAEM,OAAO,EAAEC,kBAAA,CAAYC,WAAZ,CAAwB7B,EAAxB,CAA2BK,aAA3B;MAAX,CAAd;IACD,CAHa,CAId;;EACD,CALD,EAKG,CACDlC,KADC,EAEDF,UAFC,EAGDG,MAHC,EAIDC,SAJC,EAKDC,SALC,EAMDG,KANC,EAODD,cAPC,EAQDE,QARC,EASDC,QATC,EAUDC,QAVC,EAWDG,oBAXC,EAYDE,iBAZC,CALH;EAoBA,OAAO;IAAEO,KAAK,EAALA,KAAF;IAASC,QAAQ,EAARA,QAAT;IAAmBH,IAAI,EAAJA,IAAnB;IAAyBC,OAAO,EAAPA,OAAzB;IAAkCH,SAAS,EAATA,SAAlC;IAA6CC,YAAY,EAAZA;EAA7C,CAAP;AACD"
+  "mappings": "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"
 }

package/dist/mdeditor.js

@@ -3546,7 +3546,10 @@ const parseWorker = /*@__PURE__*/view_.ViewPlugin.fromClass(class ParseWorker {
     eventHandlers: { focus() { this.scheduleWork(); } }
 });
 /**
-The facet used to associate a language with an editor state.
+The facet used to associate a language with an editor state. Used
+by `Language` object's `extension` property (so you don't need to
+manually wrap your languages in this). Can be used to access the
+current language on a state.
 */
 const language = /*@__PURE__*/state_.Facet.define({
     combine(languages) { return languages.length ? languages[0] : null; },
@@ -4134,6 +4137,13 @@ function selectedLines(view) {
     }
     return lines;
 }
+/**
+The state field that stores the folded ranges (as a [decoration
+set](https://codemirror.net/6/docs/ref/#view.DecorationSet)). Can be passed to
+[`EditorState.toJSON`](https://codemirror.net/6/docs/ref/#state.EditorState.toJSON) and
+[`fromJSON`](https://codemirror.net/6/docs/ref/#state.EditorState^fromJSON) to serialize the fold
+state.
+*/
 const foldState = /*@__PURE__*/state_.StateField.define({
     create() {
         return view_.Decoration.none;
@@ -4161,7 +4171,24 @@ const foldState = /*@__PURE__*/state_.StateField.define({
         }
         return folded;
     },
-    provide: f => view_.EditorView.decorations.from(f)
+    provide: f => view_.EditorView.decorations.from(f),
+    toJSON(folded, state) {
+        let ranges = [];
+        folded.between(0, state.doc.length, (from, to) => { ranges.push(from, to); });
+        return ranges;
+    },
+    fromJSON(value) {
+        if (!Array.isArray(value) || value.length % 2)
+            throw new RangeError("Invalid JSON for fold state");
+        let ranges = [];
+        for (let i = 0; i < value.length;) {
+            let from = value[i++], to = value[i++];
+            if (typeof from != "number" || typeof to != "number")
+                throw new RangeError("Invalid JSON for fold state");
+            ranges.push(foldWidget.range(from, to));
+        }
+        return view_.Decoration.set(ranges, true);
+    }
 });
 /**
 Get a [range set](https://codemirror.net/6/docs/ref/#state.RangeSet) containing the folded ranges
@@ -5179,8 +5206,8 @@ for (let [legacyName, name] of [
     ["variable-2", "variableName.special"],
     ["string-2", "string.special"],
     ["def", "variableName.definition"],
-    ["tag", "typeName"],
-    ["attribute", "propertyName"],
+    ["tag", "tagName"],
+    ["attribute", "attributeName"],
     ["type", "typeName"],
     ["builtin", "variableName.standard"],
     ["qualifier", "modifier"],
@@ -10491,8 +10518,8 @@ as desired.
 */var basicSetup=function basicSetup(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var keymaps=[];if(options.closeBracketsKeymap!==false){keymaps.push(_toConsumableArray(closeBracketsKeymap));}if(options.defaultKeymap!==false){keymaps.push(_toConsumableArray(defaultKeymap));}if(options.searchKeymap!==false){keymaps.push(_toConsumableArray(searchKeymap));}if(options.historyKeymap!==false){keymaps.push(_toConsumableArray(historyKeymap));}if(options.foldKeymap!==false){keymaps.push(_toConsumableArray(foldKeymap));}if(options.completionKeymap!==false){keymaps.push(_toConsumableArray(completionKeymap));}if(options.lintKeymap!==false){keymaps.push(_toConsumableArray(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(dist_history());if(options.foldGutter!==false)extensions.push(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(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((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(highlightSelectionMatches());return[].concat(extensions,[view_.keymap.of(keymaps.flat())]).filter(Boolean);};
 ;// CONCATENATED MODULE: ./src/useCodeMirror.ts
 function useCodeMirror(props){var value=props.value,selection=props.selection,onChange=props.onChange,onUpdate=props.onUpdate,_props$extensions=props.extensions,extensions=_props$extensions===void 0?[]:_props$extensions,autoFocus=props.autoFocus,_props$theme=props.theme,theme=_props$theme===void 0?'light':_props$theme,_props$height=props.height,height=_props$height===void 0?'':_props$height,_props$minHeight=props.minHeight,minHeight=_props$minHeight===void 0?'':_props$minHeight,_props$maxHeight=props.maxHeight,maxHeight=_props$maxHeight===void 0?'':_props$maxHeight,_props$placeholder=props.placeholder,placeholderStr=_props$placeholder===void 0?'':_props$placeholder,_props$width=props.width,width=_props$width===void 0?'':_props$width,_props$minWidth=props.minWidth,minWidth=_props$minWidth===void 0?'':_props$minWidth,_props$maxWidth=props.maxWidth,maxWidth=_props$maxWidth===void 0?'':_props$maxWidth,_props$editable=props.editable,editable=_props$editable===void 0?true:_props$editable,_props$readOnly=props.readOnly,readOnly=_props$readOnly===void 0?false:_props$readOnly,_props$indentWithTab=props.indentWithTab,defaultIndentWithTab=_props$indentWithTab===void 0?true:_props$indentWithTab,_props$basicSetup=props.basicSetup,defaultBasicSetup=_props$basicSetup===void 0?true:_props$basicSetup,root=props.root;var _useState=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.container),_useState2=_slicedToArray(_useState,2),container=_useState2[0],setContainer=_useState2[1];var _useState3=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(),_useState4=_slicedToArray(_useState3,2),view=_useState4[0],setView=_useState4[1];var _useState5=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(),_useState6=_slicedToArray(_useState5,2),state=_useState6[0],setState=_useState6[1];var defaultLightThemeOption=view_.EditorView.theme({'&':{backgroundColor:'#fff'}},{dark:false});var defaultThemeOption=view_.EditorView.theme({'&':{height:height,minHeight:minHeight,maxHeight:maxHeight,width:width,minWidth:minWidth,maxWidth:maxWidth}});var updateListener=view_.EditorView.updateListener.of(function(vu){if(vu.docChanged&&typeof onChange==='function'){var doc=vu.state.doc;var _value=doc.toString();onChange(_value,vu);}});var getExtensions=[updateListener,defaultThemeOption];if(defaultIndentWithTab){getExtensions.unshift(view_.keymap.of([indentWithTab]));}if(defaultBasicSetup){if(typeof defaultBasicSetup==='boolean'){getExtensions.unshift(basicSetup());}else{getExtensions.unshift(basicSetup(defaultBasicSetup));}}if(placeholderStr){getExtensions.unshift((0,view_.placeholder)(placeholderStr));}switch(theme){case'light':getExtensions.push(defaultLightThemeOption);break;case'dark':getExtensions.push(theme_one_dark_.oneDark);break;default:getExtensions.push(theme);break;}if(editable===false){getExtensions.push(view_.EditorView.editable.of(false));}if(readOnly){getExtensions.push(state_.EditorState.readOnly.of(true));}if(onUpdate&&typeof onUpdate==='function'){getExtensions.push(view_.EditorView.updateListener.of(onUpdate));}getExtensions=getExtensions.concat(extensions);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(container&&!state){var stateCurrent=state_.EditorState.create({doc:value,selection:selection,extensions:getExtensions});setState(stateCurrent);if(!view){var viewCurrent=new view_.EditorView({state:stateCurrent,parent:container,root:root});setView(viewCurrent);}}return function(){if(view){setView(undefined);}};// eslint-disable-next-line react-hooks/exhaustive-deps
-},[container,state]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){return function(){if(view){view.destroy();setView(undefined);}};},[view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(autoFocus&&view){view.focus();}},[autoFocus,view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){var currentValue=view?view.state.doc.toString():'';if(view&&value!==currentValue){view.dispatch({changes:{from:0,to:currentValue.length,insert:value||''}});}},[value,view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(view){view.dispatch({effects:state_.StateEffect.reconfigure.of(getExtensions)});}// eslint-disable-next-line react-hooks/exhaustive-deps
-},[theme,extensions,height,minHeight,maxHeight,width,placeholderStr,minWidth,maxWidth,editable,defaultIndentWithTab,defaultBasicSetup]);return{state:state,setState:setState,view:view,setView:setView,container:container,setContainer:setContainer};}
+},[container,state]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){return function(){if(view){view.destroy();setView(undefined);}};},[view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(autoFocus&&view){view.focus();}},[autoFocus,view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(view){view.dispatch({effects:state_.StateEffect.reconfigure.of(getExtensions)});}// eslint-disable-next-line react-hooks/exhaustive-deps
+},[theme,extensions,height,minHeight,maxHeight,width,minWidth,maxWidth,placeholderStr,editable,readOnly,defaultIndentWithTab,defaultBasicSetup,onChange,onUpdate]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){var currentValue=view?view.state.doc.toString():'';if(view&&value!==currentValue){view.dispatch({changes:{from:0,to:currentValue.length,insert:value||''}});}},[value,view]);return{state:state,setState:setState,view:view,setView:setView,container:container,setContainer:setContainer};}
 // EXTERNAL MODULE: ../node_modules/react/jsx-runtime.js
 var jsx_runtime = __webpack_require__(605);
 ;// CONCATENATED MODULE: ./src/index.tsx