feat: add onStatistics props. (#522)

Author: jaywcjlove

core/README.md

@@ -733,6 +733,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `value: string`: The Markdown value.
 - `onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore)`: Event handler for the `onChange` event.
 - `onHeightChange?: ((value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore)`: editor height change listener.
+- `onStatistics?: (data: Statistics) => void;` Some data on the statistics editor.
 - `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.
 - `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
 - `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.

core/src/Editor.tsx

@@ -3,7 +3,7 @@ import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-previ
 import TextArea, { ITextAreaProps } from './components/TextArea';
 import Toolbar from './components/Toolbar';
 import DragBar from './components/DragBar';
-import { getCommands, getExtraCommands, ICommand } from './commands';
+import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext, ContextStore, PreviewType } from './Context';
 import './index.less';
 
@@ -12,6 +12,13 @@ export interface IProps {
   className?: string;
 }
 
+export interface Statistics extends TextState {
+  /** total length of the document */
+  length: number;
+  /** Get the number of lines in the editor. */
+  lineCount: number;
+}
+
 export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
   /**
    * The Markdown value.
@@ -25,6 +32,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * editor height change listener
    */
   onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
+  /** Some data on the statistics editor. */
+  onStatistics?: (data: Statistics) => void;
   /**
    * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
    * it will be set to true when either the source `textarea` is focused,
@@ -180,6 +189,7 @@ const InternalMDEditor = (
     tabSize = 2,
     defaultTabEnable = false,
     onChange,
+    onStatistics,
     onHeightChange,
     hideToolbar,
     toolbarBottom = false,
@@ -336,6 +346,21 @@ const InternalMDEditor = (
   const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
   const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
 
+  const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange && onChange(evn.target.value, evn, state);
+    if (textareaProps && textareaProps.onChange) {
+      textareaProps.onChange(evn);
+    }
+    if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+      const obj = new TextAreaCommandOrchestrator(state.textarea!);
+      const objState = (obj.getState() || {}) as TextState;
+      onStatistics({
+        ...objState,
+        lineCount: evn.target.value.split('\n').length,
+        length: evn.target.value.length,
+      });
+    }
+  };
   return (
     <EditorContext.Provider value={{ ...state, dispatch }}>
       <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
@@ -349,12 +374,7 @@ const InternalMDEditor = (
               prefixCls={prefixCls}
               autoFocus={autoFocus}
               {...textareaProps}
-              onChange={(evn) => {
-                onChange && onChange(evn.target.value, evn, state);
-                if (textareaProps && textareaProps.onChange) {
-                  textareaProps.onChange(evn);
-                }
-              }}
+              onChange={changeHandle}
               renderTextarea={components?.textarea || renderTextarea}
               onScroll={(e) => handleScroll(e, 'text')}
             />

package.json

@@ -29,7 +29,7 @@
     "lint-staged": "^13.2.0",
     "prettier": "^2.7.1",
     "react-test-renderer": "~18.2.0",
-    "tsbb": "^4.0.5",
+    "tsbb": "^4.1.5",
     "jest": "^29.5.0",
     "jest-watch-typeahead": "^2.2.2",
     "jest-environment-jsdom": "~29.5.0",