feat: add renderPreview props.

uiwjs · Aug 30, 2022 · af186e0 · af186e0
1 parent 10e5f91
commit af186e0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -228,6 +228,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   toolbars?: IToolBarProps['toolbars'];
   /** Tool display settings. */
   toolbarsMode?: IToolBarProps['toolbars'];
+  /** Override the default preview component */
+  renderPreview?: (props: MarkdownPreviewProps, visible: boolean) => React.ReactNode;
   /** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */
   previewProps?: MarkdownPreviewProps;
 }

diff --git a/src/index.tsx b/src/index.tsx
@@ -28,6 +28,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   visibleEditor?: boolean;
   /** Option to hide the tool bar. */
   hideToolbar?: boolean;
+  /** Override the default preview component */
+  renderPreview?: (props: MarkdownPreviewProps, visible: boolean) => React.ReactNode;
   /** Tool display settings. */
   toolbars?: IToolBarProps['toolbars'];
   /** Tool display settings. */
@@ -62,6 +64,7 @@ function MarkdownEditor(
     toolbars = getCommands(),
     toolbarsMode = getModeCommands(),
     visible = true,
+    renderPreview,
     visibleEditor = true,
     hideToolbar = true,
     previewProps = {},
@@ -92,6 +95,8 @@ function MarkdownEditor(
     scrollerStyle,
     ...extensions,
   ];
+  previewProps['className'] = `${prefixCls}-preview`;
+  previewProps['source'] = value;
   return (
     <div className={`${prefixCls || ''} wmde-markdown-var ${className || ''}`} ref={container}>
       {hideToolbar && (
@@ -116,13 +121,11 @@ function MarkdownEditor(
             />
           )}
         </div>
-        <MarkdownPreview
-          {...previewProps}
-          data-visible={!!visible}
-          className={`${prefixCls}-preview`}
-          ref={previewContainer}
-          source={value}
-        />
+        {renderPreview ? (
+          renderPreview(previewProps, !!visible)
+        ) : (
+          <MarkdownPreview {...previewProps} data-visible={!!visible} ref={previewContainer} />
+        )}
       </div>
     </div>
   );