@uiw/react-md-editor 3.14.2 → 3.14.3
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/dist/mdeditor.js +2 -4
- package/dist/mdeditor.min.js +1 -1
- package/esm/components/TextArea/index.js +10 -5
- package/esm/components/TextArea/index.js.map +6 -4
- package/lib/components/TextArea/index.js +11 -6
- package/lib/components/TextArea/index.js.map +6 -4
- package/package.json +1 -1
- package/src/components/TextArea/index.tsx +4 -5
|
@@ -24,6 +24,7 @@ export default function TextArea(props) {
|
|
|
24
24
|
markdown,
|
|
25
25
|
scrollTop,
|
|
26
26
|
commands,
|
|
27
|
+
highlightEnable,
|
|
27
28
|
extraCommands,
|
|
28
29
|
dispatch
|
|
29
30
|
} = useContext(EditorContext);
|
|
@@ -54,9 +55,11 @@ export default function TextArea(props) {
|
|
|
54
55
|
});
|
|
55
56
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
57
|
|
|
57
|
-
}, []);
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
}, []);
|
|
59
|
+
var textStyle = highlightEnable ? {} : {
|
|
60
|
+
WebkitTextFillColor: 'initial',
|
|
61
|
+
overflow: 'auto'
|
|
62
|
+
};
|
|
60
63
|
return /*#__PURE__*/_jsx("div", {
|
|
61
64
|
ref: warp,
|
|
62
65
|
className: prefixCls + "-aree " + (className || ''),
|
|
@@ -86,11 +89,13 @@ export default function TextArea(props) {
|
|
|
86
89
|
}), {
|
|
87
90
|
ref: textRef
|
|
88
91
|
}) : /*#__PURE__*/_jsxs(Fragment, {
|
|
89
|
-
children: [/*#__PURE__*/_jsx(Markdown, {
|
|
92
|
+
children: [highlightEnable && /*#__PURE__*/_jsx(Markdown, {
|
|
90
93
|
prefixCls: prefixCls
|
|
91
94
|
}), /*#__PURE__*/_jsx(Textarea, _extends({
|
|
92
95
|
prefixCls: prefixCls
|
|
93
|
-
}, otherProps
|
|
96
|
+
}, otherProps, {
|
|
97
|
+
style: textStyle
|
|
98
|
+
}))]
|
|
94
99
|
})
|
|
95
100
|
})
|
|
96
101
|
});
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"markdown",
|
|
21
21
|
"scrollTop",
|
|
22
22
|
"commands",
|
|
23
|
+
"highlightEnable",
|
|
23
24
|
"extraCommands",
|
|
24
25
|
"dispatch",
|
|
25
26
|
"textRef",
|
|
@@ -33,6 +34,9 @@
|
|
|
33
34
|
"undefined",
|
|
34
35
|
"commandOrchestrator",
|
|
35
36
|
"textarea",
|
|
37
|
+
"textStyle",
|
|
38
|
+
"WebkitTextFillColor",
|
|
39
|
+
"overflow",
|
|
36
40
|
"cloneElement",
|
|
37
41
|
"value",
|
|
38
42
|
"autoComplete",
|
|
@@ -40,8 +44,6 @@
|
|
|
40
44
|
"spellCheck",
|
|
41
45
|
"autoCapitalize",
|
|
42
46
|
"style",
|
|
43
|
-
"WebkitTextFillColor",
|
|
44
|
-
"overflow",
|
|
45
47
|
"onChange",
|
|
46
48
|
"ref"
|
|
47
49
|
],
|
|
@@ -49,7 +51,7 @@
|
|
|
49
51
|
"../../../src/components/TextArea/index.tsx"
|
|
50
52
|
],
|
|
51
53
|
"sourcesContent": [
|
|
52
|
-
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n
|
|
54
|
+
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const textStyle: React.CSSProperties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };\n\n return (\n <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n <div className={`${prefixCls}-text`}>\n {renderTextarea ? (\n React.cloneElement(\n renderTextarea(\n {\n ...otherProps,\n value: markdown,\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n autoCapitalize: 'off',\n className: `${prefixCls}-text-input`,\n style: {\n WebkitTextFillColor: 'inherit',\n overflow: 'auto',\n },\n },\n {\n dispatch,\n onChange: otherProps.onChange,\n shortcuts,\n useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n },\n ),\n {\n ref: textRef,\n },\n )\n ) : (\n <Fragment>\n {highlightEnable && <Markdown prefixCls={prefixCls} />}\n <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />\n </Fragment>\n )}\n </div>\n </div>\n );\n}\n"
|
|
53
55
|
],
|
|
54
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,EAAqCC,UAArC,QAAuD,OAAvD;AACA,SAASC,aAAT,QAAiE,eAAjE;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAwC,YAAxC;AAEA,SAASC,2BAAT,QAAsD,gBAAtD;AACA;;;AAmCA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAyC;EACtD,WAA0EA,KAAK,IAAI,EAAnF;EAAA,IAAM;IAAEC,SAAF;IAAaC,SAAb;IAAwBC,QAAxB;IAAkCC;EAAlC,CAAN;EAAA,IAA2DC,UAA3D;;EACA,IAAM;IAAEC,QAAF;IAAYC,SAAZ;IAAuBC,QAAvB;IAAiCC,
|
|
56
|
+
"mappings": "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"
|
|
55
57
|
}
|
|
@@ -41,6 +41,7 @@ function TextArea(props) {
|
|
|
41
41
|
markdown = _useContext.markdown,
|
|
42
42
|
scrollTop = _useContext.scrollTop,
|
|
43
43
|
commands = _useContext.commands,
|
|
44
|
+
highlightEnable = _useContext.highlightEnable,
|
|
44
45
|
extraCommands = _useContext.extraCommands,
|
|
45
46
|
dispatch = _useContext.dispatch;
|
|
46
47
|
|
|
@@ -74,9 +75,11 @@ function TextArea(props) {
|
|
|
74
75
|
});
|
|
75
76
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
76
77
|
|
|
77
|
-
}, []);
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
}, []);
|
|
79
|
+
var textStyle = highlightEnable ? {} : {
|
|
80
|
+
WebkitTextFillColor: 'initial',
|
|
81
|
+
overflow: 'auto'
|
|
82
|
+
};
|
|
80
83
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
81
84
|
ref: warp,
|
|
82
85
|
className: "".concat(prefixCls, "-aree ").concat(className || ''),
|
|
@@ -106,11 +109,13 @@ function TextArea(props) {
|
|
|
106
109
|
}), {
|
|
107
110
|
ref: textRef
|
|
108
111
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
109
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown["default"], {
|
|
112
|
+
children: [highlightEnable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown["default"], {
|
|
110
113
|
prefixCls: prefixCls
|
|
111
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Textarea["default"], (0, _objectSpread2["default"])({
|
|
114
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Textarea["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
112
115
|
prefixCls: prefixCls
|
|
113
|
-
}, otherProps)
|
|
116
|
+
}, otherProps), {}, {
|
|
117
|
+
style: textStyle
|
|
118
|
+
}))]
|
|
114
119
|
})
|
|
115
120
|
})
|
|
116
121
|
});
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"markdown",
|
|
14
14
|
"scrollTop",
|
|
15
15
|
"commands",
|
|
16
|
+
"highlightEnable",
|
|
16
17
|
"extraCommands",
|
|
17
18
|
"dispatch",
|
|
18
19
|
"textRef",
|
|
@@ -29,6 +30,9 @@
|
|
|
29
30
|
"commandOrchestrator",
|
|
30
31
|
"TextAreaCommandOrchestrator",
|
|
31
32
|
"textarea",
|
|
33
|
+
"textStyle",
|
|
34
|
+
"WebkitTextFillColor",
|
|
35
|
+
"overflow",
|
|
32
36
|
"cloneElement",
|
|
33
37
|
"value",
|
|
34
38
|
"autoComplete",
|
|
@@ -36,8 +40,6 @@
|
|
|
36
40
|
"spellCheck",
|
|
37
41
|
"autoCapitalize",
|
|
38
42
|
"style",
|
|
39
|
-
"WebkitTextFillColor",
|
|
40
|
-
"overflow",
|
|
41
43
|
"onChange",
|
|
42
44
|
"shortcuts",
|
|
43
45
|
"ref"
|
|
@@ -46,7 +48,7 @@
|
|
|
46
48
|
"../../../src/components/TextArea/index.tsx"
|
|
47
49
|
],
|
|
48
50
|
"sourcesContent": [
|
|
49
|
-
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n
|
|
51
|
+
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const textStyle: React.CSSProperties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };\n\n return (\n <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n <div className={`${prefixCls}-text`}>\n {renderTextarea ? (\n React.cloneElement(\n renderTextarea(\n {\n ...otherProps,\n value: markdown,\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n autoCapitalize: 'off',\n className: `${prefixCls}-text-input`,\n style: {\n WebkitTextFillColor: 'inherit',\n overflow: 'auto',\n },\n },\n {\n dispatch,\n onChange: otherProps.onChange,\n shortcuts,\n useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n },\n ),\n {\n ref: textRef,\n },\n )\n ) : (\n <Fragment>\n {highlightEnable && <Markdown prefixCls={prefixCls} />}\n <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />\n </Fragment>\n )}\n </div>\n </div>\n );\n}\n"
|
|
50
52
|
],
|
|
51
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAoCe,SAASA,QAAT,CAAkBC,KAAlB,EAAyC;EACtD,WAA0EA,KAAK,IAAI,EAAnF;EAAA,IAAQC,SAAR,QAAQA,SAAR;EAAA,IAAmBC,SAAnB,QAAmBA,SAAnB;EAAA,IAA8BC,QAA9B,QAA8BA,QAA9B;EAAA,IAAwCC,cAAxC,QAAwCA,cAAxC;EAAA,IAA2DC,UAA3D;;EACA,
|
|
53
|
+
"mappings": "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"
|
|
52
54
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.14.
|
|
3
|
+
"version": "3.14.3",
|
|
4
4
|
"description": "A markdown editor with preview, implemented with React.js and TypeScript.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-md-editor/",
|
|
6
6
|
"author": "kenny wang <wowohoo@qq.com>",
|
|
@@ -42,7 +42,7 @@ export type TextAreaRef = {
|
|
|
42
42
|
|
|
43
43
|
export default function TextArea(props: ITextAreaProps) {
|
|
44
44
|
const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
|
|
45
|
-
const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);
|
|
45
|
+
const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);
|
|
46
46
|
const textRef = React.useRef<HTMLTextAreaElement>(null);
|
|
47
47
|
const executeRef = React.useRef<TextAreaCommandOrchestrator>();
|
|
48
48
|
const warp = React.createRef<HTMLDivElement>();
|
|
@@ -67,8 +67,7 @@ export default function TextArea(props: ITextAreaProps) {
|
|
|
67
67
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
68
|
}, []);
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
// const textStyle: React.CSSProperties = highlightEnable ? { WebkitTextFillColor: 'transparent' } : { };
|
|
70
|
+
const textStyle: React.CSSProperties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
|
|
72
71
|
|
|
73
72
|
return (
|
|
74
73
|
<div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>
|
|
@@ -102,8 +101,8 @@ export default function TextArea(props: ITextAreaProps) {
|
|
|
102
101
|
)
|
|
103
102
|
) : (
|
|
104
103
|
<Fragment>
|
|
105
|
-
<Markdown prefixCls={prefixCls} />
|
|
106
|
-
<Textarea prefixCls={prefixCls} {...otherProps} />
|
|
104
|
+
{highlightEnable && <Markdown prefixCls={prefixCls} />}
|
|
105
|
+
<Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
|
|
107
106
|
</Fragment>
|
|
108
107
|
)}
|
|
109
108
|
</div>
|