@uiw/react-md-editor 3.14.0 → 3.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -27
- package/dist/mdeditor.css +20 -11
- package/dist/mdeditor.js +773 -914
- package/dist/mdeditor.min.css +1 -1
- package/dist/mdeditor.min.js +1 -1
- package/esm/Editor.d.ts +4 -0
- package/esm/Editor.js +1 -1
- package/esm/Editor.js.map +3 -2
- package/esm/commands/bold.js +1 -1
- package/esm/commands/bold.js.map +2 -2
- package/esm/components/TextArea/Markdown.js +31 -24
- package/esm/components/TextArea/Markdown.js.map +12 -9
- package/esm/components/TextArea/index.js +3 -3
- package/esm/components/TextArea/index.js.map +4 -4
- package/esm/index.css +4 -0
- package/esm/index.less +6 -0
- package/lib/Context.js +3 -3
- package/lib/Context.js.map +1 -1
- package/lib/Editor.d.ts +4 -0
- package/lib/Editor.js +20 -20
- package/lib/Editor.js.map +3 -2
- package/lib/commands/bold.js +2 -2
- package/lib/commands/bold.js.map +1 -1
- package/lib/commands/code.js +1 -1
- package/lib/commands/fullscreen.js +1 -1
- package/lib/commands/group.js +4 -4
- package/lib/commands/group.js.map +1 -1
- package/lib/commands/hr.js +1 -1
- package/lib/commands/image.js +1 -1
- package/lib/commands/index.js +8 -8
- package/lib/commands/italic.js +1 -1
- package/lib/commands/link.js +1 -1
- package/lib/commands/list.js +1 -1
- package/lib/commands/preview.js +1 -1
- package/lib/commands/quote.js +1 -1
- package/lib/commands/strikeThrough.js +1 -1
- package/lib/commands/title.js +2 -2
- package/lib/commands/title.js.map +1 -1
- package/lib/commands/title1.js +1 -1
- package/lib/commands/title2.js +1 -1
- package/lib/commands/title3.js +1 -1
- package/lib/commands/title4.js +1 -1
- package/lib/commands/title5.js +1 -1
- package/lib/commands/title6.js +1 -1
- package/lib/components/DragBar/index.js +3 -3
- package/lib/components/TextArea/Markdown.js +39 -33
- package/lib/components/TextArea/Markdown.js.map +12 -9
- package/lib/components/TextArea/Textarea.js +10 -10
- package/lib/components/TextArea/Textarea.js.map +1 -1
- package/lib/components/TextArea/handleKeyDown.js +1 -1
- package/lib/components/TextArea/index.js +15 -15
- package/lib/components/TextArea/index.js.map +4 -4
- package/lib/components/TextArea/shortcuts.js +3 -3
- package/lib/components/TextArea/shortcuts.js.map +1 -1
- package/lib/components/Toolbar/Child.js +4 -4
- package/lib/components/Toolbar/Child.js.map +1 -1
- package/lib/components/Toolbar/index.js +11 -11
- package/lib/components/Toolbar/index.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/lib/index.less +6 -0
- package/lib/utils/InsertTextAtPosition.js +2 -2
- package/lib/utils/InsertTextAtPosition.js.map +1 -1
- package/markdown-editor.css +4 -0
- package/package.json +2 -60
- package/src/Editor.tsx +5 -1
- package/src/commands/bold.tsx +1 -1
- package/src/components/TextArea/Markdown.tsx +31 -24
- package/src/components/TextArea/index.tsx +1 -2
- package/src/index.less +6 -0
- package/LICENSE +0 -21
- package/src/tsconfig.json +0 -8
package/esm/Editor.d.ts
CHANGED
|
@@ -40,6 +40,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
40
40
|
* Show drag and drop tool. Set the height of the editor.
|
|
41
41
|
*/
|
|
42
42
|
visibleDragbar?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @deprecated use `visibleDragbar`
|
|
45
|
+
*/
|
|
46
|
+
visiableDragbar?: boolean;
|
|
43
47
|
/**
|
|
44
48
|
* Show markdown preview.
|
|
45
49
|
*/
|
package/esm/Editor.js
CHANGED
|
@@ -35,7 +35,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
35
35
|
height = 200,
|
|
36
36
|
toolbarHeight = 29,
|
|
37
37
|
enableScroll = true,
|
|
38
|
-
visibleDragbar = true,
|
|
38
|
+
visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
|
|
39
39
|
highlightEnable = true,
|
|
40
40
|
preview: previewType = 'live',
|
|
41
41
|
fullscreen = false,
|
package/esm/Editor.js.map
CHANGED
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"toolbarHeight",
|
|
36
36
|
"enableScroll",
|
|
37
37
|
"visibleDragbar",
|
|
38
|
+
"visiableDragbar",
|
|
38
39
|
"highlightEnable",
|
|
39
40
|
"preview",
|
|
40
41
|
"previewType",
|
|
@@ -103,7 +104,7 @@
|
|
|
103
104
|
"../src/Editor.tsx"
|
|
104
105
|
],
|
|
105
106
|
"sourcesContent": [
|
|
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 visibleDragbar?: 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 /** 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 /** 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 toolbarHeight = 29,\n enableScroll = true,\n visibleDragbar = 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 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 // 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\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 && !toolbarBottom && (\n <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n )}\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 {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} height={toolbarHeight} 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"
|
|
107
|
+
"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 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 /** 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 /** 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 toolbarHeight = 29,\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 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 // 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\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 && !toolbarBottom && (\n <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n )}\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 {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} height={toolbarHeight} 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"
|
|
107
108
|
],
|
|
108
|
-
"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;;;;
|
|
109
|
+
"mappings": "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"
|
|
109
110
|
}
|
package/esm/commands/bold.js
CHANGED
package/esm/commands/bold.js.map
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"../../src/commands/bold.tsx"
|
|
30
30
|
],
|
|
31
31
|
"sourcesContent": [
|
|
32
|
-
"import
|
|
32
|
+
"import React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n name: 'bold',\n keyCommand: 'bold',\n shortcuts: 'ctrlcmd+b',\n buttonProps: { 'aria-label': 'Add bold text', title: 'Add bold text' },\n icon: (\n <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n <path\n fill=\"currentColor\"\n d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n />\n </svg>\n ),\n execute: (state: TextState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // Replaces the current selection with the bold mark up\n const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n // Adjust the selection to not contain the **\n api.setSelectionRange({\n start: state2.selection.end - 2 - state1.selectedText.length,\n end: state2.selection.end - 2,\n });\n },\n};\n"
|
|
33
33
|
],
|
|
34
|
-
"mappings": "AAAA,
|
|
34
|
+
"mappings": "AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT,QAA2B,wBAA3B;;AAEA,OAAO,IAAMC,IAAc,GAAG;EAC5BC,IAAI,EAAE,MADsB;EAE5BC,UAAU,EAAE,MAFgB;EAG5BC,SAAS,EAAE,WAHiB;EAI5BC,WAAW,EAAE;IAAE,cAAc,eAAhB;IAAiCC,KAAK,EAAE;EAAxC,CAJe;EAK5BC,IAAI,eACF;IAAK,IAAI,EAAC,KAAV;IAAgB,KAAK,EAAC,IAAtB;IAA2B,MAAM,EAAC,IAAlC;IAAuC,OAAO,EAAC,aAA/C;IAAA,uBACE;MACE,IAAI,EAAC,cADP;MAEE,CAAC,EAAC;IAFJ;EADF,EAN0B;EAa5BC,OAAO,EAAE,CAACC,KAAD,EAAmBC,GAAnB,KAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAGX,UAAU,CAAC;MAAEY,IAAI,EAAEH,KAAK,CAACG,IAAd;MAAoBC,SAAS,EAAEJ,KAAK,CAACI;IAArC,CAAD,CAApC;IACA,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAJ,QAA0BH,MAAM,CAACI,YAAjC,QAAf,CALmD,CAMnD;;IACAR,GAAG,CAACK,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID;AAxB2B,CAAvB"
|
|
35
35
|
}
|
|
@@ -3,12 +3,30 @@ import { rehype } from 'rehype';
|
|
|
3
3
|
import rehypePrism from 'rehype-prism-plus';
|
|
4
4
|
import { EditorContext } from '../../Context';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
function html2Escape(sHtml) {
|
|
8
|
+
return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
|
|
9
|
+
return str.replace(/[<&"]/g, c => ({
|
|
10
|
+
'<': '<',
|
|
11
|
+
'>': '>',
|
|
12
|
+
'&': '&',
|
|
13
|
+
'"': '"'
|
|
14
|
+
})[c]);
|
|
15
|
+
}).replace(/[<&"]/g, c => ({
|
|
16
|
+
'<': '<',
|
|
17
|
+
'>': '>',
|
|
18
|
+
'&': '&',
|
|
19
|
+
'"': '"'
|
|
20
|
+
})[c]);
|
|
21
|
+
}
|
|
22
|
+
|
|
6
23
|
export default function Markdown(props) {
|
|
7
24
|
var {
|
|
8
25
|
prefixCls
|
|
9
26
|
} = props;
|
|
10
27
|
var {
|
|
11
28
|
markdown = '',
|
|
29
|
+
highlightEnable,
|
|
12
30
|
dispatch
|
|
13
31
|
} = useContext(EditorContext);
|
|
14
32
|
var preRef = /*#__PURE__*/React.createRef();
|
|
@@ -20,41 +38,30 @@ export default function Markdown(props) {
|
|
|
20
38
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
21
39
|
|
|
22
40
|
}, []);
|
|
23
|
-
|
|
24
|
-
function html2Escape(sHtml) {
|
|
25
|
-
return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
|
|
26
|
-
return str.replace(/[<&"]/g, c => ({
|
|
27
|
-
'<': '<',
|
|
28
|
-
'>': '>',
|
|
29
|
-
'&': '&',
|
|
30
|
-
'"': '"'
|
|
31
|
-
})[c]);
|
|
32
|
-
}).replace(/[<&"]/g, c => ({
|
|
33
|
-
'<': '<',
|
|
34
|
-
'>': '>',
|
|
35
|
-
'&': '&',
|
|
36
|
-
'"': '"'
|
|
37
|
-
})[c]);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
41
|
return useMemo(() => {
|
|
41
42
|
if (!markdown) {
|
|
42
43
|
return /*#__PURE__*/_jsx("pre", {
|
|
43
|
-
children: markdown || '',
|
|
44
44
|
ref: preRef,
|
|
45
45
|
className: prefixCls + "-text-pre wmde-markdown-color"
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(markdown) + "\n</code></pre>";
|
|
50
|
+
|
|
51
|
+
if (highlightEnable) {
|
|
52
|
+
try {
|
|
53
|
+
mdStr = rehype().data('settings', {
|
|
54
|
+
fragment: true
|
|
55
|
+
}).use(rehypePrism, {
|
|
56
|
+
ignoreMissing: false
|
|
57
|
+
}).processSync(mdStr).toString();
|
|
58
|
+
} catch (error) {}
|
|
59
|
+
}
|
|
60
|
+
|
|
54
61
|
return /*#__PURE__*/React.createElement('div', {
|
|
55
62
|
className: 'wmde-markdown-color',
|
|
56
63
|
dangerouslySetInnerHTML: {
|
|
57
|
-
__html:
|
|
64
|
+
__html: mdStr || ''
|
|
58
65
|
}
|
|
59
66
|
});
|
|
60
67
|
}, [markdown, preRef, prefixCls]);
|
|
@@ -8,36 +8,39 @@
|
|
|
8
8
|
"rehype",
|
|
9
9
|
"rehypePrism",
|
|
10
10
|
"EditorContext",
|
|
11
|
+
"html2Escape",
|
|
12
|
+
"sHtml",
|
|
13
|
+
"replace",
|
|
14
|
+
"str",
|
|
15
|
+
"c",
|
|
11
16
|
"Markdown",
|
|
12
17
|
"props",
|
|
13
18
|
"prefixCls",
|
|
14
19
|
"markdown",
|
|
20
|
+
"highlightEnable",
|
|
15
21
|
"dispatch",
|
|
16
22
|
"preRef",
|
|
17
23
|
"createRef",
|
|
18
24
|
"current",
|
|
19
25
|
"textareaPre",
|
|
20
|
-
"
|
|
21
|
-
"sHtml",
|
|
22
|
-
"replace",
|
|
23
|
-
"str",
|
|
24
|
-
"c",
|
|
26
|
+
"mdStr",
|
|
25
27
|
"data",
|
|
26
28
|
"fragment",
|
|
27
29
|
"use",
|
|
28
30
|
"ignoreMissing",
|
|
29
31
|
"processSync",
|
|
32
|
+
"toString",
|
|
33
|
+
"error",
|
|
30
34
|
"createElement",
|
|
31
35
|
"className",
|
|
32
36
|
"dangerouslySetInnerHTML",
|
|
33
|
-
"__html"
|
|
34
|
-
"value"
|
|
37
|
+
"__html"
|
|
35
38
|
],
|
|
36
39
|
"sources": [
|
|
37
40
|
"../../../src/components/TextArea/Markdown.tsx"
|
|
38
41
|
],
|
|
39
42
|
"sourcesContent": [
|
|
40
|
-
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\
|
|
43
|
+
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nfunction html2Escape(sHtml: string) {\n return sHtml\n .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n return str.replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '<', '>': '>', '&': '&', '\"': '"' } as Record<string, string>)[c]),\n );\n })\n .replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '<', '>': '>', '&': '&', '\"': '"' } as Record<string, string>)[c]),\n );\n}\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);\n const preRef = React.createRef<HTMLPreElement>();\n useEffect(() => {\n if (preRef.current && dispatch) {\n dispatch({ textareaPre: preRef.current });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return useMemo(() => {\n if (!markdown) {\n return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n }\n let mdStr = `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n markdown,\n )}\\n</code></pre>`;\n\n if (highlightEnable) {\n try {\n mdStr = rehype()\n .data('settings', { fragment: true })\n .use(rehypePrism, { ignoreMissing: false })\n .processSync(mdStr)\n .toString();\n } catch (error) {}\n }\n\n return React.createElement('div', {\n className: 'wmde-markdown-color',\n dangerouslySetInnerHTML: { __html: mdStr || '' },\n });\n }, [markdown, preRef, prefixCls]);\n}\n"
|
|
41
44
|
],
|
|
42
|
-
"mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB;AACA,OAAOC,WAAP,MAAwB,mBAAxB;AAEA,SAASC,aAAT,QAA8B,eAA9B
|
|
45
|
+
"mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB;AACA,OAAOC,WAAP,MAAwB,mBAAxB;AAEA,SAASC,aAAT,QAA8B,eAA9B;;;AAEA,SAASC,WAAT,CAAqBC,KAArB,EAAoC;EAClC,OAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC4DC,GAAD,IAAiB;IAC/E,OAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEJE,CAAD,IAAgB,CAAC;MAAE,KAAK,MAAP;MAAe,KAAK,MAApB;MAA4B,KAAK,OAAjC;MAA0C,KAAK;IAA/C,CAAD,EAAsFA,CAAtF,CAFX,CAAP;EAID,CANI,EAOJF,OAPI,CAQH,QARG,EASFE,CAAD,IAAgB,CAAC;IAAE,KAAK,MAAP;IAAe,KAAK,MAApB;IAA4B,KAAK,OAAjC;IAA0C,KAAK;EAA/C,CAAD,EAAsFA,CAAtF,CATb,CAAP;AAWD;;AAID,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACrD,IAAM;IAAEC;EAAF,IAAgBD,KAAtB;EACA,IAAM;IAAEE,QAAQ,GAAG,EAAb;IAAiBC,eAAjB;IAAkCC;EAAlC,IAA+ChB,UAAU,CAACK,aAAD,CAA/D;EACA,IAAMY,MAAM,gBAAGlB,KAAK,CAACmB,SAAN,EAAf;EACAjB,SAAS,CAAC,MAAM;IACd,IAAIgB,MAAM,CAACE,OAAP,IAAkBH,QAAtB,EAAgC;MAC9BA,QAAQ,CAAC;QAAEI,WAAW,EAAEH,MAAM,CAACE;MAAtB,CAAD,CAAR;IACD,CAHa,CAId;;EACD,CALQ,EAKN,EALM,CAAT;EAOA,OAAOjB,OAAO,CAAC,MAAM;IACnB,IAAI,CAACY,QAAL,EAAe;MACb,oBAAO;QAAK,GAAG,EAAEG,MAAV;QAAkB,SAAS,EAAKJ,SAAL;MAA3B,EAAP;IACD;;IACD,IAAIQ,KAAK,uCAAoCR,SAApC,0EAA+GP,WAAW,CACjIQ,QADiI,CAA1H,oBAAT;;IAIA,IAAIC,eAAJ,EAAqB;MACnB,IAAI;QACFM,KAAK,GAAGlB,MAAM,GACXmB,IADK,CACA,UADA,EACY;UAAEC,QAAQ,EAAE;QAAZ,CADZ,EAELC,GAFK,CAEDpB,WAFC,EAEY;UAAEqB,aAAa,EAAE;QAAjB,CAFZ,EAGLC,WAHK,CAGOL,KAHP,EAILM,QAJK,EAAR;MAKD,CAND,CAME,OAAOC,KAAP,EAAc,CAAE;IACnB;;IAED,oBAAO7B,KAAK,CAAC8B,aAAN,CAAoB,KAApB,EAA2B;MAChCC,SAAS,EAAE,qBADqB;MAEhCC,uBAAuB,EAAE;QAAEC,MAAM,EAAEX,KAAK,IAAI;MAAnB;IAFO,CAA3B,CAAP;EAID,CAtBa,EAsBX,CAACP,QAAD,EAAWG,MAAX,EAAmBJ,SAAnB,CAtBW,CAAd;AAuBD"
|
|
43
46
|
}
|
|
@@ -55,10 +55,10 @@ export default function TextArea(props) {
|
|
|
55
55
|
});
|
|
56
56
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
57
57
|
|
|
58
|
-
}, []);
|
|
59
|
-
|
|
58
|
+
}, []);
|
|
60
59
|
var textStyle = highlightEnable ? {} : {
|
|
61
|
-
|
|
60
|
+
WebkitTextFillColor: 'initial',
|
|
61
|
+
overflow: 'auto'
|
|
62
62
|
};
|
|
63
63
|
return /*#__PURE__*/_jsx("div", {
|
|
64
64
|
ref: warp,
|
|
@@ -35,6 +35,8 @@
|
|
|
35
35
|
"commandOrchestrator",
|
|
36
36
|
"textarea",
|
|
37
37
|
"textStyle",
|
|
38
|
+
"WebkitTextFillColor",
|
|
39
|
+
"overflow",
|
|
38
40
|
"cloneElement",
|
|
39
41
|
"value",
|
|
40
42
|
"autoComplete",
|
|
@@ -42,8 +44,6 @@
|
|
|
42
44
|
"spellCheck",
|
|
43
45
|
"autoCapitalize",
|
|
44
46
|
"style",
|
|
45
|
-
"WebkitTextFillColor",
|
|
46
|
-
"overflow",
|
|
47
47
|
"onChange",
|
|
48
48
|
"ref"
|
|
49
49
|
],
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"../../../src/components/TextArea/index.tsx"
|
|
52
52
|
],
|
|
53
53
|
"sourcesContent": [
|
|
54
|
-
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n
|
|
54
|
+
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const textStyle: React.CSSProperties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };\n\n return (\n <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n <div className={`${prefixCls}-text`}>\n {renderTextarea ? (\n React.cloneElement(\n renderTextarea(\n {\n ...otherProps,\n value: markdown,\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n autoCapitalize: 'off',\n className: `${prefixCls}-text-input`,\n style: {\n WebkitTextFillColor: 'inherit',\n overflow: 'auto',\n },\n },\n {\n dispatch,\n onChange: otherProps.onChange,\n shortcuts,\n useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n },\n ),\n {\n ref: textRef,\n },\n )\n ) : (\n <Fragment>\n {highlightEnable && <Markdown prefixCls={prefixCls} />}\n <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />\n </Fragment>\n )}\n </div>\n </div>\n );\n}\n"
|
|
55
55
|
],
|
|
56
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,EAAqCC,UAArC,QAAuD,OAAvD;AACA,SAASC,aAAT,QAAiE,eAAjE;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAwC,YAAxC;AAEA,SAASC,2BAAT,QAAsD,gBAAtD;AACA;;;AAmCA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAyC;EACtD,WAA0EA,KAAK,IAAI,EAAnF;EAAA,IAAM;IAAEC,SAAF;IAAaC,SAAb;IAAwBC,QAAxB;IAAkCC;EAAlC,CAAN;EAAA,IAA2DC,UAA3D;;EACA,IAAM;IAAEC,QAAF;IAAYC,SAAZ;IAAuBC,QAAvB;IAAiCC,eAAjC;IAAkDC,aAAlD;IAAiEC;EAAjE,IAA8ElB,UAAU,CAACC,aAAD,CAA9F;EACA,IAAMkB,OAAO,GAAGtB,KAAK,CAACuB,MAAN,CAAkC,IAAlC,CAAhB;EACA,IAAMC,UAAU,GAAGxB,KAAK,CAACuB,MAAN,EAAnB;EACA,IAAME,IAAI,gBAAGzB,KAAK,CAAC0B,SAAN,EAAb;EACAzB,SAAS,CAAC,MAAM;IACd,IAAM0B,KAAmB,GAAG,EAA5B;;IACA,IAAIF,IAAI,CAACG,OAAT,EAAkB;MAChBD,KAAK,CAACE,YAAN,GAAqBJ,IAAI,CAACG,OAAL,IAAgBE,SAArC;MACAL,IAAI,CAACG,OAAL,CAAaX,SAAb,GAAyBA,SAAS,IAAI,CAAtC;IACD;;IACD,IAAII,QAAJ,EAAc;MACZA,QAAQ,cAAMM,KAAN,EAAR;IACD,CARa,CASd;;EACD,CAVQ,EAUN,EAVM,CAAT;EAYA1B,SAAS,CAAC,MAAM;IACd,IAAIqB,OAAO,CAACM,OAAR,IAAmBP,QAAvB,EAAiC;MAC/B,IAAMU,oBAAmB,GAAG,IAAIvB,2BAAJ,CAAgCc,OAAO,CAACM,OAAxC,CAA5B;;MACAJ,UAAU,CAACI,OAAX,GAAqBG,oBAArB;MACAV,QAAQ,CAAC;QAAEW,QAAQ,EAAEV,OAAO,CAACM,OAApB;QAA6BG,mBAAmB,EAAnBA;MAA7B,CAAD,CAAR;IACD,CALa,CAMd;;EACD,CAPQ,EAON,EAPM,CAAT,
|
|
56
|
+
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,EAAqCC,UAArC,QAAuD,OAAvD;AACA,SAASC,aAAT,QAAiE,eAAjE;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAwC,YAAxC;AAEA,SAASC,2BAAT,QAAsD,gBAAtD;AACA;;;AAmCA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAyC;EACtD,WAA0EA,KAAK,IAAI,EAAnF;EAAA,IAAM;IAAEC,SAAF;IAAaC,SAAb;IAAwBC,QAAxB;IAAkCC;EAAlC,CAAN;EAAA,IAA2DC,UAA3D;;EACA,IAAM;IAAEC,QAAF;IAAYC,SAAZ;IAAuBC,QAAvB;IAAiCC,eAAjC;IAAkDC,aAAlD;IAAiEC;EAAjE,IAA8ElB,UAAU,CAACC,aAAD,CAA9F;EACA,IAAMkB,OAAO,GAAGtB,KAAK,CAACuB,MAAN,CAAkC,IAAlC,CAAhB;EACA,IAAMC,UAAU,GAAGxB,KAAK,CAACuB,MAAN,EAAnB;EACA,IAAME,IAAI,gBAAGzB,KAAK,CAAC0B,SAAN,EAAb;EACAzB,SAAS,CAAC,MAAM;IACd,IAAM0B,KAAmB,GAAG,EAA5B;;IACA,IAAIF,IAAI,CAACG,OAAT,EAAkB;MAChBD,KAAK,CAACE,YAAN,GAAqBJ,IAAI,CAACG,OAAL,IAAgBE,SAArC;MACAL,IAAI,CAACG,OAAL,CAAaX,SAAb,GAAyBA,SAAS,IAAI,CAAtC;IACD;;IACD,IAAII,QAAJ,EAAc;MACZA,QAAQ,cAAMM,KAAN,EAAR;IACD,CARa,CASd;;EACD,CAVQ,EAUN,EAVM,CAAT;EAYA1B,SAAS,CAAC,MAAM;IACd,IAAIqB,OAAO,CAACM,OAAR,IAAmBP,QAAvB,EAAiC;MAC/B,IAAMU,oBAAmB,GAAG,IAAIvB,2BAAJ,CAAgCc,OAAO,CAACM,OAAxC,CAA5B;;MACAJ,UAAU,CAACI,OAAX,GAAqBG,oBAArB;MACAV,QAAQ,CAAC;QAAEW,QAAQ,EAAEV,OAAO,CAACM,OAApB;QAA6BG,mBAAmB,EAAnBA;MAA7B,CAAD,CAAR;IACD,CALa,CAMd;;EACD,CAPQ,EAON,EAPM,CAAT;EASA,IAAME,SAA8B,GAAGd,eAAe,GAAG,EAAH,GAAQ;IAAEe,mBAAmB,EAAE,SAAvB;IAAkCC,QAAQ,EAAE;EAA5C,CAA9D;EAEA,oBACE;IAAK,GAAG,EAAEV,IAAV;IAAgB,SAAS,EAAKd,SAAL,eAAuBC,SAAS,IAAI,EAApC,CAAzB;IAAmE,QAAQ,EAAEC,QAA7E;IAAA,uBACE;MAAK,SAAS,EAAKF,SAAL,UAAd;MAAA,UACGG,cAAc,gBACbd,KAAK,CAACoC,YAAN,CACEtB,cAAc,cAEPC,UAFO;QAGVsB,KAAK,EAAErB,QAHG;QAIVsB,YAAY,EAAE,KAJJ;QAKVC,WAAW,EAAE,KALH;QAMVC,UAAU,EAAE,OANF;QAOVC,cAAc,EAAE,KAPN;QAQV7B,SAAS,EAAKD,SAAL,gBARC;QASV+B,KAAK,EAAE;UACLR,mBAAmB,EAAE,SADhB;UAELC,QAAQ,EAAE;QAFL;MATG,IAcZ;QACEd,QADF;QAEEsB,QAAQ,EAAE5B,UAAU,CAAC4B,QAFvB;QAGEtC,SAHF;QAIEF,UAAU,EAAE;UAAEe,QAAF;UAAYE,aAAZ;UAA2BW,mBAAmB,EAAEP,UAAU,CAACI;QAA3D;MAJd,CAdY,CADhB,EAsBE;QACEgB,GAAG,EAAEtB;MADP,CAtBF,CADa,gBA4Bb,MAAC,QAAD;QAAA,WACGH,eAAe,iBAAI,KAAC,QAAD;UAAU,SAAS,EAAER;QAArB,EADtB,eAEE,KAAC,QAAD;UAAU,SAAS,EAAEA;QAArB,GAAoCI,UAApC;UAAgD,KAAK,EAAEkB;QAAvD,GAFF;MAAA;IA7BJ;EADF,EADF;AAuCD"
|
|
57
57
|
}
|
package/esm/index.css
CHANGED
package/esm/index.less
CHANGED
|
@@ -22,6 +22,10 @@
|
|
|
22
22
|
width: 50%;
|
|
23
23
|
height: 100%;
|
|
24
24
|
}
|
|
25
|
+
&-text-pre > code {
|
|
26
|
+
word-break: break-word !important;
|
|
27
|
+
white-space: pre-wrap !important;
|
|
28
|
+
}
|
|
25
29
|
&-preview {
|
|
26
30
|
width: 50%;
|
|
27
31
|
box-sizing: border-box;
|
|
@@ -35,6 +39,8 @@
|
|
|
35
39
|
border-radius: 0 0 5px 0;
|
|
36
40
|
display: flex;
|
|
37
41
|
flex-direction: column;
|
|
42
|
+
// word-break: break-word !important;
|
|
43
|
+
// white-space: pre-wrap !important;
|
|
38
44
|
.anchor {
|
|
39
45
|
display: none;
|
|
40
46
|
}
|
package/lib/Context.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -13,10 +13,10 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
|
|
|
13
13
|
var _react = _interopRequireDefault(require("react"));
|
|
14
14
|
|
|
15
15
|
function reducer(state, action) {
|
|
16
|
-
return (0, _objectSpread2
|
|
16
|
+
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
var EditorContext = /*#__PURE__*/_react
|
|
19
|
+
var EditorContext = /*#__PURE__*/_react["default"].createContext({
|
|
20
20
|
markdown: ''
|
|
21
21
|
});
|
|
22
22
|
|
package/lib/Context.js.map
CHANGED
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
"sourcesContent": [
|
|
16
16
|
"import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport type ContextStore = {\n commands?: ICommand<string>[];\n extraCommands?: ICommand<string>[];\n markdown?: string;\n preview?: PreviewType;\n height?: number;\n fullscreen?: boolean;\n highlightEnable?: boolean;\n autoFocus?: boolean;\n textarea?: HTMLTextAreaElement;\n commandOrchestrator?: TextAreaCommandOrchestrator;\n textareaWarp?: HTMLDivElement;\n textareaPre?: HTMLPreElement;\n container?: HTMLDivElement | null;\n dispatch?: React.Dispatch<ContextStore>;\n barPopup?: Record<string, boolean>;\n scrollTop?: number;\n scrollTopPreview?: number;\n tabSize?: number;\n defaultTabEnable?: boolean;\n};\n\nexport type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;\n\nexport function reducer(state: ContextStore, action: ContextStore) {\n return { ...state, ...action };\n}\n\nexport const EditorContext = React.createContext<ContextStore>({ markdown: '' });\n"
|
|
17
17
|
],
|
|
18
|
-
"mappings": ";;;;;;;;;;;;AAAA;;AA6BO,SAASA,OAAT,CAAiBC,KAAjB,EAAsCC,MAAtC,EAA4D;EACjE,
|
|
18
|
+
"mappings": ";;;;;;;;;;;;AAAA;;AA6BO,SAASA,OAAT,CAAiBC,KAAjB,EAAsCC,MAAtC,EAA4D;EACjE,yEAAYD,KAAZ,GAAsBC,MAAtB;AACD;;AAEM,IAAMC,aAAa,gBAAGC,iBAAA,CAAMC,aAAN,CAAkC;EAAEC,QAAQ,EAAE;AAAZ,CAAlC,CAAtB"
|
|
19
19
|
}
|
package/lib/Editor.d.ts
CHANGED
|
@@ -40,6 +40,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
40
40
|
* Show drag and drop tool. Set the height of the editor.
|
|
41
41
|
*/
|
|
42
42
|
visibleDragbar?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @deprecated use `visibleDragbar`
|
|
45
|
+
*/
|
|
46
|
+
visiableDragbar?: boolean;
|
|
43
47
|
/**
|
|
44
48
|
* Show markdown preview.
|
|
45
49
|
*/
|
package/lib/Editor.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
4
|
|
|
5
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
6
6
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports
|
|
10
|
+
exports["default"] = void 0;
|
|
11
11
|
|
|
12
12
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
13
13
|
|
|
@@ -59,7 +59,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
59
59
|
_ref$enableScroll = _ref.enableScroll,
|
|
60
60
|
enableScroll = _ref$enableScroll === void 0 ? true : _ref$enableScroll,
|
|
61
61
|
_ref$visibleDragbar = _ref.visibleDragbar,
|
|
62
|
-
visibleDragbar = _ref$visibleDragbar === void 0 ? true : _ref$visibleDragbar,
|
|
62
|
+
visibleDragbar = _ref$visibleDragbar === void 0 ? typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true : _ref$visibleDragbar,
|
|
63
63
|
_ref$highlightEnable = _ref.highlightEnable,
|
|
64
64
|
highlightEnable = _ref$highlightEnable === void 0 ? true : _ref$highlightEnable,
|
|
65
65
|
_ref$preview = _ref.preview,
|
|
@@ -86,7 +86,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
86
86
|
_ref$toolbarBottom = _ref.toolbarBottom,
|
|
87
87
|
toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
|
|
88
88
|
renderTextarea = _ref.renderTextarea,
|
|
89
|
-
other = (0, _objectWithoutProperties2
|
|
89
|
+
other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
90
90
|
|
|
91
91
|
var cmds = commands.map(function (item) {
|
|
92
92
|
return commandsFilter ? commandsFilter(item, false) : item;
|
|
@@ -109,7 +109,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
109
109
|
fullscreen: fullscreen,
|
|
110
110
|
barPopup: {}
|
|
111
111
|
}),
|
|
112
|
-
_useReducer2 = (0, _slicedToArray2
|
|
112
|
+
_useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
|
|
113
113
|
state = _useReducer2[0],
|
|
114
114
|
dispatch = _useReducer2[1];
|
|
115
115
|
|
|
@@ -117,7 +117,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
117
117
|
var previewRef = (0, _react.useRef)(null);
|
|
118
118
|
var enableScrollRef = (0, _react.useRef)(enableScroll);
|
|
119
119
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
120
|
-
return (0, _objectSpread2
|
|
120
|
+
return (0, _objectSpread2["default"])({}, state);
|
|
121
121
|
});
|
|
122
122
|
(0, _react.useMemo)(function () {
|
|
123
123
|
return enableScrollRef.current = enableScroll;
|
|
@@ -133,7 +133,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
133
133
|
stateInit.barPopup = {};
|
|
134
134
|
|
|
135
135
|
if (dispatch) {
|
|
136
|
-
dispatch((0, _objectSpread2
|
|
136
|
+
dispatch((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), stateInit));
|
|
137
137
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
138
138
|
|
|
139
139
|
}, []);
|
|
@@ -234,7 +234,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
234
234
|
};
|
|
235
235
|
|
|
236
236
|
var mdPreview = (0, _react.useMemo)(function () {
|
|
237
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview
|
|
237
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
|
|
238
238
|
onScroll: function onScroll(e) {
|
|
239
239
|
return handleScroll(e, 'preview');
|
|
240
240
|
},
|
|
@@ -244,22 +244,22 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
244
244
|
}));
|
|
245
245
|
}, [prefixCls, previewOptions, state.markdown]);
|
|
246
246
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
|
|
247
|
-
value: (0, _objectSpread2
|
|
247
|
+
value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
|
|
248
248
|
dispatch: dispatch
|
|
249
249
|
}),
|
|
250
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2
|
|
250
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
251
251
|
ref: container,
|
|
252
252
|
className: cls
|
|
253
253
|
}, other), {}, {
|
|
254
254
|
onClick: function onClick() {
|
|
255
255
|
dispatch({
|
|
256
|
-
barPopup: (0, _objectSpread2
|
|
256
|
+
barPopup: (0, _objectSpread2["default"])({}, setGroupPopFalse(state.barPopup))
|
|
257
257
|
});
|
|
258
258
|
},
|
|
259
|
-
style: (0, _objectSpread2
|
|
259
|
+
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other.style), {}, {
|
|
260
260
|
height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height
|
|
261
261
|
}),
|
|
262
|
-
children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar
|
|
262
|
+
children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
|
|
263
263
|
prefixCls: prefixCls,
|
|
264
264
|
height: toolbarHeight,
|
|
265
265
|
overflow: overflow,
|
|
@@ -269,7 +269,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
269
269
|
style: {
|
|
270
270
|
height: state.fullscreen ? "calc(100% - ".concat(toolbarHeight, "px)") : Number(state.height) - toolbarHeight
|
|
271
271
|
},
|
|
272
|
-
children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea
|
|
272
|
+
children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
273
273
|
className: "".concat(prefixCls, "-input"),
|
|
274
274
|
prefixCls: prefixCls,
|
|
275
275
|
autoFocus: autoFocus
|
|
@@ -286,7 +286,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
286
286
|
return handleScroll(e, 'text');
|
|
287
287
|
}
|
|
288
288
|
})), /(live|preview)/.test(state.preview || '') && mdPreview]
|
|
289
|
-
}), visibleDragbar && !state.fullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragBar
|
|
289
|
+
}), visibleDragbar && !state.fullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragBar["default"], {
|
|
290
290
|
prefixCls: prefixCls,
|
|
291
291
|
height: state.height,
|
|
292
292
|
maxHeight: maxHeight,
|
|
@@ -296,7 +296,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
296
296
|
height: newHeight
|
|
297
297
|
});
|
|
298
298
|
}
|
|
299
|
-
}), !hideToolbar && toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar
|
|
299
|
+
}), !hideToolbar && toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
|
|
300
300
|
prefixCls: prefixCls,
|
|
301
301
|
height: toolbarHeight,
|
|
302
302
|
overflow: overflow,
|
|
@@ -306,10 +306,10 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
306
306
|
});
|
|
307
307
|
};
|
|
308
308
|
|
|
309
|
-
var mdEditor = /*#__PURE__*/_react
|
|
309
|
+
var mdEditor = /*#__PURE__*/_react["default"].forwardRef(InternalMDEditor);
|
|
310
310
|
|
|
311
|
-
mdEditor.Markdown = _reactMarkdownPreview
|
|
311
|
+
mdEditor.Markdown = _reactMarkdownPreview["default"];
|
|
312
312
|
var _default = mdEditor;
|
|
313
|
-
exports
|
|
313
|
+
exports["default"] = _default;
|
|
314
314
|
module.exports = exports.default;
|
|
315
315
|
//# sourceMappingURL=Editor.js.map
|