@uiw/react-md-editor 3.10.1 → 3.10.2
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 +5 -4
- package/dist/mdeditor.min.js +1 -1
- package/esm/components/TextArea/Markdown.js +2 -3
- package/esm/components/TextArea/Markdown.js.map +2 -3
- package/esm/components/TextArea/index.js +10 -3
- package/esm/components/TextArea/index.js.map +4 -2
- package/lib/components/TextArea/Markdown.js +2 -3
- package/lib/components/TextArea/Markdown.js.map +2 -3
- package/lib/components/TextArea/index.js +11 -4
- package/lib/components/TextArea/index.js.map +4 -2
- package/package.json +1 -1
- package/src/components/TextArea/Markdown.tsx +3 -3
- package/src/components/TextArea/index.tsx +6 -3
|
@@ -10,7 +10,6 @@ export default function Markdown(props) {
|
|
|
10
10
|
} = props;
|
|
11
11
|
var {
|
|
12
12
|
markdown = '',
|
|
13
|
-
highlightEnable,
|
|
14
13
|
dispatch
|
|
15
14
|
} = useContext(EditorContext);
|
|
16
15
|
var preRef = /*#__PURE__*/React.createRef();
|
|
@@ -40,7 +39,7 @@ export default function Markdown(props) {
|
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
return useMemo(() => {
|
|
43
|
-
if (!
|
|
42
|
+
if (!markdown) {
|
|
44
43
|
return /*#__PURE__*/_jsx("pre", {
|
|
45
44
|
children: markdown || '',
|
|
46
45
|
ref: preRef,
|
|
@@ -59,6 +58,6 @@ export default function Markdown(props) {
|
|
|
59
58
|
__html: str.value
|
|
60
59
|
}
|
|
61
60
|
});
|
|
62
|
-
}, [
|
|
61
|
+
}, [markdown, preRef, prefixCls]);
|
|
63
62
|
}
|
|
64
63
|
//# sourceMappingURL=Markdown.js.map
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
"props",
|
|
16
16
|
"prefixCls",
|
|
17
17
|
"markdown",
|
|
18
|
-
"highlightEnable",
|
|
19
18
|
"dispatch",
|
|
20
19
|
"preRef",
|
|
21
20
|
"createRef",
|
|
@@ -37,8 +36,8 @@
|
|
|
37
36
|
"__html",
|
|
38
37
|
"value"
|
|
39
38
|
],
|
|
40
|
-
"mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB,C,CACA;;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA,SAASC,aAAT,QAA8B,eAA9B;;AAIA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAM;AAAEC,IAAAA;AAAF,MAAgBD,KAAtB;AACA,MAAM;AAAEE,IAAAA,QAAQ,GAAG,EAAb;AAAiBC,IAAAA
|
|
39
|
+
"mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB,C,CACA;;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA,SAASC,aAAT,QAA8B,eAA9B;;AAIA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAM;AAAEC,IAAAA;AAAF,MAAgBD,KAAtB;AACA,MAAM;AAAEE,IAAAA,QAAQ,GAAG,EAAb;AAAiBC,IAAAA;AAAjB,MAA8BV,UAAU,CAACK,aAAD,CAA9C;AACA,MAAMM,MAAM,gBAAGZ,KAAK,CAACa,SAAN,EAAf;AACAX,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIU,MAAM,CAACE,OAAP,IAAkBH,QAAtB,EAAgC;AAC9BA,MAAAA,QAAQ,CAAC;AAAEI,QAAAA,WAAW,EAAEH,MAAM,CAACE;AAAtB,OAAD,CAAR;AACD,KAHa,CAId;;AACD,GALQ,EAKN,EALM,CAAT;;AAMA,WAASE,WAAT,CAAqBC,KAArB,EAAoC;AAClC,WAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC4DC,GAAD,IAAiB;AAC/E,aAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEJE,CAAD,IAAgB,CAAC;AAAE,aAAK,MAAP;AAAe,aAAK,MAApB;AAA4B,aAAK,OAAjC;AAA0C,aAAK;AAA/C,OAAD,EAAsFA,CAAtF,CAFX,CAAP;AAID,KANI,EAOJF,OAPI,CAQH,QARG,EASFE,CAAD,IAAgB,CAAC;AAAE,WAAK,MAAP;AAAe,WAAK,MAApB;AAA4B,WAAK,OAAjC;AAA0C,WAAK;AAA/C,KAAD,EAAsFA,CAAtF,CATb,CAAP;AAWD;;AAED,SAAOjB,OAAO,CAAC,MAAM;AACnB,QAAI,CAACO,QAAL,EAAe;AACb,0BAAO;AAAK,QAAA,QAAQ,EAAEA,QAAQ,IAAI,EAA3B;AAA+B,QAAA,GAAG,EAAEE,MAApC;AAA4C,QAAA,SAAS,EAAKH,SAAL;AAArD,QAAP;AACD;;AACD,QAAMU,GAAG,GAAGf,MAAM,GACfiB,IADS,CACJ,UADI,EACQ;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KADR,EAETC,GAFS,CAELlB,WAFK,EAEQ;AAAEmB,MAAAA,aAAa,EAAE;AAAjB,KAFR,EAGTC,WAHS,qCAIyBhB,SAJzB,0EAIoGO,WAAW,CACrHN,QADqH,CAJ/G,qBAAZ;AAQA,wBAAOV,KAAK,CAAC0B,aAAN,CAAoB,KAApB,EAA2B;AAChCC,MAAAA,SAAS,EAAE,qBADqB;AAEhCC,MAAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEV,GAAG,CAACW;AAAd;AAFO,KAA3B,CAAP;AAID,GAhBa,EAgBX,CAACpB,QAAD,EAAWE,MAAX,EAAmBH,SAAnB,CAhBW,CAAd;AAiBD",
|
|
41
40
|
"sourcesContent": [
|
|
42
|
-
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\n// @ts-ignore\nimport rehypePrism from '@mapbox/rehype-prism';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '',
|
|
41
|
+
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\n// @ts-ignore\nimport rehypePrism from '@mapbox/rehype-prism';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '', dispatch } = useContext(EditorContext);\n const preRef = React.createRef<HTMLPreElement>();\n useEffect(() => {\n if (preRef.current && dispatch) {\n dispatch({ textareaPre: preRef.current });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n function html2Escape(sHtml: string) {\n return sHtml\n .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n return str.replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '<', '>': '>', '&': '&', '\"': '"' } as Record<string, string>)[c]),\n );\n })\n .replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '<', '>': '>', '&': '&', '\"': '"' } as Record<string, string>)[c]),\n );\n }\n\n return useMemo(() => {\n if (!markdown) {\n return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n }\n const str = rehype()\n .data('settings', { fragment: true })\n .use(rehypePrism, { ignoreMissing: true })\n .processSync(\n `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n markdown,\n )}\\n</code></pre>`,\n );\n return React.createElement('div', {\n className: 'wmde-markdown-color',\n dangerouslySetInnerHTML: { __html: str.value as string },\n });\n }, [markdown, preRef, prefixCls]);\n}\n"
|
|
43
42
|
]
|
|
44
43
|
}
|
|
@@ -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,7 +55,11 @@ export default function TextArea(props) {
|
|
|
54
55
|
});
|
|
55
56
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
57
|
|
|
57
|
-
}, []);
|
|
58
|
+
}, []); // @ts-ignore
|
|
59
|
+
|
|
60
|
+
var textStyle = highlightEnable ? {} : {
|
|
61
|
+
'-webkit-text-fill-color': 'inherit'
|
|
62
|
+
};
|
|
58
63
|
return /*#__PURE__*/_jsx("div", {
|
|
59
64
|
ref: warp,
|
|
60
65
|
className: prefixCls + "-aree " + (className || ''),
|
|
@@ -84,11 +89,13 @@ export default function TextArea(props) {
|
|
|
84
89
|
}), {
|
|
85
90
|
ref: textRef
|
|
86
91
|
}) : /*#__PURE__*/_jsxs(Fragment, {
|
|
87
|
-
children: [/*#__PURE__*/_jsx(Markdown, {
|
|
92
|
+
children: [highlightEnable && /*#__PURE__*/_jsx(Markdown, {
|
|
88
93
|
prefixCls: prefixCls
|
|
89
94
|
}), /*#__PURE__*/_jsx(Textarea, _extends({
|
|
90
95
|
prefixCls: prefixCls
|
|
91
|
-
}, otherProps
|
|
96
|
+
}, otherProps, {
|
|
97
|
+
style: textStyle
|
|
98
|
+
}))]
|
|
92
99
|
})
|
|
93
100
|
})
|
|
94
101
|
});
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"markdown",
|
|
24
24
|
"scrollTop",
|
|
25
25
|
"commands",
|
|
26
|
+
"highlightEnable",
|
|
26
27
|
"extraCommands",
|
|
27
28
|
"dispatch",
|
|
28
29
|
"textRef",
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
"undefined",
|
|
37
38
|
"commandOrchestrator",
|
|
38
39
|
"textarea",
|
|
40
|
+
"textStyle",
|
|
39
41
|
"cloneElement",
|
|
40
42
|
"value",
|
|
41
43
|
"autoComplete",
|
|
@@ -48,8 +50,8 @@
|
|
|
48
50
|
"onChange",
|
|
49
51
|
"ref"
|
|
50
52
|
],
|
|
51
|
-
"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;AACtD,aAA0EA,KAAK,IAAI,EAAnF;AAAA,MAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,SAAb;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA;AAAlC,GAAN;AAAA,MAA2DC,UAA3D;;AACA,MAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,QAAvB;AAAiCC,IAAAA,
|
|
53
|
+
"mappings": "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",
|
|
52
54
|
"sourcesContent": [
|
|
53
|
-
"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 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 <Markdown prefixCls={prefixCls}
|
|
55
|
+
"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 // @ts-ignore\n const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };\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"
|
|
54
56
|
]
|
|
55
57
|
}
|
|
@@ -26,7 +26,6 @@ function Markdown(props) {
|
|
|
26
26
|
var _useContext = (0, _react.useContext)(_Context.EditorContext),
|
|
27
27
|
_useContext$markdown = _useContext.markdown,
|
|
28
28
|
markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
|
|
29
|
-
highlightEnable = _useContext.highlightEnable,
|
|
30
29
|
dispatch = _useContext.dispatch;
|
|
31
30
|
|
|
32
31
|
var preRef = /*#__PURE__*/_react.default.createRef();
|
|
@@ -61,7 +60,7 @@ function Markdown(props) {
|
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
return (0, _react.useMemo)(function () {
|
|
64
|
-
if (!
|
|
63
|
+
if (!markdown) {
|
|
65
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
|
|
66
65
|
children: markdown || '',
|
|
67
66
|
ref: preRef,
|
|
@@ -80,7 +79,7 @@ function Markdown(props) {
|
|
|
80
79
|
__html: str.value
|
|
81
80
|
}
|
|
82
81
|
});
|
|
83
|
-
}, [
|
|
82
|
+
}, [markdown, preRef, prefixCls]);
|
|
84
83
|
}
|
|
85
84
|
|
|
86
85
|
module.exports = exports.default;
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
"prefixCls",
|
|
10
10
|
"EditorContext",
|
|
11
11
|
"markdown",
|
|
12
|
-
"highlightEnable",
|
|
13
12
|
"dispatch",
|
|
14
13
|
"preRef",
|
|
15
14
|
"React",
|
|
@@ -33,8 +32,8 @@
|
|
|
33
32
|
"__html",
|
|
34
33
|
"value"
|
|
35
34
|
],
|
|
36
|
-
"mappings": ";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;AAHA;AAOe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAQC,SAAR,GAAsBD,KAAtB,CAAQC,SAAR;;AACA,
|
|
35
|
+
"mappings": ";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;AAHA;AAOe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAQC,SAAR,GAAsBD,KAAtB,CAAQC,SAAR;;AACA,oBAAoC,uBAAWC,sBAAX,CAApC;AAAA,yCAAQC,QAAR;AAAA,MAAQA,QAAR,qCAAmB,EAAnB;AAAA,MAAuBC,QAAvB,eAAuBA,QAAvB;;AACA,MAAMC,MAAM,gBAAGC,eAAMC,SAAN,EAAf;;AACA,wBAAU,YAAM;AACd,QAAIF,MAAM,CAACG,OAAP,IAAkBJ,QAAtB,EAAgC;AAC9BA,MAAAA,QAAQ,CAAC;AAAEK,QAAAA,WAAW,EAAEJ,MAAM,CAACG;AAAtB,OAAD,CAAR;AACD,KAHa,CAId;;AACD,GALD,EAKG,EALH;;AAMA,WAASE,WAAT,CAAqBC,KAArB,EAAoC;AAClC,WAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC2D,UAACC,GAAD,EAAiB;AAC/E,aAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEL,UAACE,CAAD;AAAA,eAAiB;AAAE,eAAK,MAAP;AAAe,eAAK,MAApB;AAA4B,eAAK,OAAjC;AAA0C,eAAK;AAA/C,SAAD,CAAsFA,CAAtF,CAAhB;AAAA,OAFK,CAAP;AAID,KANI,EAOJF,OAPI,CAQH,QARG,EASH,UAACE,CAAD;AAAA,aAAiB;AAAE,aAAK,MAAP;AAAe,aAAK,MAApB;AAA4B,aAAK,OAAjC;AAA0C,aAAK;AAA/C,OAAD,CAAsFA,CAAtF,CAAhB;AAAA,KATG,CAAP;AAWD;;AAED,SAAO,oBAAQ,YAAM;AACnB,QAAI,CAACX,QAAL,EAAe;AACb,0BAAO;AAAK,QAAA,QAAQ,EAAEA,QAAQ,IAAI,EAA3B;AAA+B,QAAA,GAAG,EAAEE,MAApC;AAA4C,QAAA,SAAS,YAAKJ,SAAL;AAArD,QAAP;AACD;;AACD,QAAMY,GAAG,GAAG,sBACTE,IADS,CACJ,UADI,EACQ;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KADR,EAETC,GAFS,CAELC,oBAFK,EAEQ;AAAEC,MAAAA,aAAa,EAAE;AAAjB,KAFR,EAGTC,WAHS,0CAIyBnB,SAJzB,+EAIoGS,WAAW,CACrHP,QADqH,CAJ/G,qBAAZ;AAQA,wBAAOG,eAAMe,aAAN,CAAoB,KAApB,EAA2B;AAChCC,MAAAA,SAAS,EAAE,qBADqB;AAEhCC,MAAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEX,GAAG,CAACY;AAAd;AAFO,KAA3B,CAAP;AAID,GAhBM,EAgBJ,CAACtB,QAAD,EAAWE,MAAX,EAAmBJ,SAAnB,CAhBI,CAAP;AAiBD",
|
|
37
36
|
"sourcesContent": [
|
|
38
|
-
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\n// @ts-ignore\nimport rehypePrism from '@mapbox/rehype-prism';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '',
|
|
37
|
+
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\n// @ts-ignore\nimport rehypePrism from '@mapbox/rehype-prism';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '', dispatch } = useContext(EditorContext);\n const preRef = React.createRef<HTMLPreElement>();\n useEffect(() => {\n if (preRef.current && dispatch) {\n dispatch({ textareaPre: preRef.current });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n function html2Escape(sHtml: string) {\n return sHtml\n .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n return str.replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '<', '>': '>', '&': '&', '\"': '"' } as Record<string, string>)[c]),\n );\n })\n .replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '<', '>': '>', '&': '&', '\"': '"' } as Record<string, string>)[c]),\n );\n }\n\n return useMemo(() => {\n if (!markdown) {\n return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n }\n const str = rehype()\n .data('settings', { fragment: true })\n .use(rehypePrism, { ignoreMissing: true })\n .processSync(\n `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n markdown,\n )}\\n</code></pre>`,\n );\n return React.createElement('div', {\n className: 'wmde-markdown-color',\n dangerouslySetInnerHTML: { __html: str.value as string },\n });\n }, [markdown, preRef, prefixCls]);\n}\n"
|
|
39
38
|
]
|
|
40
39
|
}
|
|
@@ -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,7 +75,11 @@ function TextArea(props) {
|
|
|
74
75
|
});
|
|
75
76
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
76
77
|
|
|
77
|
-
}, []);
|
|
78
|
+
}, []); // @ts-ignore
|
|
79
|
+
|
|
80
|
+
var textStyle = highlightEnable ? {} : {
|
|
81
|
+
'-webkit-text-fill-color': 'inherit'
|
|
82
|
+
};
|
|
78
83
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
79
84
|
ref: warp,
|
|
80
85
|
className: "".concat(prefixCls, "-aree ").concat(className || ''),
|
|
@@ -104,11 +109,13 @@ function TextArea(props) {
|
|
|
104
109
|
}), {
|
|
105
110
|
ref: textRef
|
|
106
111
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
107
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown.default, {
|
|
112
|
+
children: [highlightEnable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown.default, {
|
|
108
113
|
prefixCls: prefixCls
|
|
109
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Textarea.default, (0, _objectSpread2.default)({
|
|
114
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Textarea.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
|
|
110
115
|
prefixCls: prefixCls
|
|
111
|
-
}, otherProps)
|
|
116
|
+
}, otherProps), {}, {
|
|
117
|
+
style: textStyle
|
|
118
|
+
}))]
|
|
112
119
|
})
|
|
113
120
|
})
|
|
114
121
|
});
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"markdown",
|
|
16
16
|
"scrollTop",
|
|
17
17
|
"commands",
|
|
18
|
+
"highlightEnable",
|
|
18
19
|
"extraCommands",
|
|
19
20
|
"dispatch",
|
|
20
21
|
"textRef",
|
|
@@ -30,6 +31,7 @@
|
|
|
30
31
|
"commandOrchestrator",
|
|
31
32
|
"TextAreaCommandOrchestrator",
|
|
32
33
|
"textarea",
|
|
34
|
+
"textStyle",
|
|
33
35
|
"cloneElement",
|
|
34
36
|
"value",
|
|
35
37
|
"autoComplete",
|
|
@@ -44,8 +46,8 @@
|
|
|
44
46
|
"useContext",
|
|
45
47
|
"ref"
|
|
46
48
|
],
|
|
47
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAoCe,SAASA,QAAT,CAAkBC,KAAlB,EAAyC;AACtD,aAA0EA,KAAK,IAAI,EAAnF;AAAA,MAAQC,SAAR,QAAQA,SAAR;AAAA,MAAmBC,SAAnB,QAAmBA,SAAnB;AAAA,MAA8BC,QAA9B,QAA8BA,QAA9B;AAAA,MAAwCC,cAAxC,QAAwCA,cAAxC;AAAA,MAA2DC,UAA3D;;AACA,
|
|
49
|
+
"mappings": "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",
|
|
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 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 <Markdown prefixCls={prefixCls}
|
|
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 // @ts-ignore\n const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };\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
53
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.10.
|
|
3
|
+
"version": "3.10.2",
|
|
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>",
|
|
@@ -9,7 +9,7 @@ export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreEleme
|
|
|
9
9
|
|
|
10
10
|
export default function Markdown(props: MarkdownProps) {
|
|
11
11
|
const { prefixCls } = props;
|
|
12
|
-
const { markdown = '',
|
|
12
|
+
const { markdown = '', dispatch } = useContext(EditorContext);
|
|
13
13
|
const preRef = React.createRef<HTMLPreElement>();
|
|
14
14
|
useEffect(() => {
|
|
15
15
|
if (preRef.current && dispatch) {
|
|
@@ -32,7 +32,7 @@ export default function Markdown(props: MarkdownProps) {
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
return useMemo(() => {
|
|
35
|
-
if (!
|
|
35
|
+
if (!markdown) {
|
|
36
36
|
return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
|
|
37
37
|
}
|
|
38
38
|
const str = rehype()
|
|
@@ -47,5 +47,5 @@ export default function Markdown(props: MarkdownProps) {
|
|
|
47
47
|
className: 'wmde-markdown-color',
|
|
48
48
|
dangerouslySetInnerHTML: { __html: str.value as string },
|
|
49
49
|
});
|
|
50
|
-
}, [
|
|
50
|
+
}, [markdown, preRef, prefixCls]);
|
|
51
51
|
}
|
|
@@ -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,6 +67,9 @@ export default function TextArea(props: ITextAreaProps) {
|
|
|
67
67
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
68
|
}, []);
|
|
69
69
|
|
|
70
|
+
// @ts-ignore
|
|
71
|
+
const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };
|
|
72
|
+
|
|
70
73
|
return (
|
|
71
74
|
<div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>
|
|
72
75
|
<div className={`${prefixCls}-text`}>
|
|
@@ -99,8 +102,8 @@ export default function TextArea(props: ITextAreaProps) {
|
|
|
99
102
|
)
|
|
100
103
|
) : (
|
|
101
104
|
<Fragment>
|
|
102
|
-
<Markdown prefixCls={prefixCls} />
|
|
103
|
-
<Textarea prefixCls={prefixCls} {...otherProps} />
|
|
105
|
+
{highlightEnable && <Markdown prefixCls={prefixCls} />}
|
|
106
|
+
<Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
|
|
104
107
|
</Fragment>
|
|
105
108
|
)}
|
|
106
109
|
</div>
|