@uiw/react-md-editor 3.24.0 → 3.25.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 +50 -5
- package/dist/mdeditor.js +1835 -1807
- package/dist/mdeditor.min.js +1 -1
- package/esm/Context.d.ts +1 -1
- package/esm/Editor.d.ts +4 -149
- package/esm/Editor.js +0 -1
- package/esm/Editor.nohighlight.d.ts +12 -0
- package/esm/Editor.nohighlight.js +255 -0
- package/esm/Types.d.ts +148 -0
- package/esm/Types.js +1 -0
- package/esm/commands/index.d.ts +4 -1
- package/esm/commands/index.js +2 -1
- package/esm/components/DragBar/index.d.ts +1 -1
- package/esm/components/TextArea/Markdown.d.ts +1 -1
- package/esm/components/TextArea/Textarea.d.ts +1 -1
- package/esm/components/TextArea/handleKeyDown.js +1 -3
- package/esm/components/TextArea/index.d.ts +1 -1
- package/esm/components/TextArea/index.nohighlight.d.ts +27 -0
- package/esm/components/TextArea/index.nohighlight.js +93 -0
- package/esm/components/Toolbar/Child.d.ts +1 -1
- package/esm/components/Toolbar/index.d.ts +1 -1
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/index.nohighlight.d.ts +13 -0
- package/esm/index.nohighlight.js +13 -0
- package/lib/Context.d.ts +1 -1
- package/lib/Editor.d.ts +4 -149
- package/lib/Editor.nohighlight.d.ts +12 -0
- package/lib/Editor.nohighlight.js +317 -0
- package/lib/Types.d.ts +148 -0
- package/lib/Types.js +1 -0
- package/lib/commands/index.d.ts +4 -1
- package/lib/commands/index.js +19 -0
- package/lib/components/DragBar/index.d.ts +1 -1
- package/lib/components/TextArea/Markdown.d.ts +1 -1
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/handleKeyDown.js +1 -3
- package/lib/components/TextArea/index.d.ts +1 -1
- package/lib/components/TextArea/index.nohighlight.d.ts +27 -0
- package/lib/components/TextArea/index.nohighlight.js +98 -0
- package/lib/components/Toolbar/Child.d.ts +1 -1
- package/lib/components/Toolbar/index.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +12 -0
- package/lib/index.nohighlight.d.ts +13 -0
- package/lib/index.nohighlight.js +98 -0
- package/package.json +16 -2
- package/src/Context.tsx +1 -1
- package/src/Editor.nohighlight.tsx +264 -0
- package/src/Editor.tsx +5 -151
- package/src/Types.ts +151 -0
- package/src/commands/index.ts +4 -0
- package/src/components/DragBar/index.tsx +1 -1
- package/src/components/TextArea/Markdown.tsx +2 -2
- package/src/components/TextArea/Textarea.tsx +1 -1
- package/src/components/TextArea/handleKeyDown.tsx +5 -3
- package/src/components/TextArea/index.nohighlight.tsx +109 -0
- package/src/components/TextArea/index.tsx +1 -1
- package/src/components/Toolbar/Child.tsx +1 -1
- package/src/components/Toolbar/index.tsx +1 -1
- package/src/index.nohighlight.tsx +16 -0
- package/src/index.tsx +2 -0
package/esm/Context.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ICommand, TextAreaCommandOrchestrator } from './commands';
|
|
3
|
-
import { MDEditorProps } from './
|
|
3
|
+
import { MDEditorProps } from './Types';
|
|
4
4
|
export type PreviewType = 'live' | 'edit' | 'preview';
|
|
5
5
|
export interface ContextStore {
|
|
6
6
|
components?: MDEditorProps['components'];
|
package/esm/Editor.d.ts
CHANGED
|
@@ -1,152 +1,7 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import MarkdownPreview
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { ContextStore, PreviewType } from './Context';
|
|
6
|
-
import './index.less';
|
|
7
|
-
export interface IProps {
|
|
8
|
-
prefixCls?: string;
|
|
9
|
-
className?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface Statistics extends TextState {
|
|
12
|
-
/** total length of the document */
|
|
13
|
-
length: number;
|
|
14
|
-
/** Get the number of lines in the editor. */
|
|
15
|
-
lineCount: number;
|
|
16
|
-
}
|
|
17
|
-
export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
|
|
18
|
-
/**
|
|
19
|
-
* The Markdown value.
|
|
20
|
-
*/
|
|
21
|
-
value?: string;
|
|
22
|
-
/**
|
|
23
|
-
* Event handler for the `onChange` event.
|
|
24
|
-
*/
|
|
25
|
-
onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
|
|
26
|
-
/**
|
|
27
|
-
* editor height change listener
|
|
28
|
-
*/
|
|
29
|
-
onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
|
|
30
|
-
/** Some data on the statistics editor. */
|
|
31
|
-
onStatistics?: (data: Statistics) => void;
|
|
32
|
-
/**
|
|
33
|
-
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
|
|
34
|
-
* it will be set to true when either the source `textarea` is focused,
|
|
35
|
-
* or it has an `autofocus` attribute and no other element is focused.
|
|
36
|
-
*/
|
|
37
|
-
autoFocus?: ITextAreaProps['autoFocus'];
|
|
38
|
-
/**
|
|
39
|
-
* The height of the editor.
|
|
40
|
-
* ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
|
|
41
|
-
*/
|
|
42
|
-
height?: CSSProperties['height'];
|
|
43
|
-
/**
|
|
44
|
-
* Custom toolbar heigth
|
|
45
|
-
* @default 29px
|
|
46
|
-
*
|
|
47
|
-
* @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
|
|
48
|
-
*
|
|
49
|
-
*/
|
|
50
|
-
toolbarHeight?: number;
|
|
51
|
-
/**
|
|
52
|
-
* Show drag and drop tool. Set the height of the editor.
|
|
53
|
-
*/
|
|
54
|
-
visibleDragbar?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* @deprecated use `visibleDragbar`
|
|
57
|
-
*/
|
|
58
|
-
visiableDragbar?: boolean;
|
|
59
|
-
/**
|
|
60
|
-
* Show markdown preview.
|
|
61
|
-
*/
|
|
62
|
-
preview?: PreviewType;
|
|
63
|
-
/**
|
|
64
|
-
* Full screen display editor.
|
|
65
|
-
*/
|
|
66
|
-
fullscreen?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* Disable `fullscreen` setting body styles
|
|
69
|
-
*/
|
|
70
|
-
overflow?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* Maximum drag height. `visibleDragbar=true`
|
|
73
|
-
*/
|
|
74
|
-
maxHeight?: number;
|
|
75
|
-
/**
|
|
76
|
-
* Minimum drag height. `visibleDragbar=true`
|
|
77
|
-
*/
|
|
78
|
-
minHeight?: number;
|
|
79
|
-
/**
|
|
80
|
-
* This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
|
|
81
|
-
*/
|
|
82
|
-
previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
|
|
83
|
-
/**
|
|
84
|
-
* Set the `textarea` related props.
|
|
85
|
-
*/
|
|
86
|
-
textareaProps?: ITextAreaProps;
|
|
87
|
-
/**
|
|
88
|
-
* Use div to replace TextArea or re-render TextArea
|
|
89
|
-
* @deprecated Please use ~~`renderTextarea`~~ -> `components`
|
|
90
|
-
*/
|
|
91
|
-
renderTextarea?: ITextAreaProps['renderTextarea'];
|
|
92
|
-
/**
|
|
93
|
-
* re-render element
|
|
94
|
-
*/
|
|
95
|
-
components?: {
|
|
96
|
-
/** Use div to replace TextArea or re-render TextArea */
|
|
97
|
-
textarea?: ITextAreaProps['renderTextarea'];
|
|
98
|
-
/**
|
|
99
|
-
* Override the default command element
|
|
100
|
-
* _`toolbar`_ < _`command[].render`_
|
|
101
|
-
*/
|
|
102
|
-
toolbar?: ICommand['render'];
|
|
103
|
-
/** Custom markdown preview */
|
|
104
|
-
preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
|
|
105
|
-
};
|
|
106
|
-
/** Theme configuration */
|
|
107
|
-
'data-color-mode'?: 'light' | 'dark';
|
|
108
|
-
/**
|
|
109
|
-
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
|
|
110
|
-
* @default true
|
|
111
|
-
*/
|
|
112
|
-
highlightEnable?: boolean;
|
|
113
|
-
/**
|
|
114
|
-
* The number of characters to insert when pressing tab key.
|
|
115
|
-
* Default `2` spaces.
|
|
116
|
-
*/
|
|
117
|
-
tabSize?: number;
|
|
118
|
-
/**
|
|
119
|
-
* 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.
|
|
120
|
-
*/
|
|
121
|
-
defaultTabEnable?: boolean;
|
|
122
|
-
/**
|
|
123
|
-
* You can create your own commands or reuse existing commands.
|
|
124
|
-
*/
|
|
125
|
-
commands?: ICommand[];
|
|
126
|
-
/**
|
|
127
|
-
* Filter or modify your commands.
|
|
128
|
-
* https://github.com/uiwjs/react-md-editor/issues/296
|
|
129
|
-
*/
|
|
130
|
-
commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
|
|
131
|
-
/**
|
|
132
|
-
* You can create your own commands or reuse existing commands.
|
|
133
|
-
*/
|
|
134
|
-
extraCommands?: ICommand[];
|
|
135
|
-
/**
|
|
136
|
-
* Hide the tool bar
|
|
137
|
-
*/
|
|
138
|
-
hideToolbar?: boolean;
|
|
139
|
-
/** Whether to enable scrolling */
|
|
140
|
-
enableScroll?: boolean;
|
|
141
|
-
/** Toolbar on bottom */
|
|
142
|
-
toolbarBottom?: boolean;
|
|
143
|
-
/**
|
|
144
|
-
* The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
|
|
145
|
-
*
|
|
146
|
-
* https://github.com/uiwjs/react-md-editor/issues/462
|
|
147
|
-
*/
|
|
148
|
-
direction?: CSSProperties['direction'];
|
|
149
|
-
}
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import MarkdownPreview from '@uiw/react-markdown-preview';
|
|
3
|
+
import { ContextStore } from './Context';
|
|
4
|
+
import type { MDEditorProps } from './Types';
|
|
150
5
|
export interface RefMDEditor extends ContextStore {
|
|
151
6
|
}
|
|
152
7
|
declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
|
package/esm/Editor.js
CHANGED
|
@@ -8,7 +8,6 @@ import Toolbar from './components/Toolbar';
|
|
|
8
8
|
import DragBar from './components/DragBar';
|
|
9
9
|
import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
|
|
10
10
|
import { reducer, EditorContext } from './Context';
|
|
11
|
-
import "./index.css";
|
|
12
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
13
|
function setGroupPopFalse(data) {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
|
|
3
|
+
import { ContextStore } from './Context';
|
|
4
|
+
import type { MDEditorProps } from './Types';
|
|
5
|
+
export interface RefMDEditor extends ContextStore {
|
|
6
|
+
}
|
|
7
|
+
declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
|
|
8
|
+
type EditorComponent = typeof InternalMDEditor & {
|
|
9
|
+
Markdown: typeof MarkdownPreview;
|
|
10
|
+
};
|
|
11
|
+
declare const Editor: EditorComponent;
|
|
12
|
+
export default Editor;
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
+
var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
|
|
4
|
+
import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
|
|
5
|
+
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
|
|
6
|
+
import TextArea from './components/TextArea/index.nohighlight';
|
|
7
|
+
import Toolbar from './components/Toolbar';
|
|
8
|
+
import DragBar from './components/DragBar';
|
|
9
|
+
import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
|
|
10
|
+
import { reducer, EditorContext } from './Context';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
function setGroupPopFalse(data) {
|
|
14
|
+
if (data === void 0) {
|
|
15
|
+
data = {};
|
|
16
|
+
}
|
|
17
|
+
Object.keys(data).forEach(keyname => {
|
|
18
|
+
data[keyname] = false;
|
|
19
|
+
});
|
|
20
|
+
return data;
|
|
21
|
+
}
|
|
22
|
+
var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
23
|
+
var _ref = props || {},
|
|
24
|
+
{
|
|
25
|
+
prefixCls = 'w-md-editor',
|
|
26
|
+
className,
|
|
27
|
+
value: propsValue,
|
|
28
|
+
commands = getCommands(),
|
|
29
|
+
commandsFilter,
|
|
30
|
+
direction,
|
|
31
|
+
extraCommands = getExtraCommands(),
|
|
32
|
+
height = 200,
|
|
33
|
+
enableScroll = true,
|
|
34
|
+
visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
|
|
35
|
+
highlightEnable = true,
|
|
36
|
+
preview: previewType = 'live',
|
|
37
|
+
fullscreen = false,
|
|
38
|
+
overflow = true,
|
|
39
|
+
previewOptions = {},
|
|
40
|
+
textareaProps,
|
|
41
|
+
maxHeight = 1200,
|
|
42
|
+
minHeight = 100,
|
|
43
|
+
autoFocus,
|
|
44
|
+
tabSize = 2,
|
|
45
|
+
defaultTabEnable = false,
|
|
46
|
+
onChange,
|
|
47
|
+
onStatistics,
|
|
48
|
+
onHeightChange,
|
|
49
|
+
hideToolbar,
|
|
50
|
+
toolbarBottom = false,
|
|
51
|
+
components,
|
|
52
|
+
renderTextarea
|
|
53
|
+
} = _ref,
|
|
54
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
55
|
+
var cmds = commands.map(item => commandsFilter ? commandsFilter(item, false) : item).filter(Boolean);
|
|
56
|
+
var extraCmds = extraCommands.map(item => commandsFilter ? commandsFilter(item, true) : item).filter(Boolean);
|
|
57
|
+
var [state, dispatch] = useReducer(reducer, {
|
|
58
|
+
markdown: propsValue,
|
|
59
|
+
preview: previewType,
|
|
60
|
+
components,
|
|
61
|
+
height,
|
|
62
|
+
highlightEnable,
|
|
63
|
+
tabSize,
|
|
64
|
+
defaultTabEnable,
|
|
65
|
+
scrollTop: 0,
|
|
66
|
+
scrollTopPreview: 0,
|
|
67
|
+
commands: cmds,
|
|
68
|
+
extraCommands: extraCmds,
|
|
69
|
+
fullscreen,
|
|
70
|
+
barPopup: {}
|
|
71
|
+
});
|
|
72
|
+
var container = useRef(null);
|
|
73
|
+
var previewRef = useRef(null);
|
|
74
|
+
var enableScrollRef = useRef(enableScroll);
|
|
75
|
+
useImperativeHandle(ref, () => _extends({}, state, {
|
|
76
|
+
container: container.current,
|
|
77
|
+
dispatch
|
|
78
|
+
}));
|
|
79
|
+
useMemo(() => enableScrollRef.current = enableScroll, [enableScroll]);
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
var stateInit = {};
|
|
82
|
+
if (container.current) {
|
|
83
|
+
stateInit.container = container.current || undefined;
|
|
84
|
+
}
|
|
85
|
+
stateInit.markdown = propsValue || '';
|
|
86
|
+
stateInit.barPopup = {};
|
|
87
|
+
if (dispatch) {
|
|
88
|
+
dispatch(_extends({}, state, stateInit));
|
|
89
|
+
}
|
|
90
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
91
|
+
}, []);
|
|
92
|
+
var cls = [className, 'wmde-markdown-var', direction ? prefixCls + "-" + direction : null, prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
|
|
93
|
+
useMemo(() => propsValue !== state.markdown && dispatch({
|
|
94
|
+
markdown: propsValue || ''
|
|
95
|
+
}), [propsValue, state.markdown]);
|
|
96
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
97
|
+
useMemo(() => previewType !== state.preview && dispatch({
|
|
98
|
+
preview: previewType
|
|
99
|
+
}), [previewType]);
|
|
100
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
101
|
+
useMemo(() => tabSize !== state.tabSize && dispatch({
|
|
102
|
+
tabSize
|
|
103
|
+
}), [tabSize]);
|
|
104
|
+
useMemo(() => highlightEnable !== state.highlightEnable && dispatch({
|
|
105
|
+
highlightEnable
|
|
106
|
+
}),
|
|
107
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
108
|
+
[highlightEnable]);
|
|
109
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
110
|
+
useMemo(() => autoFocus !== state.autoFocus && dispatch({
|
|
111
|
+
autoFocus: autoFocus
|
|
112
|
+
}), [autoFocus]);
|
|
113
|
+
useMemo(() => fullscreen !== state.fullscreen && dispatch({
|
|
114
|
+
fullscreen: fullscreen
|
|
115
|
+
}),
|
|
116
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
117
|
+
[fullscreen]);
|
|
118
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
119
|
+
useMemo(() => height !== state.height && dispatch({
|
|
120
|
+
height: height
|
|
121
|
+
}), [height]);
|
|
122
|
+
useMemo(() => height !== state.height && onHeightChange && onHeightChange(state.height, height, state), [height, onHeightChange, state]);
|
|
123
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
124
|
+
useMemo(() => commands !== state.commands && dispatch({
|
|
125
|
+
commands: cmds
|
|
126
|
+
}), [props.commands]);
|
|
127
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
128
|
+
useMemo(() => extraCommands !== state.extraCommands && dispatch({
|
|
129
|
+
extraCommands: extraCmds
|
|
130
|
+
}), [props.extraCommands]);
|
|
131
|
+
var textareaDomRef = useRef();
|
|
132
|
+
var active = useRef('preview');
|
|
133
|
+
var initScroll = useRef(false);
|
|
134
|
+
useMemo(() => {
|
|
135
|
+
textareaDomRef.current = state.textareaWarp;
|
|
136
|
+
if (state.textareaWarp) {
|
|
137
|
+
state.textareaWarp.addEventListener('mouseover', () => {
|
|
138
|
+
active.current = 'text';
|
|
139
|
+
});
|
|
140
|
+
state.textareaWarp.addEventListener('mouseleave', () => {
|
|
141
|
+
active.current = 'preview';
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
}, [state.textareaWarp]);
|
|
145
|
+
var handleScroll = (e, type) => {
|
|
146
|
+
if (!enableScrollRef.current) return;
|
|
147
|
+
var textareaDom = textareaDomRef.current;
|
|
148
|
+
var previewDom = previewRef.current ? previewRef.current : undefined;
|
|
149
|
+
if (!initScroll.current) {
|
|
150
|
+
active.current = type;
|
|
151
|
+
initScroll.current = true;
|
|
152
|
+
}
|
|
153
|
+
if (textareaDom && previewDom) {
|
|
154
|
+
var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
|
|
155
|
+
if (e.target === textareaDom && active.current === 'text') {
|
|
156
|
+
previewDom.scrollTop = textareaDom.scrollTop / scale;
|
|
157
|
+
}
|
|
158
|
+
if (e.target === previewDom && active.current === 'preview') {
|
|
159
|
+
textareaDom.scrollTop = previewDom.scrollTop * scale;
|
|
160
|
+
}
|
|
161
|
+
var scrollTop = 0;
|
|
162
|
+
if (active.current === 'text') {
|
|
163
|
+
scrollTop = textareaDom.scrollTop || 0;
|
|
164
|
+
} else if (active.current === 'preview') {
|
|
165
|
+
scrollTop = previewDom.scrollTop || 0;
|
|
166
|
+
}
|
|
167
|
+
dispatch({
|
|
168
|
+
scrollTop
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
var previewClassName = prefixCls + "-preview " + (previewOptions.className || '');
|
|
173
|
+
var handlePreviewScroll = e => handleScroll(e, 'preview');
|
|
174
|
+
var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
|
|
175
|
+
ref: previewRef,
|
|
176
|
+
className: previewClassName,
|
|
177
|
+
children: /*#__PURE__*/_jsx(MarkdownPreview, _extends({}, previewOptions, {
|
|
178
|
+
onScroll: handlePreviewScroll,
|
|
179
|
+
source: state.markdown || ''
|
|
180
|
+
}))
|
|
181
|
+
}), [previewClassName, previewOptions, state.markdown]);
|
|
182
|
+
var preview = (components == null ? void 0 : components.preview) && (components == null ? void 0 : components.preview(state.markdown || '', state, dispatch));
|
|
183
|
+
if (preview && /*#__PURE__*/React.isValidElement(preview)) {
|
|
184
|
+
mdPreview = /*#__PURE__*/_jsx("div", {
|
|
185
|
+
className: previewClassName,
|
|
186
|
+
ref: previewRef,
|
|
187
|
+
onScroll: handlePreviewScroll,
|
|
188
|
+
children: preview
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
var containerStyle = _extends({}, other.style, {
|
|
192
|
+
height: state.height || '100%'
|
|
193
|
+
});
|
|
194
|
+
var containerClick = () => dispatch({
|
|
195
|
+
barPopup: _extends({}, setGroupPopFalse(state.barPopup))
|
|
196
|
+
});
|
|
197
|
+
var dragBarChange = newHeight => dispatch({
|
|
198
|
+
height: newHeight
|
|
199
|
+
});
|
|
200
|
+
var changeHandle = evn => {
|
|
201
|
+
onChange && onChange(evn.target.value, evn, state);
|
|
202
|
+
if (textareaProps && textareaProps.onChange) {
|
|
203
|
+
textareaProps.onChange(evn);
|
|
204
|
+
}
|
|
205
|
+
if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
|
|
206
|
+
var obj = new TextAreaCommandOrchestrator(state.textarea);
|
|
207
|
+
var objState = obj.getState() || {};
|
|
208
|
+
onStatistics(_extends({}, objState, {
|
|
209
|
+
lineCount: evn.target.value.split('\n').length,
|
|
210
|
+
length: evn.target.value.length
|
|
211
|
+
}));
|
|
212
|
+
}
|
|
213
|
+
};
|
|
214
|
+
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
|
215
|
+
value: _extends({}, state, {
|
|
216
|
+
dispatch
|
|
217
|
+
}),
|
|
218
|
+
children: /*#__PURE__*/_jsxs("div", _extends({
|
|
219
|
+
ref: container,
|
|
220
|
+
className: cls
|
|
221
|
+
}, other, {
|
|
222
|
+
onClick: containerClick,
|
|
223
|
+
style: containerStyle,
|
|
224
|
+
children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
|
|
225
|
+
prefixCls: prefixCls,
|
|
226
|
+
overflow: overflow,
|
|
227
|
+
toolbarBottom: toolbarBottom
|
|
228
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
229
|
+
className: prefixCls + "-content",
|
|
230
|
+
children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/_jsx(TextArea, _extends({
|
|
231
|
+
className: prefixCls + "-input",
|
|
232
|
+
prefixCls: prefixCls,
|
|
233
|
+
autoFocus: autoFocus
|
|
234
|
+
}, textareaProps, {
|
|
235
|
+
onChange: changeHandle,
|
|
236
|
+
renderTextarea: (components == null ? void 0 : components.textarea) || renderTextarea,
|
|
237
|
+
onScroll: e => handleScroll(e, 'text')
|
|
238
|
+
})), /(live|preview)/.test(state.preview || '') && mdPreview]
|
|
239
|
+
}), visibleDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
|
|
240
|
+
prefixCls: prefixCls,
|
|
241
|
+
height: state.height,
|
|
242
|
+
maxHeight: maxHeight,
|
|
243
|
+
minHeight: minHeight,
|
|
244
|
+
onChange: dragBarChange
|
|
245
|
+
}), !hideToolbar && toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
|
|
246
|
+
prefixCls: prefixCls,
|
|
247
|
+
overflow: overflow,
|
|
248
|
+
toolbarBottom: toolbarBottom
|
|
249
|
+
})]
|
|
250
|
+
}))
|
|
251
|
+
});
|
|
252
|
+
});
|
|
253
|
+
var Editor = InternalMDEditor;
|
|
254
|
+
Editor.Markdown = MarkdownPreview;
|
|
255
|
+
export default Editor;
|
package/esm/Types.d.ts
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
import type { MarkdownPreviewProps } from '@uiw/react-markdown-preview/nohighlight';
|
|
3
|
+
import type { ITextAreaProps } from './components/TextArea/index.nohighlight';
|
|
4
|
+
import type { ICommand, TextState } from './commands';
|
|
5
|
+
import type { ContextStore, PreviewType } from './Context';
|
|
6
|
+
export interface IProps {
|
|
7
|
+
prefixCls?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface Statistics extends TextState {
|
|
11
|
+
/** total length of the document */
|
|
12
|
+
length: number;
|
|
13
|
+
/** Get the number of lines in the editor. */
|
|
14
|
+
lineCount: number;
|
|
15
|
+
}
|
|
16
|
+
export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
|
|
17
|
+
/**
|
|
18
|
+
* The Markdown value.
|
|
19
|
+
*/
|
|
20
|
+
value?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Event handler for the `onChange` event.
|
|
23
|
+
*/
|
|
24
|
+
onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
|
|
25
|
+
/**
|
|
26
|
+
* editor height change listener
|
|
27
|
+
*/
|
|
28
|
+
onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
|
|
29
|
+
/** Some data on the statistics editor. */
|
|
30
|
+
onStatistics?: (data: Statistics) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
|
|
33
|
+
* it will be set to true when either the source `textarea` is focused,
|
|
34
|
+
* or it has an `autofocus` attribute and no other element is focused.
|
|
35
|
+
*/
|
|
36
|
+
autoFocus?: ITextAreaProps['autoFocus'];
|
|
37
|
+
/**
|
|
38
|
+
* The height of the editor.
|
|
39
|
+
* ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
|
|
40
|
+
*/
|
|
41
|
+
height?: CSSProperties['height'];
|
|
42
|
+
/**
|
|
43
|
+
* Custom toolbar heigth
|
|
44
|
+
* @default 29px
|
|
45
|
+
*
|
|
46
|
+
* @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
|
|
47
|
+
*
|
|
48
|
+
*/
|
|
49
|
+
toolbarHeight?: number;
|
|
50
|
+
/**
|
|
51
|
+
* Show drag and drop tool. Set the height of the editor.
|
|
52
|
+
*/
|
|
53
|
+
visibleDragbar?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* @deprecated use `visibleDragbar`
|
|
56
|
+
*/
|
|
57
|
+
visiableDragbar?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Show markdown preview.
|
|
60
|
+
*/
|
|
61
|
+
preview?: PreviewType;
|
|
62
|
+
/**
|
|
63
|
+
* Full screen display editor.
|
|
64
|
+
*/
|
|
65
|
+
fullscreen?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Disable `fullscreen` setting body styles
|
|
68
|
+
*/
|
|
69
|
+
overflow?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Maximum drag height. `visibleDragbar=true`
|
|
72
|
+
*/
|
|
73
|
+
maxHeight?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Minimum drag height. `visibleDragbar=true`
|
|
76
|
+
*/
|
|
77
|
+
minHeight?: number;
|
|
78
|
+
/**
|
|
79
|
+
* This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
|
|
80
|
+
*/
|
|
81
|
+
previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
|
|
82
|
+
/**
|
|
83
|
+
* Set the `textarea` related props.
|
|
84
|
+
*/
|
|
85
|
+
textareaProps?: ITextAreaProps;
|
|
86
|
+
/**
|
|
87
|
+
* Use div to replace TextArea or re-render TextArea
|
|
88
|
+
* @deprecated Please use ~~`renderTextarea`~~ -> `components`
|
|
89
|
+
*/
|
|
90
|
+
renderTextarea?: ITextAreaProps['renderTextarea'];
|
|
91
|
+
/**
|
|
92
|
+
* re-render element
|
|
93
|
+
*/
|
|
94
|
+
components?: {
|
|
95
|
+
/** Use div to replace TextArea or re-render TextArea */
|
|
96
|
+
textarea?: ITextAreaProps['renderTextarea'];
|
|
97
|
+
/**
|
|
98
|
+
* Override the default command element
|
|
99
|
+
* _`toolbar`_ < _`command[].render`_
|
|
100
|
+
*/
|
|
101
|
+
toolbar?: ICommand['render'];
|
|
102
|
+
/** Custom markdown preview */
|
|
103
|
+
preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
|
|
104
|
+
};
|
|
105
|
+
/** Theme configuration */
|
|
106
|
+
'data-color-mode'?: 'light' | 'dark';
|
|
107
|
+
/**
|
|
108
|
+
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
|
|
109
|
+
* @default true
|
|
110
|
+
*/
|
|
111
|
+
highlightEnable?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* The number of characters to insert when pressing tab key.
|
|
114
|
+
* Default `2` spaces.
|
|
115
|
+
*/
|
|
116
|
+
tabSize?: number;
|
|
117
|
+
/**
|
|
118
|
+
* 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.
|
|
119
|
+
*/
|
|
120
|
+
defaultTabEnable?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* You can create your own commands or reuse existing commands.
|
|
123
|
+
*/
|
|
124
|
+
commands?: ICommand[];
|
|
125
|
+
/**
|
|
126
|
+
* Filter or modify your commands.
|
|
127
|
+
* https://github.com/uiwjs/react-md-editor/issues/296
|
|
128
|
+
*/
|
|
129
|
+
commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
|
|
130
|
+
/**
|
|
131
|
+
* You can create your own commands or reuse existing commands.
|
|
132
|
+
*/
|
|
133
|
+
extraCommands?: ICommand[];
|
|
134
|
+
/**
|
|
135
|
+
* Hide the tool bar
|
|
136
|
+
*/
|
|
137
|
+
hideToolbar?: boolean;
|
|
138
|
+
/** Whether to enable scrolling */
|
|
139
|
+
enableScroll?: boolean;
|
|
140
|
+
/** Toolbar on bottom */
|
|
141
|
+
toolbarBottom?: boolean;
|
|
142
|
+
/**
|
|
143
|
+
* The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
|
|
144
|
+
*
|
|
145
|
+
* https://github.com/uiwjs/react-md-editor/issues/462
|
|
146
|
+
*/
|
|
147
|
+
direction?: CSSProperties['direction'];
|
|
148
|
+
}
|
package/esm/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/commands/index.d.ts
CHANGED
|
@@ -21,6 +21,9 @@ import { title3 } from './title3';
|
|
|
21
21
|
import { title4 } from './title4';
|
|
22
22
|
import { title5 } from './title5';
|
|
23
23
|
import { title6 } from './title6';
|
|
24
|
+
import { table } from './table';
|
|
25
|
+
import { issue } from './issue';
|
|
26
|
+
import { help } from './help';
|
|
24
27
|
export interface CommandOrchestrator {
|
|
25
28
|
executeCommand(command: ICommand): void;
|
|
26
29
|
}
|
|
@@ -90,4 +93,4 @@ declare class TextAreaCommandOrchestrator implements CommandOrchestrator {
|
|
|
90
93
|
getState(): false | TextState;
|
|
91
94
|
executeCommand(command: ICommand<string>, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState, shortcuts?: string[]): void;
|
|
92
95
|
}
|
|
93
|
-
export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
|
|
96
|
+
export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
|
package/esm/commands/index.js
CHANGED
|
@@ -22,6 +22,7 @@ import { title4 } from './title4';
|
|
|
22
22
|
import { title5 } from './title5';
|
|
23
23
|
import { title6 } from './title6';
|
|
24
24
|
import { table } from './table';
|
|
25
|
+
import { issue } from './issue';
|
|
25
26
|
import { help } from './help';
|
|
26
27
|
var getCommands = () => [bold, italic, strikethrough, hr, group([title1, title2, title3, title4, title5, title6], {
|
|
27
28
|
name: 'title',
|
|
@@ -87,6 +88,6 @@ class TextAreaCommandOrchestrator {
|
|
|
87
88
|
}, getStateFromTextArea(this.textArea)), this.textApi, dispatch, state, shortcuts);
|
|
88
89
|
}
|
|
89
90
|
}
|
|
90
|
-
export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen,
|
|
91
|
+
export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen,
|
|
91
92
|
// Tool method.
|
|
92
93
|
getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IProps } from '../../
|
|
2
|
+
import { IProps } from '../../Types';
|
|
3
3
|
export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
|
|
4
4
|
}
|
|
5
5
|
export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -123,10 +123,8 @@ export default function handleKeyDown(e, tabSize, defaultTabEnable) {
|
|
|
123
123
|
if (currentLineStr.startsWith('*')) {
|
|
124
124
|
startStr = '\n* ';
|
|
125
125
|
}
|
|
126
|
-
if (currentLineStr.startsWith('- [ ]')) {
|
|
126
|
+
if (currentLineStr.startsWith('- [ ]') || currentLineStr.startsWith('- [X]') || currentLineStr.startsWith('- [x]')) {
|
|
127
127
|
startStr = '\n- [ ] ';
|
|
128
|
-
} else if (currentLineStr.startsWith('- [X]') || currentLineStr.startsWith('- [x]')) {
|
|
129
|
-
startStr = '\n- [X] ';
|
|
130
128
|
}
|
|
131
129
|
if (/^\d+.\s/.test(currentLineStr)) {
|
|
132
130
|
startStr = "\n" + (parseInt(currentLineStr) + 1) + ". ";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ContextStore, ExecuteCommandState } from '../../Context';
|
|
3
3
|
import { TextAreaProps } from './Textarea';
|
|
4
|
-
import { IProps } from '../../
|
|
4
|
+
import { IProps } from '../../Types';
|
|
5
5
|
import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
|
|
6
6
|
import './index.less';
|
|
7
7
|
type RenderTextareaHandle = {
|