@uiw/react-md-editor 3.21.0 → 3.22.0

package/esm/Editor.d.ts

@@ -1,13 +1,19 @@
 import React, { CSSProperties, PropsWithRef } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import { ITextAreaProps } from './components/TextArea';
-import { ICommand } from './commands';
+import { ICommand, TextState } from './commands';
 import { ContextStore, PreviewType } from './Context';
 import './index.less';
 export interface IProps {
     prefixCls?: string;
     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.
@@ -21,6 +27,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,

package/esm/Editor.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+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"];
 import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import TextArea from './components/TextArea';
 import Toolbar from './components/Toolbar';
 import DragBar from './components/DragBar';
-import { getCommands, getExtraCommands } from './commands';
+import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext } from './Context';
 import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -44,7 +44,8 @@ var InternalMDEditor = (props, ref) => {
       autoFocus,
       tabSize = 2,
       defaultTabEnable = false,
-      onChange: _onChange,
+      onChange,
+      onStatistics,
       onHeightChange,
       hideToolbar,
       toolbarBottom = false,
@@ -197,6 +198,20 @@ var InternalMDEditor = (props, ref) => {
   var dragBarChange = newHeight => dispatch({
     height: newHeight
   });
+  var changeHandle = evn => {
+    onChange && onChange(evn.target.value, evn, state);
+    if (textareaProps && textareaProps.onChange) {
+      textareaProps.onChange(evn);
+    }
+    if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+      var obj = new TextAreaCommandOrchestrator(state.textarea);
+      var objState = obj.getState() || {};
+      onStatistics(_extends({}, objState, {
+        lineCount: evn.target.value.split('\n').length,
+        length: evn.target.value.length
+      }));
+    }
+  };
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: _extends({}, state, {
       dispatch
@@ -218,12 +233,7 @@ var InternalMDEditor = (props, ref) => {
           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 == null ? void 0 : components.textarea) || renderTextarea,
           onScroll: e => handleScroll(e, 'text')
         })), /(live|preview)/.test(state.preview || '') && mdPreview]

package/esm/components/TextArea/Textarea.js

@@ -54,7 +54,6 @@ export default function Textarea(props) {
   }, []);
   var onKeyDown = e => {
     handleKeyDown(e, tabSize, defaultTabEnable);
-    console.log('otherStore:', otherStore);
     shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);
   };
   useEffect(() => {

package/lib/Editor.d.ts

@@ -1,13 +1,19 @@
 import React, { CSSProperties, PropsWithRef } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import { ITextAreaProps } from './components/TextArea';
-import { ICommand } from './commands';
+import { ICommand, TextState } from './commands';
 import { ContextStore, PreviewType } from './Context';
 import './index.less';
 export interface IProps {
     prefixCls?: string;
     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.
@@ -21,6 +27,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,

package/lib/Editor.js

@@ -17,7 +17,7 @@ var _DragBar = _interopRequireDefault(require("./components/DragBar"));
 var _commands = require("./commands");
 var _Context = require("./Context");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+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"];
 function setGroupPopFalse() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   Object.keys(data).forEach(function (keyname) {
@@ -63,7 +63,8 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
     tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
     _ref$defaultTabEnable = _ref.defaultTabEnable,
     defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
+    onStatistics = _ref.onStatistics,
     onHeightChange = _ref.onHeightChange,
     hideToolbar = _ref.hideToolbar,
     _ref$toolbarBottom = _ref.toolbarBottom,
@@ -255,6 +256,20 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
       height: newHeight
     });
   };
+  var changeHandle = function changeHandle(evn) {
+    onChange && onChange(evn.target.value, evn, state);
+    if (textareaProps && textareaProps.onChange) {
+      textareaProps.onChange(evn);
+    }
+    if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+      var obj = new _commands.TextAreaCommandOrchestrator(state.textarea);
+      var objState = obj.getState() || {};
+      onStatistics((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, objState), {}, {
+        lineCount: evn.target.value.split('\n').length,
+        length: evn.target.value.length
+      }));
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
     value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
       dispatch: dispatch
@@ -276,12 +291,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
           prefixCls: prefixCls,
           autoFocus: autoFocus
         }, textareaProps), {}, {
-          onChange: function onChange(evn) {
-            _onChange && _onChange(evn.target.value, evn, state);
-            if (textareaProps && textareaProps.onChange) {
-              textareaProps.onChange(evn);
-            }
-          },
+          onChange: changeHandle,
           renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,
           onScroll: function onScroll(e) {
             return handleScroll(e, 'text');

package/lib/components/TextArea/Textarea.js

@@ -58,7 +58,6 @@ function Textarea(props) {
   }, []);
   var onKeyDown = function onKeyDown(e) {
     (0, _handleKeyDown["default"])(e, tabSize, defaultTabEnable);
-    console.log('otherStore:', otherStore);
     (0, _shortcuts["default"])(e, [].concat((0, _toConsumableArray2["default"])(commands || []), (0, _toConsumableArray2["default"])(extraCommands || [])), executeRef.current, dispatch, statesRef.current);
   };
   (0, _react.useEffect)(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/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/src/components/TextArea/Textarea.tsx

@@ -41,7 +41,6 @@ export default function Textarea(props: TextAreaProps) {
 
   const onKeyDown = (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) => {
     handleKeyDown(e, tabSize, defaultTabEnable);
-    console.log('otherStore:', otherStore);
     shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);
   };
   useEffect(() => {