@uiw/react-md-editor 3.8.5 → 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 +31 -1
- package/esm/Context.d.ts +2 -0
- package/esm/Context.js.map +2 -2
- package/esm/Editor.d.ts +4 -0
- package/esm/Editor.js +3 -1
- package/esm/Editor.js.map +3 -2
- package/esm/components/TextArea/Textarea.js +2 -1
- package/esm/components/TextArea/Textarea.js.map +3 -2
- package/esm/components/TextArea/handleKeyDown.d.ts +1 -1
- package/esm/components/TextArea/handleKeyDown.js +12 -2
- package/esm/components/TextArea/handleKeyDown.js.map +3 -2
- package/esm/components/TextArea/index.css +1 -2
- package/esm/components/Toolbar/index.js +15 -3
- package/esm/components/Toolbar/index.js.map +7 -2
- package/esm/index.css +1 -1
- package/esm/index.less +1 -1
- package/lib/Context.d.ts +2 -0
- package/lib/Context.js.map +2 -2
- package/lib/Editor.d.ts +4 -0
- package/lib/Editor.js +4 -1
- package/lib/Editor.js.map +3 -2
- package/lib/components/TextArea/Textarea.js +2 -1
- package/lib/components/TextArea/Textarea.js.map +3 -2
- package/lib/components/TextArea/handleKeyDown.d.ts +1 -1
- package/lib/components/TextArea/handleKeyDown.js +8 -1
- package/lib/components/TextArea/handleKeyDown.js.map +3 -2
- package/lib/components/Toolbar/index.js +15 -2
- package/lib/components/Toolbar/index.js.map +6 -2
- package/lib/index.less +1 -1
- package/markdown-editor.css +2 -3
- package/package.json +12 -12
- package/src/Context.tsx +1 -0
- package/src/Editor.tsx +6 -1
- package/src/components/TextArea/Textarea.tsx +12 -3
- package/src/components/TextArea/handleKeyDown.tsx +11 -1
- package/src/components/Toolbar/index.tsx +15 -3
- package/src/index.less +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor/file/README.md">
|
|
3
|
-
<img alt="react-md-editor logo" src="https://
|
|
3
|
+
<img alt="react-md-editor logo" src="https://user-images.githubusercontent.com/1680273/146292033-0e5e57fc-6f3e-4032-9fa6-0de05f239e36.png">
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
@@ -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)
|
|
@@ -413,6 +442,7 @@ export default HomePage;
|
|
|
413
442
|
- `maxHeight?: number=1200`: Maximum drag height. The `visiableDragbar=true` value is valid.
|
|
414
443
|
- `minHeights?: number=100`: Minimum drag height. The `visiableDragbar=true` value is valid.
|
|
415
444
|
- `tabSize?: number=2`: The number of characters to insert when pressing tab key. Default `2` spaces.
|
|
445
|
+
- `defaultTabEnable?: boolean=false`: If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
|
|
416
446
|
- `hideToolbar?: boolean=false`: Option to hide the tool bar.
|
|
417
447
|
- `enableScroll?: boolean=true`: Whether to enable scrolling.
|
|
418
448
|
|
package/esm/Context.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export declare type ContextStore = {
|
|
|
20
20
|
scrollTop?: number;
|
|
21
21
|
scrollTopPreview?: number;
|
|
22
22
|
tabSize?: number;
|
|
23
|
+
defaultTabEnable?: boolean;
|
|
23
24
|
};
|
|
24
25
|
export declare type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;
|
|
25
26
|
export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
@@ -41,5 +42,6 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
|
41
42
|
scrollTop?: number | undefined;
|
|
42
43
|
scrollTopPreview?: number | undefined;
|
|
43
44
|
tabSize?: number | undefined;
|
|
45
|
+
defaultTabEnable?: boolean | undefined;
|
|
44
46
|
};
|
|
45
47
|
export declare const EditorContext: React.Context<ContextStore>;
|
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;AA6BA,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 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"
|
|
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 defaultTabEnable?: boolean;\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
|
@@ -72,6 +72,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
72
72
|
* Default `2` spaces.
|
|
73
73
|
*/
|
|
74
74
|
tabSize?: number;
|
|
75
|
+
/**
|
|
76
|
+
* If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
|
|
77
|
+
*/
|
|
78
|
+
defaultTabEnable?: boolean;
|
|
75
79
|
/**
|
|
76
80
|
* You can create your own commands or reuse existing commands.
|
|
77
81
|
*/
|
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", "commandsFilter", "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", "defaultTabEnable", "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';
|
|
@@ -45,6 +45,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
45
45
|
minHeight = 100,
|
|
46
46
|
autoFocus,
|
|
47
47
|
tabSize = 2,
|
|
48
|
+
defaultTabEnable = false,
|
|
48
49
|
onChange: _onChange,
|
|
49
50
|
hideToolbar,
|
|
50
51
|
renderTextarea
|
|
@@ -59,6 +60,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
59
60
|
height,
|
|
60
61
|
highlightEnable,
|
|
61
62
|
tabSize,
|
|
63
|
+
defaultTabEnable,
|
|
62
64
|
scrollTop: 0,
|
|
63
65
|
scrollTopPreview: 0,
|
|
64
66
|
commands: cmds,
|
package/esm/Editor.js.map
CHANGED
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"minHeight",
|
|
49
49
|
"autoFocus",
|
|
50
50
|
"tabSize",
|
|
51
|
+
"defaultTabEnable",
|
|
51
52
|
"onChange",
|
|
52
53
|
"hideToolbar",
|
|
53
54
|
"renderTextarea",
|
|
@@ -97,8 +98,8 @@
|
|
|
97
98
|
"forwardRef",
|
|
98
99
|
"Markdown"
|
|
99
100
|
],
|
|
100
|
-
"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;;;;
|
|
101
|
+
"mappings": "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",
|
|
101
102
|
"sourcesContent": [
|
|
102
|
-
"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, isExtra: boolean) => 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\n .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n .filter(Boolean) as ICommand[];\n const extraCmds = extraCommands\n .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n .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: extraCmds,\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"
|
|
103
|
+
"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 * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n */\n defaultTabEnable?: boolean;\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, isExtra: boolean) => 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 defaultTabEnable = false,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n const cmds = commands\n .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n .filter(Boolean) as ICommand[];\n const extraCmds = extraCommands\n .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n .filter(Boolean) as ICommand[];\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n defaultTabEnable,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands: cmds,\n extraCommands: extraCmds,\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"
|
|
103
104
|
]
|
|
104
105
|
}
|
|
@@ -23,6 +23,7 @@ export default function Textarea(props) {
|
|
|
23
23
|
highlightEnable,
|
|
24
24
|
extraCommands,
|
|
25
25
|
tabSize,
|
|
26
|
+
defaultTabEnable,
|
|
26
27
|
dispatch
|
|
27
28
|
} = useContext(EditorContext);
|
|
28
29
|
var textRef = React.useRef(null);
|
|
@@ -51,7 +52,7 @@ export default function Textarea(props) {
|
|
|
51
52
|
}, []);
|
|
52
53
|
|
|
53
54
|
var onKeyDown = e => {
|
|
54
|
-
handleKeyDown(e, tabSize);
|
|
55
|
+
handleKeyDown(e, tabSize, defaultTabEnable);
|
|
55
56
|
shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);
|
|
56
57
|
};
|
|
57
58
|
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"highlightEnable",
|
|
24
24
|
"extraCommands",
|
|
25
25
|
"tabSize",
|
|
26
|
+
"defaultTabEnable",
|
|
26
27
|
"dispatch",
|
|
27
28
|
"textRef",
|
|
28
29
|
"useRef",
|
|
@@ -39,8 +40,8 @@
|
|
|
39
40
|
"target",
|
|
40
41
|
"value"
|
|
41
42
|
],
|
|
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,SAAF;AAAaC,IAAAA,QAAQ,EAARA;AAAb,MAAoCF,KAA1C;AAAA,MAAgCG,KAAhC,iCAA0CH,KAA1C;;AACA,MAAM;
|
|
43
|
+
"mappings": "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",
|
|
43
44
|
"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, onChange, ...other } = props;\n const {
|
|
45
|
+
"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 {\n markdown,\n commands,\n fullscreen,\n preview,\n highlightEnable,\n extraCommands,\n tabSize,\n defaultTabEnable,\n 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, defaultTabEnable);\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
46
|
]
|
|
46
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function handleKeyDown(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, tabSize?: number): void;
|
|
1
|
+
export default function handleKeyDown(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, tabSize?: number, defaultTabEnable?: boolean): void;
|
|
@@ -11,11 +11,15 @@ function stopPropagation(e) {
|
|
|
11
11
|
e.preventDefault();
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
export default function handleKeyDown(e, tabSize) {
|
|
14
|
+
export default function handleKeyDown(e, tabSize, defaultTabEnable) {
|
|
15
15
|
if (tabSize === void 0) {
|
|
16
16
|
tabSize = 2;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
if (defaultTabEnable === void 0) {
|
|
20
|
+
defaultTabEnable = false;
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
var target = e.target;
|
|
20
24
|
var starVal = target.value.substr(0, target.selectionStart);
|
|
21
25
|
var valArr = starVal.split('\n');
|
|
@@ -25,7 +29,7 @@ export default function handleKeyDown(e, tabSize) {
|
|
|
25
29
|
* `9` - `Tab`
|
|
26
30
|
*/
|
|
27
31
|
|
|
28
|
-
if (e.code && e.code.toLowerCase() === 'tab') {
|
|
32
|
+
if (!defaultTabEnable && e.code && e.code.toLowerCase() === 'tab') {
|
|
29
33
|
stopPropagation(e);
|
|
30
34
|
var space = new Array(tabSize + 1).join(' ');
|
|
31
35
|
|
|
@@ -77,6 +81,12 @@ export default function handleKeyDown(e, tabSize) {
|
|
|
77
81
|
startStr = '\n* ';
|
|
78
82
|
}
|
|
79
83
|
|
|
84
|
+
if (currentLineStr.startsWith('- [ ]')) {
|
|
85
|
+
startStr = '\n- [ ] ';
|
|
86
|
+
} else if (currentLineStr.startsWith('- [X]')) {
|
|
87
|
+
startStr = '\n- [X] ';
|
|
88
|
+
}
|
|
89
|
+
|
|
80
90
|
if (/^\d+.\s/.test(currentLineStr)) {
|
|
81
91
|
startStr = "\n" + (parseInt(currentLineStr) + 1) + ". ";
|
|
82
92
|
}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"preventDefault",
|
|
13
13
|
"handleKeyDown",
|
|
14
14
|
"tabSize",
|
|
15
|
+
"defaultTabEnable",
|
|
15
16
|
"target",
|
|
16
17
|
"starVal",
|
|
17
18
|
"value",
|
|
@@ -57,8 +58,8 @@
|
|
|
57
58
|
"startsWith",
|
|
58
59
|
"parseInt"
|
|
59
60
|
],
|
|
60
|
-
"mappings": "AAAA,SAASA,oBAAT,QAAqC,kCAArC;AACA,SAASC,eAAT,QAAgC,gBAAhC;AACA,SAASC,oBAAT,QAAqC,qBAArC;AAEA;AACA;AACA;AACA;;AACA,SAASC,eAAT,CAAyBC,CAAzB,EAAsF;AACpFA,EAAAA,CAAC,CAACD,eAAF;AACAC,EAAAA,CAAC,CAACC,cAAF;AACD;;AAED,eAAe,SAASC,aAAT,CACbF,CADa,EAEbG,OAFa,
|
|
61
|
+
"mappings": "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",
|
|
61
62
|
"sourcesContent": [
|
|
62
|
-
"import { insertTextAtPosition } from '../../utils/InsertTextAtPosition';\nimport { TextAreaTextApi } from '../../commands';\nimport { insertBeforeEachLine } from '../../commands/list';\n\n/**\n * - `13` - `Enter`\n * - `9` - `Tab`\n */\nfunction stopPropagation(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) {\n e.stopPropagation();\n e.preventDefault();\n}\n\nexport default function handleKeyDown(\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n tabSize: number = 2,\n) {\n const target = e.target as HTMLTextAreaElement;\n const starVal = target.value.substr(0, target.selectionStart);\n const valArr = starVal.split('\\n');\n const currentLineStr = valArr[valArr.length - 1];\n const textArea = new TextAreaTextApi(target);\n /**\n * `9` - `Tab`\n */\n if (e.code && e.code.toLowerCase() === 'tab') {\n stopPropagation(e);\n const space = new Array(tabSize + 1).join(' ');\n if (target.selectionStart !== target.selectionEnd) {\n const _star = target.value.substring(0, target.selectionStart).split('\\n');\n const _end = target.value.substring(0, target.selectionEnd).split('\\n');\n const modifiedTextLine: string[] = [];\n _end.forEach((item, idx) => {\n if (item !== _star[idx]) {\n modifiedTextLine.push(item);\n }\n });\n const modifiedText = modifiedTextLine.join('\\n');\n const oldSelectText = target.value.substring(target.selectionStart, target.selectionEnd);\n const newStarNum = target.value.substring(0, target.selectionStart).length;\n\n textArea.setSelectionRange({\n start: target.value.indexOf(modifiedText),\n end: target.selectionEnd,\n });\n\n const modifiedTextObj = insertBeforeEachLine(modifiedText, e.shiftKey ? '' : space);\n\n let text = modifiedTextObj.modifiedText;\n if (e.shiftKey) {\n text = text\n .split('\\n')\n .map((item) => item.replace(new RegExp(`^${space}`), ''))\n .join('\\n');\n }\n textArea.replaceSelection(text);\n\n let startTabSize = e.shiftKey ? -tabSize : tabSize;\n let endTabSize = e.shiftKey ? -modifiedTextLine.length * tabSize : modifiedTextLine.length * tabSize;\n\n textArea.setSelectionRange({\n start: newStarNum + startTabSize,\n end: newStarNum + oldSelectText.length + endTabSize,\n });\n } else {\n return insertTextAtPosition(target, space);\n }\n } else if (\n e.code &&\n e.code.toLowerCase() === 'enter' &&\n (/^(-|\\*)\\s/.test(currentLineStr) || /^\\d+.\\s/.test(currentLineStr))\n ) {\n /**\n * `13` - `Enter`\n */\n stopPropagation(e);\n let startStr = '\\n- ';\n if (currentLineStr.startsWith('*')) {\n startStr = '\\n* ';\n }\n if (/^\\d+.\\s/.test(currentLineStr)) {\n startStr = `\\n${parseInt(currentLineStr) + 1}. `;\n }\n return insertTextAtPosition(target, startStr);\n }\n}\n"
|
|
63
|
+
"import { insertTextAtPosition } from '../../utils/InsertTextAtPosition';\nimport { TextAreaTextApi } from '../../commands';\nimport { insertBeforeEachLine } from '../../commands/list';\n\n/**\n * - `13` - `Enter`\n * - `9` - `Tab`\n */\nfunction stopPropagation(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) {\n e.stopPropagation();\n e.preventDefault();\n}\n\nexport default function handleKeyDown(\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n tabSize: number = 2,\n defaultTabEnable: boolean = false,\n) {\n const target = e.target as HTMLTextAreaElement;\n const starVal = target.value.substr(0, target.selectionStart);\n const valArr = starVal.split('\\n');\n const currentLineStr = valArr[valArr.length - 1];\n const textArea = new TextAreaTextApi(target);\n\n /**\n * `9` - `Tab`\n */\n if (!defaultTabEnable && e.code && e.code.toLowerCase() === 'tab') {\n stopPropagation(e);\n const space = new Array(tabSize + 1).join(' ');\n if (target.selectionStart !== target.selectionEnd) {\n const _star = target.value.substring(0, target.selectionStart).split('\\n');\n const _end = target.value.substring(0, target.selectionEnd).split('\\n');\n const modifiedTextLine: string[] = [];\n _end.forEach((item, idx) => {\n if (item !== _star[idx]) {\n modifiedTextLine.push(item);\n }\n });\n const modifiedText = modifiedTextLine.join('\\n');\n const oldSelectText = target.value.substring(target.selectionStart, target.selectionEnd);\n const newStarNum = target.value.substring(0, target.selectionStart).length;\n\n textArea.setSelectionRange({\n start: target.value.indexOf(modifiedText),\n end: target.selectionEnd,\n });\n\n const modifiedTextObj = insertBeforeEachLine(modifiedText, e.shiftKey ? '' : space);\n\n let text = modifiedTextObj.modifiedText;\n if (e.shiftKey) {\n text = text\n .split('\\n')\n .map((item) => item.replace(new RegExp(`^${space}`), ''))\n .join('\\n');\n }\n textArea.replaceSelection(text);\n\n let startTabSize = e.shiftKey ? -tabSize : tabSize;\n let endTabSize = e.shiftKey ? -modifiedTextLine.length * tabSize : modifiedTextLine.length * tabSize;\n\n textArea.setSelectionRange({\n start: newStarNum + startTabSize,\n end: newStarNum + oldSelectText.length + endTabSize,\n });\n } else {\n return insertTextAtPosition(target, space);\n }\n } else if (\n e.code &&\n e.code.toLowerCase() === 'enter' &&\n (/^(-|\\*)\\s/.test(currentLineStr) || /^\\d+.\\s/.test(currentLineStr))\n ) {\n /**\n * `13` - `Enter`\n */\n stopPropagation(e);\n let startStr = '\\n- ';\n\n if (currentLineStr.startsWith('*')) {\n startStr = '\\n* ';\n }\n\n if (currentLineStr.startsWith('- [ ]')) {\n startStr = '\\n- [ ] ';\n } else if (currentLineStr.startsWith('- [X]')) {\n startStr = '\\n- [X] ';\n }\n\n if (/^\\d+.\\s/.test(currentLineStr)) {\n startStr = `\\n${parseInt(currentLineStr) + 1}. `;\n }\n return insertTextAtPosition(target, startStr);\n }\n}\n"
|
|
63
64
|
]
|
|
64
65
|
}
|
|
@@ -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
|
}
|
package/esm/index.css
CHANGED
package/esm/index.less
CHANGED
package/lib/Context.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export declare type ContextStore = {
|
|
|
20
20
|
scrollTop?: number;
|
|
21
21
|
scrollTopPreview?: number;
|
|
22
22
|
tabSize?: number;
|
|
23
|
+
defaultTabEnable?: boolean;
|
|
23
24
|
};
|
|
24
25
|
export declare type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;
|
|
25
26
|
export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
@@ -41,5 +42,6 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
|
41
42
|
scrollTop?: number | undefined;
|
|
42
43
|
scrollTopPreview?: number | undefined;
|
|
43
44
|
tabSize?: number | undefined;
|
|
45
|
+
defaultTabEnable?: boolean | undefined;
|
|
44
46
|
};
|
|
45
47
|
export declare const EditorContext: React.Context<ContextStore>;
|
package/lib/Context.js.map
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"createContext",
|
|
13
13
|
"markdown"
|
|
14
14
|
],
|
|
15
|
-
"mappings": ";;;;;;;;;;;;AAAA;;
|
|
15
|
+
"mappings": ";;;;;;;;;;;;AAAA;;AA6BO,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 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"
|
|
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 defaultTabEnable?: boolean;\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
|
@@ -72,6 +72,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
72
72
|
* Default `2` spaces.
|
|
73
73
|
*/
|
|
74
74
|
tabSize?: number;
|
|
75
|
+
/**
|
|
76
|
+
* If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
|
|
77
|
+
*/
|
|
78
|
+
defaultTabEnable?: boolean;
|
|
75
79
|
/**
|
|
76
80
|
* You can create your own commands or reuse existing commands.
|
|
77
81
|
*/
|
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", "commandsFilter", "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", "defaultTabEnable", "onChange", "hideToolbar", "renderTextarea"];
|
|
35
35
|
|
|
36
36
|
function setGroupPopFalse() {
|
|
37
37
|
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -76,6 +76,8 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
76
76
|
autoFocus = _ref.autoFocus,
|
|
77
77
|
_ref$tabSize = _ref.tabSize,
|
|
78
78
|
tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
|
|
79
|
+
_ref$defaultTabEnable = _ref.defaultTabEnable,
|
|
80
|
+
defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
|
|
79
81
|
_onChange = _ref.onChange,
|
|
80
82
|
hideToolbar = _ref.hideToolbar,
|
|
81
83
|
renderTextarea = _ref.renderTextarea,
|
|
@@ -94,6 +96,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
94
96
|
height: height,
|
|
95
97
|
highlightEnable: highlightEnable,
|
|
96
98
|
tabSize: tabSize,
|
|
99
|
+
defaultTabEnable: defaultTabEnable,
|
|
97
100
|
scrollTop: 0,
|
|
98
101
|
scrollTopPreview: 0,
|
|
99
102
|
commands: cmds,
|