@uiw/react-md-editor 3.6.6 → 3.8.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 +17 -8
- package/esm/Context.d.ts +0 -2
- package/esm/Context.js.map +2 -2
- package/esm/Editor.d.ts +5 -0
- package/esm/Editor.js +12 -4
- package/esm/Editor.js.map +9 -4
- package/esm/components/TextArea/Textarea.js +4 -4
- package/esm/components/TextArea/Textarea.js.map +3 -3
- package/esm/components/TextArea/index.d.ts +4 -3
- package/esm/components/TextArea/index.js +1 -2
- package/esm/components/TextArea/index.js.map +3 -3
- package/lib/Context.d.ts +0 -2
- package/lib/Context.js.map +2 -2
- package/lib/Editor.d.ts +5 -0
- package/lib/Editor.js +15 -4
- package/lib/Editor.js.map +9 -4
- package/lib/components/TextArea/Textarea.js +3 -3
- package/lib/components/TextArea/Textarea.js.map +3 -3
- package/lib/components/TextArea/index.d.ts +4 -3
- package/lib/components/TextArea/index.js +1 -2
- package/lib/components/TextArea/index.js.map +3 -3
- package/package.json +1 -1
- package/src/Context.tsx +0 -1
- package/src/Editor.tsx +15 -2
- package/src/components/TextArea/Textarea.tsx +3 -3
- package/src/components/TextArea/index.tsx +6 -6
package/README.md
CHANGED
|
@@ -55,7 +55,6 @@ npm i @uiw/react-md-editor
|
|
|
55
55
|
|
|
56
56
|
```jsx
|
|
57
57
|
import React from "react";
|
|
58
|
-
import ReactDOM from "react-dom";
|
|
59
58
|
import MDEditor from '@uiw/react-md-editor';
|
|
60
59
|
|
|
61
60
|
export default function App() {
|
|
@@ -201,7 +200,7 @@ export default function App() {
|
|
|
201
200
|
value={mdKaTeX}
|
|
202
201
|
previewOptions={{
|
|
203
202
|
components: {
|
|
204
|
-
code: ({ inline, children, className, ...props }) => {
|
|
203
|
+
code: ({ inline, children = [], className, ...props }) => {
|
|
205
204
|
const txt = children[0] || '';
|
|
206
205
|
if (inline) {
|
|
207
206
|
if (typeof txt === 'string' && /^\$\$(.*)\$\$/.test(txt)) {
|
|
@@ -231,7 +230,7 @@ export default function App() {
|
|
|
231
230
|
}
|
|
232
231
|
```
|
|
233
232
|
|
|
234
|
-
### Markdown text to
|
|
233
|
+
### Markdown text to Image
|
|
235
234
|
|
|
236
235
|
[](https://codesandbox.io/embed/react-md-editor-text-to-images-ijqmx?fontsize=14&hidenavigation=1&theme=dark)
|
|
237
236
|
|
|
@@ -316,6 +315,15 @@ Bob-->>John: Jolly good!
|
|
|
316
315
|
\`\`\`
|
|
317
316
|
`;
|
|
318
317
|
|
|
318
|
+
const getCode = (arr = []) => arr.map(dt => {
|
|
319
|
+
if (typeof dt === 'string') {
|
|
320
|
+
return dt;
|
|
321
|
+
}
|
|
322
|
+
if (dt.props && dt.props.children) {
|
|
323
|
+
return getCode(dt.props.children);
|
|
324
|
+
}
|
|
325
|
+
}).filter(Boolean).join('');
|
|
326
|
+
|
|
319
327
|
export default function App() {
|
|
320
328
|
return (
|
|
321
329
|
<MDEditor
|
|
@@ -323,19 +331,19 @@ export default function App() {
|
|
|
323
331
|
value={mdMermaid || ""}
|
|
324
332
|
previewOptions={{
|
|
325
333
|
components: {
|
|
326
|
-
code: ({ inline, children, className, ...props }) => {
|
|
327
|
-
const
|
|
334
|
+
code: ({ inline, children = [], className, ...props }) => {
|
|
335
|
+
const code = getCode(children);
|
|
328
336
|
if (
|
|
329
|
-
typeof
|
|
337
|
+
typeof code === 'string' &&
|
|
330
338
|
typeof className === 'string' &&
|
|
331
339
|
/^language-mermaid/.test(className.toLocaleLowerCase())
|
|
332
340
|
) {
|
|
333
341
|
const Elm = document.createElement("div");
|
|
334
342
|
Elm.id = "demo";
|
|
335
|
-
const svg = mermaid.render("demo",
|
|
343
|
+
const svg = mermaid.render("demo", code);
|
|
336
344
|
return <code dangerouslySetInnerHTML={{ __html: svg }} />
|
|
337
345
|
}
|
|
338
|
-
return <code className={String(className)}>{
|
|
346
|
+
return <code className={String(className)}>{children}</code>;
|
|
339
347
|
},
|
|
340
348
|
},
|
|
341
349
|
}}
|
|
@@ -391,6 +399,7 @@ export default HomePage;
|
|
|
391
399
|
- `value: string`: The Markdown value.
|
|
392
400
|
- `onChange?: (value: string)`: Event handler for the `onChange` event.
|
|
393
401
|
- `commands?: ICommand[]`: An array of [`ICommand`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L39-L57), which, each one, contain a [`commands`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L155-L180) property. If no commands are specified, the default will be used. Commands are explained in more details below.
|
|
402
|
+
- `commandsFilter?: (command: ICommand) => false | ICommand`: Filter or modify your commands.
|
|
394
403
|
- `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.
|
|
395
404
|
- `autoFocus?: true`: Can be used to make `Markdown Editor` focus itself on initialization.
|
|
396
405
|
- `previewOptions?: ReactMarkdown.ReactMarkdownProps`: This is reset [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview/tree/e6e8462d9a5c64a7045e25adcb4928095d74ca37#options-props) settings.
|
package/esm/Context.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ export declare type ContextStore = {
|
|
|
10
10
|
fullscreen?: boolean;
|
|
11
11
|
highlightEnable?: boolean;
|
|
12
12
|
autoFocus?: boolean;
|
|
13
|
-
onChange?: (value?: string) => void;
|
|
14
13
|
textarea?: HTMLTextAreaElement;
|
|
15
14
|
commandOrchestrator?: TextAreaCommandOrchestrator;
|
|
16
15
|
textareaWarp?: HTMLDivElement;
|
|
@@ -32,7 +31,6 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
|
32
31
|
fullscreen?: boolean | undefined;
|
|
33
32
|
highlightEnable?: boolean | undefined;
|
|
34
33
|
autoFocus?: boolean | undefined;
|
|
35
|
-
onChange?: ((value?: string | undefined) => void) | undefined;
|
|
36
34
|
textarea?: HTMLTextAreaElement | undefined;
|
|
37
35
|
commandOrchestrator?: TextAreaCommandOrchestrator | undefined;
|
|
38
36
|
textareaWarp?: HTMLDivElement | undefined;
|
package/esm/Context.js.map
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"createContext",
|
|
13
13
|
"markdown"
|
|
14
14
|
],
|
|
15
|
-
"mappings": ";AAAA,OAAOA,KAAP,MAAkB,OAAlB;
|
|
15
|
+
"mappings": ";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AA4BA,OAAO,SAASC,OAAT,CAAiBC,KAAjB,EAAsCC,MAAtC,EAA4D;AACjE,sBAAYD,KAAZ,EAAsBC,MAAtB;AACD;AAED,OAAO,IAAMC,aAAa,gBAAGJ,KAAK,CAACK,aAAN,CAAkC;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAlC,CAAtB",
|
|
16
16
|
"sourcesContent": [
|
|
17
|
-
"import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport type ContextStore = {\n commands?: ICommand<string>[];\n extraCommands?: ICommand<string>[];\n markdown?: string;\n preview?: PreviewType;\n height?: number;\n fullscreen?: boolean;\n highlightEnable?: boolean;\n autoFocus?: boolean;\n
|
|
17
|
+
"import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport type ContextStore = {\n commands?: ICommand<string>[];\n extraCommands?: ICommand<string>[];\n markdown?: string;\n preview?: PreviewType;\n height?: number;\n fullscreen?: boolean;\n highlightEnable?: boolean;\n autoFocus?: boolean;\n textarea?: HTMLTextAreaElement;\n commandOrchestrator?: TextAreaCommandOrchestrator;\n textareaWarp?: HTMLDivElement;\n textareaPre?: HTMLPreElement;\n container?: HTMLDivElement | null;\n dispatch?: React.Dispatch<ContextStore>;\n barPopup?: Record<string, boolean>;\n scrollTop?: number;\n scrollTopPreview?: number;\n tabSize?: number;\n};\n\nexport type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;\n\nexport function reducer(state: ContextStore, action: ContextStore) {\n return { ...state, ...action };\n}\n\nexport const EditorContext = React.createContext<ContextStore>({ markdown: '' });\n"
|
|
18
18
|
]
|
|
19
19
|
}
|
package/esm/Editor.d.ts
CHANGED
|
@@ -76,6 +76,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
76
76
|
* You can create your own commands or reuse existing commands.
|
|
77
77
|
*/
|
|
78
78
|
commands?: ICommand[];
|
|
79
|
+
/**
|
|
80
|
+
* Filter or modify your commands.
|
|
81
|
+
* https://github.com/uiwjs/react-md-editor/issues/296
|
|
82
|
+
*/
|
|
83
|
+
commandsFilter?: (command: ICommand) => false | ICommand;
|
|
79
84
|
/**
|
|
80
85
|
* You can create your own commands or reuse existing commands.
|
|
81
86
|
*/
|
package/esm/Editor.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["prefixCls", "className", "value", "commands", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "onChange", "hideToolbar", "renderTextarea"];
|
|
3
|
+
var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "onChange", "hideToolbar", "renderTextarea"];
|
|
4
4
|
import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
|
|
5
5
|
import MarkdownPreview from '@uiw/react-markdown-preview';
|
|
6
6
|
import TextArea from './components/TextArea';
|
|
@@ -30,6 +30,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
30
30
|
className,
|
|
31
31
|
value: propsValue,
|
|
32
32
|
commands = getCommands(),
|
|
33
|
+
commandsFilter,
|
|
33
34
|
extraCommands = getExtraCommands(),
|
|
34
35
|
height = 200,
|
|
35
36
|
toolbarHeight = 29,
|
|
@@ -44,12 +45,13 @@ var InternalMDEditor = (props, ref) => {
|
|
|
44
45
|
minHeight = 100,
|
|
45
46
|
autoFocus,
|
|
46
47
|
tabSize = 2,
|
|
47
|
-
onChange,
|
|
48
|
+
onChange: _onChange,
|
|
48
49
|
hideToolbar,
|
|
49
50
|
renderTextarea
|
|
50
51
|
} = _ref,
|
|
51
52
|
other = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
52
53
|
|
|
54
|
+
var cmds = commands.map(item => commandsFilter ? commandsFilter(item) : item).filter(Boolean);
|
|
53
55
|
var [state, dispatch] = useReducer(reducer, {
|
|
54
56
|
markdown: propsValue,
|
|
55
57
|
preview: previewType,
|
|
@@ -58,10 +60,9 @@ var InternalMDEditor = (props, ref) => {
|
|
|
58
60
|
tabSize,
|
|
59
61
|
scrollTop: 0,
|
|
60
62
|
scrollTopPreview: 0,
|
|
61
|
-
commands,
|
|
63
|
+
commands: cmds,
|
|
62
64
|
extraCommands,
|
|
63
65
|
fullscreen,
|
|
64
|
-
onChange,
|
|
65
66
|
barPopup: {}
|
|
66
67
|
});
|
|
67
68
|
var container = useRef(null);
|
|
@@ -192,6 +193,13 @@ var InternalMDEditor = (props, ref) => {
|
|
|
192
193
|
prefixCls: prefixCls,
|
|
193
194
|
autoFocus: autoFocus
|
|
194
195
|
}, textareaProps, {
|
|
196
|
+
onChange: evn => {
|
|
197
|
+
_onChange && _onChange(evn.target.value);
|
|
198
|
+
|
|
199
|
+
if (textareaProps && textareaProps.onChange) {
|
|
200
|
+
textareaProps.onChange(evn);
|
|
201
|
+
}
|
|
202
|
+
},
|
|
195
203
|
renderTextarea: renderTextarea,
|
|
196
204
|
onScroll: e => handleScroll(e, 'text')
|
|
197
205
|
})), /(live|preview)/.test(state.preview || '') && /*#__PURE__*/_jsx(MarkdownPreview, _extends({}, previewOptions, {
|
package/esm/Editor.js.map
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"value",
|
|
33
33
|
"propsValue",
|
|
34
34
|
"commands",
|
|
35
|
+
"commandsFilter",
|
|
35
36
|
"extraCommands",
|
|
36
37
|
"height",
|
|
37
38
|
"toolbarHeight",
|
|
@@ -51,6 +52,11 @@
|
|
|
51
52
|
"hideToolbar",
|
|
52
53
|
"renderTextarea",
|
|
53
54
|
"other",
|
|
55
|
+
"cmds",
|
|
56
|
+
"map",
|
|
57
|
+
"item",
|
|
58
|
+
"filter",
|
|
59
|
+
"Boolean",
|
|
54
60
|
"state",
|
|
55
61
|
"dispatch",
|
|
56
62
|
"markdown",
|
|
@@ -64,8 +70,6 @@
|
|
|
64
70
|
"stateInit",
|
|
65
71
|
"undefined",
|
|
66
72
|
"cls",
|
|
67
|
-
"filter",
|
|
68
|
-
"Boolean",
|
|
69
73
|
"join",
|
|
70
74
|
"trim",
|
|
71
75
|
"textareaDomRef",
|
|
@@ -86,13 +90,14 @@
|
|
|
86
90
|
"style",
|
|
87
91
|
"Number",
|
|
88
92
|
"test",
|
|
93
|
+
"evn",
|
|
89
94
|
"newHeight",
|
|
90
95
|
"mdEditor",
|
|
91
96
|
"forwardRef",
|
|
92
97
|
"Markdown"
|
|
93
98
|
],
|
|
94
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,UAA3B,EAAuCC,OAAvC,EAAgDC,MAAhD,EAAwDC,mBAAxD,QAAmF,OAAnF;AACA,OAAOC,eAAP,MAA0E,6BAA1E;AACA,OAAOC,QAAP,MAAyC,uBAAzC;AACA,OAAOC,OAAP,MAAoB,sBAApB;AACA,OAAOC,OAAP,MAAoB,sBAApB;AACA,SAASC,WAAT,EAAsBC,gBAAtB,QAAwD,YAAxD;AACA,SAASC,OAAT,EAAkBC,aAAlB,QAAkE,WAAlE;AACA;;;;
|
|
99
|
+
"mappings": "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",
|
|
95
100
|
"sourcesContent": [
|
|
96
|
-
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n prefixCls?: string;\n className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n /**\n * The Markdown value.\n */\n value?: string;\n /**\n * Event handler for the `onChange` event.\n */\n onChange?: (value?: string) => void;\n /**\n * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n * it will be set to true when either the source `textarea` is focused,\n * or it has an `autofocus` attribute and no other element is focused.\n */\n autoFocus?: ITextAreaProps['autoFocus'];\n /**\n * The height of the editor.\n */\n height?: number;\n /**\n * Custom toolbar heigth\n * @default 29px\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visiableDragbar?: boolean;\n /**\n * Show markdown preview.\n */\n preview?: PreviewType;\n /**\n * Full screen display editor.\n */\n fullscreen?: boolean;\n /**\n * Maximum drag height. `visiableDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visiableDragbar=true`\n */\n minHeight?: number;\n /**\n * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n */\n previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n /**\n * Set the `textarea` related props.\n */\n textareaProps?: ITextAreaProps;\n /** Use div to replace TextArea or re-render TextArea */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n * @default true\n */\n highlightEnable?: boolean;\n /**\n * The number of characters to insert when pressing tab key.\n * Default `2` spaces.\n */\n tabSize?: number;\n /**\n * You can create your own commands or reuse existing commands.\n */\n commands?: ICommand[];\n /**\n * You can create your own commands or reuse existing commands.\n */\n extraCommands?: ICommand[];\n /**\n * Hide the tool bar\n */\n hideToolbar?: boolean;\n /** Whether to enable scrolling */\n enableScroll?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n Object.keys(data).forEach((keyname) => {\n data[keyname] = false;\n });\n return data;\n}\n\nconst InternalMDEditor = (\n props: MDEditorProps,\n ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n const {\n prefixCls = 'w-md-editor',\n className,\n value: propsValue,\n commands = getCommands(),\n extraCommands = getExtraCommands(),\n height = 200,\n toolbarHeight = 29,\n enableScroll = true,\n visiableDragbar = true,\n highlightEnable = true,\n preview: previewType = 'live',\n fullscreen = false,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands,\n extraCommands,\n fullscreen,\n onChange,\n barPopup: {},\n });\n const container = useRef<HTMLDivElement>(null);\n const previewRef = useRef<MarkdownPreviewRef>(null);\n const enableScrollRef = useRef(enableScroll);\n\n useImperativeHandle(ref, () => ({ ...state }));\n useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n useEffect(() => {\n const stateInit: ContextStore = {};\n if (container.current) {\n stateInit.container = container.current || undefined;\n }\n stateInit.markdown = propsValue || '';\n stateInit.barPopup = {};\n if (dispatch) {\n dispatch({ ...state, ...stateInit });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const cls = [\n className,\n prefixCls,\n state.preview ? `${prefixCls}-show-${state.preview}` : null,\n state.fullscreen ? `${prefixCls}-fullscreen` : null,\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n\n useMemo(\n () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n [propsValue, state.markdown],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n useMemo(\n () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [highlightEnable],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n useMemo(\n () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [fullscreen],\n );\n\n const textareaDomRef = useRef<HTMLDivElement>();\n const active = useRef<'text' | 'preview'>('preview');\n const initScroll = useRef(false);\n\n useMemo(() => {\n textareaDomRef.current = state.textareaWarp;\n if (state.textareaWarp) {\n state.textareaWarp.addEventListener('mouseover', () => {\n active.current = 'text';\n });\n state.textareaWarp.addEventListener('mouseleave', () => {\n active.current = 'preview';\n });\n }\n }, [state.textareaWarp]);\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n if (!enableScrollRef.current) return;\n const textareaDom = textareaDomRef.current;\n const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n if (!initScroll.current) {\n active.current = type;\n initScroll.current = true;\n }\n if (textareaDom && previewDom) {\n const scale =\n (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n if (e.target === textareaDom && active.current === 'text') {\n previewDom.scrollTop = textareaDom.scrollTop / scale;\n }\n if (e.target === previewDom && active.current === 'preview') {\n textareaDom.scrollTop = previewDom.scrollTop * scale;\n }\n let scrollTop = 0;\n if (active.current === 'text') {\n scrollTop = textareaDom.scrollTop || 0;\n } else if (active.current === 'preview') {\n scrollTop = previewDom.scrollTop || 0;\n }\n dispatch({ scrollTop });\n }\n };\n\n return (\n <EditorContext.Provider value={{ ...state, dispatch }}>\n <div\n ref={container}\n className={cls}\n {...other}\n onClick={() => {\n dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n }}\n style={{\n ...other.style,\n height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n }}\n >\n {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} />}\n <div\n className={`${prefixCls}-content`}\n style={{\n height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n }}\n >\n {/(edit|live)/.test(state.preview || '') && (\n <TextArea\n className={`${prefixCls}-input`}\n prefixCls={prefixCls}\n autoFocus={autoFocus}\n {...textareaProps}\n renderTextarea={renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && (\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n ref={previewRef}\n source={state.markdown || ''}\n className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n />\n )}\n </div>\n {visiableDragbar && !state.fullscreen && (\n <DragBar\n prefixCls={prefixCls}\n height={state.height as number}\n maxHeight={maxHeight!}\n minHeight={minHeight!}\n onChange={(newHeight) => {\n dispatch({ height: newHeight });\n }}\n />\n )}\n </div>\n </EditorContext.Provider>\n );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
|
|
101
|
+
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n prefixCls?: string;\n className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n /**\n * The Markdown value.\n */\n value?: string;\n /**\n * Event handler for the `onChange` event.\n */\n onChange?: (value?: string) => void;\n /**\n * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n * it will be set to true when either the source `textarea` is focused,\n * or it has an `autofocus` attribute and no other element is focused.\n */\n autoFocus?: ITextAreaProps['autoFocus'];\n /**\n * The height of the editor.\n */\n height?: number;\n /**\n * Custom toolbar heigth\n * @default 29px\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visiableDragbar?: boolean;\n /**\n * Show markdown preview.\n */\n preview?: PreviewType;\n /**\n * Full screen display editor.\n */\n fullscreen?: boolean;\n /**\n * Maximum drag height. `visiableDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visiableDragbar=true`\n */\n minHeight?: number;\n /**\n * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n */\n previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n /**\n * Set the `textarea` related props.\n */\n textareaProps?: ITextAreaProps;\n /** Use div to replace TextArea or re-render TextArea */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n * @default true\n */\n highlightEnable?: boolean;\n /**\n * The number of characters to insert when pressing tab key.\n * Default `2` spaces.\n */\n tabSize?: number;\n /**\n * You can create your own commands or reuse existing commands.\n */\n commands?: ICommand[];\n /**\n * Filter or modify your commands.\n * https://github.com/uiwjs/react-md-editor/issues/296\n */\n commandsFilter?: (command: ICommand) => false | ICommand;\n /**\n * You can create your own commands or reuse existing commands.\n */\n extraCommands?: ICommand[];\n /**\n * Hide the tool bar\n */\n hideToolbar?: boolean;\n /** Whether to enable scrolling */\n enableScroll?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n Object.keys(data).forEach((keyname) => {\n data[keyname] = false;\n });\n return data;\n}\n\nconst InternalMDEditor = (\n props: MDEditorProps,\n ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n const {\n prefixCls = 'w-md-editor',\n className,\n value: propsValue,\n commands = getCommands(),\n commandsFilter,\n extraCommands = getExtraCommands(),\n height = 200,\n toolbarHeight = 29,\n enableScroll = true,\n visiableDragbar = true,\n highlightEnable = true,\n preview: previewType = 'live',\n fullscreen = false,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n\n const cmds = commands.map((item) => (commandsFilter ? commandsFilter(item) : item)).filter(Boolean) as ICommand[];\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands: cmds,\n extraCommands,\n fullscreen,\n barPopup: {},\n });\n const container = useRef<HTMLDivElement>(null);\n const previewRef = useRef<MarkdownPreviewRef>(null);\n const enableScrollRef = useRef(enableScroll);\n\n useImperativeHandle(ref, () => ({ ...state }));\n useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n useEffect(() => {\n const stateInit: ContextStore = {};\n if (container.current) {\n stateInit.container = container.current || undefined;\n }\n stateInit.markdown = propsValue || '';\n stateInit.barPopup = {};\n if (dispatch) {\n dispatch({ ...state, ...stateInit });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const cls = [\n className,\n prefixCls,\n state.preview ? `${prefixCls}-show-${state.preview}` : null,\n state.fullscreen ? `${prefixCls}-fullscreen` : null,\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n\n useMemo(\n () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n [propsValue, state.markdown],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n useMemo(\n () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [highlightEnable],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n useMemo(\n () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [fullscreen],\n );\n\n const textareaDomRef = useRef<HTMLDivElement>();\n const active = useRef<'text' | 'preview'>('preview');\n const initScroll = useRef(false);\n\n useMemo(() => {\n textareaDomRef.current = state.textareaWarp;\n if (state.textareaWarp) {\n state.textareaWarp.addEventListener('mouseover', () => {\n active.current = 'text';\n });\n state.textareaWarp.addEventListener('mouseleave', () => {\n active.current = 'preview';\n });\n }\n }, [state.textareaWarp]);\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n if (!enableScrollRef.current) return;\n const textareaDom = textareaDomRef.current;\n const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n if (!initScroll.current) {\n active.current = type;\n initScroll.current = true;\n }\n if (textareaDom && previewDom) {\n const scale =\n (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n if (e.target === textareaDom && active.current === 'text') {\n previewDom.scrollTop = textareaDom.scrollTop / scale;\n }\n if (e.target === previewDom && active.current === 'preview') {\n textareaDom.scrollTop = previewDom.scrollTop * scale;\n }\n let scrollTop = 0;\n if (active.current === 'text') {\n scrollTop = textareaDom.scrollTop || 0;\n } else if (active.current === 'preview') {\n scrollTop = previewDom.scrollTop || 0;\n }\n dispatch({ scrollTop });\n }\n };\n\n return (\n <EditorContext.Provider value={{ ...state, dispatch }}>\n <div\n ref={container}\n className={cls}\n {...other}\n onClick={() => {\n dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n }}\n style={{\n ...other.style,\n height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n }}\n >\n {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} />}\n <div\n className={`${prefixCls}-content`}\n style={{\n height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n }}\n >\n {/(edit|live)/.test(state.preview || '') && (\n <TextArea\n className={`${prefixCls}-input`}\n prefixCls={prefixCls}\n autoFocus={autoFocus}\n {...textareaProps}\n onChange={(evn) => {\n onChange && onChange(evn.target.value);\n if (textareaProps && textareaProps.onChange) {\n textareaProps.onChange(evn);\n }\n }}\n renderTextarea={renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && (\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n ref={previewRef}\n source={state.markdown || ''}\n className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n />\n )}\n </div>\n {visiableDragbar && !state.fullscreen && (\n <DragBar\n prefixCls={prefixCls}\n height={state.height as number}\n maxHeight={maxHeight!}\n minHeight={minHeight!}\n onChange={(newHeight) => {\n dispatch({ height: newHeight });\n }}\n />\n )}\n </div>\n </EditorContext.Provider>\n );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
|
|
97
102
|
]
|
|
98
103
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["prefixCls"];
|
|
3
|
+
var _excluded = ["prefixCls", "onChange"];
|
|
4
4
|
import React, { useContext, useEffect } from 'react';
|
|
5
5
|
import { EditorContext } from '../../Context';
|
|
6
6
|
import { TextAreaCommandOrchestrator } from '../../commands';
|
|
@@ -10,7 +10,8 @@ import "./index.css";
|
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
11
|
export default function Textarea(props) {
|
|
12
12
|
var {
|
|
13
|
-
prefixCls
|
|
13
|
+
prefixCls,
|
|
14
|
+
onChange: _onChange
|
|
14
15
|
} = props,
|
|
15
16
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
16
17
|
|
|
@@ -22,7 +23,6 @@ export default function Textarea(props) {
|
|
|
22
23
|
highlightEnable,
|
|
23
24
|
extraCommands,
|
|
24
25
|
tabSize,
|
|
25
|
-
onChange: _onChange,
|
|
26
26
|
dispatch
|
|
27
27
|
} = useContext(EditorContext);
|
|
28
28
|
var textRef = React.useRef(null);
|
|
@@ -80,7 +80,7 @@ export default function Textarea(props) {
|
|
|
80
80
|
dispatch && dispatch({
|
|
81
81
|
markdown: e.target.value
|
|
82
82
|
});
|
|
83
|
-
_onChange && _onChange(e
|
|
83
|
+
_onChange && _onChange(e);
|
|
84
84
|
}
|
|
85
85
|
}));
|
|
86
86
|
}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"Textarea",
|
|
15
15
|
"props",
|
|
16
16
|
"prefixCls",
|
|
17
|
+
"onChange",
|
|
17
18
|
"other",
|
|
18
19
|
"markdown",
|
|
19
20
|
"commands",
|
|
@@ -22,7 +23,6 @@
|
|
|
22
23
|
"highlightEnable",
|
|
23
24
|
"extraCommands",
|
|
24
25
|
"tabSize",
|
|
25
|
-
"onChange",
|
|
26
26
|
"dispatch",
|
|
27
27
|
"textRef",
|
|
28
28
|
"useRef",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"target",
|
|
40
40
|
"value"
|
|
41
41
|
],
|
|
42
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,QAA6C,OAA7C;AAEA,SAASC,aAAT,QAAmD,eAAnD;AACA,SAASC,2BAAT,QAA4C,gBAA5C;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA;;AAIA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAM;AAAEC,IAAAA;
|
|
42
|
+
"mappings": "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",
|
|
43
43
|
"sourcesContent": [
|
|
44
|
-
"import React, { useContext, useEffect } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, ExecuteCommandState } from '../../Context';\nimport { TextAreaCommandOrchestrator } from '../../commands';\nimport handleKeyDown from './handleKeyDown';\nimport shortcuts from './shortcuts';\nimport './index.less';\n\nexport interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {}\n\nexport default function Textarea(props: TextAreaProps) {\n const { prefixCls, ...other } = props;\n const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize,
|
|
44
|
+
"import React, { useContext, useEffect } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, ExecuteCommandState } from '../../Context';\nimport { TextAreaCommandOrchestrator } from '../../commands';\nimport handleKeyDown from './handleKeyDown';\nimport shortcuts from './shortcuts';\nimport './index.less';\n\nexport interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {}\n\nexport default function Textarea(props: TextAreaProps) {\n const { prefixCls, onChange, ...other } = props;\n const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize, dispatch } =\n useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const statesRef = React.useRef<ExecuteCommandState>({ fullscreen, preview });\n\n useEffect(() => {\n statesRef.current = { fullscreen, preview, highlightEnable };\n }, [fullscreen, preview, highlightEnable]);\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 onKeyDown = (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) => {\n handleKeyDown(e, tabSize);\n shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);\n };\n useEffect(() => {\n if (textRef.current) {\n textRef.current.addEventListener('keydown', onKeyDown);\n }\n return () => {\n if (textRef.current) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n textRef.current.removeEventListener('keydown', onKeyDown);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <textarea\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck={false}\n {...other}\n ref={textRef}\n className={`${prefixCls}-text-input ${other.className ? other.className : ''}`}\n value={markdown}\n onChange={(e) => {\n dispatch && dispatch({ markdown: e.target.value });\n onChange && onChange(e);\n }}\n />\n );\n}\n"
|
|
45
45
|
]
|
|
46
46
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ContextStore, ExecuteCommandState } from '../../Context';
|
|
3
|
-
import {
|
|
3
|
+
import { TextAreaProps } from './Textarea';
|
|
4
|
+
import { IProps } from '../../Editor';
|
|
4
5
|
import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
|
|
5
6
|
import './index.less';
|
|
6
7
|
declare type RenderTextareaHandle = {
|
|
7
8
|
dispatch: ContextStore['dispatch'];
|
|
8
|
-
onChange?:
|
|
9
|
+
onChange?: TextAreaProps['onChange'];
|
|
9
10
|
useContext?: {
|
|
10
11
|
commands: ContextStore['commands'];
|
|
11
12
|
extraCommands: ContextStore['extraCommands'];
|
|
@@ -13,7 +14,7 @@ declare type RenderTextareaHandle = {
|
|
|
13
14
|
};
|
|
14
15
|
shortcuts?: (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, commands: ICommand[], commandOrchestrator?: TextAreaCommandOrchestrator, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState) => void;
|
|
15
16
|
};
|
|
16
|
-
export interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | '
|
|
17
|
+
export interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>, IProps {
|
|
17
18
|
value?: string;
|
|
18
19
|
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
19
20
|
renderTextarea?: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>, opts: RenderTextareaHandle) => JSX.Element;
|
|
@@ -25,7 +25,6 @@ export default function TextArea(props) {
|
|
|
25
25
|
scrollTop,
|
|
26
26
|
commands,
|
|
27
27
|
extraCommands,
|
|
28
|
-
onChange,
|
|
29
28
|
dispatch
|
|
30
29
|
} = useContext(EditorContext);
|
|
31
30
|
var textRef = React.useRef(null);
|
|
@@ -75,7 +74,7 @@ export default function TextArea(props) {
|
|
|
75
74
|
}
|
|
76
75
|
}), {
|
|
77
76
|
dispatch,
|
|
78
|
-
onChange,
|
|
77
|
+
onChange: otherProps.onChange,
|
|
79
78
|
shortcuts,
|
|
80
79
|
useContext: {
|
|
81
80
|
commands,
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
"scrollTop",
|
|
25
25
|
"commands",
|
|
26
26
|
"extraCommands",
|
|
27
|
-
"onChange",
|
|
28
27
|
"dispatch",
|
|
29
28
|
"textRef",
|
|
30
29
|
"useRef",
|
|
@@ -46,10 +45,11 @@
|
|
|
46
45
|
"style",
|
|
47
46
|
"WebkitTextFillColor",
|
|
48
47
|
"overflow",
|
|
48
|
+
"onChange",
|
|
49
49
|
"ref"
|
|
50
50
|
],
|
|
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,
|
|
51
|
+
"mappings": "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",
|
|
52
52
|
"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 from './Textarea';\nimport {
|
|
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} />\n <Textarea prefixCls={prefixCls} {...otherProps} />\n </Fragment>\n )}\n </div>\n </div>\n );\n}\n"
|
|
54
54
|
]
|
|
55
55
|
}
|
package/lib/Context.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ export declare type ContextStore = {
|
|
|
10
10
|
fullscreen?: boolean;
|
|
11
11
|
highlightEnable?: boolean;
|
|
12
12
|
autoFocus?: boolean;
|
|
13
|
-
onChange?: (value?: string) => void;
|
|
14
13
|
textarea?: HTMLTextAreaElement;
|
|
15
14
|
commandOrchestrator?: TextAreaCommandOrchestrator;
|
|
16
15
|
textareaWarp?: HTMLDivElement;
|
|
@@ -32,7 +31,6 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
|
32
31
|
fullscreen?: boolean | undefined;
|
|
33
32
|
highlightEnable?: boolean | undefined;
|
|
34
33
|
autoFocus?: boolean | undefined;
|
|
35
|
-
onChange?: ((value?: string | undefined) => void) | undefined;
|
|
36
34
|
textarea?: HTMLTextAreaElement | undefined;
|
|
37
35
|
commandOrchestrator?: TextAreaCommandOrchestrator | undefined;
|
|
38
36
|
textareaWarp?: HTMLDivElement | undefined;
|
package/lib/Context.js.map
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"createContext",
|
|
13
13
|
"markdown"
|
|
14
14
|
],
|
|
15
|
-
"mappings": ";;;;;;;;;;;;AAAA;;
|
|
15
|
+
"mappings": ";;;;;;;;;;;;AAAA;;AA4BO,SAASA,OAAT,CAAiBC,KAAjB,EAAsCC,MAAtC,EAA4D;AACjE,qEAAYD,KAAZ,GAAsBC,MAAtB;AACD;;AAEM,IAAMC,aAAa,gBAAGC,eAAMC,aAAN,CAAkC;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAlC,CAAtB",
|
|
16
16
|
"sourcesContent": [
|
|
17
|
-
"import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport type ContextStore = {\n commands?: ICommand<string>[];\n extraCommands?: ICommand<string>[];\n markdown?: string;\n preview?: PreviewType;\n height?: number;\n fullscreen?: boolean;\n highlightEnable?: boolean;\n autoFocus?: boolean;\n
|
|
17
|
+
"import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport type ContextStore = {\n commands?: ICommand<string>[];\n extraCommands?: ICommand<string>[];\n markdown?: string;\n preview?: PreviewType;\n height?: number;\n fullscreen?: boolean;\n highlightEnable?: boolean;\n autoFocus?: boolean;\n textarea?: HTMLTextAreaElement;\n commandOrchestrator?: TextAreaCommandOrchestrator;\n textareaWarp?: HTMLDivElement;\n textareaPre?: HTMLPreElement;\n container?: HTMLDivElement | null;\n dispatch?: React.Dispatch<ContextStore>;\n barPopup?: Record<string, boolean>;\n scrollTop?: number;\n scrollTopPreview?: number;\n tabSize?: number;\n};\n\nexport type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;\n\nexport function reducer(state: ContextStore, action: ContextStore) {\n return { ...state, ...action };\n}\n\nexport const EditorContext = React.createContext<ContextStore>({ markdown: '' });\n"
|
|
18
18
|
]
|
|
19
19
|
}
|
package/lib/Editor.d.ts
CHANGED
|
@@ -76,6 +76,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
76
76
|
* You can create your own commands or reuse existing commands.
|
|
77
77
|
*/
|
|
78
78
|
commands?: ICommand[];
|
|
79
|
+
/**
|
|
80
|
+
* Filter or modify your commands.
|
|
81
|
+
* https://github.com/uiwjs/react-md-editor/issues/296
|
|
82
|
+
*/
|
|
83
|
+
commandsFilter?: (command: ICommand) => false | ICommand;
|
|
79
84
|
/**
|
|
80
85
|
* You can create your own commands or reuse existing commands.
|
|
81
86
|
*/
|
package/lib/Editor.js
CHANGED
|
@@ -31,7 +31,7 @@ var _Context = require("./Context");
|
|
|
31
31
|
|
|
32
32
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
33
|
|
|
34
|
-
var _excluded = ["prefixCls", "className", "value", "commands", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "onChange", "hideToolbar", "renderTextarea"];
|
|
34
|
+
var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "onChange", "hideToolbar", "renderTextarea"];
|
|
35
35
|
|
|
36
36
|
function setGroupPopFalse() {
|
|
37
37
|
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -49,6 +49,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
49
49
|
propsValue = _ref.value,
|
|
50
50
|
_ref$commands = _ref.commands,
|
|
51
51
|
commands = _ref$commands === void 0 ? (0, _commands.getCommands)() : _ref$commands,
|
|
52
|
+
commandsFilter = _ref.commandsFilter,
|
|
52
53
|
_ref$extraCommands = _ref.extraCommands,
|
|
53
54
|
extraCommands = _ref$extraCommands === void 0 ? (0, _commands.getExtraCommands)() : _ref$extraCommands,
|
|
54
55
|
_ref$height = _ref.height,
|
|
@@ -75,11 +76,15 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
75
76
|
autoFocus = _ref.autoFocus,
|
|
76
77
|
_ref$tabSize = _ref.tabSize,
|
|
77
78
|
tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
|
|
78
|
-
|
|
79
|
+
_onChange = _ref.onChange,
|
|
79
80
|
hideToolbar = _ref.hideToolbar,
|
|
80
81
|
renderTextarea = _ref.renderTextarea,
|
|
81
82
|
other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
82
83
|
|
|
84
|
+
var cmds = commands.map(function (item) {
|
|
85
|
+
return commandsFilter ? commandsFilter(item) : item;
|
|
86
|
+
}).filter(Boolean);
|
|
87
|
+
|
|
83
88
|
var _useReducer = (0, _react.useReducer)(_Context.reducer, {
|
|
84
89
|
markdown: propsValue,
|
|
85
90
|
preview: previewType,
|
|
@@ -88,10 +93,9 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
88
93
|
tabSize: tabSize,
|
|
89
94
|
scrollTop: 0,
|
|
90
95
|
scrollTopPreview: 0,
|
|
91
|
-
commands:
|
|
96
|
+
commands: cmds,
|
|
92
97
|
extraCommands: extraCommands,
|
|
93
98
|
fullscreen: fullscreen,
|
|
94
|
-
onChange: onChange,
|
|
95
99
|
barPopup: {}
|
|
96
100
|
}),
|
|
97
101
|
_useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
|
|
@@ -244,6 +248,13 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
244
248
|
prefixCls: prefixCls,
|
|
245
249
|
autoFocus: autoFocus
|
|
246
250
|
}, textareaProps), {}, {
|
|
251
|
+
onChange: function onChange(evn) {
|
|
252
|
+
_onChange && _onChange(evn.target.value);
|
|
253
|
+
|
|
254
|
+
if (textareaProps && textareaProps.onChange) {
|
|
255
|
+
textareaProps.onChange(evn);
|
|
256
|
+
}
|
|
257
|
+
},
|
|
247
258
|
renderTextarea: renderTextarea,
|
|
248
259
|
onScroll: function onScroll(e) {
|
|
249
260
|
return handleScroll(e, 'text');
|
package/lib/Editor.js.map
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"propsValue",
|
|
19
19
|
"value",
|
|
20
20
|
"commands",
|
|
21
|
+
"commandsFilter",
|
|
21
22
|
"extraCommands",
|
|
22
23
|
"height",
|
|
23
24
|
"toolbarHeight",
|
|
@@ -37,6 +38,11 @@
|
|
|
37
38
|
"hideToolbar",
|
|
38
39
|
"renderTextarea",
|
|
39
40
|
"other",
|
|
41
|
+
"cmds",
|
|
42
|
+
"map",
|
|
43
|
+
"item",
|
|
44
|
+
"filter",
|
|
45
|
+
"Boolean",
|
|
40
46
|
"reducer",
|
|
41
47
|
"markdown",
|
|
42
48
|
"scrollTop",
|
|
@@ -51,8 +57,6 @@
|
|
|
51
57
|
"stateInit",
|
|
52
58
|
"undefined",
|
|
53
59
|
"cls",
|
|
54
|
-
"filter",
|
|
55
|
-
"Boolean",
|
|
56
60
|
"join",
|
|
57
61
|
"trim",
|
|
58
62
|
"textareaDomRef",
|
|
@@ -73,6 +77,7 @@
|
|
|
73
77
|
"style",
|
|
74
78
|
"Number",
|
|
75
79
|
"test",
|
|
80
|
+
"evn",
|
|
76
81
|
"newHeight",
|
|
77
82
|
"mdEditor",
|
|
78
83
|
"React",
|
|
@@ -80,8 +85,8 @@
|
|
|
80
85
|
"Markdown",
|
|
81
86
|
"MarkdownPreview"
|
|
82
87
|
],
|
|
83
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;
|
|
88
|
+
"mappings": "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",
|
|
84
89
|
"sourcesContent": [
|
|
85
|
-
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n prefixCls?: string;\n className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n /**\n * The Markdown value.\n */\n value?: string;\n /**\n * Event handler for the `onChange` event.\n */\n onChange?: (value?: string) => void;\n /**\n * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n * it will be set to true when either the source `textarea` is focused,\n * or it has an `autofocus` attribute and no other element is focused.\n */\n autoFocus?: ITextAreaProps['autoFocus'];\n /**\n * The height of the editor.\n */\n height?: number;\n /**\n * Custom toolbar heigth\n * @default 29px\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visiableDragbar?: boolean;\n /**\n * Show markdown preview.\n */\n preview?: PreviewType;\n /**\n * Full screen display editor.\n */\n fullscreen?: boolean;\n /**\n * Maximum drag height. `visiableDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visiableDragbar=true`\n */\n minHeight?: number;\n /**\n * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n */\n previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n /**\n * Set the `textarea` related props.\n */\n textareaProps?: ITextAreaProps;\n /** Use div to replace TextArea or re-render TextArea */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n * @default true\n */\n highlightEnable?: boolean;\n /**\n * The number of characters to insert when pressing tab key.\n * Default `2` spaces.\n */\n tabSize?: number;\n /**\n * You can create your own commands or reuse existing commands.\n */\n commands?: ICommand[];\n /**\n * You can create your own commands or reuse existing commands.\n */\n extraCommands?: ICommand[];\n /**\n * Hide the tool bar\n */\n hideToolbar?: boolean;\n /** Whether to enable scrolling */\n enableScroll?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n Object.keys(data).forEach((keyname) => {\n data[keyname] = false;\n });\n return data;\n}\n\nconst InternalMDEditor = (\n props: MDEditorProps,\n ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n const {\n prefixCls = 'w-md-editor',\n className,\n value: propsValue,\n commands = getCommands(),\n extraCommands = getExtraCommands(),\n height = 200,\n toolbarHeight = 29,\n enableScroll = true,\n visiableDragbar = true,\n highlightEnable = true,\n preview: previewType = 'live',\n fullscreen = false,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands,\n extraCommands,\n fullscreen,\n onChange,\n barPopup: {},\n });\n const container = useRef<HTMLDivElement>(null);\n const previewRef = useRef<MarkdownPreviewRef>(null);\n const enableScrollRef = useRef(enableScroll);\n\n useImperativeHandle(ref, () => ({ ...state }));\n useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n useEffect(() => {\n const stateInit: ContextStore = {};\n if (container.current) {\n stateInit.container = container.current || undefined;\n }\n stateInit.markdown = propsValue || '';\n stateInit.barPopup = {};\n if (dispatch) {\n dispatch({ ...state, ...stateInit });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const cls = [\n className,\n prefixCls,\n state.preview ? `${prefixCls}-show-${state.preview}` : null,\n state.fullscreen ? `${prefixCls}-fullscreen` : null,\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n\n useMemo(\n () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n [propsValue, state.markdown],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n useMemo(\n () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [highlightEnable],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n useMemo(\n () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [fullscreen],\n );\n\n const textareaDomRef = useRef<HTMLDivElement>();\n const active = useRef<'text' | 'preview'>('preview');\n const initScroll = useRef(false);\n\n useMemo(() => {\n textareaDomRef.current = state.textareaWarp;\n if (state.textareaWarp) {\n state.textareaWarp.addEventListener('mouseover', () => {\n active.current = 'text';\n });\n state.textareaWarp.addEventListener('mouseleave', () => {\n active.current = 'preview';\n });\n }\n }, [state.textareaWarp]);\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n if (!enableScrollRef.current) return;\n const textareaDom = textareaDomRef.current;\n const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n if (!initScroll.current) {\n active.current = type;\n initScroll.current = true;\n }\n if (textareaDom && previewDom) {\n const scale =\n (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n if (e.target === textareaDom && active.current === 'text') {\n previewDom.scrollTop = textareaDom.scrollTop / scale;\n }\n if (e.target === previewDom && active.current === 'preview') {\n textareaDom.scrollTop = previewDom.scrollTop * scale;\n }\n let scrollTop = 0;\n if (active.current === 'text') {\n scrollTop = textareaDom.scrollTop || 0;\n } else if (active.current === 'preview') {\n scrollTop = previewDom.scrollTop || 0;\n }\n dispatch({ scrollTop });\n }\n };\n\n return (\n <EditorContext.Provider value={{ ...state, dispatch }}>\n <div\n ref={container}\n className={cls}\n {...other}\n onClick={() => {\n dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n }}\n style={{\n ...other.style,\n height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n }}\n >\n {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} />}\n <div\n className={`${prefixCls}-content`}\n style={{\n height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n }}\n >\n {/(edit|live)/.test(state.preview || '') && (\n <TextArea\n className={`${prefixCls}-input`}\n prefixCls={prefixCls}\n autoFocus={autoFocus}\n {...textareaProps}\n renderTextarea={renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && (\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n ref={previewRef}\n source={state.markdown || ''}\n className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n />\n )}\n </div>\n {visiableDragbar && !state.fullscreen && (\n <DragBar\n prefixCls={prefixCls}\n height={state.height as number}\n maxHeight={maxHeight!}\n minHeight={minHeight!}\n onChange={(newHeight) => {\n dispatch({ height: newHeight });\n }}\n />\n )}\n </div>\n </EditorContext.Provider>\n );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
|
|
90
|
+
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n prefixCls?: string;\n className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n /**\n * The Markdown value.\n */\n value?: string;\n /**\n * Event handler for the `onChange` event.\n */\n onChange?: (value?: string) => void;\n /**\n * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n * it will be set to true when either the source `textarea` is focused,\n * or it has an `autofocus` attribute and no other element is focused.\n */\n autoFocus?: ITextAreaProps['autoFocus'];\n /**\n * The height of the editor.\n */\n height?: number;\n /**\n * Custom toolbar heigth\n * @default 29px\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visiableDragbar?: boolean;\n /**\n * Show markdown preview.\n */\n preview?: PreviewType;\n /**\n * Full screen display editor.\n */\n fullscreen?: boolean;\n /**\n * Maximum drag height. `visiableDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visiableDragbar=true`\n */\n minHeight?: number;\n /**\n * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n */\n previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n /**\n * Set the `textarea` related props.\n */\n textareaProps?: ITextAreaProps;\n /** Use div to replace TextArea or re-render TextArea */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n * @default true\n */\n highlightEnable?: boolean;\n /**\n * The number of characters to insert when pressing tab key.\n * Default `2` spaces.\n */\n tabSize?: number;\n /**\n * You can create your own commands or reuse existing commands.\n */\n commands?: ICommand[];\n /**\n * Filter or modify your commands.\n * https://github.com/uiwjs/react-md-editor/issues/296\n */\n commandsFilter?: (command: ICommand) => false | ICommand;\n /**\n * You can create your own commands or reuse existing commands.\n */\n extraCommands?: ICommand[];\n /**\n * Hide the tool bar\n */\n hideToolbar?: boolean;\n /** Whether to enable scrolling */\n enableScroll?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n Object.keys(data).forEach((keyname) => {\n data[keyname] = false;\n });\n return data;\n}\n\nconst InternalMDEditor = (\n props: MDEditorProps,\n ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n const {\n prefixCls = 'w-md-editor',\n className,\n value: propsValue,\n commands = getCommands(),\n commandsFilter,\n extraCommands = getExtraCommands(),\n height = 200,\n toolbarHeight = 29,\n enableScroll = true,\n visiableDragbar = true,\n highlightEnable = true,\n preview: previewType = 'live',\n fullscreen = false,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n\n const cmds = commands.map((item) => (commandsFilter ? commandsFilter(item) : item)).filter(Boolean) as ICommand[];\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands: cmds,\n extraCommands,\n fullscreen,\n barPopup: {},\n });\n const container = useRef<HTMLDivElement>(null);\n const previewRef = useRef<MarkdownPreviewRef>(null);\n const enableScrollRef = useRef(enableScroll);\n\n useImperativeHandle(ref, () => ({ ...state }));\n useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n useEffect(() => {\n const stateInit: ContextStore = {};\n if (container.current) {\n stateInit.container = container.current || undefined;\n }\n stateInit.markdown = propsValue || '';\n stateInit.barPopup = {};\n if (dispatch) {\n dispatch({ ...state, ...stateInit });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const cls = [\n className,\n prefixCls,\n state.preview ? `${prefixCls}-show-${state.preview}` : null,\n state.fullscreen ? `${prefixCls}-fullscreen` : null,\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n\n useMemo(\n () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n [propsValue, state.markdown],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n useMemo(\n () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [highlightEnable],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n useMemo(\n () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [fullscreen],\n );\n\n const textareaDomRef = useRef<HTMLDivElement>();\n const active = useRef<'text' | 'preview'>('preview');\n const initScroll = useRef(false);\n\n useMemo(() => {\n textareaDomRef.current = state.textareaWarp;\n if (state.textareaWarp) {\n state.textareaWarp.addEventListener('mouseover', () => {\n active.current = 'text';\n });\n state.textareaWarp.addEventListener('mouseleave', () => {\n active.current = 'preview';\n });\n }\n }, [state.textareaWarp]);\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n if (!enableScrollRef.current) return;\n const textareaDom = textareaDomRef.current;\n const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n if (!initScroll.current) {\n active.current = type;\n initScroll.current = true;\n }\n if (textareaDom && previewDom) {\n const scale =\n (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n if (e.target === textareaDom && active.current === 'text') {\n previewDom.scrollTop = textareaDom.scrollTop / scale;\n }\n if (e.target === previewDom && active.current === 'preview') {\n textareaDom.scrollTop = previewDom.scrollTop * scale;\n }\n let scrollTop = 0;\n if (active.current === 'text') {\n scrollTop = textareaDom.scrollTop || 0;\n } else if (active.current === 'preview') {\n scrollTop = previewDom.scrollTop || 0;\n }\n dispatch({ scrollTop });\n }\n };\n\n return (\n <EditorContext.Provider value={{ ...state, dispatch }}>\n <div\n ref={container}\n className={cls}\n {...other}\n onClick={() => {\n dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n }}\n style={{\n ...other.style,\n height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n }}\n >\n {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} />}\n <div\n className={`${prefixCls}-content`}\n style={{\n height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n }}\n >\n {/(edit|live)/.test(state.preview || '') && (\n <TextArea\n className={`${prefixCls}-input`}\n prefixCls={prefixCls}\n autoFocus={autoFocus}\n {...textareaProps}\n onChange={(evn) => {\n onChange && onChange(evn.target.value);\n if (textareaProps && textareaProps.onChange) {\n textareaProps.onChange(evn);\n }\n }}\n renderTextarea={renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && (\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n ref={previewRef}\n source={state.markdown || ''}\n className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n />\n )}\n </div>\n {visiableDragbar && !state.fullscreen && (\n <DragBar\n prefixCls={prefixCls}\n height={state.height as number}\n maxHeight={maxHeight!}\n minHeight={minHeight!}\n onChange={(newHeight) => {\n dispatch({ height: newHeight });\n }}\n />\n )}\n </div>\n </EditorContext.Provider>\n );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
|
|
86
91
|
]
|
|
87
92
|
}
|
|
@@ -27,10 +27,11 @@ var _shortcuts = _interopRequireDefault(require("./shortcuts"));
|
|
|
27
27
|
|
|
28
28
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
29
|
|
|
30
|
-
var _excluded = ["prefixCls"];
|
|
30
|
+
var _excluded = ["prefixCls", "onChange"];
|
|
31
31
|
|
|
32
32
|
function Textarea(props) {
|
|
33
33
|
var prefixCls = props.prefixCls,
|
|
34
|
+
_onChange = props.onChange,
|
|
34
35
|
other = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
35
36
|
|
|
36
37
|
var _useContext = (0, _react.useContext)(_Context.EditorContext),
|
|
@@ -41,7 +42,6 @@ function Textarea(props) {
|
|
|
41
42
|
highlightEnable = _useContext.highlightEnable,
|
|
42
43
|
extraCommands = _useContext.extraCommands,
|
|
43
44
|
tabSize = _useContext.tabSize,
|
|
44
|
-
_onChange = _useContext.onChange,
|
|
45
45
|
dispatch = _useContext.dispatch;
|
|
46
46
|
|
|
47
47
|
var textRef = _react.default.useRef(null);
|
|
@@ -102,7 +102,7 @@ function Textarea(props) {
|
|
|
102
102
|
dispatch && dispatch({
|
|
103
103
|
markdown: e.target.value
|
|
104
104
|
});
|
|
105
|
-
_onChange && _onChange(e
|
|
105
|
+
_onChange && _onChange(e);
|
|
106
106
|
}
|
|
107
107
|
}));
|
|
108
108
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
"Textarea",
|
|
8
8
|
"props",
|
|
9
9
|
"prefixCls",
|
|
10
|
+
"onChange",
|
|
10
11
|
"other",
|
|
11
12
|
"EditorContext",
|
|
12
13
|
"markdown",
|
|
@@ -16,7 +17,6 @@
|
|
|
16
17
|
"highlightEnable",
|
|
17
18
|
"extraCommands",
|
|
18
19
|
"tabSize",
|
|
19
|
-
"onChange",
|
|
20
20
|
"dispatch",
|
|
21
21
|
"textRef",
|
|
22
22
|
"React",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"target",
|
|
36
36
|
"value"
|
|
37
37
|
],
|
|
38
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAQC,SAAR,
|
|
38
|
+
"mappings": "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",
|
|
39
39
|
"sourcesContent": [
|
|
40
|
-
"import React, { useContext, useEffect } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, ExecuteCommandState } from '../../Context';\nimport { TextAreaCommandOrchestrator } from '../../commands';\nimport handleKeyDown from './handleKeyDown';\nimport shortcuts from './shortcuts';\nimport './index.less';\n\nexport interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {}\n\nexport default function Textarea(props: TextAreaProps) {\n const { prefixCls, ...other } = props;\n const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize,
|
|
40
|
+
"import React, { useContext, useEffect } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, ExecuteCommandState } from '../../Context';\nimport { TextAreaCommandOrchestrator } from '../../commands';\nimport handleKeyDown from './handleKeyDown';\nimport shortcuts from './shortcuts';\nimport './index.less';\n\nexport interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {}\n\nexport default function Textarea(props: TextAreaProps) {\n const { prefixCls, onChange, ...other } = props;\n const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize, dispatch } =\n useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const statesRef = React.useRef<ExecuteCommandState>({ fullscreen, preview });\n\n useEffect(() => {\n statesRef.current = { fullscreen, preview, highlightEnable };\n }, [fullscreen, preview, highlightEnable]);\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 onKeyDown = (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) => {\n handleKeyDown(e, tabSize);\n shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);\n };\n useEffect(() => {\n if (textRef.current) {\n textRef.current.addEventListener('keydown', onKeyDown);\n }\n return () => {\n if (textRef.current) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n textRef.current.removeEventListener('keydown', onKeyDown);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <textarea\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck={false}\n {...other}\n ref={textRef}\n className={`${prefixCls}-text-input ${other.className ? other.className : ''}`}\n value={markdown}\n onChange={(e) => {\n dispatch && dispatch({ markdown: e.target.value });\n onChange && onChange(e);\n }}\n />\n );\n}\n"
|
|
41
41
|
]
|
|
42
42
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ContextStore, ExecuteCommandState } from '../../Context';
|
|
3
|
-
import {
|
|
3
|
+
import { TextAreaProps } from './Textarea';
|
|
4
|
+
import { IProps } from '../../Editor';
|
|
4
5
|
import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
|
|
5
6
|
import './index.less';
|
|
6
7
|
declare type RenderTextareaHandle = {
|
|
7
8
|
dispatch: ContextStore['dispatch'];
|
|
8
|
-
onChange?:
|
|
9
|
+
onChange?: TextAreaProps['onChange'];
|
|
9
10
|
useContext?: {
|
|
10
11
|
commands: ContextStore['commands'];
|
|
11
12
|
extraCommands: ContextStore['extraCommands'];
|
|
@@ -13,7 +14,7 @@ declare type RenderTextareaHandle = {
|
|
|
13
14
|
};
|
|
14
15
|
shortcuts?: (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, commands: ICommand[], commandOrchestrator?: TextAreaCommandOrchestrator, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState) => void;
|
|
15
16
|
};
|
|
16
|
-
export interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | '
|
|
17
|
+
export interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>, IProps {
|
|
17
18
|
value?: string;
|
|
18
19
|
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
19
20
|
renderTextarea?: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>, opts: RenderTextareaHandle) => JSX.Element;
|
|
@@ -42,7 +42,6 @@ function TextArea(props) {
|
|
|
42
42
|
scrollTop = _useContext.scrollTop,
|
|
43
43
|
commands = _useContext.commands,
|
|
44
44
|
extraCommands = _useContext.extraCommands,
|
|
45
|
-
onChange = _useContext.onChange,
|
|
46
45
|
dispatch = _useContext.dispatch;
|
|
47
46
|
|
|
48
47
|
var textRef = _react.default.useRef(null);
|
|
@@ -95,7 +94,7 @@ function TextArea(props) {
|
|
|
95
94
|
}
|
|
96
95
|
}), {
|
|
97
96
|
dispatch: dispatch,
|
|
98
|
-
onChange: onChange,
|
|
97
|
+
onChange: otherProps.onChange,
|
|
99
98
|
shortcuts: _shortcuts.default,
|
|
100
99
|
useContext: {
|
|
101
100
|
commands: commands,
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
"scrollTop",
|
|
17
17
|
"commands",
|
|
18
18
|
"extraCommands",
|
|
19
|
-
"onChange",
|
|
20
19
|
"dispatch",
|
|
21
20
|
"textRef",
|
|
22
21
|
"React",
|
|
@@ -40,12 +39,13 @@
|
|
|
40
39
|
"style",
|
|
41
40
|
"WebkitTextFillColor",
|
|
42
41
|
"overflow",
|
|
42
|
+
"onChange",
|
|
43
43
|
"shortcuts",
|
|
44
44
|
"useContext",
|
|
45
45
|
"ref"
|
|
46
46
|
],
|
|
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,
|
|
47
|
+
"mappings": "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",
|
|
48
48
|
"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 from './Textarea';\nimport {
|
|
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} />\n <Textarea prefixCls={prefixCls} {...otherProps} />\n </Fragment>\n )}\n </div>\n </div>\n );\n}\n"
|
|
50
50
|
]
|
|
51
51
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.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>",
|
package/src/Context.tsx
CHANGED
|
@@ -12,7 +12,6 @@ export type ContextStore = {
|
|
|
12
12
|
fullscreen?: boolean;
|
|
13
13
|
highlightEnable?: boolean;
|
|
14
14
|
autoFocus?: boolean;
|
|
15
|
-
onChange?: (value?: string) => void;
|
|
16
15
|
textarea?: HTMLTextAreaElement;
|
|
17
16
|
commandOrchestrator?: TextAreaCommandOrchestrator;
|
|
18
17
|
textareaWarp?: HTMLDivElement;
|
package/src/Editor.tsx
CHANGED
|
@@ -80,6 +80,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
80
80
|
* You can create your own commands or reuse existing commands.
|
|
81
81
|
*/
|
|
82
82
|
commands?: ICommand[];
|
|
83
|
+
/**
|
|
84
|
+
* Filter or modify your commands.
|
|
85
|
+
* https://github.com/uiwjs/react-md-editor/issues/296
|
|
86
|
+
*/
|
|
87
|
+
commandsFilter?: (command: ICommand) => false | ICommand;
|
|
83
88
|
/**
|
|
84
89
|
* You can create your own commands or reuse existing commands.
|
|
85
90
|
*/
|
|
@@ -108,6 +113,7 @@ const InternalMDEditor = (
|
|
|
108
113
|
className,
|
|
109
114
|
value: propsValue,
|
|
110
115
|
commands = getCommands(),
|
|
116
|
+
commandsFilter,
|
|
111
117
|
extraCommands = getExtraCommands(),
|
|
112
118
|
height = 200,
|
|
113
119
|
toolbarHeight = 29,
|
|
@@ -127,6 +133,8 @@ const InternalMDEditor = (
|
|
|
127
133
|
renderTextarea,
|
|
128
134
|
...other
|
|
129
135
|
} = props || {};
|
|
136
|
+
|
|
137
|
+
const cmds = commands.map((item) => (commandsFilter ? commandsFilter(item) : item)).filter(Boolean) as ICommand[];
|
|
130
138
|
let [state, dispatch] = useReducer(reducer, {
|
|
131
139
|
markdown: propsValue,
|
|
132
140
|
preview: previewType,
|
|
@@ -135,10 +143,9 @@ const InternalMDEditor = (
|
|
|
135
143
|
tabSize,
|
|
136
144
|
scrollTop: 0,
|
|
137
145
|
scrollTopPreview: 0,
|
|
138
|
-
commands,
|
|
146
|
+
commands: cmds,
|
|
139
147
|
extraCommands,
|
|
140
148
|
fullscreen,
|
|
141
|
-
onChange,
|
|
142
149
|
barPopup: {},
|
|
143
150
|
});
|
|
144
151
|
const container = useRef<HTMLDivElement>(null);
|
|
@@ -263,6 +270,12 @@ const InternalMDEditor = (
|
|
|
263
270
|
prefixCls={prefixCls}
|
|
264
271
|
autoFocus={autoFocus}
|
|
265
272
|
{...textareaProps}
|
|
273
|
+
onChange={(evn) => {
|
|
274
|
+
onChange && onChange(evn.target.value);
|
|
275
|
+
if (textareaProps && textareaProps.onChange) {
|
|
276
|
+
textareaProps.onChange(evn);
|
|
277
|
+
}
|
|
278
|
+
}}
|
|
266
279
|
renderTextarea={renderTextarea}
|
|
267
280
|
onScroll={(e) => handleScroll(e, 'text')}
|
|
268
281
|
/>
|
|
@@ -9,8 +9,8 @@ import './index.less';
|
|
|
9
9
|
export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {}
|
|
10
10
|
|
|
11
11
|
export default function Textarea(props: TextAreaProps) {
|
|
12
|
-
const { prefixCls, ...other } = props;
|
|
13
|
-
const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize,
|
|
12
|
+
const { prefixCls, onChange, ...other } = props;
|
|
13
|
+
const { markdown, commands, fullscreen, preview, highlightEnable, extraCommands, tabSize, dispatch } =
|
|
14
14
|
useContext(EditorContext);
|
|
15
15
|
const textRef = React.useRef<HTMLTextAreaElement>(null);
|
|
16
16
|
const executeRef = React.useRef<TextAreaCommandOrchestrator>();
|
|
@@ -58,7 +58,7 @@ export default function Textarea(props: TextAreaProps) {
|
|
|
58
58
|
value={markdown}
|
|
59
59
|
onChange={(e) => {
|
|
60
60
|
dispatch && dispatch({ markdown: e.target.value });
|
|
61
|
-
onChange && onChange(e
|
|
61
|
+
onChange && onChange(e);
|
|
62
62
|
}}
|
|
63
63
|
/>
|
|
64
64
|
);
|
|
@@ -2,14 +2,14 @@ import React, { useEffect, Fragment, useContext } from 'react';
|
|
|
2
2
|
import { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';
|
|
3
3
|
import shortcuts from './shortcuts';
|
|
4
4
|
import Markdown from './Markdown';
|
|
5
|
-
import Textarea from './Textarea';
|
|
6
|
-
import {
|
|
5
|
+
import Textarea, { TextAreaProps } from './Textarea';
|
|
6
|
+
import { IProps } from '../../Editor';
|
|
7
7
|
import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
|
|
8
8
|
import './index.less';
|
|
9
9
|
|
|
10
10
|
type RenderTextareaHandle = {
|
|
11
11
|
dispatch: ContextStore['dispatch'];
|
|
12
|
-
onChange?:
|
|
12
|
+
onChange?: TextAreaProps['onChange'];
|
|
13
13
|
useContext?: {
|
|
14
14
|
commands: ContextStore['commands'];
|
|
15
15
|
extraCommands: ContextStore['extraCommands'];
|
|
@@ -25,7 +25,7 @@ type RenderTextareaHandle = {
|
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
export interface ITextAreaProps
|
|
28
|
-
extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | '
|
|
28
|
+
extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
|
|
29
29
|
IProps {
|
|
30
30
|
value?: string;
|
|
31
31
|
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
@@ -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,
|
|
45
|
+
const { markdown, scrollTop, commands, 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>();
|
|
@@ -88,7 +88,7 @@ export default function TextArea(props: ITextAreaProps) {
|
|
|
88
88
|
},
|
|
89
89
|
{
|
|
90
90
|
dispatch,
|
|
91
|
-
onChange,
|
|
91
|
+
onChange: otherProps.onChange,
|
|
92
92
|
shortcuts,
|
|
93
93
|
useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },
|
|
94
94
|
},
|