feat: add onPreviewMode props. (#208)

uiwjs · Oct 17, 2023 · 45a74a6 · 45a74a6
1 parent 78fb724
commit 45a74a6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/core/README.md b/core/README.md
@@ -259,6 +259,7 @@ const Demo = () => {
 - `toolbarsMode?: ICommand[] | string[]` - Tool display settings.
 - `onChange?:function(editor: IInstance, data: CodeMirror.EditorChange, value: string)` - called when a change is made
 - `onBlur?: function(editor: IInstance, event: Event)` - event occurs when an object loses focus
+- `onPreviewMode?: (isHide: boolean) => void` - Edit mode and preview mode switching event
 - `previewProps` - [react-markdown options](https://github.com/uiwjs/react-markdown-preview/tree/v2.1.0#options-props)
 
 ```ts
@@ -293,6 +294,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   previewProps?: MarkdownPreviewProps;
   /** replace the default `extensions` */
   reExtensions?: ReactCodeMirrorProps['extensions'];
+  /** Edit mode and preview mode switching event */
+  onPreviewMode?: (isHide: boolean) => void;
 }
 ```
 

diff --git a/core/src/commands/preview.tsx b/core/src/commands/preview.tsx
@@ -34,10 +34,14 @@ const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Tool
       }
     }
   }, [visible, containerEditor, preview, previewWidth]);
-  if (!enablePreview) return;
 
+  if (!enablePreview) return;
+  const handle = () => {
+    editorProps.onPreviewMode && editorProps.onPreviewMode(!visible);
+    setVisible(!visible);
+  };
   return (
-    <button onClick={() => setVisible(!visible)} type="button" className={visible ? 'active' : ''}>
+    <button onClick={handle} type="button" className={visible ? 'active' : ''}>
       {props.command.icon}
     </button>
   );

diff --git a/core/src/index.tsx b/core/src/index.tsx
@@ -51,6 +51,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   previewProps?: MarkdownPreviewProps;
   /** replace the default `extensions` */
   reExtensions?: ReactCodeMirrorProps['extensions'];
+  /** Edit mode and preview mode switching event */
+  onPreviewMode?: (isHide: boolean) => void;
 }
 
 export interface ToolBarProps {
@@ -100,6 +102,7 @@ function MarkdownEditorInternal(
     extensions = [],
     previewWidth = '50%',
     reExtensions,
+    onPreviewMode,
     ...codemirrorProps
   } = props;
   const [value, setValue] = useState(props.value || '');