@uiw/react-md-editor 3.9.9 → 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/README.md +46 -21
- package/dist/mdeditor.css +0 -2
- package/dist/mdeditor.js +39 -43
- package/dist/mdeditor.min.css +1 -1
- package/dist/mdeditor.min.js +1 -1
- package/esm/Editor.d.ts +4 -0
- package/esm/Editor.js +4 -2
- package/esm/Editor.js.map +3 -2
- package/esm/components/TextArea/Markdown.js +5 -6
- 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/esm/components/Toolbar/index.d.ts +1 -0
- package/esm/components/Toolbar/index.js +5 -3
- package/esm/components/Toolbar/index.js.map +3 -3
- package/lib/Editor.d.ts +4 -0
- package/lib/Editor.js +5 -2
- package/lib/Editor.js.map +3 -2
- package/lib/components/TextArea/Markdown.js +5 -6
- 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/lib/components/Toolbar/index.d.ts +1 -0
- package/lib/components/Toolbar/index.js +5 -3
- package/lib/components/Toolbar/index.js.map +3 -3
- package/package.json +2 -2
- package/src/Editor.tsx +6 -1
- package/src/components/TextArea/Markdown.tsx +6 -6
- package/src/components/TextArea/index.tsx +6 -3
- package/src/components/Toolbar/index.tsx +5 -3
|
@@ -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();
|
|
@@ -41,8 +40,8 @@ function Markdown(props) {
|
|
|
41
40
|
}, []);
|
|
42
41
|
|
|
43
42
|
function html2Escape(sHtml) {
|
|
44
|
-
return sHtml.replace(/```(.*)\s+([\s\S]*?)(\s.+)?```/g, function (str) {
|
|
45
|
-
return str.replace(/[
|
|
43
|
+
return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, function (str) {
|
|
44
|
+
return str.replace(/[<&"]/g, function (c) {
|
|
46
45
|
return {
|
|
47
46
|
'<': '<',
|
|
48
47
|
'>': '>',
|
|
@@ -50,7 +49,7 @@ function Markdown(props) {
|
|
|
50
49
|
'"': '"'
|
|
51
50
|
}[c];
|
|
52
51
|
});
|
|
53
|
-
}).replace(/[
|
|
52
|
+
}).replace(/[<&"]/g, function (c) {
|
|
54
53
|
return {
|
|
55
54
|
'<': '<',
|
|
56
55
|
'>': '>',
|
|
@@ -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
|
}
|
|
@@ -3,6 +3,7 @@ import { IProps } from '../../Editor';
|
|
|
3
3
|
import { ICommand } from '../../commands';
|
|
4
4
|
import './index.less';
|
|
5
5
|
export interface IToolbarProps extends IProps {
|
|
6
|
+
overflow?: boolean;
|
|
6
7
|
height?: React.CSSProperties['height'];
|
|
7
8
|
onCommand?: (command: ICommand<string>, groupName?: string) => void;
|
|
8
9
|
commands?: ICommand<string>[];
|
|
@@ -21,7 +21,8 @@ var _Child = _interopRequireDefault(require("./Child"));
|
|
|
21
21
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
22
|
|
|
23
23
|
function ToolbarItems(props) {
|
|
24
|
-
var prefixCls = props.prefixCls
|
|
24
|
+
var prefixCls = props.prefixCls,
|
|
25
|
+
overflow = props.overflow;
|
|
25
26
|
|
|
26
27
|
var _useContext = (0, _react.useContext)(_Context.EditorContext),
|
|
27
28
|
fullscreen = _useContext.fullscreen,
|
|
@@ -69,7 +70,7 @@ function ToolbarItems(props) {
|
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
(0, _react.useEffect)(function () {
|
|
72
|
-
if (document) {
|
|
73
|
+
if (document && overflow) {
|
|
73
74
|
if (fullscreen) {
|
|
74
75
|
// prevent scroll on fullscreen
|
|
75
76
|
document.body.style.overflow = 'hidden';
|
|
@@ -83,7 +84,7 @@ function ToolbarItems(props) {
|
|
|
83
84
|
document.body.style.overflow = originalOverflow.current;
|
|
84
85
|
}
|
|
85
86
|
}
|
|
86
|
-
}, [fullscreen, originalOverflow]);
|
|
87
|
+
}, [fullscreen, originalOverflow, overflow]);
|
|
87
88
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
|
|
88
89
|
children: (props.commands || []).map(function (item, idx) {
|
|
89
90
|
if (item.keyCommand === 'divider') {
|
|
@@ -122,6 +123,7 @@ function ToolbarItems(props) {
|
|
|
122
123
|
handleClick(item, item.groupName);
|
|
123
124
|
}
|
|
124
125
|
}), item.icon), item.children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Child.default, {
|
|
126
|
+
overflow: overflow,
|
|
125
127
|
groupName: item.groupName,
|
|
126
128
|
prefixCls: prefixCls,
|
|
127
129
|
children: childNode,
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
"ToolbarItems",
|
|
8
8
|
"props",
|
|
9
9
|
"prefixCls",
|
|
10
|
+
"overflow",
|
|
10
11
|
"EditorContext",
|
|
11
12
|
"fullscreen",
|
|
12
13
|
"preview",
|
|
@@ -33,7 +34,6 @@
|
|
|
33
34
|
"document",
|
|
34
35
|
"body",
|
|
35
36
|
"style",
|
|
36
|
-
"overflow",
|
|
37
37
|
"current",
|
|
38
38
|
"window",
|
|
39
39
|
"getComputedStyle",
|
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
"isChild",
|
|
67
67
|
"extraCommands"
|
|
68
68
|
],
|
|
69
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;;;
|
|
69
|
+
"mappings": "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",
|
|
70
70
|
"sourcesContent": [
|
|
71
|
-
"import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n height?: React.CSSProperties['height'];\n onCommand?: (command: ICommand<string>, groupName?: string) => void;\n commands?: ICommand<string>[];\n isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n const { prefixCls } = props;\n const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n const originalOverflow = useRef('');\n\n function handleClick(command: ICommand<string>, name?: string) {\n if (!dispatch) return;\n const state: ContextStore = { barPopup: { ...barPopup } };\n if (command.keyCommand === 'preview') {\n state.preview = command.value as PreviewType;\n }\n if (command.keyCommand === 'fullscreen') {\n state.fullscreen = !fullscreen;\n }\n if (props.commands && command.keyCommand === 'group') {\n props.commands.forEach((item) => {\n if (name === item.groupName) {\n state.barPopup![name!] = true;\n } else if (item.keyCommand) {\n state.barPopup![item.groupName!] = false;\n }\n });\n } else if (name || command.parent) {\n Object.keys(state.barPopup || {}).forEach((keyName) => {\n state.barPopup![keyName] = false;\n });\n }\n\n if (Object.keys(state).length) {\n dispatch({ ...state });\n }\n commandOrchestrator && commandOrchestrator.executeCommand(command);\n }\n\n useEffect(() => {\n if (document) {\n if (fullscreen) {\n // prevent scroll on fullscreen\n document.body.style.overflow = 'hidden';\n } else {\n // get the original overflow only the first time\n if (!originalOverflow.current) {\n originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n }\n // reset to the original overflow\n document.body.style.overflow = originalOverflow.current;\n }\n }\n }, [fullscreen, originalOverflow]);\n\n return (\n <ul>\n {(props.commands || []).map((item, idx) => {\n if (item.keyCommand === 'divider') {\n return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n }\n if (!item.keyCommand) return <Fragment key={idx} />;\n const activeBtn =\n (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n const childNode =\n item.children && typeof item.children === 'function'\n ? item.children({\n getState: () => commandOrchestrator!.getState(),\n textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n close: () => handleClick({}, item.groupName),\n execute: () => handleClick({ execute: item.execute }),\n })\n : undefined;\n const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n return (\n <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n {!item.buttonProps && item.icon}\n {item.buttonProps &&\n React.createElement(\n 'button',\n {\n type: 'button',\n key: idx,\n disabled,\n 'data-name': item.name,\n ...item.buttonProps,\n onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n evn.stopPropagation();\n handleClick(item, item.groupName);\n },\n },\n item.icon,\n )}\n {item.children && (\n <Child\n groupName={item.groupName}\n prefixCls={prefixCls}\n children={childNode}\n commands={Array.isArray(item.children) ? item.children : undefined}\n />\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n const { prefixCls, height = 29, isChild } = props;\n const { commands, extraCommands } = useContext(EditorContext);\n return (\n <div className={`${prefixCls}-toolbar`} style={{ height }}>\n <ToolbarItems {...props} commands={props.commands || commands || []} />\n {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n </div>\n );\n}\n"
|
|
71
|
+
"import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n overflow?: boolean;\n height?: React.CSSProperties['height'];\n onCommand?: (command: ICommand<string>, groupName?: string) => void;\n commands?: ICommand<string>[];\n isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n const { prefixCls, overflow } = props;\n const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n const originalOverflow = useRef('');\n\n function handleClick(command: ICommand<string>, name?: string) {\n if (!dispatch) return;\n const state: ContextStore = { barPopup: { ...barPopup } };\n if (command.keyCommand === 'preview') {\n state.preview = command.value as PreviewType;\n }\n if (command.keyCommand === 'fullscreen') {\n state.fullscreen = !fullscreen;\n }\n if (props.commands && command.keyCommand === 'group') {\n props.commands.forEach((item) => {\n if (name === item.groupName) {\n state.barPopup![name!] = true;\n } else if (item.keyCommand) {\n state.barPopup![item.groupName!] = false;\n }\n });\n } else if (name || command.parent) {\n Object.keys(state.barPopup || {}).forEach((keyName) => {\n state.barPopup![keyName] = false;\n });\n }\n\n if (Object.keys(state).length) {\n dispatch({ ...state });\n }\n commandOrchestrator && commandOrchestrator.executeCommand(command);\n }\n\n useEffect(() => {\n if (document && overflow) {\n if (fullscreen) {\n // prevent scroll on fullscreen\n document.body.style.overflow = 'hidden';\n } else {\n // get the original overflow only the first time\n if (!originalOverflow.current) {\n originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n }\n // reset to the original overflow\n document.body.style.overflow = originalOverflow.current;\n }\n }\n }, [fullscreen, originalOverflow, overflow]);\n\n return (\n <ul>\n {(props.commands || []).map((item, idx) => {\n if (item.keyCommand === 'divider') {\n return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n }\n if (!item.keyCommand) return <Fragment key={idx} />;\n const activeBtn =\n (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n const childNode =\n item.children && typeof item.children === 'function'\n ? item.children({\n getState: () => commandOrchestrator!.getState(),\n textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n close: () => handleClick({}, item.groupName),\n execute: () => handleClick({ execute: item.execute }),\n })\n : undefined;\n const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n return (\n <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n {!item.buttonProps && item.icon}\n {item.buttonProps &&\n React.createElement(\n 'button',\n {\n type: 'button',\n key: idx,\n disabled,\n 'data-name': item.name,\n ...item.buttonProps,\n onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n evn.stopPropagation();\n handleClick(item, item.groupName);\n },\n },\n item.icon,\n )}\n {item.children && (\n <Child\n overflow={overflow}\n groupName={item.groupName}\n prefixCls={prefixCls}\n children={childNode}\n commands={Array.isArray(item.children) ? item.children : undefined}\n />\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n const { prefixCls, height = 29, isChild } = props;\n const { commands, extraCommands } = useContext(EditorContext);\n return (\n <div className={`${prefixCls}-toolbar`} style={{ height }}>\n <ToolbarItems {...props} commands={props.commands || commands || []} />\n {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n </div>\n );\n}\n"
|
|
72
72
|
]
|
|
73
73
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.
|
|
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>",
|
|
@@ -50,13 +50,13 @@
|
|
|
50
50
|
"@types/react-dom": "~17.0.11",
|
|
51
51
|
"@types/react-test-renderer": "~17.0.1",
|
|
52
52
|
"@uiw/react-github-corners": "~1.5.3",
|
|
53
|
-
"@uiw/react-codesandbox": "~1.1.4",
|
|
54
53
|
"@uiw/react-shields": "~1.1.2",
|
|
55
54
|
"compile-less-cli": "~1.8.11",
|
|
56
55
|
"katex": "~0.15.2",
|
|
57
56
|
"husky": "~7.0.4",
|
|
58
57
|
"kkt": "~7.1.5",
|
|
59
58
|
"lint-staged": "~12.3.4",
|
|
59
|
+
"mermaid": "~8.14.0",
|
|
60
60
|
"prettier": "~2.5.1",
|
|
61
61
|
"react": "~17.0.2",
|
|
62
62
|
"react-dom": "~17.0.2",
|
package/src/Editor.tsx
CHANGED
|
@@ -48,6 +48,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
48
48
|
* Full screen display editor.
|
|
49
49
|
*/
|
|
50
50
|
fullscreen?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Disable `fullscreen` setting body styles
|
|
53
|
+
*/
|
|
54
|
+
overflow?: boolean;
|
|
51
55
|
/**
|
|
52
56
|
* Maximum drag height. `visiableDragbar=true`
|
|
53
57
|
*/
|
|
@@ -126,6 +130,7 @@ const InternalMDEditor = (
|
|
|
126
130
|
highlightEnable = true,
|
|
127
131
|
preview: previewType = 'live',
|
|
128
132
|
fullscreen = false,
|
|
133
|
+
overflow = true,
|
|
129
134
|
previewOptions = {},
|
|
130
135
|
textareaProps,
|
|
131
136
|
maxHeight = 1200,
|
|
@@ -280,7 +285,7 @@ const InternalMDEditor = (
|
|
|
280
285
|
height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,
|
|
281
286
|
}}
|
|
282
287
|
>
|
|
283
|
-
{!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} />}
|
|
288
|
+
{!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} />}
|
|
284
289
|
<div
|
|
285
290
|
className={`${prefixCls}-content`}
|
|
286
291
|
style={{
|
|
@@ -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) {
|
|
@@ -19,20 +19,20 @@ export default function Markdown(props: MarkdownProps) {
|
|
|
19
19
|
}, []);
|
|
20
20
|
function html2Escape(sHtml: string) {
|
|
21
21
|
return sHtml
|
|
22
|
-
.replace(/```(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {
|
|
22
|
+
.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {
|
|
23
23
|
return str.replace(
|
|
24
|
-
/[
|
|
24
|
+
/[<&"]/g,
|
|
25
25
|
(c: string) => (({ '<': '<', '>': '>', '&': '&', '"': '"' } as Record<string, string>)[c]),
|
|
26
26
|
);
|
|
27
27
|
})
|
|
28
28
|
.replace(
|
|
29
|
-
/[
|
|
29
|
+
/[<&"]/g,
|
|
30
30
|
(c: string) => (({ '<': '<', '>': '>', '&': '&', '"': '"' } as Record<string, string>)[c]),
|
|
31
31
|
);
|
|
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>
|
|
@@ -6,6 +6,7 @@ import Child from './Child';
|
|
|
6
6
|
import './index.less';
|
|
7
7
|
|
|
8
8
|
export interface IToolbarProps extends IProps {
|
|
9
|
+
overflow?: boolean;
|
|
9
10
|
height?: React.CSSProperties['height'];
|
|
10
11
|
onCommand?: (command: ICommand<string>, groupName?: string) => void;
|
|
11
12
|
commands?: ICommand<string>[];
|
|
@@ -13,7 +14,7 @@ export interface IToolbarProps extends IProps {
|
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export function ToolbarItems(props: IToolbarProps) {
|
|
16
|
-
const { prefixCls } = props;
|
|
17
|
+
const { prefixCls, overflow } = props;
|
|
17
18
|
const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);
|
|
18
19
|
const originalOverflow = useRef('');
|
|
19
20
|
|
|
@@ -47,7 +48,7 @@ export function ToolbarItems(props: IToolbarProps) {
|
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
useEffect(() => {
|
|
50
|
-
if (document) {
|
|
51
|
+
if (document && overflow) {
|
|
51
52
|
if (fullscreen) {
|
|
52
53
|
// prevent scroll on fullscreen
|
|
53
54
|
document.body.style.overflow = 'hidden';
|
|
@@ -60,7 +61,7 @@ export function ToolbarItems(props: IToolbarProps) {
|
|
|
60
61
|
document.body.style.overflow = originalOverflow.current;
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
|
-
}, [fullscreen, originalOverflow]);
|
|
64
|
+
}, [fullscreen, originalOverflow, overflow]);
|
|
64
65
|
|
|
65
66
|
return (
|
|
66
67
|
<ul>
|
|
@@ -102,6 +103,7 @@ export function ToolbarItems(props: IToolbarProps) {
|
|
|
102
103
|
)}
|
|
103
104
|
{item.children && (
|
|
104
105
|
<Child
|
|
106
|
+
overflow={overflow}
|
|
105
107
|
groupName={item.groupName}
|
|
106
108
|
prefixCls={prefixCls}
|
|
107
109
|
children={childNode}
|