@uiw/react-md-editor 3.9.2 → 3.9.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/README.md
CHANGED
|
@@ -71,6 +71,35 @@ export default function App() {
|
|
|
71
71
|
}
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
### Security
|
|
75
|
+
Please note markdown needs to be sanitized if you do not **completely trust** your authors.
|
|
76
|
+
Otherwise, your app is vulnerable to XSS. This can be achieved by adding [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) as a plugin.
|
|
77
|
+
|
|
78
|
+
```jsx
|
|
79
|
+
import React from "react";
|
|
80
|
+
import MDEditor from '@uiw/react-md-editor';
|
|
81
|
+
import rehypeSanitize from "rehype-sanitize";
|
|
82
|
+
|
|
83
|
+
export default function App() {
|
|
84
|
+
const [value, setValue] = React.useState("**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>");
|
|
85
|
+
return (
|
|
86
|
+
<div className="container">
|
|
87
|
+
<MDEditor
|
|
88
|
+
value={value}
|
|
89
|
+
onChange={setValue}
|
|
90
|
+
previewOptions={{
|
|
91
|
+
rehypePlugins: [[rehypeSanitize]],
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
<MDEditor.Markdown
|
|
95
|
+
source={value}
|
|
96
|
+
rehypePlugins={[[rehypeSanitize]]}
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
74
103
|
### Custom Toolbars
|
|
75
104
|
|
|
76
105
|
[](https://codesandbox.io/embed/react-md-editor-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { Fragment, useContext, useEffect } from 'react';
|
|
2
|
+
import React, { Fragment, useContext, useEffect, useRef } from 'react';
|
|
3
3
|
import { EditorContext } from '../../Context';
|
|
4
4
|
import Child from './Child';
|
|
5
5
|
import "./index.css";
|
|
@@ -16,6 +16,7 @@ export function ToolbarItems(props) {
|
|
|
16
16
|
commandOrchestrator,
|
|
17
17
|
dispatch
|
|
18
18
|
} = useContext(EditorContext);
|
|
19
|
+
var originalOverflow = useRef('');
|
|
19
20
|
|
|
20
21
|
function handleClick(command, name) {
|
|
21
22
|
if (!dispatch) return;
|
|
@@ -54,9 +55,20 @@ export function ToolbarItems(props) {
|
|
|
54
55
|
|
|
55
56
|
useEffect(() => {
|
|
56
57
|
if (document) {
|
|
57
|
-
|
|
58
|
+
if (fullscreen) {
|
|
59
|
+
// prevent scroll on fullscreen
|
|
60
|
+
document.body.style.overflow = 'hidden';
|
|
61
|
+
} else {
|
|
62
|
+
// get the original overflow only the first time
|
|
63
|
+
if (!originalOverflow.current) {
|
|
64
|
+
originalOverflow.current = window.getComputedStyle(document.body, null).overflow;
|
|
65
|
+
} // reset to the original overflow
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
document.body.style.overflow = originalOverflow.current;
|
|
69
|
+
}
|
|
58
70
|
}
|
|
59
|
-
}, [fullscreen]);
|
|
71
|
+
}, [fullscreen, originalOverflow]);
|
|
60
72
|
return /*#__PURE__*/_jsx("ul", {
|
|
61
73
|
children: (props.commands || []).map((item, idx) => {
|
|
62
74
|
if (item.keyCommand === 'divider') {
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"Fragment",
|
|
9
9
|
"useContext",
|
|
10
10
|
"useEffect",
|
|
11
|
+
"useRef",
|
|
11
12
|
"EditorContext",
|
|
12
13
|
"Child",
|
|
13
14
|
"ToolbarItems",
|
|
@@ -18,6 +19,7 @@
|
|
|
18
19
|
"barPopup",
|
|
19
20
|
"commandOrchestrator",
|
|
20
21
|
"dispatch",
|
|
22
|
+
"originalOverflow",
|
|
21
23
|
"handleClick",
|
|
22
24
|
"command",
|
|
23
25
|
"name",
|
|
@@ -38,6 +40,9 @@
|
|
|
38
40
|
"body",
|
|
39
41
|
"style",
|
|
40
42
|
"overflow",
|
|
43
|
+
"current",
|
|
44
|
+
"window",
|
|
45
|
+
"getComputedStyle",
|
|
41
46
|
"map",
|
|
42
47
|
"idx",
|
|
43
48
|
"liProps",
|
|
@@ -65,8 +70,8 @@
|
|
|
65
70
|
"isChild",
|
|
66
71
|
"extraCommands"
|
|
67
72
|
],
|
|
68
|
-
"mappings": ";AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,UAA1B,EAAsCC,SAAtC,
|
|
73
|
+
"mappings": "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",
|
|
69
74
|
"sourcesContent": [
|
|
70
|
-
"import React, { Fragment, useContext, useEffect } 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 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 document.body.style.overflow = !
|
|
75
|
+
"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 />;\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 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
76
|
]
|
|
72
77
|
}
|
|
@@ -31,6 +31,8 @@ function ToolbarItems(props) {
|
|
|
31
31
|
commandOrchestrator = _useContext.commandOrchestrator,
|
|
32
32
|
dispatch = _useContext.dispatch;
|
|
33
33
|
|
|
34
|
+
var originalOverflow = (0, _react.useRef)('');
|
|
35
|
+
|
|
34
36
|
function handleClick(command, name) {
|
|
35
37
|
if (!dispatch) return;
|
|
36
38
|
var state = {
|
|
@@ -68,9 +70,20 @@ function ToolbarItems(props) {
|
|
|
68
70
|
|
|
69
71
|
(0, _react.useEffect)(function () {
|
|
70
72
|
if (document) {
|
|
71
|
-
|
|
73
|
+
if (fullscreen) {
|
|
74
|
+
// prevent scroll on fullscreen
|
|
75
|
+
document.body.style.overflow = 'hidden';
|
|
76
|
+
} else {
|
|
77
|
+
// get the original overflow only the first time
|
|
78
|
+
if (!originalOverflow.current) {
|
|
79
|
+
originalOverflow.current = window.getComputedStyle(document.body, null).overflow;
|
|
80
|
+
} // reset to the original overflow
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
document.body.style.overflow = originalOverflow.current;
|
|
84
|
+
}
|
|
72
85
|
}
|
|
73
|
-
}, [fullscreen]);
|
|
86
|
+
}, [fullscreen, originalOverflow]);
|
|
74
87
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
|
|
75
88
|
children: (props.commands || []).map(function (item, idx) {
|
|
76
89
|
if (item.keyCommand === 'divider') {
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"barPopup",
|
|
14
14
|
"commandOrchestrator",
|
|
15
15
|
"dispatch",
|
|
16
|
+
"originalOverflow",
|
|
16
17
|
"handleClick",
|
|
17
18
|
"command",
|
|
18
19
|
"name",
|
|
@@ -33,6 +34,9 @@
|
|
|
33
34
|
"body",
|
|
34
35
|
"style",
|
|
35
36
|
"overflow",
|
|
37
|
+
"current",
|
|
38
|
+
"window",
|
|
39
|
+
"getComputedStyle",
|
|
36
40
|
"map",
|
|
37
41
|
"idx",
|
|
38
42
|
"liProps",
|
|
@@ -61,8 +65,8 @@
|
|
|
61
65
|
"isChild",
|
|
62
66
|
"extraCommands"
|
|
63
67
|
],
|
|
64
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;;;AAUO,SAASA,YAAT,CAAsBC,KAAtB,EAA4C;AACjD,MAAQC,SAAR,GAAsBD,KAAtB,CAAQC,SAAR;;AACA,oBAA8E,uBAAWC,sBAAX,CAA9E;AAAA,MAAQC,UAAR,eAAQA,UAAR;AAAA,MAAoBC,OAApB,eAAoBA,OAApB;AAAA,yCAA6BC,QAA7B;AAAA,MAA6BA,QAA7B,qCAAwC,EAAxC;AAAA,MAA4CC,mBAA5C,eAA4CA,mBAA5C;AAAA,MAAiEC,QAAjE,eAAiEA,QAAjE;;AACA,WAASC,WAAT,CAAqBC,OAArB,EAAgDC,IAAhD,EAA+D;AAC7D,QAAI,
|
|
68
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;;;AAUO,SAASA,YAAT,CAAsBC,KAAtB,EAA4C;AACjD,MAAQC,SAAR,GAAsBD,KAAtB,CAAQC,SAAR;;AACA,oBAA8E,uBAAWC,sBAAX,CAA9E;AAAA,MAAQC,UAAR,eAAQA,UAAR;AAAA,MAAoBC,OAApB,eAAoBA,OAApB;AAAA,yCAA6BC,QAA7B;AAAA,MAA6BA,QAA7B,qCAAwC,EAAxC;AAAA,MAA4CC,mBAA5C,eAA4CA,mBAA5C;AAAA,MAAiEC,QAAjE,eAAiEA,QAAjE;;AACA,MAAMC,gBAAgB,GAAG,mBAAO,EAAP,CAAzB;;AAEA,WAASC,WAAT,CAAqBC,OAArB,EAAgDC,IAAhD,EAA+D;AAC7D,QAAI,CAACJ,QAAL,EAAe;AACf,QAAMK,KAAmB,GAAG;AAAEP,MAAAA,QAAQ,kCAAOA,QAAP;AAAV,KAA5B;;AACA,QAAIK,OAAO,CAACG,UAAR,KAAuB,SAA3B,EAAsC;AACpCD,MAAAA,KAAK,CAACR,OAAN,GAAgBM,OAAO,CAACI,KAAxB;AACD;;AACD,QAAIJ,OAAO,CAACG,UAAR,KAAuB,YAA3B,EAAyC;AACvCD,MAAAA,KAAK,CAACT,UAAN,GAAmB,CAACA,UAApB;AACD;;AACD,QAAIH,KAAK,CAACe,QAAN,IAAkBL,OAAO,CAACG,UAAR,KAAuB,OAA7C,EAAsD;AACpDb,MAAAA,KAAK,CAACe,QAAN,CAAeC,OAAf,CAAuB,UAACC,IAAD,EAAU;AAC/B,YAAIN,IAAI,KAAKM,IAAI,CAACC,SAAlB,EAA6B;AAC3BN,UAAAA,KAAK,CAACP,QAAN,CAAgBM,IAAhB,IAAyB,IAAzB;AACD,SAFD,MAEO,IAAIM,IAAI,CAACJ,UAAT,EAAqB;AAC1BD,UAAAA,KAAK,CAACP,QAAN,CAAgBY,IAAI,CAACC,SAArB,IAAmC,KAAnC;AACD;AACF,OAND;AAOD,KARD,MAQO,IAAIP,IAAI,IAAID,OAAO,CAACS,MAApB,EAA4B;AACjCC,MAAAA,MAAM,CAACC,IAAP,CAAYT,KAAK,CAACP,QAAN,IAAkB,EAA9B,EAAkCW,OAAlC,CAA0C,UAACM,OAAD,EAAa;AACrDV,QAAAA,KAAK,CAACP,QAAN,CAAgBiB,OAAhB,IAA2B,KAA3B;AACD,OAFD;AAGD;;AAED,QAAIF,MAAM,CAACC,IAAP,CAAYT,KAAZ,EAAmBW,MAAvB,EAA+B;AAC7BhB,MAAAA,QAAQ,iCAAMK,KAAN,EAAR;AACD;;AACDN,IAAAA,mBAAmB,IAAIA,mBAAmB,CAACkB,cAApB,CAAmCd,OAAnC,CAAvB;AACD;;AAED,wBAAU,YAAM;AACd,QAAIe,QAAJ,EAAc;AACZ,UAAItB,UAAJ,EAAgB;AACd;AACAsB,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,QAApB,GAA+B,QAA/B;AACD,OAHD,MAGO;AACL;AACA,YAAI,CAACpB,gBAAgB,CAACqB,OAAtB,EAA+B;AAC7BrB,UAAAA,gBAAgB,CAACqB,OAAjB,GAA2BC,MAAM,CAACC,gBAAP,CAAwBN,QAAQ,CAACC,IAAjC,EAAuC,IAAvC,EAA6CE,QAAxE;AACD,SAJI,CAKL;;;AACAH,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,QAApB,GAA+BpB,gBAAgB,CAACqB,OAAhD;AACD;AACF;AACF,GAdD,EAcG,CAAC1B,UAAD,EAAaK,gBAAb,CAdH;AAgBA,sBACE;AAAA,cACG,CAACR,KAAK,CAACe,QAAN,IAAkB,EAAnB,EAAuBiB,GAAvB,CAA2B,UAACf,IAAD,EAAOgB,GAAP,EAAe;AACzC,UAAIhB,IAAI,CAACJ,UAAL,KAAoB,SAAxB,EAAmC;AACjC,4BAAO,uFAAkBI,IAAI,CAACiB,OAAvB;AAAgC,UAAA,SAAS,YAAKjC,SAAL;AAAzC,YAASgC,GAAT,CAAP;AACD;;AACD,UAAI,CAAChB,IAAI,CAACJ,UAAV,EAAsB,oBAAO,qBAAC,eAAD,KAAP;AACtB,UAAMsB,SAAS,GACZhC,UAAU,IAAIc,IAAI,CAACJ,UAAL,KAAoB,YAAnC,IAAqDI,IAAI,CAACJ,UAAL,KAAoB,SAApB,IAAiCT,OAAO,KAAKa,IAAI,CAACH,KADzG;AAEA,UAAMsB,SAAS,GACbnB,IAAI,CAACoB,QAAL,IAAiB,OAAOpB,IAAI,CAACoB,QAAZ,KAAyB,UAA1C,GACIpB,IAAI,CAACoB,QAAL,CAAc;AACZC,QAAAA,QAAQ,EAAE;AAAA,iBAAMhC,mBAAmB,CAAEgC,QAArB,EAAN;AAAA,SADE;AAEZC,QAAAA,OAAO,EAAEjC,mBAAmB,GAAGA,mBAAmB,CAAEiC,OAAxB,GAAkCC,SAFlD;AAGZC,QAAAA,KAAK,EAAE;AAAA,iBAAMhC,WAAW,CAAC,EAAD,EAAKQ,IAAI,CAACC,SAAV,CAAjB;AAAA,SAHK;AAIZwB,QAAAA,OAAO,EAAE;AAAA,iBAAMjC,WAAW,CAAC;AAAEiC,YAAAA,OAAO,EAAEzB,IAAI,CAACyB;AAAhB,WAAD,CAAjB;AAAA;AAJG,OAAd,CADJ,GAOIF,SARN;AASA,UAAMG,QAAQ,GAAGtC,QAAQ,IAAID,OAAZ,IAAuBA,OAAO,KAAK,SAAnC,IAAgD,CAAC,uBAAuBwC,IAAvB,CAA4B3B,IAAI,CAACJ,UAAjC,CAAlE;AACA,0BACE,wFAAkBI,IAAI,CAACiB,OAAvB;AAAgC,QAAA,SAAS,EAAEC,SAAS,cAAc,EAAlE;AAAA,mBACG,CAAClB,IAAI,CAAC4B,WAAN,IAAqB5B,IAAI,CAAC6B,IAD7B,EAEG7B,IAAI,CAAC4B,WAAL,iBACCE,eAAMC,aAAN,CACE,QADF;AAGIC,UAAAA,IAAI,EAAE,QAHV;AAIIN,UAAAA,QAAQ,EAARA,QAJJ;AAKI,uBAAa1B,IAAI,CAACN;AALtB,WAMOM,IAAI,CAAC4B,WANZ;AAOIK,UAAAA,OAAO,EAAE,iBAACC,GAAD,EAA0D;AACjEA,YAAAA,GAAG,CAACC,eAAJ;AACA3C,YAAAA,WAAW,CAACQ,IAAD,EAAOA,IAAI,CAACC,SAAZ,CAAX;AACD;AAVL,YAYED,IAAI,CAAC6B,IAZP,CAHJ,EAiBG7B,IAAI,CAACoB,QAAL,iBACC,qBAAC,cAAD;AACE,UAAA,SAAS,EAAEpB,IAAI,CAACC,SADlB;AAEE,UAAA,SAAS,EAAEjB,SAFb;AAGE,UAAA,QAAQ,EAAEmC,SAHZ;AAIE,UAAA,QAAQ,EAAEiB,KAAK,CAACC,OAAN,CAAcrC,IAAI,CAACoB,QAAnB,IAA+BpB,IAAI,CAACoB,QAApC,GAA+CG;AAJ3D,UAlBJ;AAAA,UAASP,GAAT,CADF;AA4BD,KA7CA;AADH,IADF;AAkDD;;AAEc,SAASsB,OAAT,GAA4C;AAAA,MAA3BvD,KAA2B,uEAAJ,EAAI;AACzD,MAAQC,SAAR,GAA4CD,KAA5C,CAAQC,SAAR;AAAA,sBAA4CD,KAA5C,CAAmBwD,MAAnB;AAAA,MAAmBA,MAAnB,8BAA4B,EAA5B;AAAA,MAAgCC,OAAhC,GAA4CzD,KAA5C,CAAgCyD,OAAhC;;AACA,qBAAoC,uBAAWvD,sBAAX,CAApC;AAAA,MAAQa,QAAR,gBAAQA,QAAR;AAAA,MAAkB2C,aAAlB,gBAAkBA,aAAlB;;AACA,sBACE;AAAK,IAAA,SAAS,YAAKzD,SAAL,aAAd;AAAwC,IAAA,KAAK,EAAE;AAAEuD,MAAAA,MAAM,EAANA;AAAF,KAA/C;AAAA,4BACE,qBAAC,YAAD,8DAAkBxD,KAAlB;AAAyB,MAAA,QAAQ,EAAEA,KAAK,CAACe,QAAN,IAAkBA,QAAlB,IAA8B;AAAjE,OADF,EAEG,CAAC0C,OAAD,iBAAY,qBAAC,YAAD,8DAAkBzD,KAAlB;AAAyB,MAAA,QAAQ,EAAE0D,aAAa,IAAI;AAApD,OAFf;AAAA,IADF;AAMD",
|
|
65
69
|
"sourcesContent": [
|
|
66
|
-
"import React, { Fragment, useContext, useEffect } 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 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 document.body.style.overflow = !
|
|
70
|
+
"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 />;\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 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"
|
|
67
71
|
]
|
|
68
72
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.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>",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { Fragment, useContext, useEffect } from 'react';
|
|
1
|
+
import React, { Fragment, useContext, useEffect, useRef } from 'react';
|
|
2
2
|
import { IProps } from '../../Editor';
|
|
3
3
|
import { EditorContext, PreviewType, ContextStore } from '../../Context';
|
|
4
4
|
import { ICommand } from '../../commands';
|
|
@@ -15,6 +15,8 @@ export interface IToolbarProps extends IProps {
|
|
|
15
15
|
export function ToolbarItems(props: IToolbarProps) {
|
|
16
16
|
const { prefixCls } = props;
|
|
17
17
|
const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);
|
|
18
|
+
const originalOverflow = useRef('');
|
|
19
|
+
|
|
18
20
|
function handleClick(command: ICommand<string>, name?: string) {
|
|
19
21
|
if (!dispatch) return;
|
|
20
22
|
const state: ContextStore = { barPopup: { ...barPopup } };
|
|
@@ -46,9 +48,19 @@ export function ToolbarItems(props: IToolbarProps) {
|
|
|
46
48
|
|
|
47
49
|
useEffect(() => {
|
|
48
50
|
if (document) {
|
|
49
|
-
|
|
51
|
+
if (fullscreen) {
|
|
52
|
+
// prevent scroll on fullscreen
|
|
53
|
+
document.body.style.overflow = 'hidden';
|
|
54
|
+
} else {
|
|
55
|
+
// get the original overflow only the first time
|
|
56
|
+
if (!originalOverflow.current) {
|
|
57
|
+
originalOverflow.current = window.getComputedStyle(document.body, null).overflow;
|
|
58
|
+
}
|
|
59
|
+
// reset to the original overflow
|
|
60
|
+
document.body.style.overflow = originalOverflow.current;
|
|
61
|
+
}
|
|
50
62
|
}
|
|
51
|
-
}, [fullscreen]);
|
|
63
|
+
}, [fullscreen, originalOverflow]);
|
|
52
64
|
|
|
53
65
|
return (
|
|
54
66
|
<ul>
|