@uiw/react-md-editor 3.17.1 → 3.18.1

package/markdown-editor.css

@@ -175,7 +175,7 @@
 .w-md-editor-toolbar {
   border-bottom: 1px solid var(--color-border-default);
   background-color: var(--color-canvas-default);
-  padding: 5px;
+  padding: 5px 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -194,11 +194,15 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  line-height: initial;
 }
 .w-md-editor-toolbar li {
   display: inline-block;
   font-size: 14px;
 }
+.w-md-editor-toolbar li + li {
+  margin: 0;
+}
 .w-md-editor-toolbar li > button {
   border: none;
   height: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.17.1",
+  "version": "3.18.1",
   "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

@@ -1,5 +1,5 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
-import MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';
+import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import TextArea, { ITextAreaProps } from './components/TextArea';
 import Toolbar from './components/Toolbar';
 import DragBar from './components/DragBar';
@@ -96,6 +96,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * _`toolbar`_ < _`command[].render`_
      */
     toolbar?: ICommand['render'];
+    /** Custom markdown preview */
+    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
   };
   /**
    * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
@@ -196,7 +198,7 @@ const InternalMDEditor = (
     barPopup: {},
   });
   const container = useRef<HTMLDivElement>(null);
-  const previewRef = useRef<MarkdownPreviewRef>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
   const enableScrollRef = useRef(enableScroll);
 
   useImperativeHandle(ref, () => ({ ...state }));
@@ -271,7 +273,7 @@ const InternalMDEditor = (
   const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
     if (!enableScrollRef.current) return;
     const textareaDom = textareaDomRef.current;
-    const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;
+    const previewDom = previewRef.current ? previewRef.current : undefined;
     if (!initScroll.current) {
       active.current = type;
       initScroll.current = true;
@@ -295,32 +297,32 @@ const InternalMDEditor = (
     }
   };
 
-  const mdPreview = useMemo(
+  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
+  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
+  let mdPreview = useMemo(
     () => (
-      <MarkdownPreview
-        {...previewOptions}
-        onScroll={(e) => handleScroll(e, 'preview')}
-        ref={previewRef}
-        source={state.markdown || ''}
-        className={`${prefixCls}-preview ${previewOptions.className || ''}`}
-      />
+      <div ref={previewRef} className={previewClassName}>
+        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
+      </div>
     ),
-    [prefixCls, previewOptions, state.markdown],
+    [previewClassName, previewOptions, state.markdown],
   );
+  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
+  if (preview && React.isValidElement(preview)) {
+    mdPreview = (
+      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
+        {preview}
+      </div>
+    );
+  }
+
+  const containerStyle = { ...other.style, height: state.height || '100%' };
+  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
+  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
+
   return (
     <EditorContext.Provider value={{ ...state, dispatch }}>
-      <div
-        ref={container}
-        className={cls}
-        {...other}
-        onClick={() => {
-          dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
-        }}
-        style={{
-          ...other.style,
-          height: state.height || '100%',
-        }}
-      >
+      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
         {!hideToolbar && !toolbarBottom && (
           <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
         )}
@@ -349,9 +351,7 @@ const InternalMDEditor = (
             height={state.height as number}
             maxHeight={maxHeight!}
             minHeight={minHeight!}
-            onChange={(newHeight) => {
-              dispatch({ height: newHeight });
-            }}
+            onChange={dragBarChange}
           />
         )}
         {!hideToolbar && toolbarBottom && (
@@ -362,12 +362,10 @@ const InternalMDEditor = (
   );
 };
 
-const mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);
+type Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };
 
-type MDEditor = typeof mdEditor & {
-  Markdown: typeof MarkdownPreview;
-};
+const mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;
 
-(mdEditor as MDEditor).Markdown = MarkdownPreview;
+mdEditor.Markdown = MarkdownPreview;
 
-export default mdEditor as MDEditor;
+export default mdEditor;

package/src/components/Toolbar/index.less

@@ -4,7 +4,7 @@
   &-toolbar {
     border-bottom: 1px solid var(--color-border-default);
     background-color: var(--color-canvas-default);
-    padding: 5px;
+    padding: 5px 5px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -21,10 +21,14 @@
       margin: 0;
       padding: 0;
       list-style: none;
+      line-height: initial;
     }
     li {
       display: inline-block;
       font-size: 14px;
+      & + li {
+        margin: 0;
+      }
       > button {
         border: none;
         height: 20px;