chore: wrapperElement props compatible (#213)

Author: jaywcjlove

src/index.tsx

@@ -27,6 +27,13 @@ export interface MarkdownPreviewProps extends Omit<Options, 'children'> {
   wrapperElement?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     'data-color-mode'?: 'light' | 'dark';
   };
+  /**
+   * Please use wrapperElement, Will be removed in v5 release.
+   * @deprecated
+   */
+  warpperElement?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    'data-color-mode'?: 'light' | 'dark';
+  };
   onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
   onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
   rehypeRewrite?: RehypeRewriteOptions['rewrite'];
@@ -49,6 +56,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
     pluginsFilter,
     rehypeRewrite: rewrite,
     wrapperElement = {},
+    warpperElement = {},
     ...other
   } = props;
   const mdp = React.useRef<HTMLDivElement>(null);
@@ -93,8 +101,9 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
     rehypePlugins.push(raw);
   }
   const remarkPlugins = [...(other.remarkPlugins || []), gfm];
+  const wrapperProps = warpperElement || wrapperElement || {};
   return (
-    <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...wrapperElement} className={cls} style={style}>
+    <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...wrapperProps} className={cls} style={style}>
       <ReactMarkdown
         {...customProps}
         {...other}