@uiw/react-md-editor 3.11.1 → 3.12.0
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 +3 -1
- package/dist/mdeditor.js +121 -156
- package/dist/mdeditor.min.js +1 -1
- package/dist/mdeditor.min.js.LICENSE.txt +10 -9
- package/esm/Editor.d.ts +5 -1
- package/esm/Editor.js +12 -6
- package/esm/Editor.js.map +3 -2
- package/esm/commands/code.js +13 -0
- package/esm/commands/code.js.map +2 -2
- package/lib/Editor.d.ts +5 -1
- package/lib/Editor.js +12 -8
- package/lib/Editor.js.map +3 -2
- package/lib/commands/code.js +13 -0
- package/lib/commands/code.js.map +2 -2
- package/package.json +1 -1
- package/src/Editor.tsx +14 -4
- package/src/__test__/editor.test.tsx +28 -3
- package/src/commands/code.tsx +9 -0
|
@@ -22,15 +22,7 @@ object-assign
|
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* @license MIT <https://opensource.org/licenses/MIT>
|
|
28
|
-
* @author Lea Verou <https://lea.verou.me>
|
|
29
|
-
* @namespace
|
|
30
|
-
* @public
|
|
31
|
-
*/
|
|
32
|
-
|
|
33
|
-
/** @license React v17.0.2
|
|
25
|
+
* @license React
|
|
34
26
|
* react-is.production.min.js
|
|
35
27
|
*
|
|
36
28
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
@@ -39,6 +31,15 @@ object-assign
|
|
|
39
31
|
* LICENSE file in the root directory of this source tree.
|
|
40
32
|
*/
|
|
41
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Prism: Lightweight, robust, elegant syntax highlighting
|
|
36
|
+
*
|
|
37
|
+
* @license MIT <https://opensource.org/licenses/MIT>
|
|
38
|
+
* @author Lea Verou <https://lea.verou.me>
|
|
39
|
+
* @namespace
|
|
40
|
+
* @public
|
|
41
|
+
*/
|
|
42
|
+
|
|
42
43
|
/** @license React v17.0.2
|
|
43
44
|
* react-jsx-runtime.production.min.js
|
|
44
45
|
*
|
package/esm/Editor.d.ts
CHANGED
|
@@ -16,7 +16,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
16
16
|
/**
|
|
17
17
|
* Event handler for the `onChange` event.
|
|
18
18
|
*/
|
|
19
|
-
onChange?: (value?: string) => void;
|
|
19
|
+
onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
|
|
20
|
+
/**
|
|
21
|
+
* editor height change listener
|
|
22
|
+
*/
|
|
23
|
+
onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;
|
|
20
24
|
/**
|
|
21
25
|
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
|
|
22
26
|
* it will be set to true when either the source `textarea` is focused,
|
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", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "hideToolbar", "renderTextarea"];
|
|
3
|
+
var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "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';
|
|
@@ -48,6 +48,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
48
48
|
tabSize = 2,
|
|
49
49
|
defaultTabEnable = false,
|
|
50
50
|
onChange: _onChange,
|
|
51
|
+
onHeightChange,
|
|
51
52
|
hideToolbar,
|
|
52
53
|
renderTextarea
|
|
53
54
|
} = _ref,
|
|
@@ -98,10 +99,6 @@ var InternalMDEditor = (props, ref) => {
|
|
|
98
99
|
preview: previewType
|
|
99
100
|
}), [previewType]); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
101
|
|
|
101
|
-
useMemo(() => height !== state.height && dispatch({
|
|
102
|
-
height: height
|
|
103
|
-
}), [height]); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
104
|
-
|
|
105
102
|
useMemo(() => tabSize !== state.tabSize && dispatch({
|
|
106
103
|
tabSize
|
|
107
104
|
}), [tabSize]);
|
|
@@ -117,6 +114,15 @@ var InternalMDEditor = (props, ref) => {
|
|
|
117
114
|
fullscreen: fullscreen
|
|
118
115
|
}), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
119
116
|
[fullscreen]);
|
|
117
|
+
useMemo(() => {
|
|
118
|
+
if (height !== state.height) {
|
|
119
|
+
dispatch({
|
|
120
|
+
height: height
|
|
121
|
+
});
|
|
122
|
+
onHeightChange && onHeightChange(state.height, height, state);
|
|
123
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
124
|
+
|
|
125
|
+
}, [height, state.height]);
|
|
120
126
|
var textareaDomRef = useRef();
|
|
121
127
|
var active = useRef('preview');
|
|
122
128
|
var initScroll = useRef(false);
|
|
@@ -205,7 +211,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
205
211
|
autoFocus: autoFocus
|
|
206
212
|
}, textareaProps, {
|
|
207
213
|
onChange: evn => {
|
|
208
|
-
_onChange && _onChange(evn.target.value);
|
|
214
|
+
_onChange && _onChange(evn.target.value, evn, state);
|
|
209
215
|
|
|
210
216
|
if (textareaProps && textareaProps.onChange) {
|
|
211
217
|
textareaProps.onChange(evn);
|
package/esm/Editor.js.map
CHANGED
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"tabSize",
|
|
52
52
|
"defaultTabEnable",
|
|
53
53
|
"onChange",
|
|
54
|
+
"onHeightChange",
|
|
54
55
|
"hideToolbar",
|
|
55
56
|
"renderTextarea",
|
|
56
57
|
"other",
|
|
@@ -100,8 +101,8 @@
|
|
|
100
101
|
"forwardRef",
|
|
101
102
|
"Markdown"
|
|
102
103
|
],
|
|
103
|
-
"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;;;;
|
|
104
|
+
"mappings": "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",
|
|
104
105
|
"sourcesContent": [
|
|
105
|
-
"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 * Disable `fullscreen` setting body styles\n */\n overflow?: 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 overflow = true,\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 'wmde-markdown-var',\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 const mdPreview = useMemo(\n () => (\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 [prefixCls, previewOptions, state.markdown],\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} overflow={overflow} />}\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 || '') && mdPreview}\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"
|
|
106
|
+
"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, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n /**\n * editor height change listener\n */\n onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => 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 * Disable `fullscreen` setting body styles\n */\n overflow?: 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 overflow = true,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n defaultTabEnable = false,\n onChange,\n onHeightChange,\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 'wmde-markdown-var',\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(() => 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 useMemo(() => {\n if (height !== state.height) {\n dispatch({ height: height });\n onHeightChange && onHeightChange(state.height, height, state);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [height, state.height]);\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 const mdPreview = useMemo(\n () => (\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 [prefixCls, previewOptions, state.markdown],\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} overflow={overflow} />}\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, evn, state);\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 || '') && mdPreview}\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"
|
|
106
107
|
]
|
|
107
108
|
}
|
package/esm/commands/code.js
CHANGED
|
@@ -57,6 +57,19 @@ export var codeBlock = {
|
|
|
57
57
|
name: 'codeBlock',
|
|
58
58
|
keyCommand: 'codeBlock',
|
|
59
59
|
shortcuts: 'ctrlcmd+shift+j',
|
|
60
|
+
icon: /*#__PURE__*/_jsx("svg", {
|
|
61
|
+
width: "12",
|
|
62
|
+
height: "12",
|
|
63
|
+
role: "img",
|
|
64
|
+
viewBox: "0 0 156 156",
|
|
65
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
66
|
+
fill: "currentColor",
|
|
67
|
+
d: "M110.85 120.575 43.7 120.483333 43.7083334 110.091667 110.85 110.191667 110.841667 120.583333 110.85 120.575ZM85.1333334 87.1916666 43.625 86.7083332 43.7083334 76.3166666 85.2083334 76.7916666 85.1333334 87.1916666 85.1333334 87.1916666ZM110.841667 53.4166666 43.7 53.3166666 43.7083334 42.925 110.85 43.025 110.841667 53.4166666ZM36 138C27.2916666 138 20.75 136.216667 16.4 132.666667 12.1333334 129.2 10 124.308333 10 118L10 95.3333332C10 91.0666666 9.25 88.1333332 7.7333334 86.5333332 6.3166668 84.8416666 3.7333334 84 0 84L0 72C3.7333334 72 6.3083334 71.2 7.7333334 69.6 9.2416668 67.9083334 10 64.9333334 10 60.6666666L10 38C10 31.775 12.1333334 26.8833334 16.4 23.3333332 20.7583334 19.7749998 27.2916666 18 36 18L40.6666668 18 40.6666668 30 36 30C34.0212222 29.9719277 32.1263151 30.7979128 30.8 32.2666666 29.3605875 33.8216362 28.5938182 35.8823287 28.6666668 38L28.6666668 60.6666666C28.6666668 67.5083332 26.6666668 72.4 22.6666668 75.3333332 20.9317416 76.7274684 18.8640675 77.6464347 16.6666668 78 18.8916668 78.35 20.8916668 79.2416666 22.6666668 80.6666666 26.6666668 83.95 28.6666668 88.8416666 28.6666668 95.3333332L28.6666668 118C28.6666668 120.308333 29.3750002 122.216667 30.8 123.733333 32.2166666 125.241667 33.9583334 126 36 126L40.6666668 126 40.6666668 138 36 138 36 138ZM114.116667 126 118.783333 126C120.833333 126 122.566667 125.241667 123.983333 123.733333 125.422746 122.178364 126.189515 120.117671 126.116667 118L126.116667 95.3333332C126.116667 88.8333332 128.116667 83.9499998 132.116667 80.6666666 133.9 79.2416666 135.9 78.35 138.116667 78 135.919156 77.6468047 133.851391 76.7277979 132.116667 75.3333332 128.116667 72.3999998 126.116667 67.5 126.116667 60.6666666L126.116667 38C126.189515 35.8823287 125.422746 33.8216361 123.983333 32.2666666 122.657018 30.7979128 120.762111 29.9719277 118.783333 30L114.116667 30 114.116667 18 118.783333 18C127.5 18 133.983333 19.775 138.25 23.3333332 142.608333 26.8833332 144.783333 31.7749998 144.783333 38L144.783333 60.6666666C144.783333 64.9333332 145.5 67.9083332 146.916667 69.6 148.433333 71.2 151.05 72 154.783333 72L154.783333 84C151.05 84 148.433333 84.8333334 146.916667 86.5333332 145.5 88.1333332 144.783333 91.0666666 144.783333 95.3333332L144.783333 118C144.783333 124.308333 142.616667 129.2 138.25 132.666667 133.983333 136.216667 127.5 138 118.783333 138L114.116667 138 114.116667 126 114.116667 126Z"
|
|
68
|
+
})
|
|
69
|
+
}),
|
|
70
|
+
buttonProps: {
|
|
71
|
+
'aria-label': 'Insert Code Block'
|
|
72
|
+
},
|
|
60
73
|
execute: (tate, api) => {
|
|
61
74
|
// Adjust the selection to encompass the whole word if the caret is inside one
|
|
62
75
|
var newSelectionRange = selectWord({
|
package/esm/commands/code.js.map
CHANGED
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"breaksAfter",
|
|
39
39
|
"codeBlock"
|
|
40
40
|
],
|
|
41
|
-
"mappings": "AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SACEC,UADF,EAEEC,iCAFF,EAGEC,gCAHF,QAIO,wBAJP;;AAMA,OAAO,IAAMC,IAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,MADsB;AAE5BC,EAAAA,UAAU,EAAE,MAFgB;AAG5BC,EAAAA,SAAS,EAAE,WAHiB;AAI5BC,EAAAA,WAAW,EAAE;AAAE,kBAAc;AAAhB,GAJe;AAK5BC,EAAAA,IAAI,eACF;AAAK,IAAA,KAAK,EAAC,IAAX;AAAgB,IAAA,MAAM,EAAC,IAAvB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,IAAA,OAAO,EAAC,aAA/C;AAAA,2BACE;AACE,MAAA,IAAI,EAAC,cADP;AAEE,MAAA,CAAC,EAAC;AAFJ;AADF,IAN0B;AAa5BC,EAAAA,OAAO,EAAE,CAACC,IAAD,EAAkBC,GAAlB,KAA2C;AAClD;AACA,QAAMC,iBAAiB,GAAGZ,UAAU,CAAC;AAAEa,MAAAA,IAAI,EAAEH,IAAI,CAACG,IAAb;AAAmBC,MAAAA,SAAS,EAAEJ,IAAI,CAACI;AAAnC,KAAD,CAApC;AACA,QAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHkD,CAIlD;;AACA,QAAIG,MAAM,CAACE,YAAP,CAAoBC,OAApB,CAA4B,IAA5B,MAAsC,CAAC,CAA3C,EAA8C;AAC5CP,MAAAA,GAAG,CAACQ,gBAAJ,OAA0BJ,MAAM,CAACE,YAAjC,QAD4C,CAE5C;;AAEA,UAAMG,eAAc,GAAGL,MAAM,CAACD,SAAP,CAAiBO,KAAjB,GAAyB,CAAhD;;AACA,UAAMC,aAAY,GAAGF,eAAc,GAAGL,MAAM,CAACE,YAAP,CAAoBM,MAA1D;;AAEAZ,MAAAA,GAAG,CAACK,iBAAJ,CAAsB;AACpBK,QAAAA,KAAK,EAAED,eADa;AAEpBI,QAAAA,GAAG,EAAEF;AAFe,OAAtB;AAIA;AACD;;AAED,QAAMG,iBAAiB,GAAGxB,iCAAiC,CAACc,MAAM,CAACF,IAAR,EAAcE,MAAM,CAACD,SAAP,CAAiBO,KAA/B,CAA3D;AACA,QAAMK,YAAY,GAAGC,KAAK,CAACF,iBAAiB,GAAG,CAArB,CAAL,CAA6BG,IAA7B,CAAkC,IAAlC,CAArB;AAEA,QAAMC,gBAAgB,GAAG3B,gCAAgC,CAACa,MAAM,CAACF,IAAR,EAAcE,MAAM,CAACD,SAAP,CAAiBU,GAA/B,CAAzD;AACA,QAAMM,WAAW,GAAGH,KAAK,CAACE,gBAAgB,GAAG,CAApB,CAAL,CAA4BD,IAA5B,CAAiC,IAAjC,CAApB;AAEAjB,IAAAA,GAAG,CAACQ,gBAAJ,CAAwBO,YAAxB,aAA+CX,MAAM,CAACE,YAAtD,aAA6Ea,WAA7E;AAEA,QAAMV,cAAc,GAAGL,MAAM,CAACD,SAAP,CAAiBO,KAAjB,GAAyBI,iBAAzB,GAA6C,CAApE;AACA,QAAMH,YAAY,GAAGF,cAAc,GAAGL,MAAM,CAACE,YAAP,CAAoBM,MAA1D;AAEAZ,IAAAA,GAAG,CAACK,iBAAJ,CAAsB;AACpBK,MAAAA,KAAK,EAAED,cADa;AAEpBI,MAAAA,GAAG,EAAEF;AAFe,KAAtB;AAID;AA/C2B,CAAvB;AAkDP,OAAO,IAAMS,SAAmB,GAAG;AACjC3B,EAAAA,IAAI,EAAE,WAD2B;AAEjCC,EAAAA,UAAU,EAAE,WAFqB;AAGjCC,EAAAA,SAAS,EAAE,iBAHsB;
|
|
41
|
+
"mappings": "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",
|
|
42
42
|
"sourcesContent": [
|
|
43
|
-
"import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport {\n selectWord,\n getBreaksNeededForEmptyLineBefore,\n getBreaksNeededForEmptyLineAfter,\n} from '../utils/markdownUtils';\n\nexport const code: ICommand = {\n name: 'code',\n keyCommand: 'code',\n shortcuts: 'ctrlcmd+j',\n buttonProps: { 'aria-label': 'Insert code' },\n icon: (\n <svg width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 640 512\">\n <path\n fill=\"currentColor\"\n d=\"M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z\"\n />\n </svg>\n ),\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // when there's no breaking line\n if (state1.selectedText.indexOf('\\n') === -1) {\n api.replaceSelection(`\\`${state1.selectedText}\\``);\n // Adjust the selection to not contain the **\n\n const selectionStart = state1.selection.start + 1;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n return;\n }\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n\nexport const codeBlock: ICommand = {\n name: 'codeBlock',\n keyCommand: 'codeBlock',\n shortcuts: 'ctrlcmd+shift+j',\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n"
|
|
43
|
+
"import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport {\n selectWord,\n getBreaksNeededForEmptyLineBefore,\n getBreaksNeededForEmptyLineAfter,\n} from '../utils/markdownUtils';\n\nexport const code: ICommand = {\n name: 'code',\n keyCommand: 'code',\n shortcuts: 'ctrlcmd+j',\n buttonProps: { 'aria-label': 'Insert code' },\n icon: (\n <svg width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 640 512\">\n <path\n fill=\"currentColor\"\n d=\"M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z\"\n />\n </svg>\n ),\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // when there's no breaking line\n if (state1.selectedText.indexOf('\\n') === -1) {\n api.replaceSelection(`\\`${state1.selectedText}\\``);\n // Adjust the selection to not contain the **\n\n const selectionStart = state1.selection.start + 1;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n return;\n }\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n\nexport const codeBlock: ICommand = {\n name: 'codeBlock',\n keyCommand: 'codeBlock',\n shortcuts: 'ctrlcmd+shift+j',\n icon: (\n <svg width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 156 156\">\n <path\n fill=\"currentColor\"\n d=\"M110.85 120.575 43.7 120.483333 43.7083334 110.091667 110.85 110.191667 110.841667 120.583333 110.85 120.575ZM85.1333334 87.1916666 43.625 86.7083332 43.7083334 76.3166666 85.2083334 76.7916666 85.1333334 87.1916666 85.1333334 87.1916666ZM110.841667 53.4166666 43.7 53.3166666 43.7083334 42.925 110.85 43.025 110.841667 53.4166666ZM36 138C27.2916666 138 20.75 136.216667 16.4 132.666667 12.1333334 129.2 10 124.308333 10 118L10 95.3333332C10 91.0666666 9.25 88.1333332 7.7333334 86.5333332 6.3166668 84.8416666 3.7333334 84 0 84L0 72C3.7333334 72 6.3083334 71.2 7.7333334 69.6 9.2416668 67.9083334 10 64.9333334 10 60.6666666L10 38C10 31.775 12.1333334 26.8833334 16.4 23.3333332 20.7583334 19.7749998 27.2916666 18 36 18L40.6666668 18 40.6666668 30 36 30C34.0212222 29.9719277 32.1263151 30.7979128 30.8 32.2666666 29.3605875 33.8216362 28.5938182 35.8823287 28.6666668 38L28.6666668 60.6666666C28.6666668 67.5083332 26.6666668 72.4 22.6666668 75.3333332 20.9317416 76.7274684 18.8640675 77.6464347 16.6666668 78 18.8916668 78.35 20.8916668 79.2416666 22.6666668 80.6666666 26.6666668 83.95 28.6666668 88.8416666 28.6666668 95.3333332L28.6666668 118C28.6666668 120.308333 29.3750002 122.216667 30.8 123.733333 32.2166666 125.241667 33.9583334 126 36 126L40.6666668 126 40.6666668 138 36 138 36 138ZM114.116667 126 118.783333 126C120.833333 126 122.566667 125.241667 123.983333 123.733333 125.422746 122.178364 126.189515 120.117671 126.116667 118L126.116667 95.3333332C126.116667 88.8333332 128.116667 83.9499998 132.116667 80.6666666 133.9 79.2416666 135.9 78.35 138.116667 78 135.919156 77.6468047 133.851391 76.7277979 132.116667 75.3333332 128.116667 72.3999998 126.116667 67.5 126.116667 60.6666666L126.116667 38C126.189515 35.8823287 125.422746 33.8216361 123.983333 32.2666666 122.657018 30.7979128 120.762111 29.9719277 118.783333 30L114.116667 30 114.116667 18 118.783333 18C127.5 18 133.983333 19.775 138.25 23.3333332 142.608333 26.8833332 144.783333 31.7749998 144.783333 38L144.783333 60.6666666C144.783333 64.9333332 145.5 67.9083332 146.916667 69.6 148.433333 71.2 151.05 72 154.783333 72L154.783333 84C151.05 84 148.433333 84.8333334 146.916667 86.5333332 145.5 88.1333332 144.783333 91.0666666 144.783333 95.3333332L144.783333 118C144.783333 124.308333 142.616667 129.2 138.25 132.666667 133.983333 136.216667 127.5 138 118.783333 138L114.116667 138 114.116667 126 114.116667 126Z\"\n />\n </svg>\n ),\n buttonProps: { 'aria-label': 'Insert Code Block' },\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n"
|
|
44
44
|
]
|
|
45
45
|
}
|
package/lib/Editor.d.ts
CHANGED
|
@@ -16,7 +16,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
16
16
|
/**
|
|
17
17
|
* Event handler for the `onChange` event.
|
|
18
18
|
*/
|
|
19
|
-
onChange?: (value?: string) => void;
|
|
19
|
+
onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
|
|
20
|
+
/**
|
|
21
|
+
* editor height change listener
|
|
22
|
+
*/
|
|
23
|
+
onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;
|
|
20
24
|
/**
|
|
21
25
|
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
|
|
22
26
|
* it will be set to true when either the source `textarea` is focused,
|
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", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "hideToolbar", "renderTextarea"];
|
|
34
|
+
var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "renderTextarea"];
|
|
35
35
|
|
|
36
36
|
function setGroupPopFalse() {
|
|
37
37
|
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -81,6 +81,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
81
81
|
_ref$defaultTabEnable = _ref.defaultTabEnable,
|
|
82
82
|
defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
|
|
83
83
|
_onChange = _ref.onChange,
|
|
84
|
+
onHeightChange = _ref.onHeightChange,
|
|
84
85
|
hideToolbar = _ref.hideToolbar,
|
|
85
86
|
renderTextarea = _ref.renderTextarea,
|
|
86
87
|
other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
@@ -147,12 +148,6 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
147
148
|
});
|
|
148
149
|
}, [previewType]); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
149
150
|
|
|
150
|
-
(0, _react.useMemo)(function () {
|
|
151
|
-
return height !== state.height && dispatch({
|
|
152
|
-
height: height
|
|
153
|
-
});
|
|
154
|
-
}, [height]); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
155
|
-
|
|
156
151
|
(0, _react.useMemo)(function () {
|
|
157
152
|
return tabSize !== state.tabSize && dispatch({
|
|
158
153
|
tabSize: tabSize
|
|
@@ -176,6 +171,15 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
176
171
|
});
|
|
177
172
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
178
173
|
[fullscreen]);
|
|
174
|
+
(0, _react.useMemo)(function () {
|
|
175
|
+
if (height !== state.height) {
|
|
176
|
+
dispatch({
|
|
177
|
+
height: height
|
|
178
|
+
});
|
|
179
|
+
onHeightChange && onHeightChange(state.height, height, state);
|
|
180
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
181
|
+
|
|
182
|
+
}, [height, state.height]);
|
|
179
183
|
var textareaDomRef = (0, _react.useRef)();
|
|
180
184
|
var active = (0, _react.useRef)('preview');
|
|
181
185
|
var initScroll = (0, _react.useRef)(false);
|
|
@@ -268,7 +272,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
268
272
|
autoFocus: autoFocus
|
|
269
273
|
}, textareaProps), {}, {
|
|
270
274
|
onChange: function onChange(evn) {
|
|
271
|
-
_onChange && _onChange(evn.target.value);
|
|
275
|
+
_onChange && _onChange(evn.target.value, evn, state);
|
|
272
276
|
|
|
273
277
|
if (textareaProps && textareaProps.onChange) {
|
|
274
278
|
textareaProps.onChange(evn);
|
package/lib/Editor.js.map
CHANGED
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"tabSize",
|
|
38
38
|
"defaultTabEnable",
|
|
39
39
|
"onChange",
|
|
40
|
+
"onHeightChange",
|
|
40
41
|
"hideToolbar",
|
|
41
42
|
"renderTextarea",
|
|
42
43
|
"other",
|
|
@@ -89,8 +90,8 @@
|
|
|
89
90
|
"Markdown",
|
|
90
91
|
"MarkdownPreview"
|
|
91
92
|
],
|
|
92
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;
|
|
93
|
+
"mappings": "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",
|
|
93
94
|
"sourcesContent": [
|
|
94
|
-
"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 * Disable `fullscreen` setting body styles\n */\n overflow?: 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 overflow = true,\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 'wmde-markdown-var',\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 const mdPreview = useMemo(\n () => (\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 [prefixCls, previewOptions, state.markdown],\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} overflow={overflow} />}\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 || '') && mdPreview}\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"
|
|
95
|
+
"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, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n /**\n * editor height change listener\n */\n onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => 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 * Disable `fullscreen` setting body styles\n */\n overflow?: 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 overflow = true,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n defaultTabEnable = false,\n onChange,\n onHeightChange,\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 'wmde-markdown-var',\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(() => 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 useMemo(() => {\n if (height !== state.height) {\n dispatch({ height: height });\n onHeightChange && onHeightChange(state.height, height, state);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [height, state.height]);\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 const mdPreview = useMemo(\n () => (\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 [prefixCls, previewOptions, state.markdown],\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} overflow={overflow} />}\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, evn, state);\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 || '') && mdPreview}\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"
|
|
95
96
|
]
|
|
96
97
|
}
|
package/lib/commands/code.js
CHANGED
|
@@ -70,6 +70,19 @@ var codeBlock = {
|
|
|
70
70
|
name: 'codeBlock',
|
|
71
71
|
keyCommand: 'codeBlock',
|
|
72
72
|
shortcuts: 'ctrlcmd+shift+j',
|
|
73
|
+
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
|
|
74
|
+
width: "12",
|
|
75
|
+
height: "12",
|
|
76
|
+
role: "img",
|
|
77
|
+
viewBox: "0 0 156 156",
|
|
78
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
79
|
+
fill: "currentColor",
|
|
80
|
+
d: "M110.85 120.575 43.7 120.483333 43.7083334 110.091667 110.85 110.191667 110.841667 120.583333 110.85 120.575ZM85.1333334 87.1916666 43.625 86.7083332 43.7083334 76.3166666 85.2083334 76.7916666 85.1333334 87.1916666 85.1333334 87.1916666ZM110.841667 53.4166666 43.7 53.3166666 43.7083334 42.925 110.85 43.025 110.841667 53.4166666ZM36 138C27.2916666 138 20.75 136.216667 16.4 132.666667 12.1333334 129.2 10 124.308333 10 118L10 95.3333332C10 91.0666666 9.25 88.1333332 7.7333334 86.5333332 6.3166668 84.8416666 3.7333334 84 0 84L0 72C3.7333334 72 6.3083334 71.2 7.7333334 69.6 9.2416668 67.9083334 10 64.9333334 10 60.6666666L10 38C10 31.775 12.1333334 26.8833334 16.4 23.3333332 20.7583334 19.7749998 27.2916666 18 36 18L40.6666668 18 40.6666668 30 36 30C34.0212222 29.9719277 32.1263151 30.7979128 30.8 32.2666666 29.3605875 33.8216362 28.5938182 35.8823287 28.6666668 38L28.6666668 60.6666666C28.6666668 67.5083332 26.6666668 72.4 22.6666668 75.3333332 20.9317416 76.7274684 18.8640675 77.6464347 16.6666668 78 18.8916668 78.35 20.8916668 79.2416666 22.6666668 80.6666666 26.6666668 83.95 28.6666668 88.8416666 28.6666668 95.3333332L28.6666668 118C28.6666668 120.308333 29.3750002 122.216667 30.8 123.733333 32.2166666 125.241667 33.9583334 126 36 126L40.6666668 126 40.6666668 138 36 138 36 138ZM114.116667 126 118.783333 126C120.833333 126 122.566667 125.241667 123.983333 123.733333 125.422746 122.178364 126.189515 120.117671 126.116667 118L126.116667 95.3333332C126.116667 88.8333332 128.116667 83.9499998 132.116667 80.6666666 133.9 79.2416666 135.9 78.35 138.116667 78 135.919156 77.6468047 133.851391 76.7277979 132.116667 75.3333332 128.116667 72.3999998 126.116667 67.5 126.116667 60.6666666L126.116667 38C126.189515 35.8823287 125.422746 33.8216361 123.983333 32.2666666 122.657018 30.7979128 120.762111 29.9719277 118.783333 30L114.116667 30 114.116667 18 118.783333 18C127.5 18 133.983333 19.775 138.25 23.3333332 142.608333 26.8833332 144.783333 31.7749998 144.783333 38L144.783333 60.6666666C144.783333 64.9333332 145.5 67.9083332 146.916667 69.6 148.433333 71.2 151.05 72 154.783333 72L154.783333 84C151.05 84 148.433333 84.8333334 146.916667 86.5333332 145.5 88.1333332 144.783333 91.0666666 144.783333 95.3333332L144.783333 118C144.783333 124.308333 142.616667 129.2 138.25 132.666667 133.983333 136.216667 127.5 138 118.783333 138L114.116667 138 114.116667 126 114.116667 126Z"
|
|
81
|
+
})
|
|
82
|
+
}),
|
|
83
|
+
buttonProps: {
|
|
84
|
+
'aria-label': 'Insert Code Block'
|
|
85
|
+
},
|
|
73
86
|
execute: function execute(tate, api) {
|
|
74
87
|
// Adjust the selection to encompass the whole word if the caret is inside one
|
|
75
88
|
var newSelectionRange = (0, _markdownUtils.selectWord)({
|
package/lib/commands/code.js.map
CHANGED
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"breaksAfter",
|
|
35
35
|
"codeBlock"
|
|
36
36
|
],
|
|
37
|
-
"mappings": ";;;;;;;;;AAAA;;AAEA;;;;AAMO,IAAMA,IAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,MADsB;AAE5BC,EAAAA,UAAU,EAAE,MAFgB;AAG5BC,EAAAA,SAAS,EAAE,WAHiB;AAI5BC,EAAAA,WAAW,EAAE;AAAE,kBAAc;AAAhB,GAJe;AAK5BC,EAAAA,IAAI,eACF;AAAK,IAAA,KAAK,EAAC,IAAX;AAAgB,IAAA,MAAM,EAAC,IAAvB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,IAAA,OAAO,EAAC,aAA/C;AAAA,2BACE;AACE,MAAA,IAAI,EAAC,cADP;AAEE,MAAA,CAAC,EAAC;AAFJ;AADF,IAN0B;AAa5BC,EAAAA,OAAO,EAAE,iBAACC,IAAD,EAAkBC,GAAlB,EAA2C;AAClD;AACA,QAAMC,iBAAiB,GAAG,+BAAW;AAAEC,MAAAA,IAAI,EAAEH,IAAI,CAACG,IAAb;AAAmBC,MAAAA,SAAS,EAAEJ,IAAI,CAACI;AAAnC,KAAX,CAA1B;AACA,QAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHkD,CAIlD;;AACA,QAAIG,MAAM,CAACE,YAAP,CAAoBC,OAApB,CAA4B,IAA5B,MAAsC,CAAC,CAA3C,EAA8C;AAC5CP,MAAAA,GAAG,CAACQ,gBAAJ,YAA0BJ,MAAM,CAACE,YAAjC,QAD4C,CAE5C;;AAEA,UAAMG,eAAc,GAAGL,MAAM,CAACD,SAAP,CAAiBO,KAAjB,GAAyB,CAAhD;;AACA,UAAMC,aAAY,GAAGF,eAAc,GAAGL,MAAM,CAACE,YAAP,CAAoBM,MAA1D;;AAEAZ,MAAAA,GAAG,CAACK,iBAAJ,CAAsB;AACpBK,QAAAA,KAAK,EAAED,eADa;AAEpBI,QAAAA,GAAG,EAAEF;AAFe,OAAtB;AAIA;AACD;;AAED,QAAMG,iBAAiB,GAAG,sDAAkCV,MAAM,CAACF,IAAzC,EAA+CE,MAAM,CAACD,SAAP,CAAiBO,KAAhE,CAA1B;AACA,QAAMK,YAAY,GAAGC,KAAK,CAACF,iBAAiB,GAAG,CAArB,CAAL,CAA6BG,IAA7B,CAAkC,IAAlC,CAArB;AAEA,QAAMC,gBAAgB,GAAG,qDAAiCd,MAAM,CAACF,IAAxC,EAA8CE,MAAM,CAACD,SAAP,CAAiBU,GAA/D,CAAzB;AACA,QAAMM,WAAW,GAAGH,KAAK,CAACE,gBAAgB,GAAG,CAApB,CAAL,CAA4BD,IAA5B,CAAiC,IAAjC,CAApB;AAEAjB,IAAAA,GAAG,CAACQ,gBAAJ,WAAwBO,YAAxB,kBAA+CX,MAAM,CAACE,YAAtD,kBAA6Ea,WAA7E;AAEA,QAAMV,cAAc,GAAGL,MAAM,CAACD,SAAP,CAAiBO,KAAjB,GAAyBI,iBAAzB,GAA6C,CAApE;AACA,QAAMH,YAAY,GAAGF,cAAc,GAAGL,MAAM,CAACE,YAAP,CAAoBM,MAA1D;AAEAZ,IAAAA,GAAG,CAACK,iBAAJ,CAAsB;AACpBK,MAAAA,KAAK,EAAED,cADa;AAEpBI,MAAAA,GAAG,EAAEF;AAFe,KAAtB;AAID;AA/C2B,CAAvB;;AAkDA,IAAMS,SAAmB,GAAG;AACjC3B,EAAAA,IAAI,EAAE,WAD2B;AAEjCC,EAAAA,UAAU,EAAE,WAFqB;AAGjCC,EAAAA,SAAS,EAAE,iBAHsB;
|
|
37
|
+
"mappings": "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",
|
|
38
38
|
"sourcesContent": [
|
|
39
|
-
"import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport {\n selectWord,\n getBreaksNeededForEmptyLineBefore,\n getBreaksNeededForEmptyLineAfter,\n} from '../utils/markdownUtils';\n\nexport const code: ICommand = {\n name: 'code',\n keyCommand: 'code',\n shortcuts: 'ctrlcmd+j',\n buttonProps: { 'aria-label': 'Insert code' },\n icon: (\n <svg width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 640 512\">\n <path\n fill=\"currentColor\"\n d=\"M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z\"\n />\n </svg>\n ),\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // when there's no breaking line\n if (state1.selectedText.indexOf('\\n') === -1) {\n api.replaceSelection(`\\`${state1.selectedText}\\``);\n // Adjust the selection to not contain the **\n\n const selectionStart = state1.selection.start + 1;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n return;\n }\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n\nexport const codeBlock: ICommand = {\n name: 'codeBlock',\n keyCommand: 'codeBlock',\n shortcuts: 'ctrlcmd+shift+j',\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n"
|
|
39
|
+
"import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport {\n selectWord,\n getBreaksNeededForEmptyLineBefore,\n getBreaksNeededForEmptyLineAfter,\n} from '../utils/markdownUtils';\n\nexport const code: ICommand = {\n name: 'code',\n keyCommand: 'code',\n shortcuts: 'ctrlcmd+j',\n buttonProps: { 'aria-label': 'Insert code' },\n icon: (\n <svg width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 640 512\">\n <path\n fill=\"currentColor\"\n d=\"M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z\"\n />\n </svg>\n ),\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // when there's no breaking line\n if (state1.selectedText.indexOf('\\n') === -1) {\n api.replaceSelection(`\\`${state1.selectedText}\\``);\n // Adjust the selection to not contain the **\n\n const selectionStart = state1.selection.start + 1;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n return;\n }\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n\nexport const codeBlock: ICommand = {\n name: 'codeBlock',\n keyCommand: 'codeBlock',\n shortcuts: 'ctrlcmd+shift+j',\n icon: (\n <svg width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 156 156\">\n <path\n fill=\"currentColor\"\n d=\"M110.85 120.575 43.7 120.483333 43.7083334 110.091667 110.85 110.191667 110.841667 120.583333 110.85 120.575ZM85.1333334 87.1916666 43.625 86.7083332 43.7083334 76.3166666 85.2083334 76.7916666 85.1333334 87.1916666 85.1333334 87.1916666ZM110.841667 53.4166666 43.7 53.3166666 43.7083334 42.925 110.85 43.025 110.841667 53.4166666ZM36 138C27.2916666 138 20.75 136.216667 16.4 132.666667 12.1333334 129.2 10 124.308333 10 118L10 95.3333332C10 91.0666666 9.25 88.1333332 7.7333334 86.5333332 6.3166668 84.8416666 3.7333334 84 0 84L0 72C3.7333334 72 6.3083334 71.2 7.7333334 69.6 9.2416668 67.9083334 10 64.9333334 10 60.6666666L10 38C10 31.775 12.1333334 26.8833334 16.4 23.3333332 20.7583334 19.7749998 27.2916666 18 36 18L40.6666668 18 40.6666668 30 36 30C34.0212222 29.9719277 32.1263151 30.7979128 30.8 32.2666666 29.3605875 33.8216362 28.5938182 35.8823287 28.6666668 38L28.6666668 60.6666666C28.6666668 67.5083332 26.6666668 72.4 22.6666668 75.3333332 20.9317416 76.7274684 18.8640675 77.6464347 16.6666668 78 18.8916668 78.35 20.8916668 79.2416666 22.6666668 80.6666666 26.6666668 83.95 28.6666668 88.8416666 28.6666668 95.3333332L28.6666668 118C28.6666668 120.308333 29.3750002 122.216667 30.8 123.733333 32.2166666 125.241667 33.9583334 126 36 126L40.6666668 126 40.6666668 138 36 138 36 138ZM114.116667 126 118.783333 126C120.833333 126 122.566667 125.241667 123.983333 123.733333 125.422746 122.178364 126.189515 120.117671 126.116667 118L126.116667 95.3333332C126.116667 88.8333332 128.116667 83.9499998 132.116667 80.6666666 133.9 79.2416666 135.9 78.35 138.116667 78 135.919156 77.6468047 133.851391 76.7277979 132.116667 75.3333332 128.116667 72.3999998 126.116667 67.5 126.116667 60.6666666L126.116667 38C126.189515 35.8823287 125.422746 33.8216361 123.983333 32.2666666 122.657018 30.7979128 120.762111 29.9719277 118.783333 30L114.116667 30 114.116667 18 118.783333 18C127.5 18 133.983333 19.775 138.25 23.3333332 142.608333 26.8833332 144.783333 31.7749998 144.783333 38L144.783333 60.6666666C144.783333 64.9333332 145.5 67.9083332 146.916667 69.6 148.433333 71.2 151.05 72 154.783333 72L154.783333 84C151.05 84 148.433333 84.8333334 146.916667 86.5333332 145.5 88.1333332 144.783333 91.0666666 144.783333 95.3333332L144.783333 118C144.783333 124.308333 142.616667 129.2 138.25 132.666667 133.983333 136.216667 127.5 138 118.783333 138L114.116667 138 114.116667 126 114.116667 126Z\"\n />\n </svg>\n ),\n buttonProps: { 'aria-label': 'Insert Code Block' },\n execute: (tate: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: tate.text, selection: tate.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n\n const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);\n const breaksBefore = Array(breaksBeforeCount + 1).join('\\n');\n\n const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);\n const breaksAfter = Array(breaksAfterCount + 1).join('\\n');\n\n api.replaceSelection(`${breaksBefore}\\`\\`\\`\\n${state1.selectedText}\\n\\`\\`\\`${breaksAfter}`);\n\n const selectionStart = state1.selection.start + breaksBeforeCount + 4;\n const selectionEnd = selectionStart + state1.selectedText.length;\n\n api.setSelectionRange({\n start: selectionStart,\n end: selectionEnd,\n });\n },\n};\n"
|
|
40
40
|
]
|
|
41
41
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.12.0",
|
|
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/Editor.tsx
CHANGED
|
@@ -20,7 +20,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
20
20
|
/**
|
|
21
21
|
* Event handler for the `onChange` event.
|
|
22
22
|
*/
|
|
23
|
-
onChange?: (value?: string) => void;
|
|
23
|
+
onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
|
|
24
|
+
/**
|
|
25
|
+
* editor height change listener
|
|
26
|
+
*/
|
|
27
|
+
onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;
|
|
24
28
|
/**
|
|
25
29
|
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
|
|
26
30
|
* it will be set to true when either the source `textarea` is focused,
|
|
@@ -139,6 +143,7 @@ const InternalMDEditor = (
|
|
|
139
143
|
tabSize = 2,
|
|
140
144
|
defaultTabEnable = false,
|
|
141
145
|
onChange,
|
|
146
|
+
onHeightChange,
|
|
142
147
|
hideToolbar,
|
|
143
148
|
renderTextarea,
|
|
144
149
|
...other
|
|
@@ -200,8 +205,6 @@ const InternalMDEditor = (
|
|
|
200
205
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
201
206
|
useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);
|
|
202
207
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
203
|
-
useMemo(() => height !== state.height && dispatch({ height: height }), [height]);
|
|
204
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
205
208
|
useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);
|
|
206
209
|
useMemo(
|
|
207
210
|
() => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),
|
|
@@ -215,6 +218,13 @@ const InternalMDEditor = (
|
|
|
215
218
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
216
219
|
[fullscreen],
|
|
217
220
|
);
|
|
221
|
+
useMemo(() => {
|
|
222
|
+
if (height !== state.height) {
|
|
223
|
+
dispatch({ height: height });
|
|
224
|
+
onHeightChange && onHeightChange(state.height, height, state);
|
|
225
|
+
}
|
|
226
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
227
|
+
}, [height, state.height]);
|
|
218
228
|
|
|
219
229
|
const textareaDomRef = useRef<HTMLDivElement>();
|
|
220
230
|
const active = useRef<'text' | 'preview'>('preview');
|
|
@@ -300,7 +310,7 @@ const InternalMDEditor = (
|
|
|
300
310
|
autoFocus={autoFocus}
|
|
301
311
|
{...textareaProps}
|
|
302
312
|
onChange={(evn) => {
|
|
303
|
-
onChange && onChange(evn.target.value);
|
|
313
|
+
onChange && onChange(evn.target.value, evn, state);
|
|
304
314
|
if (textareaProps && textareaProps.onChange) {
|
|
305
315
|
textareaProps.onChange(evn);
|
|
306
316
|
}
|