feat: add markdown preview component MarkdownEditor.Markdown.

Author: jaywcjlove

README.md

@@ -64,9 +64,8 @@ ReactDOM.render(<Dome />, document.getElementById('app'));
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-markdown-editor-ybpce?file=/src/App.js)
 
 ```jsx
-import MarkdownEditor from '@uiw/react-markdown-editor';
-import { createRoot } from 'react-dom/client';
 import React, { useState } from 'react';
+import MarkdownEditor from '@uiw/react-markdown-editor';
 
 function App() {
  const [markdown, setMarkdown] = useState("");
@@ -81,6 +80,23 @@ function App() {
 export default App;
 ```
 
+## Only Markdown Preview
+
+This markdown preview sub-component is a direct export [`@uiw/react-markdown-preview`](https://github.com/uiwjs/react-markdown-preview) component, API documentation, please check [`@uiw/react-markdown-preview`](https://github.com/uiwjs/react-markdown-preview).
+
+```jsx
+import React from 'react';
+import MarkdownEditor from '@uiw/react-markdown-editor';
+
+function App() {
+ return (
+ <MarkdownEditor.Markdown source="# This is a H1 \n## This is a H2 \n###### This is a H6" />
+ );
+}
+
+export default App;
+```
+
 ## Custom Toolbars
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-markdown-editorcustom-toolbars-forked-r9ocu?fontsize=14&hidenavigation=1&theme=dark)
@@ -282,6 +298,12 @@ export declare const defaultCommands: {
 };
 export declare const getCommands: () => ICommand[];
 export declare const getModeCommands: () => ICommand[];
+
+declare const MarkdownEditor: MarkdownEditorComponent;
+declare type MarkdownEditorComponent = React.FC<React.PropsWithRef<IMarkdownEditor>> & {
+ Markdown: typeof MarkdownPreview;
+};
+export default MarkdownEditor;
 ```
 
 ### Development

src/index.tsx

@@ -52,9 +52,18 @@ export interface MarkdownEditorRef {
  preview: React.RefObject<HTMLDivElement> | null;
 }
 
-export default React.forwardRef<MarkdownEditorRef, IMarkdownEditor>(MarkdownEditor);
+const MarkdownEditor: MarkdownEditorComponent = React.forwardRef<MarkdownEditorRef, IMarkdownEditor>(
+ MarkdownEditorInternal,
+) as unknown as MarkdownEditorComponent;
+type MarkdownEditorComponent = React.FC<React.PropsWithRef<IMarkdownEditor>> & {
+ Markdown: typeof MarkdownPreview;
+};
 
-function MarkdownEditor(
+MarkdownEditor.Markdown = MarkdownPreview;
+
+export default MarkdownEditor;
+
+function MarkdownEditorInternal(
  props: IMarkdownEditor,
  ref?: ((instance: MarkdownEditorRef) => void) | React.RefObject<MarkdownEditorRef> | null,
 ) {