@uiw/react-md-editor 3.10.0 → 3.11.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 +35 -9
- package/dist/mdeditor.css +959 -321
- package/dist/mdeditor.js +43808 -57874
- package/dist/mdeditor.min.css +1 -1
- package/dist/mdeditor.min.js +1 -1
- package/esm/Editor.js +1 -1
- package/esm/Editor.js.map +2 -2
- package/esm/components/TextArea/Markdown.js +7 -9
- package/esm/components/TextArea/Markdown.js.map +2 -3
- package/esm/components/TextArea/index.css +17 -25
- package/esm/components/TextArea/index.js +10 -3
- package/esm/components/TextArea/index.js.map +4 -2
- package/esm/components/TextArea/index.less +17 -27
- package/esm/components/Toolbar/Child.css +2 -2
- package/esm/components/Toolbar/Child.less +3 -2
- package/esm/components/Toolbar/index.css +12 -12
- package/esm/components/Toolbar/index.less +12 -12
- package/esm/index.css +5 -5
- package/esm/index.less +6 -5
- package/lib/Editor.js +1 -1
- package/lib/Editor.js.map +2 -2
- package/lib/components/TextArea/Markdown.js +7 -9
- package/lib/components/TextArea/Markdown.js.map +2 -3
- package/lib/components/TextArea/index.js +11 -4
- package/lib/components/TextArea/index.js.map +4 -2
- package/lib/components/TextArea/index.less +17 -27
- package/lib/components/Toolbar/Child.less +3 -2
- package/lib/components/Toolbar/index.less +12 -12
- package/lib/index.less +6 -5
- package/markdown-editor.css +36 -44
- package/package.json +4 -3
- package/src/Editor.tsx +1 -0
- package/src/__test__/editor.test.tsx +1 -1
- package/src/components/TextArea/Markdown.tsx +7 -8
- package/src/components/TextArea/index.less +17 -27
- package/src/components/TextArea/index.tsx +6 -3
- package/src/components/Toolbar/Child.less +3 -2
- package/src/components/Toolbar/index.less +12 -12
- package/src/index.less +6 -5
package/esm/Editor.js
CHANGED
|
@@ -89,7 +89,7 @@ var InternalMDEditor = (props, ref) => {
|
|
|
89
89
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
90
90
|
|
|
91
91
|
}, []);
|
|
92
|
-
var cls = [className, prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
|
|
92
|
+
var cls = [className, 'wmde-markdown-var', prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
|
|
93
93
|
useMemo(() => propsValue !== state.markdown && dispatch({
|
|
94
94
|
markdown: propsValue || ''
|
|
95
95
|
}), [propsValue, state.markdown]); // eslint-disable-next-line react-hooks/exhaustive-deps
|
package/esm/Editor.js.map
CHANGED
|
@@ -100,8 +100,8 @@
|
|
|
100
100
|
"forwardRef",
|
|
101
101
|
"Markdown"
|
|
102
102
|
],
|
|
103
|
-
"mappings": "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
|
|
103
|
+
"mappings": "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",
|
|
104
104
|
"sourcesContent": [
|
|
105
|
-
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n prefixCls?: string;\n className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n /**\n * The Markdown value.\n */\n value?: string;\n /**\n * Event handler for the `onChange` event.\n */\n onChange?: (value?: string) => void;\n /**\n * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n * it will be set to true when either the source `textarea` is focused,\n * or it has an `autofocus` attribute and no other element is focused.\n */\n autoFocus?: ITextAreaProps['autoFocus'];\n /**\n * The height of the editor.\n */\n height?: number;\n /**\n * Custom toolbar heigth\n * @default 29px\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visiableDragbar?: boolean;\n /**\n * Show markdown preview.\n */\n preview?: PreviewType;\n /**\n * Full screen display editor.\n */\n fullscreen?: boolean;\n /**\n * Disable `fullscreen` setting body styles\n */\n overflow?: boolean;\n /**\n * Maximum drag height. `visiableDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visiableDragbar=true`\n */\n minHeight?: number;\n /**\n * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n */\n previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n /**\n * Set the `textarea` related props.\n */\n textareaProps?: ITextAreaProps;\n /** Use div to replace TextArea or re-render TextArea */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n * @default true\n */\n highlightEnable?: boolean;\n /**\n * The number of characters to insert when pressing tab key.\n * Default `2` spaces.\n */\n tabSize?: number;\n /**\n * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n */\n defaultTabEnable?: boolean;\n /**\n * You can create your own commands or reuse existing commands.\n */\n commands?: ICommand[];\n /**\n * Filter or modify your commands.\n * https://github.com/uiwjs/react-md-editor/issues/296\n */\n commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n /**\n * You can create your own commands or reuse existing commands.\n */\n extraCommands?: ICommand[];\n /**\n * Hide the tool bar\n */\n hideToolbar?: boolean;\n /** Whether to enable scrolling */\n enableScroll?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n Object.keys(data).forEach((keyname) => {\n data[keyname] = false;\n });\n return data;\n}\n\nconst InternalMDEditor = (\n props: MDEditorProps,\n ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n const {\n prefixCls = 'w-md-editor',\n className,\n value: propsValue,\n commands = getCommands(),\n commandsFilter,\n extraCommands = getExtraCommands(),\n height = 200,\n toolbarHeight = 29,\n enableScroll = true,\n visiableDragbar = true,\n highlightEnable = true,\n preview: previewType = 'live',\n fullscreen = false,\n overflow = true,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n defaultTabEnable = false,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n const cmds = commands\n .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n .filter(Boolean) as ICommand[];\n const extraCmds = extraCommands\n .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n .filter(Boolean) as ICommand[];\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n defaultTabEnable,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands: cmds,\n extraCommands: extraCmds,\n fullscreen,\n barPopup: {},\n });\n const container = useRef<HTMLDivElement>(null);\n const previewRef = useRef<MarkdownPreviewRef>(null);\n const enableScrollRef = useRef(enableScroll);\n\n useImperativeHandle(ref, () => ({ ...state }));\n useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n useEffect(() => {\n const stateInit: ContextStore = {};\n if (container.current) {\n stateInit.container = container.current || undefined;\n }\n stateInit.markdown = propsValue || '';\n stateInit.barPopup = {};\n if (dispatch) {\n dispatch({ ...state, ...stateInit });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const cls = [\n className,\n prefixCls,\n state.preview ? `${prefixCls}-show-${state.preview}` : null,\n state.fullscreen ? `${prefixCls}-fullscreen` : null,\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n\n useMemo(\n () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n [propsValue, state.markdown],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n useMemo(\n () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [highlightEnable],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n useMemo(\n () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [fullscreen],\n );\n\n const textareaDomRef = useRef<HTMLDivElement>();\n const active = useRef<'text' | 'preview'>('preview');\n const initScroll = useRef(false);\n\n useMemo(() => {\n textareaDomRef.current = state.textareaWarp;\n if (state.textareaWarp) {\n state.textareaWarp.addEventListener('mouseover', () => {\n active.current = 'text';\n });\n state.textareaWarp.addEventListener('mouseleave', () => {\n active.current = 'preview';\n });\n }\n }, [state.textareaWarp]);\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n if (!enableScrollRef.current) return;\n const textareaDom = textareaDomRef.current;\n const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n if (!initScroll.current) {\n active.current = type;\n initScroll.current = true;\n }\n if (textareaDom && previewDom) {\n const scale =\n (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n if (e.target === textareaDom && active.current === 'text') {\n previewDom.scrollTop = textareaDom.scrollTop / scale;\n }\n if (e.target === previewDom && active.current === 'preview') {\n textareaDom.scrollTop = previewDom.scrollTop * scale;\n }\n let scrollTop = 0;\n if (active.current === 'text') {\n scrollTop = textareaDom.scrollTop || 0;\n } else if (active.current === 'preview') {\n scrollTop = previewDom.scrollTop || 0;\n }\n dispatch({ scrollTop });\n }\n };\n\n const mdPreview = useMemo(\n () => (\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n ref={previewRef}\n source={state.markdown || ''}\n className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n />\n ),\n [prefixCls, previewOptions, state.markdown],\n );\n\n return (\n <EditorContext.Provider value={{ ...state, dispatch }}>\n <div\n ref={container}\n className={cls}\n {...other}\n onClick={() => {\n dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n }}\n style={{\n ...other.style,\n height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n }}\n >\n {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} />}\n <div\n className={`${prefixCls}-content`}\n style={{\n height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n }}\n >\n {/(edit|live)/.test(state.preview || '') && (\n <TextArea\n className={`${prefixCls}-input`}\n prefixCls={prefixCls}\n autoFocus={autoFocus}\n {...textareaProps}\n onChange={(evn) => {\n onChange && onChange(evn.target.value);\n if (textareaProps && textareaProps.onChange) {\n textareaProps.onChange(evn);\n }\n }}\n renderTextarea={renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && mdPreview}\n </div>\n {visiableDragbar && !state.fullscreen && (\n <DragBar\n prefixCls={prefixCls}\n height={state.height as number}\n maxHeight={maxHeight!}\n minHeight={minHeight!}\n onChange={(newHeight) => {\n dispatch({ height: newHeight });\n }}\n />\n )}\n </div>\n </EditorContext.Provider>\n );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
|
|
105
|
+
"import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n prefixCls?: string;\n className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n /**\n * The Markdown value.\n */\n value?: string;\n /**\n * Event handler for the `onChange` event.\n */\n onChange?: (value?: string) => void;\n /**\n * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n * it will be set to true when either the source `textarea` is focused,\n * or it has an `autofocus` attribute and no other element is focused.\n */\n autoFocus?: ITextAreaProps['autoFocus'];\n /**\n * The height of the editor.\n */\n height?: number;\n /**\n * Custom toolbar heigth\n * @default 29px\n */\n toolbarHeight?: number;\n /**\n * Show drag and drop tool. Set the height of the editor.\n */\n visiableDragbar?: boolean;\n /**\n * Show markdown preview.\n */\n preview?: PreviewType;\n /**\n * Full screen display editor.\n */\n fullscreen?: boolean;\n /**\n * Disable `fullscreen` setting body styles\n */\n overflow?: boolean;\n /**\n * Maximum drag height. `visiableDragbar=true`\n */\n maxHeight?: number;\n /**\n * Minimum drag height. `visiableDragbar=true`\n */\n minHeight?: number;\n /**\n * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n */\n previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n /**\n * Set the `textarea` related props.\n */\n textareaProps?: ITextAreaProps;\n /** Use div to replace TextArea or re-render TextArea */\n renderTextarea?: ITextAreaProps['renderTextarea'];\n /**\n * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n * @default true\n */\n highlightEnable?: boolean;\n /**\n * The number of characters to insert when pressing tab key.\n * Default `2` spaces.\n */\n tabSize?: number;\n /**\n * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n */\n defaultTabEnable?: boolean;\n /**\n * You can create your own commands or reuse existing commands.\n */\n commands?: ICommand[];\n /**\n * Filter or modify your commands.\n * https://github.com/uiwjs/react-md-editor/issues/296\n */\n commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n /**\n * You can create your own commands or reuse existing commands.\n */\n extraCommands?: ICommand[];\n /**\n * Hide the tool bar\n */\n hideToolbar?: boolean;\n /** Whether to enable scrolling */\n enableScroll?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n Object.keys(data).forEach((keyname) => {\n data[keyname] = false;\n });\n return data;\n}\n\nconst InternalMDEditor = (\n props: MDEditorProps,\n ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n const {\n prefixCls = 'w-md-editor',\n className,\n value: propsValue,\n commands = getCommands(),\n commandsFilter,\n extraCommands = getExtraCommands(),\n height = 200,\n toolbarHeight = 29,\n enableScroll = true,\n visiableDragbar = true,\n highlightEnable = true,\n preview: previewType = 'live',\n fullscreen = false,\n overflow = true,\n previewOptions = {},\n textareaProps,\n maxHeight = 1200,\n minHeight = 100,\n autoFocus,\n tabSize = 2,\n defaultTabEnable = false,\n onChange,\n hideToolbar,\n renderTextarea,\n ...other\n } = props || {};\n const cmds = commands\n .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n .filter(Boolean) as ICommand[];\n const extraCmds = extraCommands\n .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n .filter(Boolean) as ICommand[];\n let [state, dispatch] = useReducer(reducer, {\n markdown: propsValue,\n preview: previewType,\n height,\n highlightEnable,\n tabSize,\n defaultTabEnable,\n scrollTop: 0,\n scrollTopPreview: 0,\n commands: cmds,\n extraCommands: extraCmds,\n fullscreen,\n barPopup: {},\n });\n const container = useRef<HTMLDivElement>(null);\n const previewRef = useRef<MarkdownPreviewRef>(null);\n const enableScrollRef = useRef(enableScroll);\n\n useImperativeHandle(ref, () => ({ ...state }));\n useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n useEffect(() => {\n const stateInit: ContextStore = {};\n if (container.current) {\n stateInit.container = container.current || undefined;\n }\n stateInit.markdown = propsValue || '';\n stateInit.barPopup = {};\n if (dispatch) {\n dispatch({ ...state, ...stateInit });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const cls = [\n className,\n 'wmde-markdown-var',\n prefixCls,\n state.preview ? `${prefixCls}-show-${state.preview}` : null,\n state.fullscreen ? `${prefixCls}-fullscreen` : null,\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n\n useMemo(\n () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n [propsValue, state.markdown],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n useMemo(\n () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [highlightEnable],\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n useMemo(\n () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [fullscreen],\n );\n\n const textareaDomRef = useRef<HTMLDivElement>();\n const active = useRef<'text' | 'preview'>('preview');\n const initScroll = useRef(false);\n\n useMemo(() => {\n textareaDomRef.current = state.textareaWarp;\n if (state.textareaWarp) {\n state.textareaWarp.addEventListener('mouseover', () => {\n active.current = 'text';\n });\n state.textareaWarp.addEventListener('mouseleave', () => {\n active.current = 'preview';\n });\n }\n }, [state.textareaWarp]);\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n if (!enableScrollRef.current) return;\n const textareaDom = textareaDomRef.current;\n const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n if (!initScroll.current) {\n active.current = type;\n initScroll.current = true;\n }\n if (textareaDom && previewDom) {\n const scale =\n (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n if (e.target === textareaDom && active.current === 'text') {\n previewDom.scrollTop = textareaDom.scrollTop / scale;\n }\n if (e.target === previewDom && active.current === 'preview') {\n textareaDom.scrollTop = previewDom.scrollTop * scale;\n }\n let scrollTop = 0;\n if (active.current === 'text') {\n scrollTop = textareaDom.scrollTop || 0;\n } else if (active.current === 'preview') {\n scrollTop = previewDom.scrollTop || 0;\n }\n dispatch({ scrollTop });\n }\n };\n\n const mdPreview = useMemo(\n () => (\n <MarkdownPreview\n {...previewOptions}\n onScroll={(e) => handleScroll(e, 'preview')}\n ref={previewRef}\n source={state.markdown || ''}\n className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n />\n ),\n [prefixCls, previewOptions, state.markdown],\n );\n\n return (\n <EditorContext.Provider value={{ ...state, dispatch }}>\n <div\n ref={container}\n className={cls}\n {...other}\n onClick={() => {\n dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n }}\n style={{\n ...other.style,\n height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n }}\n >\n {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} />}\n <div\n className={`${prefixCls}-content`}\n style={{\n height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n }}\n >\n {/(edit|live)/.test(state.preview || '') && (\n <TextArea\n className={`${prefixCls}-input`}\n prefixCls={prefixCls}\n autoFocus={autoFocus}\n {...textareaProps}\n onChange={(evn) => {\n onChange && onChange(evn.target.value);\n if (textareaProps && textareaProps.onChange) {\n textareaProps.onChange(evn);\n }\n }}\n renderTextarea={renderTextarea}\n onScroll={(e) => handleScroll(e, 'text')}\n />\n )}\n {/(live|preview)/.test(state.preview || '') && mdPreview}\n </div>\n {visiableDragbar && !state.fullscreen && (\n <DragBar\n prefixCls={prefixCls}\n height={state.height as number}\n maxHeight={maxHeight!}\n minHeight={minHeight!}\n onChange={(newHeight) => {\n dispatch({ height: newHeight });\n }}\n />\n )}\n </div>\n </EditorContext.Provider>\n );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
|
|
106
106
|
]
|
|
107
107
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useContext, useEffect, useMemo } from 'react';
|
|
2
|
-
import { rehype } from 'rehype';
|
|
3
|
-
|
|
4
|
-
import rehypePrism from '@mapbox/rehype-prism';
|
|
2
|
+
import { rehype } from 'rehype';
|
|
3
|
+
import rehypePrism from 'rehype-prism-plus';
|
|
5
4
|
import { EditorContext } from '../../Context';
|
|
6
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
6
|
export default function Markdown(props) {
|
|
@@ -10,7 +9,6 @@ export default function Markdown(props) {
|
|
|
10
9
|
} = props;
|
|
11
10
|
var {
|
|
12
11
|
markdown = '',
|
|
13
|
-
highlightEnable,
|
|
14
12
|
dispatch
|
|
15
13
|
} = useContext(EditorContext);
|
|
16
14
|
var preRef = /*#__PURE__*/React.createRef();
|
|
@@ -24,14 +22,14 @@ export default function Markdown(props) {
|
|
|
24
22
|
}, []);
|
|
25
23
|
|
|
26
24
|
function html2Escape(sHtml) {
|
|
27
|
-
return sHtml.replace(/```(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
|
|
28
|
-
return str.replace(/[
|
|
25
|
+
return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
|
|
26
|
+
return str.replace(/[<&"]/g, c => ({
|
|
29
27
|
'<': '<',
|
|
30
28
|
'>': '>',
|
|
31
29
|
'&': '&',
|
|
32
30
|
'"': '"'
|
|
33
31
|
})[c]);
|
|
34
|
-
}).replace(/[
|
|
32
|
+
}).replace(/[<&"]/g, c => ({
|
|
35
33
|
'<': '<',
|
|
36
34
|
'>': '>',
|
|
37
35
|
'&': '&',
|
|
@@ -40,7 +38,7 @@ export default function Markdown(props) {
|
|
|
40
38
|
}
|
|
41
39
|
|
|
42
40
|
return useMemo(() => {
|
|
43
|
-
if (!
|
|
41
|
+
if (!markdown) {
|
|
44
42
|
return /*#__PURE__*/_jsx("pre", {
|
|
45
43
|
children: markdown || '',
|
|
46
44
|
ref: preRef,
|
|
@@ -59,6 +57,6 @@ export default function Markdown(props) {
|
|
|
59
57
|
__html: str.value
|
|
60
58
|
}
|
|
61
59
|
});
|
|
62
|
-
}, [
|
|
60
|
+
}, [markdown, preRef, prefixCls]);
|
|
63
61
|
}
|
|
64
62
|
//# sourceMappingURL=Markdown.js.map
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
"props",
|
|
16
16
|
"prefixCls",
|
|
17
17
|
"markdown",
|
|
18
|
-
"highlightEnable",
|
|
19
18
|
"dispatch",
|
|
20
19
|
"preRef",
|
|
21
20
|
"createRef",
|
|
@@ -37,8 +36,8 @@
|
|
|
37
36
|
"__html",
|
|
38
37
|
"value"
|
|
39
38
|
],
|
|
40
|
-
"mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB
|
|
39
|
+
"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;;AAIA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAM;AAAEC,IAAAA;AAAF,MAAgBD,KAAtB;AACA,MAAM;AAAEE,IAAAA,QAAQ,GAAG,EAAb;AAAiBC,IAAAA;AAAjB,MAA8BV,UAAU,CAACK,aAAD,CAA9C;AACA,MAAMM,MAAM,gBAAGZ,KAAK,CAACa,SAAN,EAAf;AACAX,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIU,MAAM,CAACE,OAAP,IAAkBH,QAAtB,EAAgC;AAC9BA,MAAAA,QAAQ,CAAC;AAAEI,QAAAA,WAAW,EAAEH,MAAM,CAACE;AAAtB,OAAD,CAAR;AACD,KAHa,CAId;;AACD,GALQ,EAKN,EALM,CAAT;;AAMA,WAASE,WAAT,CAAqBC,KAArB,EAAoC;AAClC,WAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC4DC,GAAD,IAAiB;AAC/E,aAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEJE,CAAD,IAAgB,CAAC;AAAE,aAAK,MAAP;AAAe,aAAK,MAApB;AAA4B,aAAK,OAAjC;AAA0C,aAAK;AAA/C,OAAD,EAAsFA,CAAtF,CAFX,CAAP;AAID,KANI,EAOJF,OAPI,CAQH,QARG,EASFE,CAAD,IAAgB,CAAC;AAAE,WAAK,MAAP;AAAe,WAAK,MAApB;AAA4B,WAAK,OAAjC;AAA0C,WAAK;AAA/C,KAAD,EAAsFA,CAAtF,CATb,CAAP;AAWD;;AAED,SAAOjB,OAAO,CAAC,MAAM;AACnB,QAAI,CAACO,QAAL,EAAe;AACb,0BAAO;AAAK,QAAA,QAAQ,EAAEA,QAAQ,IAAI,EAA3B;AAA+B,QAAA,GAAG,EAAEE,MAApC;AAA4C,QAAA,SAAS,EAAKH,SAAL;AAArD,QAAP;AACD;;AACD,QAAMU,GAAG,GAAGf,MAAM,GACfiB,IADS,CACJ,UADI,EACQ;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KADR,EAETC,GAFS,CAELlB,WAFK,EAEQ;AAAEmB,MAAAA,aAAa,EAAE;AAAjB,KAFR,EAGTC,WAHS,qCAIyBhB,SAJzB,0EAIoGO,WAAW,CACrHN,QADqH,CAJ/G,qBAAZ;AAQA,wBAAOV,KAAK,CAAC0B,aAAN,CAAoB,KAApB,EAA2B;AAChCC,MAAAA,SAAS,EAAE,qBADqB;AAEhCC,MAAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEV,GAAG,CAACW;AAAd;AAFO,KAA3B,CAAP;AAID,GAhBa,EAgBX,CAACpB,QAAD,EAAWE,MAAX,EAAmBH,SAAnB,CAhBW,CAAd;AAiBD",
|
|
41
40
|
"sourcesContent": [
|
|
42
|
-
"import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\
|
|
41
|
+
"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\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '', 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 function 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\n return useMemo(() => {\n if (!markdown) {\n return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n }\n const str = rehype()\n .data('settings', { fragment: true })\n .use(rehypePrism, { ignoreMissing: true })\n .processSync(\n `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n markdown,\n )}\\n</code></pre>`,\n );\n return React.createElement('div', {\n className: 'wmde-markdown-color',\n dangerouslySetInnerHTML: { __html: str.value as string },\n });\n }, [markdown, preRef, prefixCls]);\n}\n"
|
|
43
42
|
]
|
|
44
43
|
}
|
|
@@ -93,39 +93,31 @@
|
|
|
93
93
|
color: transparent !important;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
|
-
.w-md-editor-text-pre {
|
|
97
|
-
color:
|
|
98
|
-
}
|
|
99
|
-
.w-md-editor-text-pre .table .punctuation {
|
|
100
|
-
color: #c3c3c3;
|
|
101
|
-
}
|
|
102
|
-
.w-md-editor-text-pre .table .table-header {
|
|
103
|
-
color: #000;
|
|
96
|
+
.w-md-editor-text-pre .punctuation {
|
|
97
|
+
color: var(--color-prettylights-syntax-comment) !important;
|
|
104
98
|
}
|
|
105
|
-
.w-md-editor-text-pre .url
|
|
106
|
-
|
|
99
|
+
.w-md-editor-text-pre .token.url,
|
|
100
|
+
.w-md-editor-text-pre .token.content {
|
|
101
|
+
color: var(--color-prettylights-syntax-constant) !important;
|
|
107
102
|
}
|
|
108
|
-
.w-md-editor-text-pre .
|
|
109
|
-
color:
|
|
103
|
+
.w-md-editor-text-pre .token.title.important {
|
|
104
|
+
color: var(--color-prettylights-syntax-markup-bold);
|
|
110
105
|
}
|
|
111
|
-
.w-md-editor-text-pre .
|
|
112
|
-
color:
|
|
106
|
+
.w-md-editor-text-pre .token.code-block .function {
|
|
107
|
+
color: var(--color-prettylights-syntax-entity);
|
|
113
108
|
}
|
|
114
|
-
.w-md-editor-text-pre .
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
.w-md-editor-text-pre .title,
|
|
118
|
-
.w-md-editor-text-pre .bold {
|
|
119
|
-
color: #000 !important;
|
|
109
|
+
.w-md-editor-text-pre .token.bold {
|
|
110
|
+
font-weight: unset !important;
|
|
120
111
|
}
|
|
121
|
-
.w-md-editor-text-pre .title {
|
|
112
|
+
.w-md-editor-text-pre .token.title {
|
|
122
113
|
line-height: unset !important;
|
|
123
114
|
font-size: unset !important;
|
|
124
115
|
font-weight: unset !important;
|
|
125
116
|
}
|
|
126
|
-
.w-md-editor-text-pre .code.keyword {
|
|
127
|
-
color:
|
|
117
|
+
.w-md-editor-text-pre .token.code.keyword {
|
|
118
|
+
color: var(--color-prettylights-syntax-constant) !important;
|
|
128
119
|
}
|
|
129
|
-
.w-md-editor-text-pre .strike
|
|
130
|
-
|
|
120
|
+
.w-md-editor-text-pre .token.strike,
|
|
121
|
+
.w-md-editor-text-pre .token.strike .content {
|
|
122
|
+
color: var(--color-prettylights-syntax-markup-deleted-text) !important;
|
|
131
123
|
}
|
|
@@ -24,6 +24,7 @@ export default function TextArea(props) {
|
|
|
24
24
|
markdown,
|
|
25
25
|
scrollTop,
|
|
26
26
|
commands,
|
|
27
|
+
highlightEnable,
|
|
27
28
|
extraCommands,
|
|
28
29
|
dispatch
|
|
29
30
|
} = useContext(EditorContext);
|
|
@@ -54,7 +55,11 @@ export default function TextArea(props) {
|
|
|
54
55
|
});
|
|
55
56
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
57
|
|
|
57
|
-
}, []);
|
|
58
|
+
}, []); // @ts-ignore
|
|
59
|
+
|
|
60
|
+
var textStyle = highlightEnable ? {} : {
|
|
61
|
+
'-webkit-text-fill-color': 'inherit'
|
|
62
|
+
};
|
|
58
63
|
return /*#__PURE__*/_jsx("div", {
|
|
59
64
|
ref: warp,
|
|
60
65
|
className: prefixCls + "-aree " + (className || ''),
|
|
@@ -84,11 +89,13 @@ export default function TextArea(props) {
|
|
|
84
89
|
}), {
|
|
85
90
|
ref: textRef
|
|
86
91
|
}) : /*#__PURE__*/_jsxs(Fragment, {
|
|
87
|
-
children: [/*#__PURE__*/_jsx(Markdown, {
|
|
92
|
+
children: [highlightEnable && /*#__PURE__*/_jsx(Markdown, {
|
|
88
93
|
prefixCls: prefixCls
|
|
89
94
|
}), /*#__PURE__*/_jsx(Textarea, _extends({
|
|
90
95
|
prefixCls: prefixCls
|
|
91
|
-
}, otherProps
|
|
96
|
+
}, otherProps, {
|
|
97
|
+
style: textStyle
|
|
98
|
+
}))]
|
|
92
99
|
})
|
|
93
100
|
})
|
|
94
101
|
});
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"markdown",
|
|
24
24
|
"scrollTop",
|
|
25
25
|
"commands",
|
|
26
|
+
"highlightEnable",
|
|
26
27
|
"extraCommands",
|
|
27
28
|
"dispatch",
|
|
28
29
|
"textRef",
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
"undefined",
|
|
37
38
|
"commandOrchestrator",
|
|
38
39
|
"textarea",
|
|
40
|
+
"textStyle",
|
|
39
41
|
"cloneElement",
|
|
40
42
|
"value",
|
|
41
43
|
"autoComplete",
|
|
@@ -48,8 +50,8 @@
|
|
|
48
50
|
"onChange",
|
|
49
51
|
"ref"
|
|
50
52
|
],
|
|
51
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,EAAqCC,UAArC,QAAuD,OAAvD;AACA,SAASC,aAAT,QAAiE,eAAjE;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAwC,YAAxC;AAEA,SAASC,2BAAT,QAAsD,gBAAtD;AACA;;;AAmCA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAyC;AACtD,aAA0EA,KAAK,IAAI,EAAnF;AAAA,MAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,SAAb;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA;AAAlC,GAAN;AAAA,MAA2DC,UAA3D;;AACA,MAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,QAAvB;AAAiCC,IAAAA,
|
|
53
|
+
"mappings": "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",
|
|
52
54
|
"sourcesContent": [
|
|
53
|
-
"import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n dispatch: ContextStore['dispatch'];\n onChange?: TextAreaProps['onChange'];\n useContext?: {\n commands: ContextStore['commands'];\n extraCommands: ContextStore['extraCommands'];\n commandOrchestrator?: TextAreaCommandOrchestrator;\n };\n shortcuts?: (\n e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n commands: ICommand[],\n commandOrchestrator?: TextAreaCommandOrchestrator,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ) => void;\n};\n\nexport interface ITextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n IProps {\n value?: string;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n renderTextarea?: (\n props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n opts: RenderTextareaHandle,\n ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n text?: HTMLTextAreaElement;\n warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);\n const textRef = React.useRef<HTMLTextAreaElement>(null);\n const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n const warp = React.createRef<HTMLDivElement>();\n useEffect(() => {\n const state: ContextStore = {};\n if (warp.current) {\n state.textareaWarp = warp.current || undefined;\n warp.current.scrollTop = scrollTop || 0;\n }\n if (dispatch) {\n dispatch({ ...state });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (textRef.current && dispatch) {\n const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n executeRef.current = commandOrchestrator;\n dispatch({ textarea: textRef.current, commandOrchestrator });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n <div className={`${prefixCls}-text`}>\n {renderTextarea ? (\n React.cloneElement(\n renderTextarea(\n {\n ...otherProps,\n value: markdown,\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n autoCapitalize: 'off',\n className: `${prefixCls}-text-input`,\n style: {\n WebkitTextFillColor: 'inherit',\n overflow: 'auto',\n },\n },\n {\n dispatch,\n onChange: otherProps.onChange,\n shortcuts,\n useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n },\n ),\n {\n ref: textRef,\n },\n )\n ) : (\n <Fragment>\n <Markdown prefixCls={prefixCls}
|
|
55
|
+
"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 // @ts-ignore\n const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };\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"
|
|
54
56
|
]
|
|
55
57
|
}
|
|
@@ -95,42 +95,32 @@
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.@{md-editor}-text-pre {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
.punctuation {
|
|
101
|
-
color: #c3c3c3;
|
|
102
|
-
}
|
|
103
|
-
.table-header {
|
|
104
|
-
color: #000;
|
|
105
|
-
}
|
|
98
|
+
.punctuation {
|
|
99
|
+
color: var(--color-prettylights-syntax-comment) !important;
|
|
106
100
|
}
|
|
107
|
-
|
|
108
|
-
.
|
|
109
|
-
color:
|
|
110
|
-
.content {
|
|
111
|
-
color: #0366d6;
|
|
112
|
-
}
|
|
101
|
+
.token.url,
|
|
102
|
+
.token.content {
|
|
103
|
+
color: var(--color-prettylights-syntax-constant) !important;
|
|
113
104
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
color: #999;
|
|
105
|
+
.token.title.important {
|
|
106
|
+
color: var(--color-prettylights-syntax-markup-bold);
|
|
117
107
|
}
|
|
118
|
-
.
|
|
119
|
-
color:
|
|
108
|
+
.token.code-block .function {
|
|
109
|
+
color: var(--color-prettylights-syntax-entity);
|
|
120
110
|
}
|
|
121
|
-
.
|
|
122
|
-
|
|
123
|
-
color: #000 !important;
|
|
111
|
+
.token.bold {
|
|
112
|
+
font-weight: unset !important;
|
|
124
113
|
}
|
|
125
|
-
.title {
|
|
114
|
+
.token.title {
|
|
126
115
|
line-height: unset !important;
|
|
127
116
|
font-size: unset !important;
|
|
128
117
|
font-weight: unset !important;
|
|
129
118
|
}
|
|
130
|
-
.code.keyword {
|
|
131
|
-
color:
|
|
119
|
+
.token.code.keyword {
|
|
120
|
+
color: var(--color-prettylights-syntax-constant) !important;
|
|
132
121
|
}
|
|
133
|
-
.strike
|
|
134
|
-
|
|
122
|
+
.token.strike,
|
|
123
|
+
.token.strike .content {
|
|
124
|
+
color: var(--color-prettylights-syntax-markup-deleted-text) !important;
|
|
135
125
|
}
|
|
136
126
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.w-md-editor-toolbar-child {
|
|
2
2
|
position: absolute;
|
|
3
3
|
border-radius: 3px;
|
|
4
|
-
box-shadow: 0 0 0 1px
|
|
5
|
-
background-color:
|
|
4
|
+
box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
|
|
5
|
+
background-color: var(--color-canvas-default);
|
|
6
6
|
z-index: 1;
|
|
7
7
|
display: none;
|
|
8
8
|
}
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
&-toolbar-child {
|
|
5
5
|
position: absolute;
|
|
6
6
|
border-radius: 3px;
|
|
7
|
-
box-shadow: 0 0 0 1px
|
|
8
|
-
|
|
7
|
+
box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
|
|
8
|
+
0 1px 1px var(--color-border-default);
|
|
9
|
+
background-color: var(--color-canvas-default);
|
|
9
10
|
z-index: 1;
|
|
10
11
|
display: none;
|
|
11
12
|
&.active {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.w-md-editor-toolbar {
|
|
2
|
-
border-bottom: 1px solid
|
|
3
|
-
background-color:
|
|
2
|
+
border-bottom: 1px solid var(--color-border-default);
|
|
3
|
+
background-color: var(--color-canvas-default);
|
|
4
4
|
padding: 0 5px 0 5px;
|
|
5
5
|
display: flex;
|
|
6
6
|
justify-content: space-between;
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
height: 20px;
|
|
25
25
|
line-height: 14px;
|
|
26
26
|
background: none;
|
|
27
|
-
color: #586069;
|
|
28
27
|
padding: 4px;
|
|
29
28
|
margin: 0 1px;
|
|
30
29
|
border-radius: 2px;
|
|
@@ -35,32 +34,33 @@
|
|
|
35
34
|
cursor: pointer;
|
|
36
35
|
transition: all 0.3s;
|
|
37
36
|
white-space: nowrap;
|
|
37
|
+
color: var(--color-fg-default);
|
|
38
38
|
}
|
|
39
39
|
.w-md-editor-toolbar li > button:hover,
|
|
40
40
|
.w-md-editor-toolbar li > button:focus {
|
|
41
|
-
color:
|
|
42
|
-
|
|
41
|
+
background-color: var(--color-neutral-muted);
|
|
42
|
+
color: var(--color-accent-fg);
|
|
43
43
|
}
|
|
44
44
|
.w-md-editor-toolbar li > button:active {
|
|
45
|
-
color:
|
|
46
|
-
|
|
45
|
+
background-color: var(--color-neutral-muted);
|
|
46
|
+
color: var(--color-danger-fg);
|
|
47
47
|
}
|
|
48
48
|
.w-md-editor-toolbar li > button:disabled {
|
|
49
|
-
color:
|
|
49
|
+
color: var(--color-border-default);
|
|
50
50
|
cursor: not-allowed;
|
|
51
51
|
}
|
|
52
52
|
.w-md-editor-toolbar li > button:disabled:hover {
|
|
53
53
|
background-color: transparent;
|
|
54
|
-
color:
|
|
54
|
+
color: var(--color-border-default);
|
|
55
55
|
}
|
|
56
56
|
.w-md-editor-toolbar li.active > button {
|
|
57
|
-
color:
|
|
58
|
-
background-color:
|
|
57
|
+
color: var(--color-accent-fg);
|
|
58
|
+
background-color: var(--color-neutral-muted);
|
|
59
59
|
}
|
|
60
60
|
.w-md-editor-toolbar-divider {
|
|
61
61
|
height: 14px;
|
|
62
62
|
width: 1px;
|
|
63
63
|
margin: -3px 3px 0 3px !important;
|
|
64
64
|
vertical-align: middle;
|
|
65
|
-
background-color:
|
|
65
|
+
background-color: var(--color-border-default);
|
|
66
66
|
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
.@{md-editor} {
|
|
4
4
|
&-toolbar {
|
|
5
|
-
border-bottom: 1px solid
|
|
6
|
-
background-color:
|
|
5
|
+
border-bottom: 1px solid var(--color-border-default);
|
|
6
|
+
background-color: var(--color-canvas-default);
|
|
7
7
|
padding: 0 5px 0 5px;
|
|
8
8
|
display: flex;
|
|
9
9
|
justify-content: space-between;
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
height: 20px;
|
|
25
25
|
line-height: 14px;
|
|
26
26
|
background: none;
|
|
27
|
-
color: #586069;
|
|
28
27
|
padding: 4px;
|
|
29
28
|
margin: 0 1px;
|
|
30
29
|
border-radius: 2px;
|
|
@@ -35,27 +34,28 @@
|
|
|
35
34
|
cursor: pointer;
|
|
36
35
|
transition: all 0.3s;
|
|
37
36
|
white-space: nowrap;
|
|
37
|
+
color: var(--color-fg-default);
|
|
38
38
|
&:hover,
|
|
39
39
|
&:focus {
|
|
40
|
-
color:
|
|
41
|
-
|
|
40
|
+
background-color: var(--color-neutral-muted);
|
|
41
|
+
color: var(--color-accent-fg);
|
|
42
42
|
}
|
|
43
43
|
&:active {
|
|
44
|
-
color:
|
|
45
|
-
|
|
44
|
+
background-color: var(--color-neutral-muted);
|
|
45
|
+
color: var(--color-danger-fg);
|
|
46
46
|
}
|
|
47
47
|
&:disabled {
|
|
48
|
-
color:
|
|
48
|
+
color: var(--color-border-default);
|
|
49
49
|
cursor: not-allowed;
|
|
50
50
|
&:hover {
|
|
51
51
|
background-color: transparent;
|
|
52
|
-
color:
|
|
52
|
+
color: var(--color-border-default);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
&.active > button {
|
|
57
|
-
color:
|
|
58
|
-
background-color:
|
|
57
|
+
color: var(--color-accent-fg);
|
|
58
|
+
background-color: var(--color-neutral-muted);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
&-divider {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
width: 1px;
|
|
64
64
|
margin: -3px 3px 0 3px !important;
|
|
65
65
|
vertical-align: middle;
|
|
66
|
-
background-color:
|
|
66
|
+
background-color: var(--color-border-default);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
}
|
package/esm/index.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
.w-md-editor {
|
|
2
|
-
color: #24292e;
|
|
3
2
|
text-align: left;
|
|
4
|
-
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
|
|
5
3
|
border-radius: 3px;
|
|
6
4
|
padding-bottom: 1px;
|
|
7
5
|
position: relative;
|
|
8
|
-
|
|
6
|
+
color: var(--color-fg-default);
|
|
7
|
+
box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
|
|
8
|
+
background-color: var(--color-canvas-default);
|
|
9
9
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
10
10
|
}
|
|
11
11
|
.w-md-editor-content {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
.w-md-editor-preview {
|
|
21
21
|
width: 50%;
|
|
22
22
|
box-sizing: border-box;
|
|
23
|
-
box-shadow: inset 1px 0 0 0
|
|
23
|
+
box-shadow: inset 1px 0 0 0 var(--color-border-default);
|
|
24
24
|
position: absolute;
|
|
25
25
|
padding: 10px 20px;
|
|
26
26
|
overflow: auto;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
.w-md-editor-show-preview .w-md-editor-input {
|
|
38
38
|
width: 0%;
|
|
39
39
|
overflow: hidden;
|
|
40
|
-
background-color:
|
|
40
|
+
background-color: var(--color-canvas-default);
|
|
41
41
|
}
|
|
42
42
|
.w-md-editor-show-preview .w-md-editor-preview {
|
|
43
43
|
width: 100%;
|
package/esm/index.less
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
@md-editor:~ "w-md-editor";
|
|
2
2
|
|
|
3
3
|
.@{md-editor} {
|
|
4
|
-
color: #24292e;
|
|
5
4
|
text-align: left;
|
|
6
|
-
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
|
|
7
5
|
border-radius: 3px;
|
|
8
6
|
padding-bottom: 1px;
|
|
9
7
|
position: relative;
|
|
10
|
-
|
|
8
|
+
color: var(--color-fg-default);
|
|
9
|
+
box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
|
|
10
|
+
0 1px 1px var(--color-border-default);
|
|
11
|
+
background-color: var(--color-canvas-default);
|
|
11
12
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
12
13
|
&-content {
|
|
13
14
|
position: relative;
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
&-preview {
|
|
22
23
|
width: 50%;
|
|
23
24
|
box-sizing: border-box;
|
|
24
|
-
box-shadow: inset 1px 0 0 0
|
|
25
|
+
box-shadow: inset 1px 0 0 0 var(--color-border-default);
|
|
25
26
|
position: absolute;
|
|
26
27
|
padding: 10px 20px;
|
|
27
28
|
overflow: auto;
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
&-show-preview &-input {
|
|
39
40
|
width: 0%;
|
|
40
41
|
overflow: hidden;
|
|
41
|
-
background-color:
|
|
42
|
+
background-color: var(--color-canvas-default);
|
|
42
43
|
}
|
|
43
44
|
&-show-preview &-preview {
|
|
44
45
|
width: 100%;
|
package/lib/Editor.js
CHANGED
|
@@ -134,7 +134,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
|
|
|
134
134
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
135
135
|
|
|
136
136
|
}, []);
|
|
137
|
-
var cls = [className, prefixCls, state.preview ? "".concat(prefixCls, "-show-").concat(state.preview) : null, state.fullscreen ? "".concat(prefixCls, "-fullscreen") : null].filter(Boolean).join(' ').trim();
|
|
137
|
+
var cls = [className, 'wmde-markdown-var', prefixCls, state.preview ? "".concat(prefixCls, "-show-").concat(state.preview) : null, state.fullscreen ? "".concat(prefixCls, "-fullscreen") : null].filter(Boolean).join(' ').trim();
|
|
138
138
|
(0, _react.useMemo)(function () {
|
|
139
139
|
return propsValue !== state.markdown && dispatch({
|
|
140
140
|
markdown: propsValue || ''
|