@uiw/react-codemirror 4.4.0 → 4.4.1
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/cjs/useCodeMirror.js +8 -8
- package/cjs/useCodeMirror.js.map +5 -4
- package/dist/codemirror.js +6381 -33336
- package/dist/codemirror.min.js +1 -1
- package/esm/useCodeMirror.js +12 -12
- package/esm/useCodeMirror.js.map +5 -5
- package/package.json +1 -1
- package/src/useCodeMirror.ts +12 -12
package/esm/useCodeMirror.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
|
-
import { basicSetup
|
|
2
|
+
import { basicSetup } from '@codemirror/basic-setup';
|
|
3
3
|
import { EditorState, StateEffect } from '@codemirror/state';
|
|
4
|
-
import { indentWithTab
|
|
5
|
-
import { EditorView, keymap, placeholder
|
|
4
|
+
import { indentWithTab } from '@codemirror/commands';
|
|
5
|
+
import { EditorView, keymap, placeholder } from '@codemirror/view';
|
|
6
6
|
import { oneDark } from '@codemirror/theme-one-dark';
|
|
7
7
|
import { defaultLightThemeOption } from './theme/light';
|
|
8
8
|
export function useCodeMirror(props) {
|
|
@@ -17,13 +17,13 @@ export function useCodeMirror(props) {
|
|
|
17
17
|
height = '',
|
|
18
18
|
minHeight = '',
|
|
19
19
|
maxHeight = '',
|
|
20
|
-
placeholder = '',
|
|
20
|
+
placeholder: placeholderStr = '',
|
|
21
21
|
width = '',
|
|
22
22
|
minWidth = '',
|
|
23
23
|
maxWidth = '',
|
|
24
24
|
editable = true,
|
|
25
|
-
indentWithTab = true,
|
|
26
|
-
basicSetup = true,
|
|
25
|
+
indentWithTab: defaultIndentWithTab = true,
|
|
26
|
+
basicSetup: defaultBasicSetup = true,
|
|
27
27
|
root
|
|
28
28
|
} = props;
|
|
29
29
|
var [container, setContainer] = useState(props.container);
|
|
@@ -50,16 +50,16 @@ export function useCodeMirror(props) {
|
|
|
50
50
|
});
|
|
51
51
|
var getExtensions = [updateListener, defaultThemeOption];
|
|
52
52
|
|
|
53
|
-
if (
|
|
54
|
-
getExtensions.unshift(keymap.of([
|
|
53
|
+
if (defaultIndentWithTab) {
|
|
54
|
+
getExtensions.unshift(keymap.of([indentWithTab]));
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
if (
|
|
58
|
-
getExtensions.unshift(
|
|
57
|
+
if (defaultBasicSetup) {
|
|
58
|
+
getExtensions.unshift(basicSetup);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
if (
|
|
62
|
-
getExtensions.unshift(
|
|
61
|
+
if (placeholderStr) {
|
|
62
|
+
getExtensions.unshift(placeholder(placeholderStr));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
switch (theme) {
|
package/esm/useCodeMirror.js.map
CHANGED
|
@@ -7,15 +7,12 @@
|
|
|
7
7
|
"useEffect",
|
|
8
8
|
"useState",
|
|
9
9
|
"basicSetup",
|
|
10
|
-
"defaultBasicSetup",
|
|
11
10
|
"EditorState",
|
|
12
11
|
"StateEffect",
|
|
13
12
|
"indentWithTab",
|
|
14
|
-
"defaultIndentWithTab",
|
|
15
13
|
"EditorView",
|
|
16
14
|
"keymap",
|
|
17
15
|
"placeholder",
|
|
18
|
-
"extendPlaceholder",
|
|
19
16
|
"oneDark",
|
|
20
17
|
"defaultLightThemeOption",
|
|
21
18
|
"useCodeMirror",
|
|
@@ -30,10 +27,13 @@
|
|
|
30
27
|
"height",
|
|
31
28
|
"minHeight",
|
|
32
29
|
"maxHeight",
|
|
30
|
+
"placeholderStr",
|
|
33
31
|
"width",
|
|
34
32
|
"minWidth",
|
|
35
33
|
"maxWidth",
|
|
36
34
|
"editable",
|
|
35
|
+
"defaultIndentWithTab",
|
|
36
|
+
"defaultBasicSetup",
|
|
37
37
|
"root",
|
|
38
38
|
"container",
|
|
39
39
|
"setContainer",
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
"reconfigure",
|
|
69
69
|
"focus"
|
|
70
70
|
],
|
|
71
|
-
"mappings": "AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AACA,SAASC,
|
|
71
|
+
"mappings": "AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AACA,SAASC,UAAT,QAA2B,yBAA3B;AACA,SAASC,WAAT,EAAsBC,WAAtB,QAAyC,mBAAzC;AACA,SAASC,aAAT,QAA8B,sBAA9B;AACA,SAASC,UAAT,EAAqBC,MAArB,EAAyCC,WAAzC,QAA4D,kBAA5D;AACA,SAASC,OAAT,QAAwB,4BAAxB;AAEA,SAASC,uBAAT,QAAwC,eAAxC;AAMA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA6C;AAClD,MAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,SAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UAAU,GAAG,EALT;AAMJC,IAAAA,SANI;AAOJC,IAAAA,KAAK,GAAG,OAPJ;AAQJC,IAAAA,MAAM,GAAG,EARL;AASJC,IAAAA,SAAS,GAAG,EATR;AAUJC,IAAAA,SAAS,GAAG,EAVR;AAWJd,IAAAA,WAAW,EAAEe,cAAc,GAAG,EAX1B;AAYJC,IAAAA,KAAK,GAAG,EAZJ;AAaJC,IAAAA,QAAQ,GAAG,EAbP;AAcJC,IAAAA,QAAQ,GAAG,EAdP;AAeJC,IAAAA,QAAQ,GAAG,IAfP;AAgBJtB,IAAAA,aAAa,EAAEuB,oBAAoB,GAAG,IAhBlC;AAiBJ1B,IAAAA,UAAU,EAAE2B,iBAAiB,GAAG,IAjB5B;AAkBJC,IAAAA;AAlBI,MAmBFlB,KAnBJ;AAoBA,MAAM,CAACmB,SAAD,EAAYC,YAAZ,IAA4B/B,QAAQ,CAACW,KAAK,CAACmB,SAAP,CAA1C;AACA,MAAM,CAACE,IAAD,EAAOC,OAAP,IAAkBjC,QAAQ,EAAhC;AACA,MAAM,CAACkC,KAAD,EAAQC,QAAR,IAAoBnC,QAAQ,EAAlC;AACA,MAAMoC,kBAAkB,GAAG/B,UAAU,CAACa,KAAX,CAAiB;AAC1C,SAAK;AACHC,MAAAA,MADG;AAEHC,MAAAA,SAFG;AAGHC,MAAAA,SAHG;AAIHE,MAAAA,KAJG;AAKHC,MAAAA,QALG;AAMHC,MAAAA;AANG;AADqC,GAAjB,CAA3B;AAUA,MAAMY,cAAc,GAAGhC,UAAU,CAACgC,cAAX,CAA0BC,EAA1B,CAA8BC,EAAD,IAAoB;AACtE,QAAIA,EAAE,CAACC,UAAH,IAAiB,OAAO1B,QAAP,KAAoB,UAAzC,EAAqD;AACnD,UAAM2B,GAAG,GAAGF,EAAE,CAACL,KAAH,CAASO,GAArB;;AACA,UAAM7B,MAAK,GAAG6B,GAAG,CAACC,QAAJ,EAAd;;AACA5B,MAAAA,QAAQ,CAACF,MAAD,EAAQ2B,EAAR,CAAR;AACD;AACF,GANsB,CAAvB;AAOA,MAAII,aAAa,GAAG,CAACN,cAAD,EAAiBD,kBAAjB,CAApB;;AACA,MAAIT,oBAAJ,EAA0B;AACxBgB,IAAAA,aAAa,CAACC,OAAd,CAAsBtC,MAAM,CAACgC,EAAP,CAAU,CAAClC,aAAD,CAAV,CAAtB;AACD;;AACD,MAAIwB,iBAAJ,EAAuB;AACrBe,IAAAA,aAAa,CAACC,OAAd,CAAsB3C,UAAtB;AACD;;AAED,MAAIqB,cAAJ,EAAoB;AAClBqB,IAAAA,aAAa,CAACC,OAAd,CAAsBrC,WAAW,CAACe,cAAD,CAAjC;AACD;;AAED,UAAQJ,KAAR;AACE,SAAK,OAAL;AACEyB,MAAAA,aAAa,CAACE,IAAd,CAAmBpC,uBAAnB;AACA;;AACF,SAAK,MAAL;AACEkC,MAAAA,aAAa,CAACE,IAAd,CAAmBrC,OAAnB;AACA;;AACF;AACEmC,MAAAA,aAAa,CAACE,IAAd,CAAmB3B,KAAnB;AACA;AATJ;;AAYA,MAAIQ,QAAQ,KAAK,KAAjB,EAAwB;AACtBiB,IAAAA,aAAa,CAACE,IAAd,CAAmBxC,UAAU,CAACqB,QAAX,CAAoBY,EAApB,CAAuB,KAAvB,CAAnB;AACD;;AAED,MAAIvB,QAAQ,IAAI,OAAOA,QAAP,KAAoB,UAApC,EAAgD;AAC9C4B,IAAAA,aAAa,CAACE,IAAd,CAAmBxC,UAAU,CAACgC,cAAX,CAA0BC,EAA1B,CAA6BvB,QAA7B,CAAnB;AACD;;AACD4B,EAAAA,aAAa,GAAGA,aAAa,CAACG,MAAd,CAAqB9B,UAArB,CAAhB;AAEAjB,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI+B,SAAS,IAAI,CAACI,KAAlB,EAAyB;AACvB,UAAMa,YAAY,GAAG7C,WAAW,CAAC8C,MAAZ,CAAmB;AACtCP,QAAAA,GAAG,EAAE7B,KADiC;AAEtCC,QAAAA,SAFsC;AAGtCG,QAAAA,UAAU,EAAE2B;AAH0B,OAAnB,CAArB;AAKAR,MAAAA,QAAQ,CAACY,YAAD,CAAR;;AACA,UAAI,CAACf,IAAL,EAAW;AACT,YAAMiB,WAAW,GAAG,IAAI5C,UAAJ,CAAe;AACjC6B,UAAAA,KAAK,EAAEa,YAD0B;AAEjCG,UAAAA,MAAM,EAAEpB,SAFyB;AAGjCD,UAAAA;AAHiC,SAAf,CAApB;AAKAI,QAAAA,OAAO,CAACgB,WAAD,CAAP;AACD;AACF,KAhBa,CAiBd;;AACD,GAlBQ,EAkBN,CAACnB,SAAD,EAAYI,KAAZ,CAlBM,CAAT;AAoBAnC,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAM;AACX,UAAIiC,IAAJ,EAAU;AACRA,QAAAA,IAAI,CAACmB,OAAL;AACD;AACF,KAJD;AAKD,GANQ,EAMN,CAACnB,IAAD,CANM,CAAT;AAQAjC,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIiC,IAAJ,EAAU;AACR,UAAMoB,YAAY,GAAGpB,IAAI,CAACE,KAAL,CAAWO,GAAX,CAAeC,QAAf,EAArB;;AACA,UAAI9B,KAAK,KAAKwC,YAAd,EAA4B;AAC1BpB,QAAAA,IAAI,CAACqB,QAAL,CAAc;AACZC,UAAAA,OAAO,EAAE;AAAEC,YAAAA,IAAI,EAAE,CAAR;AAAWC,YAAAA,EAAE,EAAEJ,YAAY,CAACK,MAA5B;AAAoCC,YAAAA,MAAM,EAAE9C,KAAK,IAAI;AAArD;AADG,SAAd;AAGD;AACF;AACF,GATQ,EASN,CAACA,KAAD,EAAQoB,IAAR,CATM,CAAT;AAWAjC,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIiC,IAAJ,EAAU;AACRA,MAAAA,IAAI,CAACqB,QAAL,CAAc;AAAEM,QAAAA,OAAO,EAAExD,WAAW,CAACyD,WAAZ,CAAwBtB,EAAxB,CAA2BK,aAA3B;AAAX,OAAd;AACD,KAHa,CAId;;AACD,GALQ,EAKN,CACDzB,KADC,EAEDF,UAFC,EAGDT,WAHC,EAIDY,MAJC,EAKDC,SALC,EAMDC,SANC,EAODE,KAPC,EAQDC,QARC,EASDC,QATC,EAUDC,QAVC,EAWDtB,aAXC,EAYDH,UAZC,CALM,CAAT;AAoBAF,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIkB,SAAS,IAAIe,IAAjB,EAAuB;AACrBA,MAAAA,IAAI,CAAC6B,KAAL;AACD;AACF,GAJQ,EAIN,CAAC5C,SAAD,EAAYe,IAAZ,CAJM,CAAT;AAMA,SAAO;AAAEE,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBH,IAAAA,IAAnB;AAAyBC,IAAAA,OAAzB;AAAkCH,IAAAA,SAAlC;AAA6CC,IAAAA;AAA7C,GAAP;AACD",
|
|
72
72
|
"sourcesContent": [
|
|
73
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup
|
|
73
|
+
"import { useEffect, useState } from 'react';\nimport { basicSetup } from '@codemirror/basic-setup';\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 './';\nimport { defaultLightThemeOption } from './theme/light';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n const {\n value,\n selection,\n onChange,\n onUpdate,\n extensions = [],\n autoFocus,\n theme = 'light',\n height = '',\n minHeight = '',\n maxHeight = '',\n placeholder: placeholderStr = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\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 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\n if (onUpdate && typeof onUpdate === 'function') {\n getExtensions.push(EditorView.updateListener.of(onUpdate));\n }\n getExtensions = getExtensions.concat(extensions);\n\n useEffect(() => {\n if (container && !state) {\n const stateCurrent = EditorState.create({\n doc: value,\n selection,\n extensions: getExtensions,\n });\n setState(stateCurrent);\n if (!view) {\n const viewCurrent = new EditorView({\n state: stateCurrent,\n parent: container as any,\n root,\n });\n setView(viewCurrent);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [container, state]);\n\n useEffect(() => {\n return () => {\n if (view) {\n view.destroy();\n }\n };\n }, [view]);\n\n useEffect(() => {\n if (view) {\n const currentValue = view.state.doc.toString();\n if (value !== currentValue) {\n view.dispatch({\n changes: { from: 0, to: currentValue.length, insert: value || '' },\n });\n }\n }\n }, [value, view]);\n\n useEffect(() => {\n if (view) {\n view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n theme,\n extensions,\n placeholder,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n editable,\n indentWithTab,\n basicSetup,\n ]);\n\n useEffect(() => {\n if (autoFocus && view) {\n view.focus();\n }\n }, [autoFocus, view]);\n\n return { state, setState, view, setView, container, setContainer };\n}\n"
|
|
74
74
|
]
|
|
75
75
|
}
|
package/package.json
CHANGED
package/src/useCodeMirror.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
|
-
import { basicSetup
|
|
2
|
+
import { basicSetup } from '@codemirror/basic-setup';
|
|
3
3
|
import { EditorState, StateEffect } from '@codemirror/state';
|
|
4
|
-
import { indentWithTab
|
|
5
|
-
import { EditorView, keymap, ViewUpdate, placeholder
|
|
4
|
+
import { indentWithTab } from '@codemirror/commands';
|
|
5
|
+
import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
|
|
6
6
|
import { oneDark } from '@codemirror/theme-one-dark';
|
|
7
7
|
import { ReactCodeMirrorProps } from './';
|
|
8
8
|
import { defaultLightThemeOption } from './theme/light';
|
|
@@ -23,13 +23,13 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
23
23
|
height = '',
|
|
24
24
|
minHeight = '',
|
|
25
25
|
maxHeight = '',
|
|
26
|
-
placeholder = '',
|
|
26
|
+
placeholder: placeholderStr = '',
|
|
27
27
|
width = '',
|
|
28
28
|
minWidth = '',
|
|
29
29
|
maxWidth = '',
|
|
30
30
|
editable = true,
|
|
31
|
-
indentWithTab = true,
|
|
32
|
-
basicSetup = true,
|
|
31
|
+
indentWithTab: defaultIndentWithTab = true,
|
|
32
|
+
basicSetup: defaultBasicSetup = true,
|
|
33
33
|
root,
|
|
34
34
|
} = props;
|
|
35
35
|
const [container, setContainer] = useState(props.container);
|
|
@@ -53,15 +53,15 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
55
|
let getExtensions = [updateListener, defaultThemeOption];
|
|
56
|
-
if (
|
|
57
|
-
getExtensions.unshift(keymap.of([
|
|
56
|
+
if (defaultIndentWithTab) {
|
|
57
|
+
getExtensions.unshift(keymap.of([indentWithTab]));
|
|
58
58
|
}
|
|
59
|
-
if (
|
|
60
|
-
getExtensions.unshift(
|
|
59
|
+
if (defaultBasicSetup) {
|
|
60
|
+
getExtensions.unshift(basicSetup);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
if (
|
|
64
|
-
getExtensions.unshift(
|
|
63
|
+
if (placeholderStr) {
|
|
64
|
+
getExtensions.unshift(placeholder(placeholderStr));
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
switch (theme) {
|