Skip to content

Commit 0718630

Browse files
committed
feat: add onStatistics props. (#522)
1 parent db37252 commit 0718630

3 files changed

Lines changed: 29 additions & 8 deletions

File tree

core/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -733,6 +733,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
733733
- `value: string`: The Markdown value.
734734
- `onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore)`: Event handler for the `onChange` event.
735735
- `onHeightChange?: ((value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore)`: editor height change listener.
736+
- `onStatistics?: (data: Statistics) => void;` Some data on the statistics editor.
736737
- `commands?: ICommand[]`: An array of [`ICommand`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L39-L57), which, each one, contain a [`commands`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L155-L180) property. If no commands are specified, the default will be used. Commands are explained in more details below.
737738
- `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
738739
- `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.

core/src/Editor.tsx

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-previ
33
import TextArea, { ITextAreaProps } from './components/TextArea';
44
import Toolbar from './components/Toolbar';
55
import DragBar from './components/DragBar';
6-
import { getCommands, getExtraCommands, ICommand } from './commands';
6+
import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
77
import { reducer, EditorContext, ContextStore, PreviewType } from './Context';
88
import './index.less';
99

@@ -12,6 +12,13 @@ export interface IProps {
1212
className?: string;
1313
}
1414

15+
export interface Statistics extends TextState {
16+
/** total length of the document */
17+
length: number;
18+
/** Get the number of lines in the editor. */
19+
lineCount: number;
20+
}
21+
1522
export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
1623
/**
1724
* The Markdown value.
@@ -25,6 +32,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
2532
* editor height change listener
2633
*/
2734
onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
35+
/** Some data on the statistics editor. */
36+
onStatistics?: (data: Statistics) => void;
2837
/**
2938
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
3039
* it will be set to true when either the source `textarea` is focused,
@@ -180,6 +189,7 @@ const InternalMDEditor = (
180189
tabSize = 2,
181190
defaultTabEnable = false,
182191
onChange,
192+
onStatistics,
183193
onHeightChange,
184194
hideToolbar,
185195
toolbarBottom = false,
@@ -336,6 +346,21 @@ const InternalMDEditor = (
336346
const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
337347
const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
338348

349+
const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
350+
onChange && onChange(evn.target.value, evn, state);
351+
if (textareaProps && textareaProps.onChange) {
352+
textareaProps.onChange(evn);
353+
}
354+
if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
355+
const obj = new TextAreaCommandOrchestrator(state.textarea!);
356+
const objState = (obj.getState() || {}) as TextState;
357+
onStatistics({
358+
...objState,
359+
lineCount: evn.target.value.split('\n').length,
360+
length: evn.target.value.length,
361+
});
362+
}
363+
};
339364
return (
340365
<EditorContext.Provider value={{ ...state, dispatch }}>
341366
<div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
@@ -349,12 +374,7 @@ const InternalMDEditor = (
349374
prefixCls={prefixCls}
350375
autoFocus={autoFocus}
351376
{...textareaProps}
352-
onChange={(evn) => {
353-
onChange && onChange(evn.target.value, evn, state);
354-
if (textareaProps && textareaProps.onChange) {
355-
textareaProps.onChange(evn);
356-
}
357-
}}
377+
onChange={changeHandle}
358378
renderTextarea={components?.textarea || renderTextarea}
359379
onScroll={(e) => handleScroll(e, 'text')}
360380
/>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"lint-staged": "^13.2.0",
3030
"prettier": "^2.7.1",
3131
"react-test-renderer": "~18.2.0",
32-
"tsbb": "^4.0.5",
32+
"tsbb": "^4.1.5",
3333
"jest": "^29.5.0",
3434
"jest-watch-typeahead": "^2.2.2",
3535
"jest-environment-jsdom": "~29.5.0",

0 commit comments

Comments
 (0)