@uiw/react-md-editor 3.19.4 → 3.19.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.19.4",
+  "version": "3.19.6",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/commands/preview.tsx

@@ -27,6 +27,7 @@ export const codePreview: ICommand = {
     executeCommandState?: ExecuteCommandState,
     shortcuts?: string[],
   ) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({ preview: 'preview' });
     }
@@ -55,6 +56,7 @@ export const codeEdit: ICommand = {
     executeCommandState?: ExecuteCommandState,
     shortcuts?: string[],
   ) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({ preview: 'edit' });
     }
@@ -83,6 +85,7 @@ export const codeLive: ICommand = {
     executeCommandState?: ExecuteCommandState,
     shortcuts?: string[],
   ) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({ preview: 'live' });
     }

package/src/components/DragBar/index.tsx

@@ -11,34 +11,48 @@ export interface IDragBarProps extends IProps {
 
 const DragBar: React.FC<IDragBarProps> = (props) => {
   const { prefixCls, onChange } = props || {};
+  const $dom = useRef<HTMLDivElement>(null);
   const dragRef = useRef<{ height: number; dragY: number }>();
-  function handleMouseMove(event: MouseEvent) {
+  function handleMouseMove(event: Event) {
     if (dragRef.current) {
-      const newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;
+      const clientY =
+        (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;
+      const newHeight = dragRef.current.height + clientY - dragRef.current.dragY;
       if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {
-        onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));
+        onChange && onChange(dragRef.current.height + (clientY - dragRef.current.dragY));
       }
     }
   }
   function handleMouseUp() {
     dragRef.current = undefined;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    $dom.current?.removeEventListener('touchmove', handleMouseMove);
+    $dom.current?.removeEventListener('touchend', handleMouseUp);
   }
-  function handleMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+  function handleMouseDown(event: Event) {
+    event.preventDefault();
+    const clientY =
+      (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;
     dragRef.current = {
       height: props.height,
-      dragY: event.clientY,
+      dragY: clientY,
     };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    $dom.current?.addEventListener('touchmove', handleMouseMove, { passive: false });
+    $dom.current?.addEventListener('touchend', handleMouseUp, { passive: false });
   }
 
   useEffect(() => {
     if (document) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      $dom.current?.addEventListener('touchstart', handleMouseDown, { passive: false });
+      $dom.current?.addEventListener('mousedown', handleMouseDown);
     }
     return () => {
       if (document) {
+        $dom.current?.removeEventListener('touchstart', handleMouseDown);
         document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,7 +69,7 @@ const DragBar: React.FC<IDragBarProps> = (props) => {
     [],
   );
   return (
-    <div className={`${prefixCls}-bar`} onMouseDown={handleMouseDown}>
+    <div className={`${prefixCls}-bar`} ref={$dom}>
       {svg}
     </div>
   );

package/src/components/TextArea/Markdown.tsx

@@ -6,7 +6,7 @@ import { EditorContext } from '../../Context';
 
 function html2Escape(sHtml: string) {
   return sHtml
-    .replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {
+    .replace(/```(\w+)?([\s\S]*?)(\s.+)?```/g, (str: string) => {
       return str.replace(
         /[<&"]/g,
         (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
@@ -30,28 +30,27 @@ export default function Markdown(props: MarkdownProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if (!markdown) {
+    return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
+  }
+  let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
+    String.raw`${markdown}`,
+  )}\n</code></pre>`;
 
-  return useMemo(() => {
-    if (!markdown) {
-      return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
-    }
-    let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
-      markdown,
-    )}\n</code></pre>`;
+  console.log('markdown::', markdown);
 
-    if (highlightEnable) {
-      try {
-        mdStr = rehype()
-          .data('settings', { fragment: true })
-          .use(rehypePrism, { ignoreMissing: true })
-          .processSync(mdStr)
-          .toString();
-      } catch (error) {}
-    }
+  if (highlightEnable) {
+    try {
+      mdStr = rehype()
+        .data('settings', { fragment: true })
+        .use(rehypePrism, { ignoreMissing: true })
+        .processSync(mdStr)
+        .toString();
+    } catch (error) {}
+  }
 
-    return React.createElement('div', {
-      className: 'wmde-markdown-color',
-      dangerouslySetInnerHTML: { __html: mdStr || '' },
-    });
-  }, [markdown, preRef, prefixCls]);
+  return React.createElement('div', {
+    className: 'wmde-markdown-color',
+    dangerouslySetInnerHTML: { __html: mdStr || '' },
+  });
 }