@uiw/react-md-editor 3.17.2 → 3.18.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 -0
- package/dist/mdeditor.css +2 -1
- package/dist/mdeditor.js +876 -47
- package/dist/mdeditor.min.css +1 -1
- package/dist/mdeditor.min.js +1 -1
- package/esm/Context.d.ts +1 -0
- package/esm/Editor.d.ts +2 -0
- package/esm/Editor.js +20 -6
- package/esm/Editor.js.map +4 -3
- package/lib/Context.d.ts +1 -0
- package/lib/Editor.d.ts +2 -0
- package/lib/Editor.js +23 -7
- package/lib/Editor.js.map +5 -4
- package/package.json +1 -1
- package/src/Editor.tsx +24 -12
package/esm/Context.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
|
38
38
|
shortcuts?: ((e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, commands: ICommand<string>[], commandOrchestrator?: TextAreaCommandOrchestrator | undefined, dispatch?: React.Dispatch<ContextStore> | undefined, state?: ExecuteCommandState | undefined) => void) | undefined;
|
|
39
39
|
}) => JSX.Element) | undefined;
|
|
40
40
|
toolbar?: ((command: ICommand<string>, disabled: boolean, executeCommand: (command: ICommand<string>, name?: string | undefined) => void, index: number) => void | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined) | undefined;
|
|
41
|
+
preview?: ((source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element) | undefined;
|
|
41
42
|
} | undefined;
|
|
42
43
|
commands?: ICommand<string>[] | undefined;
|
|
43
44
|
extraCommands?: ICommand<string>[] | undefined;
|
package/esm/Editor.d.ts
CHANGED
|
@@ -92,6 +92,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
92
92
|
* _`toolbar`_ < _`command[].render`_
|
|
93
93
|
*/
|
|
94
94
|
toolbar?: ICommand['render'];
|
|
95
|
+
/** Custom markdown preview */
|
|
96
|
+
preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
|
|
95
97
|
};
|
|
96
98
|
/**
|
|
97
99
|
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
|
package/esm/Editor.js
CHANGED
|
@@ -140,7 +140,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
140
140
|
var handleScroll = (e, type) => {
|
|
141
141
|
if (!enableScrollRef.current) return;
|
|
142
142
|
var textareaDom = textareaDomRef.current;
|
|
143
|
-
var previewDom = previewRef.current ? previewRef.current
|
|
143
|
+
var previewDom = previewRef.current ? previewRef.current : undefined;
|
|
144
144
|
|
|
145
145
|
if (!initScroll.current) {
|
|
146
146
|
active.current = type;
|
|
@@ -172,12 +172,26 @@ var InternalMDEditor = (props, ref) => {
|
|
|
172
172
|
}
|
|
173
173
|
};
|
|
174
174
|
|
|
175
|
-
var
|
|
176
|
-
|
|
175
|
+
var previewClassName = prefixCls + "-preview " + (previewOptions.className || '');
|
|
176
|
+
var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
|
|
177
177
|
ref: previewRef,
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
178
|
+
className: previewClassName,
|
|
179
|
+
children: /*#__PURE__*/_jsx(MarkdownPreview, _extends({}, previewOptions, {
|
|
180
|
+
onScroll: e => handleScroll(e, 'preview'),
|
|
181
|
+
source: state.markdown || ''
|
|
182
|
+
}))
|
|
183
|
+
}), [previewClassName, previewOptions, state.markdown]);
|
|
184
|
+
var preview = (components == null ? void 0 : components.preview) && (components == null ? void 0 : components.preview(state.markdown || '', state, dispatch));
|
|
185
|
+
|
|
186
|
+
if (preview && /*#__PURE__*/React.isValidElement(preview)) {
|
|
187
|
+
mdPreview = /*#__PURE__*/_jsx("div", {
|
|
188
|
+
className: previewClassName,
|
|
189
|
+
ref: previewRef,
|
|
190
|
+
onScroll: e => handleScroll(e, 'preview'),
|
|
191
|
+
children: preview
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
|
|
181
195
|
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
|
182
196
|
value: _extends({}, state, {
|
|
183
197
|
dispatch
|
package/esm/Editor.js.map
CHANGED
|
@@ -85,12 +85,13 @@
|
|
|
85
85
|
"type",
|
|
86
86
|
"textareaDom",
|
|
87
87
|
"previewDom",
|
|
88
|
-
"mdp",
|
|
89
88
|
"scale",
|
|
90
89
|
"scrollHeight",
|
|
91
90
|
"offsetHeight",
|
|
92
91
|
"target",
|
|
92
|
+
"previewClassName",
|
|
93
93
|
"mdPreview",
|
|
94
|
+
"isValidElement",
|
|
94
95
|
"style",
|
|
95
96
|
"test",
|
|
96
97
|
"evn",
|
|
@@ -104,7 +105,7 @@
|
|
|
104
105
|
"../src/Editor.tsx"
|
|
105
106
|
],
|
|
106
107
|
"sourcesContent": [
|
|
107
|
-
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } 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?: CSSProperties['height'], oldValue?: CSSProperties['height'], 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 * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n */\n height?: CSSProperties['height'];\n /**\n * Custom toolbar heigth\n * @default 29px\n *\n * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n *\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visibleDragbar?: boolean;\n /**\n * @deprecated use `visibleDragbar`\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. `visibleDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visibleDragbar=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 /**\n * Use div to replace TextArea or re-render TextArea\n * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * re-render element\n */\n components?: {\n /** Use div to replace TextArea or re-render TextArea */\n textarea?: ITextAreaProps['renderTextarea'];\n /**\n * Override the default command element\n * _`toolbar`_ < _`command[].render`_\n */\n toolbar?: ICommand['render'];\n };\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 /** Toolbar on bottom */\n toolbarBottom?: 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 enableScroll = true,\n visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.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 toolbarBottom = false,\n components,\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 components,\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n useMemo(\n () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n [height, onHeightChange, state],\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 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.height || '100%',\n }}\n >\n {!hideToolbar && !toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n )}\n <div className={`${prefixCls}-content`}>\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={components?.textarea || renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && mdPreview}\n </div>\n {visibleDragbar && !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 {!hideToolbar && toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\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"
|
|
108
|
+
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } 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?: CSSProperties['height'], oldValue?: CSSProperties['height'], 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 * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n */\n height?: CSSProperties['height'];\n /**\n * Custom toolbar heigth\n * @default 29px\n *\n * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n *\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visibleDragbar?: boolean;\n /**\n * @deprecated use `visibleDragbar`\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. `visibleDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visibleDragbar=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 /**\n * Use div to replace TextArea or re-render TextArea\n * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * re-render element\n */\n components?: {\n /** Use div to replace TextArea or re-render TextArea */\n textarea?: ITextAreaProps['renderTextarea'];\n /**\n * Override the default command element\n * _`toolbar`_ < _`command[].render`_\n */\n toolbar?: ICommand['render'];\n /** Custom markdown preview */\n preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\n };\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 /** Toolbar on bottom */\n toolbarBottom?: 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 enableScroll = true,\n visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.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 toolbarBottom = false,\n components,\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 components,\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<HTMLDivElement>(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 // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n useMemo(\n () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n [height, onHeightChange, state],\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 : 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 previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n let mdPreview = useMemo(\n () => (\n <div ref={previewRef} className={previewClassName}>\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n source={state.markdown || ''}\n />\n </div>\n ),\n [previewClassName, previewOptions, state.markdown],\n );\n const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n if (preview && React.isValidElement(preview)) {\n mdPreview = (\n <div className={previewClassName} ref={previewRef} onScroll={(e) => handleScroll(e, 'preview')}>\n {preview}\n </div>\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.height || '100%',\n }}\n >\n {!hideToolbar && !toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n )}\n <div className={`${prefixCls}-content`}>\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={components?.textarea || renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && mdPreview}\n </div>\n {visibleDragbar && !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 {!hideToolbar && toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\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"
|
|
108
109
|
],
|
|
109
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,UAA3B,EAAuCC,OAAvC,EAAgDC,MAAhD,EAAwDC,mBAAxD,QAAkG,OAAlG;AACA,OAAOC,eAAP,
|
|
110
|
+
"mappings": "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"
|
|
110
111
|
}
|
package/lib/Context.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
|
|
|
38
38
|
shortcuts?: ((e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, commands: ICommand<string>[], commandOrchestrator?: TextAreaCommandOrchestrator | undefined, dispatch?: React.Dispatch<ContextStore> | undefined, state?: ExecuteCommandState | undefined) => void) | undefined;
|
|
39
39
|
}) => JSX.Element) | undefined;
|
|
40
40
|
toolbar?: ((command: ICommand<string>, disabled: boolean, executeCommand: (command: ICommand<string>, name?: string | undefined) => void, index: number) => void | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined) | undefined;
|
|
41
|
+
preview?: ((source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element) | undefined;
|
|
41
42
|
} | undefined;
|
|
42
43
|
commands?: ICommand<string>[] | undefined;
|
|
43
44
|
extraCommands?: ICommand<string>[] | undefined;
|
package/lib/Editor.d.ts
CHANGED
|
@@ -92,6 +92,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
92
92
|
* _`toolbar`_ < _`command[].render`_
|
|
93
93
|
*/
|
|
94
94
|
toolbar?: ICommand['render'];
|
|
95
|
+
/** Custom markdown preview */
|
|
96
|
+
preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
|
|
95
97
|
};
|
|
96
98
|
/**
|
|
97
99
|
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
|
package/lib/Editor.js
CHANGED
|
@@ -201,7 +201,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
201
201
|
var handleScroll = function handleScroll(e, type) {
|
|
202
202
|
if (!enableScrollRef.current) return;
|
|
203
203
|
var textareaDom = textareaDomRef.current;
|
|
204
|
-
var previewDom = previewRef.current ? previewRef.current
|
|
204
|
+
var previewDom = previewRef.current ? previewRef.current : undefined;
|
|
205
205
|
|
|
206
206
|
if (!initScroll.current) {
|
|
207
207
|
active.current = type;
|
|
@@ -233,16 +233,32 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
233
233
|
}
|
|
234
234
|
};
|
|
235
235
|
|
|
236
|
+
var previewClassName = "".concat(prefixCls, "-preview ").concat(previewOptions.className || '');
|
|
236
237
|
var mdPreview = (0, _react.useMemo)(function () {
|
|
237
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
238
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
239
|
+
ref: previewRef,
|
|
240
|
+
className: previewClassName,
|
|
241
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
|
|
242
|
+
onScroll: function onScroll(e) {
|
|
243
|
+
return handleScroll(e, 'preview');
|
|
244
|
+
},
|
|
245
|
+
source: state.markdown || ''
|
|
246
|
+
}))
|
|
247
|
+
});
|
|
248
|
+
}, [previewClassName, previewOptions, state.markdown]);
|
|
249
|
+
var preview = (components === null || components === void 0 ? void 0 : components.preview) && (components === null || components === void 0 ? void 0 : components.preview(state.markdown || '', state, dispatch));
|
|
250
|
+
|
|
251
|
+
if (preview && /*#__PURE__*/_react["default"].isValidElement(preview)) {
|
|
252
|
+
mdPreview = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
253
|
+
className: previewClassName,
|
|
254
|
+
ref: previewRef,
|
|
238
255
|
onScroll: function onScroll(e) {
|
|
239
256
|
return handleScroll(e, 'preview');
|
|
240
257
|
},
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
}, [prefixCls, previewOptions, state.markdown]);
|
|
258
|
+
children: preview
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
|
|
246
262
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
|
|
247
263
|
value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
|
|
248
264
|
dispatch: dispatch
|
package/lib/Editor.js.map
CHANGED
|
@@ -79,19 +79,20 @@
|
|
|
79
79
|
"type",
|
|
80
80
|
"textareaDom",
|
|
81
81
|
"previewDom",
|
|
82
|
-
"mdp",
|
|
83
82
|
"scale",
|
|
84
83
|
"scrollHeight",
|
|
85
84
|
"offsetHeight",
|
|
86
85
|
"target",
|
|
86
|
+
"previewClassName",
|
|
87
87
|
"mdPreview",
|
|
88
|
+
"React",
|
|
89
|
+
"isValidElement",
|
|
88
90
|
"style",
|
|
89
91
|
"test",
|
|
90
92
|
"evn",
|
|
91
93
|
"textarea",
|
|
92
94
|
"newHeight",
|
|
93
95
|
"mdEditor",
|
|
94
|
-
"React",
|
|
95
96
|
"forwardRef",
|
|
96
97
|
"Markdown",
|
|
97
98
|
"MarkdownPreview"
|
|
@@ -100,7 +101,7 @@
|
|
|
100
101
|
"../src/Editor.tsx"
|
|
101
102
|
],
|
|
102
103
|
"sourcesContent": [
|
|
103
|
-
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } 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?: CSSProperties['height'], oldValue?: CSSProperties['height'], 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 * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n */\n height?: CSSProperties['height'];\n /**\n * Custom toolbar heigth\n * @default 29px\n *\n * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n *\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visibleDragbar?: boolean;\n /**\n * @deprecated use `visibleDragbar`\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. `visibleDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visibleDragbar=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 /**\n * Use div to replace TextArea or re-render TextArea\n * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * re-render element\n */\n components?: {\n /** Use div to replace TextArea or re-render TextArea */\n textarea?: ITextAreaProps['renderTextarea'];\n /**\n * Override the default command element\n * _`toolbar`_ < _`command[].render`_\n */\n toolbar?: ICommand['render'];\n };\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 /** Toolbar on bottom */\n toolbarBottom?: 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 enableScroll = true,\n visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.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 toolbarBottom = false,\n components,\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 components,\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n useMemo(\n () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n [height, onHeightChange, state],\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 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.height || '100%',\n }}\n >\n {!hideToolbar && !toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n )}\n <div className={`${prefixCls}-content`}>\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={components?.textarea || renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && mdPreview}\n </div>\n {visibleDragbar && !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 {!hideToolbar && toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\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"
|
|
104
|
+
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } 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?: CSSProperties['height'], oldValue?: CSSProperties['height'], 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 * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n */\n height?: CSSProperties['height'];\n /**\n * Custom toolbar heigth\n * @default 29px\n *\n * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n *\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visibleDragbar?: boolean;\n /**\n * @deprecated use `visibleDragbar`\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. `visibleDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visibleDragbar=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 /**\n * Use div to replace TextArea or re-render TextArea\n * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * re-render element\n */\n components?: {\n /** Use div to replace TextArea or re-render TextArea */\n textarea?: ITextAreaProps['renderTextarea'];\n /**\n * Override the default command element\n * _`toolbar`_ < _`command[].render`_\n */\n toolbar?: ICommand['render'];\n /** Custom markdown preview */\n preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\n };\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 /** Toolbar on bottom */\n toolbarBottom?: 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 enableScroll = true,\n visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.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 toolbarBottom = false,\n components,\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 components,\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<HTMLDivElement>(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 // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n useMemo(\n () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n [height, onHeightChange, state],\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 : 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 previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n let mdPreview = useMemo(\n () => (\n <div ref={previewRef} className={previewClassName}>\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n source={state.markdown || ''}\n />\n </div>\n ),\n [previewClassName, previewOptions, state.markdown],\n );\n const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n if (preview && React.isValidElement(preview)) {\n mdPreview = (\n <div className={previewClassName} ref={previewRef} onScroll={(e) => handleScroll(e, 'preview')}>\n {preview}\n </div>\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.height || '100%',\n }}\n >\n {!hideToolbar && !toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n )}\n <div className={`${prefixCls}-content`}>\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={components?.textarea || renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && mdPreview}\n </div>\n {visibleDragbar && !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 {!hideToolbar && toolbarBottom && (\n <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\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"
|
|
104
105
|
],
|
|
105
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;
|
|
106
|
+
"mappings": "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"
|
|
106
107
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.18.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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
|
|
2
|
-
import MarkdownPreview, { MarkdownPreviewProps
|
|
2
|
+
import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
|
|
3
3
|
import TextArea, { ITextAreaProps } from './components/TextArea';
|
|
4
4
|
import Toolbar from './components/Toolbar';
|
|
5
5
|
import DragBar from './components/DragBar';
|
|
@@ -96,6 +96,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
96
96
|
* _`toolbar`_ < _`command[].render`_
|
|
97
97
|
*/
|
|
98
98
|
toolbar?: ICommand['render'];
|
|
99
|
+
/** Custom markdown preview */
|
|
100
|
+
preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
|
|
99
101
|
};
|
|
100
102
|
/**
|
|
101
103
|
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
|
|
@@ -196,7 +198,7 @@ const InternalMDEditor = (
|
|
|
196
198
|
barPopup: {},
|
|
197
199
|
});
|
|
198
200
|
const container = useRef<HTMLDivElement>(null);
|
|
199
|
-
const previewRef = useRef<
|
|
201
|
+
const previewRef = useRef<HTMLDivElement>(null);
|
|
200
202
|
const enableScrollRef = useRef(enableScroll);
|
|
201
203
|
|
|
202
204
|
useImperativeHandle(ref, () => ({ ...state }));
|
|
@@ -271,7 +273,7 @@ const InternalMDEditor = (
|
|
|
271
273
|
const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
|
|
272
274
|
if (!enableScrollRef.current) return;
|
|
273
275
|
const textareaDom = textareaDomRef.current;
|
|
274
|
-
const previewDom = previewRef.current ? previewRef.current
|
|
276
|
+
const previewDom = previewRef.current ? previewRef.current : undefined;
|
|
275
277
|
if (!initScroll.current) {
|
|
276
278
|
active.current = type;
|
|
277
279
|
initScroll.current = true;
|
|
@@ -295,18 +297,28 @@ const InternalMDEditor = (
|
|
|
295
297
|
}
|
|
296
298
|
};
|
|
297
299
|
|
|
298
|
-
const
|
|
300
|
+
const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
|
|
301
|
+
let mdPreview = useMemo(
|
|
299
302
|
() => (
|
|
300
|
-
<
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
303
|
+
<div ref={previewRef} className={previewClassName}>
|
|
304
|
+
<MarkdownPreview
|
|
305
|
+
{...previewOptions}
|
|
306
|
+
onScroll={(e) => handleScroll(e, 'preview')}
|
|
307
|
+
source={state.markdown || ''}
|
|
308
|
+
/>
|
|
309
|
+
</div>
|
|
307
310
|
),
|
|
308
|
-
[
|
|
311
|
+
[previewClassName, previewOptions, state.markdown],
|
|
309
312
|
);
|
|
313
|
+
const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
|
|
314
|
+
if (preview && React.isValidElement(preview)) {
|
|
315
|
+
mdPreview = (
|
|
316
|
+
<div className={previewClassName} ref={previewRef} onScroll={(e) => handleScroll(e, 'preview')}>
|
|
317
|
+
{preview}
|
|
318
|
+
</div>
|
|
319
|
+
);
|
|
320
|
+
}
|
|
321
|
+
|
|
310
322
|
return (
|
|
311
323
|
<EditorContext.Provider value={{ ...state, dispatch }}>
|
|
312
324
|
<div
|