feat: add enablePreview props. (#205)

Author: jaywcjlove

core/README.md

@@ -167,6 +167,20 @@ const Dome = () => (
 export default Dome;
 ```
 
+```jsx mdx:preview
+import React from "react";
+import MarkdownEditor from '@uiw/react-markdown-editor';
+
+const Dome = () => (
+  <MarkdownEditor
+    value="Hello Markdown!"
+    height="200px"
+    enablePreview={false}
+  />
+);
+
+export default Dome;
+```
 ## Support Nextjs
 
 Use examples in [nextjs](https://nextjs.org/). 

core/src/commands/preview.tsx

@@ -4,7 +4,7 @@ import { IMarkdownEditor, ToolBarProps } from '..';
 
 const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
   const { editorProps } = props;
-  const { containerEditor, preview, previewWidth = '50%' } = editorProps;
+  const { containerEditor, preview, previewWidth = '50%', enablePreview } = editorProps;
   const [visible, setVisible] = useState(props.editorProps.visible);
   useEffect(() => setVisible(props.editorProps.visible), [props.editorProps.visible]);
   useEffect(() => {
@@ -35,6 +35,8 @@ const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Tool
     }
   }, [visible, containerEditor, preview, previewWidth]);
 
+  if (!enablePreview) return;
+
   return (
     <button onClick={() => setVisible(!visible)} type="button" className={visible ? 'active' : ''}>
       {props.command.icon}

core/src/index.tsx

@@ -33,6 +33,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
   /** Preview expanded width @default `50%` */
   previewWidth?: string;
+  /** Whether to enable preview function @default `true` */
+  enablePreview?: boolean;
   /** Whether to enable scrolling */
   enableScroll?: boolean;
   /** Tool display settings. */
@@ -93,6 +95,7 @@ function MarkdownEditorInternal(
     hideToolbar = true,
     toolbarBottom = false,
     enableScroll = true,
+    enablePreview = true,
     previewProps = {},
     extensions = [],
     previewWidth = '50%',
@@ -189,13 +192,15 @@ function MarkdownEditorInternal(
           />
         )}
       </div>
-      <div className={clsPreview} ref={preview}>
-        {renderPreview ? (
-          renderPreview(previewProps, !!visible)
-        ) : (
-          <MarkdownPreview {...previewProps} data-visible={!!visible} />
-        )}
-      </div>
+      {enablePreview && (
+        <div className={clsPreview} ref={preview}>
+          {renderPreview ? (
+            renderPreview(previewProps, !!visible)
+          ) : (
+            <MarkdownPreview {...previewProps} data-visible={!!visible} />
+          )}
+        </div>
+      )}
     </div>
   );