@uiw/react-codemirror 4.11.4 → 4.11.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/cjs/useCodeMirror.js +5 -1
- package/cjs/useCodeMirror.js.map +5 -3
- package/dist/mdeditor.js +79 -36
- package/dist/mdeditor.min.js +1 -1
- package/esm/useCodeMirror.js +3 -2
- package/esm/useCodeMirror.js.map +5 -3
- package/package.json +2 -2
- package/src/useCodeMirror.ts +3 -2
package/esm/useCodeMirror.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
2
2
|
import { EditorState, StateEffect } from '@codemirror/state';
|
|
3
3
|
import { indentWithTab } from '@codemirror/commands';
|
|
4
4
|
import { EditorView, keymap, placeholder } from '@codemirror/view';
|
|
@@ -49,13 +49,14 @@ export function useCodeMirror(props) {
|
|
|
49
49
|
maxWidth
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
|
+
var handleChange = useCallback((value, vu) => onChange && onChange(value, vu), []);
|
|
52
53
|
var updateListener = EditorView.updateListener.of(vu => {
|
|
53
54
|
if (vu.docChanged && typeof onChange === 'function') {
|
|
54
55
|
var doc = vu.state.doc;
|
|
55
56
|
|
|
56
57
|
var _value = doc.toString();
|
|
57
58
|
|
|
58
|
-
|
|
59
|
+
handleChange(_value, vu);
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
onStatistics && onStatistics(getStatistics(vu));
|
package/esm/useCodeMirror.js.map
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"names": [
|
|
4
|
+
"useCallback",
|
|
4
5
|
"useEffect",
|
|
5
6
|
"useState",
|
|
6
7
|
"EditorState",
|
|
@@ -45,9 +46,10 @@
|
|
|
45
46
|
"backgroundColor",
|
|
46
47
|
"dark",
|
|
47
48
|
"defaultThemeOption",
|
|
49
|
+
"handleChange",
|
|
50
|
+
"vu",
|
|
48
51
|
"updateListener",
|
|
49
52
|
"of",
|
|
50
|
-
"vu",
|
|
51
53
|
"docChanged",
|
|
52
54
|
"doc",
|
|
53
55
|
"toString",
|
|
@@ -76,7 +78,7 @@
|
|
|
76
78
|
"../src/useCodeMirror.ts"
|
|
77
79
|
],
|
|
78
80
|
"sourcesContent": [
|
|
79
|
-
"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 { basicSetup } from '@uiw/codemirror-extensions-basic-setup';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { getStatistics } from './utils';\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 onStatistics,\n onCreateEditor,\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<HTMLDivElement>();\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
|
|
81
|
+
"import { useCallback, useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { basicSetup } from '@uiw/codemirror-extensions-basic-setup';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { getStatistics } from './utils';\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 onStatistics,\n onCreateEditor,\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<HTMLDivElement>();\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 handleChange = useCallback((value: string, vu: ViewUpdate) => onChange && onChange(value, vu), []);\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 handleChange(value, vu);\n }\n onStatistics && onStatistics(getStatistics(vu));\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 onCreateEditor && onCreateEditor(viewCurrent, stateCurrent);\n }\n }\n return () => {\n if (view) {\n setState(undefined);\n setView(undefined);\n }\n };\n }, [container, state]);\n\n useEffect(() => setContainer(props.container!), [props.container]);\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"
|
|
80
82
|
],
|
|
81
|
-
"mappings": "AAAA,SAASA,
|
|
83
|
+
"mappings": "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"
|
|
82
84
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "4.11.
|
|
3
|
+
"version": "4.11.5",
|
|
4
4
|
"description": "CodeMirror component for React.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
6
|
"author": "kenny wong <wowohoo@qq.com>",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@babel/runtime": "^7.18.6",
|
|
39
39
|
"@codemirror/theme-one-dark": "^6.0.0",
|
|
40
|
-
"@uiw/codemirror-extensions-basic-setup": "4.11.
|
|
40
|
+
"@uiw/codemirror-extensions-basic-setup": "4.11.5",
|
|
41
41
|
"codemirror": "^6.0.0"
|
|
42
42
|
},
|
|
43
43
|
"keywords": [
|
package/src/useCodeMirror.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
2
2
|
import { EditorState, StateEffect } from '@codemirror/state';
|
|
3
3
|
import { indentWithTab } from '@codemirror/commands';
|
|
4
4
|
import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
|
|
@@ -58,11 +58,12 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
58
58
|
maxWidth,
|
|
59
59
|
},
|
|
60
60
|
});
|
|
61
|
+
const handleChange = useCallback((value: string, vu: ViewUpdate) => onChange && onChange(value, vu), []);
|
|
61
62
|
const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
|
|
62
63
|
if (vu.docChanged && typeof onChange === 'function') {
|
|
63
64
|
const doc = vu.state.doc;
|
|
64
65
|
const value = doc.toString();
|
|
65
|
-
|
|
66
|
+
handleChange(value, vu);
|
|
66
67
|
}
|
|
67
68
|
onStatistics && onStatistics(getStatistics(vu));
|
|
68
69
|
});
|