@uiw/react-md-editor 3.21.1 → 3.23.0

package/markdown-editor.css

@@ -44,6 +44,7 @@
   box-sizing: inherit;
   display: inherit;
   font-family: inherit;
+  font-family: var(--md-editor-font-family) !important;
   font-size: inherit;
   font-style: inherit;
   -webkit-font-variant-ligatures: inherit;
@@ -61,11 +62,6 @@
   word-break: normal;
   padding: 0;
 }
-.w-md-editor-text-pre > code,
-.w-md-editor-text-input > code,
-.w-md-editor-text > .w-md-editor-text-pre > code {
-  font-family: inherit;
-}
 .w-md-editor-text-pre {
   position: relative;
   margin: 0px !important;
@@ -74,7 +70,7 @@
 }
 .w-md-editor-text-pre > code {
   padding: 0 !important;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+  font-family: var(--md-editor-font-family) !important;
   font-size: 14px !important;
   line-height: 18px !important;
 }
@@ -119,17 +115,17 @@
   }
 }
 .w-md-editor-text-pre .punctuation {
-  color: var(--color-prettylights-syntax-comment) !important;
+  color: var(--color-prettylights-syntax-comment, #8b949e) !important;
 }
 .w-md-editor-text-pre .token.url,
 .w-md-editor-text-pre .token.content {
-  color: var(--color-prettylights-syntax-constant) !important;
+  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
 }
 .w-md-editor-text-pre .token.title.important {
-  color: var(--color-prettylights-syntax-markup-bold);
+  color: var(--color-prettylights-syntax-markup-bold, #24292f);
 }
 .w-md-editor-text-pre .token.code-block .function {
-  color: var(--color-prettylights-syntax-entity);
+  color: var(--color-prettylights-syntax-entity, #8250df);
 }
 .w-md-editor-text-pre .token.bold {
   font-weight: unset !important;
@@ -140,17 +136,17 @@
   font-weight: unset !important;
 }
 .w-md-editor-text-pre .token.code.keyword {
-  color: var(--color-prettylights-syntax-constant) !important;
+  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
 }
 .w-md-editor-text-pre .token.strike,
 .w-md-editor-text-pre .token.strike .content {
-  color: var(--color-prettylights-syntax-markup-deleted-text) !important;
+  color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
 }
 .w-md-editor-toolbar-child {
   position: absolute;
   border-radius: 3px;
-  box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
-  background-color: var(--color-canvas-default);
+  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
+  background-color: var(--md-editor-background-color);
   z-index: 1;
   display: none;
 }
@@ -173,8 +169,8 @@
   margin: 0;
 }
 .w-md-editor-toolbar {
-  border-bottom: 1px solid var(--color-border-default);
-  background-color: var(--color-canvas-default);
+  border-bottom: 1px solid var(--md-editor-box-shadow-color);
+  background-color: var(--md-editor-background-color);
   padding: 5px 5px;
   display: flex;
   justify-content: space-between;
@@ -186,7 +182,7 @@
 }
 .w-md-editor-toolbar.bottom {
   border-bottom: 0px;
-  border-top: 1px solid var(--color-border-default);
+  border-top: 1px solid var(--md-editor-box-shadow-color);
   border-radius: 0 0 3px 3px;
 }
 .w-md-editor-toolbar ul,
@@ -230,12 +226,12 @@
   color: var(--color-danger-fg);
 }
 .w-md-editor-toolbar li > button:disabled {
-  color: var(--color-border-default);
+  color: var(--md-editor-box-shadow-color);
   cursor: not-allowed;
 }
 .w-md-editor-toolbar li > button:disabled:hover {
   background-color: transparent;
-  color: var(--color-border-default);
+  color: var(--md-editor-box-shadow-color);
 }
 .w-md-editor-toolbar li.active > button {
   color: var(--color-accent-fg);
@@ -246,7 +242,7 @@
   width: 1px;
   margin: -3px 3px 0 3px !important;
   vertical-align: middle;
-  background-color: var(--color-border-default);
+  background-color: var(--md-editor-box-shadow-color);
 }
 .w-md-editor {
   text-align: left;
@@ -254,8 +250,11 @@
   padding-bottom: 1px;
   position: relative;
   color: var(--color-fg-default);
-  box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
-  background-color: var(--color-canvas-default);
+  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --md-editor-background-color: var(--color-canvas-default, #ffffff);
+  --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
+  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
+  background-color: var(--md-editor-background-color);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   display: flex;
   flex-direction: column;
@@ -268,7 +267,7 @@
   right: unset !important;
   left: 0;
   text-align: right !important;
-  box-shadow: inset -1px 0 0 0 var(--color-border-default);
+  box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
 }
 .w-md-editor.w-md-editor-rtl .w-md-editor-text {
   text-align: right !important;
@@ -297,7 +296,7 @@
 .w-md-editor-preview {
   width: 50%;
   box-sizing: border-box;
-  box-shadow: inset 1px 0 0 0 var(--color-border-default);
+  box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
   position: absolute;
   padding: 10px 20px;
   overflow: auto;
@@ -317,7 +316,7 @@
 .w-md-editor-show-preview .w-md-editor-input {
   width: 0%;
   overflow: hidden;
-  background-color: var(--color-canvas-default);
+  background-color: var(--md-editor-background-color);
 }
 .w-md-editor-show-preview .w-md-editor-preview {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.21.1",
+  "version": "3.23.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/index.less

@@ -27,6 +27,7 @@
       box-sizing: inherit;
       display: inherit;
       font-family: inherit;
+      font-family: var(--md-editor-font-family) !important;
       font-size: inherit;
       font-style: inherit;
       font-variant-ligatures: inherit;
@@ -42,9 +43,6 @@
       word-break: inherit;
       word-break: normal;
       padding: 0;
-      > code {
-        font-family: inherit;
-      }
     }
     &-pre {
       position: relative;
@@ -53,7 +51,7 @@
       background-color: transparent !important;
       > code {
         padding: 0 !important;
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+        font-family: var(--md-editor-font-family) !important;
         font-size: 14px !important;
         line-height: 18px !important;
       }
@@ -103,17 +101,17 @@
 
 .@{md-editor}-text-pre {
   .punctuation {
-    color: var(--color-prettylights-syntax-comment) !important;
+    color: var(--color-prettylights-syntax-comment, #8b949e) !important;
   }
   .token.url,
   .token.content {
-    color: var(--color-prettylights-syntax-constant) !important;
+    color: var(--color-prettylights-syntax-constant, #0550ae) !important;
   }
   .token.title.important {
-    color: var(--color-prettylights-syntax-markup-bold);
+    color: var(--color-prettylights-syntax-markup-bold, #24292f);
   }
   .token.code-block .function {
-    color: var(--color-prettylights-syntax-entity);
+    color: var(--color-prettylights-syntax-entity, #8250df);
   }
   .token.bold {
     font-weight: unset !important;
@@ -124,10 +122,10 @@
     font-weight: unset !important;
   }
   .token.code.keyword {
-    color: var(--color-prettylights-syntax-constant) !important;
+    color: var(--color-prettylights-syntax-constant, #0550ae) !important;
   }
   .token.strike,
   .token.strike .content {
-    color: var(--color-prettylights-syntax-markup-deleted-text) !important;
+    color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
   }
 }

package/src/components/Toolbar/Child.less

@@ -4,9 +4,9 @@
   &-toolbar-child {
     position: absolute;
     border-radius: 3px;
-    box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
-      0 1px 1px var(--color-border-default);
-    background-color: var(--color-canvas-default);
+    box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
+      0 1px 1px var(--md-editor-box-shadow-color);
+    background-color: var(--md-editor-background-color);
     z-index: 1;
     display: none;
     &.active {

package/src/components/Toolbar/index.less

@@ -2,8 +2,8 @@
 
 .@{md-editor} {
   &-toolbar {
-    border-bottom: 1px solid var(--color-border-default);
-    background-color: var(--color-canvas-default);
+    border-bottom: 1px solid var(--md-editor-box-shadow-color);
+    background-color: var(--md-editor-background-color);
     padding: 5px 5px;
     display: flex;
     justify-content: space-between;
@@ -13,7 +13,7 @@
     flex-wrap: wrap;
     &.bottom {
       border-bottom: 0px;
-      border-top: 1px solid var(--color-border-default);
+      border-top: 1px solid var(--md-editor-box-shadow-color);
       border-radius: 0 0 3px 3px;
     }
     ul,
@@ -55,11 +55,11 @@
           color: var(--color-danger-fg);
         }
         &:disabled {
-          color: var(--color-border-default);
+          color: var(--md-editor-box-shadow-color);
           cursor: not-allowed;
           &:hover {
             background-color: transparent;
-            color: var(--color-border-default);
+            color: var(--md-editor-box-shadow-color);
           }
         }
       }
@@ -73,7 +73,7 @@
       width: 1px;
       margin: -3px 3px 0 3px !important;
       vertical-align: middle;
-      background-color: var(--color-border-default);
+      background-color: var(--md-editor-box-shadow-color);
     }
   }
 }

package/src/index.less

@@ -6,9 +6,12 @@
   padding-bottom: 1px;
   position: relative;
   color: var(--color-fg-default);
-  box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
-    0 1px 1px var(--color-border-default);
-  background-color: var(--color-canvas-default);
+  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --md-editor-background-color: var(--color-canvas-default, #ffffff);
+  --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
+  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
+    0 1px 1px var(--md-editor-box-shadow-color);
+  background-color: var(--md-editor-background-color);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   display: flex;
   flex-direction: column;
@@ -20,7 +23,7 @@
     right: unset !important;
     left: 0;
     text-align: right !important;
-    box-shadow: inset -1px 0 0 0 var(--color-border-default);
+    box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
   }
   &&-rtl &-text {
     text-align: right !important;
@@ -48,7 +51,7 @@
   &-preview {
     width: 50%;
     box-sizing: border-box;
-    box-shadow: inset 1px 0 0 0 var(--color-border-default);
+    box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
     position: absolute;
     padding: 10px 20px;
     overflow: auto;
@@ -70,7 +73,7 @@
   &-show-preview &-input {
     width: 0%;
     overflow: hidden;
-    background-color: var(--color-canvas-default);
+    background-color: var(--md-editor-background-color);
   }
   &-show-preview &-preview {
     width: 100%;