feat: Support ref.

uiwjs · Dec 8, 2020 · 8ea66c4 · 8ea66c4
1 parent 0287b51
commit 8ea66c4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useImperativeHandle } from 'react';
 import ReactMarkdown, { ReactMarkdownProps } from 'react-markdown';
 import gfm from 'remark-gfm';
 import Prism from 'prismjs';
@@ -15,8 +15,13 @@ export type MarkdownPreviewProps = {
   onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
 } & ReactMarkdownProps;
 
-const MarkdownPreview: React.FC<MarkdownPreviewProps> = (props = {} as ReactMarkdownProps) => {
-  const { className, source, style, onScroll, onMouseOver, ...other  } = props;
+export type MarkdownPreviewRef = {
+  mdp: React.RefObject<HTMLDivElement>;
+  lang: string[],
+} & MarkdownPreviewProps;
+
+export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props, ref) => {
+  const { className, source, style, onScroll, onMouseOver, ...other  } = props || {};
   const mdp = React.createRef<HTMLDivElement>();
   const loadedLang = React.useRef<string[]>(['markup']);
   useEffect(() => {
@@ -42,28 +47,27 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = (props = {} as ReactMark
     }
   }
 
+  useImperativeHandle(ref, () => ({ ...props, lang: loadedLang.current, mdp }), [mdp, props]);
+
   const cls = `wmde-markdown wmde-markdown-color ${className || ''}`;
   const reactMarkdownProps = {
     allowDangerousHtml: true,
-    ...other,
-    plugins: [gfm,  ...(other.plugins || [])],
     allowNode: (node, index, parent) => {
-      const nodeany = node;
-      if (nodeany.type === 'html' && reactMarkdownProps.allowDangerousHtml) {
+      if (node.type === 'html' && reactMarkdownProps.allowDangerousHtml) {
         // filter style
         node.value = (node.value as string).replace(/<((style|script|link|input|form)|\/(style|script|link|input|form))(\s?[^>]*>)/gi, (a: string) => {
           return a.replace(/[<>]/g, (e: string) => (({ '<': '&lt;', '>': '&gt;' } as { [key: string]: string })[e]))
         });
       }
       return true;
     },
+    ...other,
+    plugins: [gfm,  ...(other.plugins || [])],
     source: source || '',
   } as ReactMarkdownProps;
   return (
     <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} className={cls} style={style}>
       <ReactMarkdown {...reactMarkdownProps} />
     </div>
   );
-}
-
-export default MarkdownPreview;
+});
diff --git a/website/App.tsx b/website/App.tsx
@@ -4,13 +4,14 @@ import Github from '@uiw/react-shields/lib/esm/github';
 import Npm from '@uiw/react-shields/lib/esm/npm';
 import logo from './logo.svg';
 import './App.css';
-import MarkdownPreview from '../';
+import MarkdownPreview, { MarkdownPreviewRef } from '../';
 import MDStr from '../README.md';
 
 let val = 1;
 
 export default () => {
   const [value, setValue] = useState('');
+  const ref = React.createRef<MarkdownPreviewRef>();
   return (
     <div className="App">
       <GitHubCorners zIndex={9999} fixed target="__blank" href="https://github.com/uiwjs/react-markdown-preview" />
@@ -24,15 +25,14 @@ export default () => {
         </p>
       </header>
       <div className="App-editor">
-        <button onClick={() => {
-          setValue('# 333' + val++)
-        }}>set value</button>
+        <button onClick={() => setValue('# Markdown ' + val++)}>set value</button>
+
         <textarea
           placeholder="Please enter the Markdown code!"
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        {value && <MarkdownPreview className="App-editor-preview" source={value} />}
+        <MarkdownPreview ref={ref} className="App-editor-preview" source={value} />
       </div>
       <MarkdownPreview className="App-markdown" source={MDStr.replace(/([\s\S]*)<!--dividing-->/, '')} />
       <div className="App-footer">