@uiw/react-md-editor 3.19.3 → 3.19.5

package/esm/components/DragBar/index.js

@@ -6,33 +6,56 @@ var DragBar = props => {
     prefixCls,
     onChange
   } = props || {};
+  var $dom = useRef(null);
   var dragRef = useRef();
   function handleMouseMove(event) {
     if (dragRef.current) {
-      var newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;
+      var _changedTouches$;
+      var clientY = event.clientY || ((_changedTouches$ = event.changedTouches[0]) == null ? void 0 : _changedTouches$.clientY);
+      var 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() {
+    var _$dom$current, _$dom$current2;
     dragRef.current = undefined;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    (_$dom$current = $dom.current) == null ? void 0 : _$dom$current.removeEventListener('touchmove', handleMouseMove);
+    (_$dom$current2 = $dom.current) == null ? void 0 : _$dom$current2.removeEventListener('touchend', handleMouseUp);
   }
   function handleMouseDown(event) {
+    var _changedTouches$2, _$dom$current3, _$dom$current4;
+    event.preventDefault();
+    var clientY = event.clientY || ((_changedTouches$2 = event.changedTouches[0]) == null ? void 0 : _changedTouches$2.clientY);
     dragRef.current = {
       height: props.height,
-      dragY: event.clientY
+      dragY: clientY
     };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    (_$dom$current3 = $dom.current) == null ? void 0 : _$dom$current3.addEventListener('touchmove', handleMouseMove, {
+      passive: false
+    });
+    (_$dom$current4 = $dom.current) == null ? void 0 : _$dom$current4.addEventListener('touchend', handleMouseUp, {
+      passive: false
+    });
   }
   useEffect(() => {
     if (document) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      var _$dom$current5, _$dom$current6;
+      (_$dom$current5 = $dom.current) == null ? void 0 : _$dom$current5.addEventListener('touchstart', handleMouseDown, {
+        passive: false
+      });
+      (_$dom$current6 = $dom.current) == null ? void 0 : _$dom$current6.addEventListener('mousedown', handleMouseDown);
     }
     return () => {
       if (document) {
+        var _$dom$current7;
+        (_$dom$current7 = $dom.current) == null ? void 0 : _$dom$current7.removeEventListener('touchstart', handleMouseDown);
         document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -47,7 +70,7 @@ var DragBar = props => {
   }), []);
   return /*#__PURE__*/_jsx("div", {
     className: prefixCls + "-bar",
-    onMouseDown: handleMouseDown,
+    ref: $dom,
     children: svg
   });
 };

package/esm/components/DragBar/index.js.map

@@ -9,29 +9,33 @@
     "props",
     "prefixCls",
     "onChange",
+    "$dom",
     "dragRef",
     "handleMouseMove",
     "event",
     "current",
+    "clientY",
+    "changedTouches",
     "newHeight",
     "height",
-    "clientY",
     "dragY",
     "minHeight",
     "maxHeight",
     "handleMouseUp",
     "undefined",
-    "handleMouseDown",
     "document",
-    "addEventListener",
     "removeEventListener",
+    "handleMouseDown",
+    "preventDefault",
+    "addEventListener",
+    "passive",
     "svg"
   ],
   "sources": [
     "../../../src/components/DragBar/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useMemo, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport './index.less';\n\nexport interface IDragBarProps extends IProps {\n  height: number;\n  maxHeight: number;\n  minHeight: number;\n  onChange: (value: number) => void;\n}\n\nconst DragBar: React.FC<IDragBarProps> = (props) => {\n  const { prefixCls, onChange } = props || {};\n  const dragRef = useRef<{ height: number; dragY: number }>();\n  function handleMouseMove(event: MouseEvent) {\n    if (dragRef.current) {\n      const newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;\n      if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {\n        onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));\n      }\n    }\n  }\n  function handleMouseUp() {\n    dragRef.current = undefined;\n  }\n  function handleMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {\n    dragRef.current = {\n      height: props.height,\n      dragY: event.clientY,\n    };\n  }\n\n  useEffect(() => {\n    if (document) {\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    }\n    return () => {\n      if (document) {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const svg = useMemo(\n    () => (\n      <svg viewBox=\"0 0 512 512\" height=\"100%\">\n        <path\n          fill=\"currentColor\"\n          d=\"M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z\"\n        />\n      </svg>\n    ),\n    [],\n  );\n  return (\n    <div className={`${prefixCls}-bar`} onMouseDown={handleMouseDown}>\n      {svg}\n    </div>\n  );\n};\n\nexport default DragBar;\n"
+    "import React, { useEffect, useMemo, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport './index.less';\n\nexport interface IDragBarProps extends IProps {\n  height: number;\n  maxHeight: number;\n  minHeight: number;\n  onChange: (value: number) => void;\n}\n\nconst DragBar: React.FC<IDragBarProps> = (props) => {\n  const { prefixCls, onChange } = props || {};\n  const $dom = useRef<HTMLDivElement>(null);\n  const dragRef = useRef<{ height: number; dragY: number }>();\n  function handleMouseMove(event: Event) {\n    if (dragRef.current) {\n      const clientY =\n        (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;\n      const newHeight = dragRef.current.height + clientY - dragRef.current.dragY;\n      if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {\n        onChange && onChange(dragRef.current.height + (clientY - dragRef.current.dragY));\n      }\n    }\n  }\n  function handleMouseUp() {\n    dragRef.current = undefined;\n    document.removeEventListener('mousemove', handleMouseMove);\n    document.removeEventListener('mouseup', handleMouseUp);\n    $dom.current?.removeEventListener('touchmove', handleMouseMove);\n    $dom.current?.removeEventListener('touchend', handleMouseUp);\n  }\n  function handleMouseDown(event: Event) {\n    event.preventDefault();\n    const clientY =\n      (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;\n    dragRef.current = {\n      height: props.height,\n      dragY: clientY,\n    };\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    $dom.current?.addEventListener('touchmove', handleMouseMove, { passive: false });\n    $dom.current?.addEventListener('touchend', handleMouseUp, { passive: false });\n  }\n\n  useEffect(() => {\n    if (document) {\n      $dom.current?.addEventListener('touchstart', handleMouseDown, { passive: false });\n      $dom.current?.addEventListener('mousedown', handleMouseDown);\n    }\n    return () => {\n      if (document) {\n        $dom.current?.removeEventListener('touchstart', handleMouseDown);\n        document.removeEventListener('mousemove', handleMouseMove);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const svg = useMemo(\n    () => (\n      <svg viewBox=\"0 0 512 512\" height=\"100%\">\n        <path\n          fill=\"currentColor\"\n          d=\"M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z\"\n        />\n      </svg>\n    ),\n    [],\n  );\n  return (\n    <div className={`${prefixCls}-bar`} ref={$dom}>\n      {svg}\n    </div>\n  );\n};\n\nexport default DragBar;\n"
   ],
-  "mappings": "AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAEzD;AAAsB;AAStB,IAAMC,OAAgC,GAAIC,KAAK,IAAK;EAClD,IAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK,IAAI,CAAC,CAAC;EAC3C,IAAMG,OAAO,GAAGL,MAAM,EAAqC;EAC3D,SAASM,eAAe,CAACC,KAAiB,EAAE;IAC1C,IAAIF,OAAO,CAACG,OAAO,EAAE;MACnB,IAAMC,SAAS,GAAGJ,OAAO,CAACG,OAAO,CAACE,MAAM,GAAGH,KAAK,CAACI,OAAO,GAAGN,OAAO,CAACG,OAAO,CAACI,KAAK;MAChF,IAAIH,SAAS,IAAIP,KAAK,CAACW,SAAS,IAAIJ,SAAS,IAAIP,KAAK,CAACY,SAAS,EAAE;QAChEV,QAAQ,IAAIA,QAAQ,CAACC,OAAO,CAACG,OAAO,CAACE,MAAM,IAAIH,KAAK,CAACI,OAAO,GAAGN,OAAO,CAACG,OAAO,CAACI,KAAK,CAAC,CAAC;MACxF;IACF;EACF;EACA,SAASG,aAAa,GAAG;IACvBV,OAAO,CAACG,OAAO,GAAGQ,SAAS;EAC7B;EACA,SAASC,eAAe,CAACV,KAAmD,EAAE;IAC5EF,OAAO,CAACG,OAAO,GAAG;MAChBE,MAAM,EAAER,KAAK,CAACQ,MAAM;MACpBE,KAAK,EAAEL,KAAK,CAACI;IACf,CAAC;EACH;EAEAb,SAAS,CAAC,MAAM;IACd,IAAIoB,QAAQ,EAAE;MACZA,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEb,eAAe,CAAC;MACvDY,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,aAAa,CAAC;IACrD;IACA,OAAO,MAAM;MACX,IAAIG,QAAQ,EAAE;QACZA,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEd,eAAe,CAAC;QAC1DY,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,aAAa,CAAC;MACxD;IACF,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EACN,IAAMM,GAAG,GAAGtB,OAAO,CACjB,mBACE;IAAK,OAAO,EAAC,aAAa;IAAC,MAAM,EAAC,MAAM;IAAA,uBACtC;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAA2N;EAC7N,EAEL,EACD,EAAE,CACH;EACD,oBACE;IAAK,SAAS,EAAKI,SAAS,SAAO;IAAC,WAAW,EAAEc,eAAgB;IAAA,UAC9DI;EAAG,EACA;AAEV,CAAC;AAED,eAAepB,OAAO"
+  "mappings": "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"
 }

package/lib/components/DragBar/index.js

@@ -11,33 +11,56 @@ var DragBar = function DragBar(props) {
   var _ref = props || {},
     prefixCls = _ref.prefixCls,
     onChange = _ref.onChange;
+  var $dom = (0, _react.useRef)(null);
   var dragRef = (0, _react.useRef)();
   function handleMouseMove(event) {
     if (dragRef.current) {
-      var newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;
+      var _changedTouches$;
+      var clientY = event.clientY || ((_changedTouches$ = event.changedTouches[0]) === null || _changedTouches$ === void 0 ? void 0 : _changedTouches$.clientY);
+      var 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() {
+    var _$dom$current, _$dom$current2;
     dragRef.current = undefined;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    (_$dom$current = $dom.current) === null || _$dom$current === void 0 ? void 0 : _$dom$current.removeEventListener('touchmove', handleMouseMove);
+    (_$dom$current2 = $dom.current) === null || _$dom$current2 === void 0 ? void 0 : _$dom$current2.removeEventListener('touchend', handleMouseUp);
   }
   function handleMouseDown(event) {
+    var _changedTouches$2, _$dom$current3, _$dom$current4;
+    event.preventDefault();
+    var clientY = event.clientY || ((_changedTouches$2 = event.changedTouches[0]) === null || _changedTouches$2 === void 0 ? void 0 : _changedTouches$2.clientY);
     dragRef.current = {
       height: props.height,
-      dragY: event.clientY
+      dragY: clientY
     };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    (_$dom$current3 = $dom.current) === null || _$dom$current3 === void 0 ? void 0 : _$dom$current3.addEventListener('touchmove', handleMouseMove, {
+      passive: false
+    });
+    (_$dom$current4 = $dom.current) === null || _$dom$current4 === void 0 ? void 0 : _$dom$current4.addEventListener('touchend', handleMouseUp, {
+      passive: false
+    });
   }
   (0, _react.useEffect)(function () {
     if (document) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      var _$dom$current5, _$dom$current6;
+      (_$dom$current5 = $dom.current) === null || _$dom$current5 === void 0 ? void 0 : _$dom$current5.addEventListener('touchstart', handleMouseDown, {
+        passive: false
+      });
+      (_$dom$current6 = $dom.current) === null || _$dom$current6 === void 0 ? void 0 : _$dom$current6.addEventListener('mousedown', handleMouseDown);
     }
     return function () {
       if (document) {
+        var _$dom$current7;
+        (_$dom$current7 = $dom.current) === null || _$dom$current7 === void 0 ? void 0 : _$dom$current7.removeEventListener('touchstart', handleMouseDown);
         document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,7 +77,7 @@ var DragBar = function DragBar(props) {
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "".concat(prefixCls, "-bar"),
-    onMouseDown: handleMouseDown,
+    ref: $dom,
     children: svg
   });
 };

package/lib/components/DragBar/index.js.map

@@ -5,24 +5,28 @@
     "props",
     "prefixCls",
     "onChange",
-    "dragRef",
+    "$dom",
     "useRef",
+    "dragRef",
     "handleMouseMove",
     "event",
     "current",
+    "clientY",
+    "changedTouches",
     "newHeight",
     "height",
-    "clientY",
     "dragY",
     "minHeight",
     "maxHeight",
     "handleMouseUp",
     "undefined",
-    "handleMouseDown",
-    "useEffect",
     "document",
-    "addEventListener",
     "removeEventListener",
+    "handleMouseDown",
+    "preventDefault",
+    "addEventListener",
+    "passive",
+    "useEffect",
     "svg",
     "useMemo"
   ],
@@ -30,7 +34,7 @@
     "../../../src/components/DragBar/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useMemo, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport './index.less';\n\nexport interface IDragBarProps extends IProps {\n  height: number;\n  maxHeight: number;\n  minHeight: number;\n  onChange: (value: number) => void;\n}\n\nconst DragBar: React.FC<IDragBarProps> = (props) => {\n  const { prefixCls, onChange } = props || {};\n  const dragRef = useRef<{ height: number; dragY: number }>();\n  function handleMouseMove(event: MouseEvent) {\n    if (dragRef.current) {\n      const newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;\n      if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {\n        onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));\n      }\n    }\n  }\n  function handleMouseUp() {\n    dragRef.current = undefined;\n  }\n  function handleMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {\n    dragRef.current = {\n      height: props.height,\n      dragY: event.clientY,\n    };\n  }\n\n  useEffect(() => {\n    if (document) {\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    }\n    return () => {\n      if (document) {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const svg = useMemo(\n    () => (\n      <svg viewBox=\"0 0 512 512\" height=\"100%\">\n        <path\n          fill=\"currentColor\"\n          d=\"M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z\"\n        />\n      </svg>\n    ),\n    [],\n  );\n  return (\n    <div className={`${prefixCls}-bar`} onMouseDown={handleMouseDown}>\n      {svg}\n    </div>\n  );\n};\n\nexport default DragBar;\n"
+    "import React, { useEffect, useMemo, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport './index.less';\n\nexport interface IDragBarProps extends IProps {\n  height: number;\n  maxHeight: number;\n  minHeight: number;\n  onChange: (value: number) => void;\n}\n\nconst DragBar: React.FC<IDragBarProps> = (props) => {\n  const { prefixCls, onChange } = props || {};\n  const $dom = useRef<HTMLDivElement>(null);\n  const dragRef = useRef<{ height: number; dragY: number }>();\n  function handleMouseMove(event: Event) {\n    if (dragRef.current) {\n      const clientY =\n        (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;\n      const newHeight = dragRef.current.height + clientY - dragRef.current.dragY;\n      if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {\n        onChange && onChange(dragRef.current.height + (clientY - dragRef.current.dragY));\n      }\n    }\n  }\n  function handleMouseUp() {\n    dragRef.current = undefined;\n    document.removeEventListener('mousemove', handleMouseMove);\n    document.removeEventListener('mouseup', handleMouseUp);\n    $dom.current?.removeEventListener('touchmove', handleMouseMove);\n    $dom.current?.removeEventListener('touchend', handleMouseUp);\n  }\n  function handleMouseDown(event: Event) {\n    event.preventDefault();\n    const clientY =\n      (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;\n    dragRef.current = {\n      height: props.height,\n      dragY: clientY,\n    };\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    $dom.current?.addEventListener('touchmove', handleMouseMove, { passive: false });\n    $dom.current?.addEventListener('touchend', handleMouseUp, { passive: false });\n  }\n\n  useEffect(() => {\n    if (document) {\n      $dom.current?.addEventListener('touchstart', handleMouseDown, { passive: false });\n      $dom.current?.addEventListener('mousedown', handleMouseDown);\n    }\n    return () => {\n      if (document) {\n        $dom.current?.removeEventListener('touchstart', handleMouseDown);\n        document.removeEventListener('mousemove', handleMouseMove);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const svg = useMemo(\n    () => (\n      <svg viewBox=\"0 0 512 512\" height=\"100%\">\n        <path\n          fill=\"currentColor\"\n          d=\"M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z\"\n        />\n      </svg>\n    ),\n    [],\n  );\n  return (\n    <div className={`${prefixCls}-bar`} ref={$dom}>\n      {svg}\n    </div>\n  );\n};\n\nexport default DragBar;\n"
   ],
-  "mappings": ";;;;;;;AAAA;AAA0D;AAW1D,IAAMA,OAAgC,GAAG,SAAnCA,OAAgC,CAAIC,KAAK,EAAK;EAClD,WAAgCA,KAAK,IAAI,CAAC,CAAC;IAAnCC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3B,IAAMC,OAAO,GAAG,IAAAC,aAAM,GAAqC;EAC3D,SAASC,eAAe,CAACC,KAAiB,EAAE;IAC1C,IAAIH,OAAO,CAACI,OAAO,EAAE;MACnB,IAAMC,SAAS,GAAGL,OAAO,CAACI,OAAO,CAACE,MAAM,GAAGH,KAAK,CAACI,OAAO,GAAGP,OAAO,CAACI,OAAO,CAACI,KAAK;MAChF,IAAIH,SAAS,IAAIR,KAAK,CAACY,SAAS,IAAIJ,SAAS,IAAIR,KAAK,CAACa,SAAS,EAAE;QAChEX,QAAQ,IAAIA,QAAQ,CAACC,OAAO,CAACI,OAAO,CAACE,MAAM,IAAIH,KAAK,CAACI,OAAO,GAAGP,OAAO,CAACI,OAAO,CAACI,KAAK,CAAC,CAAC;MACxF;IACF;EACF;EACA,SAASG,aAAa,GAAG;IACvBX,OAAO,CAACI,OAAO,GAAGQ,SAAS;EAC7B;EACA,SAASC,eAAe,CAACV,KAAmD,EAAE;IAC5EH,OAAO,CAACI,OAAO,GAAG;MAChBE,MAAM,EAAET,KAAK,CAACS,MAAM;MACpBE,KAAK,EAAEL,KAAK,CAACI;IACf,CAAC;EACH;EAEA,IAAAO,gBAAS,EAAC,YAAM;IACd,IAAIC,QAAQ,EAAE;MACZA,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEd,eAAe,CAAC;MACvDa,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC;IACrD;IACA,OAAO,YAAM;MACX,IAAII,QAAQ,EAAE;QACZA,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEf,eAAe,CAAC;QAC1Da,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC;MACxD;IACF,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EACN,IAAMO,GAAG,GAAG,IAAAC,cAAO,EACjB;IAAA,oBACE;MAAK,OAAO,EAAC,aAAa;MAAC,MAAM,EAAC,MAAM;MAAA,uBACtC;QACE,IAAI,EAAC,cAAc;QACnB,CAAC,EAAC;MAA2N;IAC7N,EACE;EAAA,CACP,EACD,EAAE,CACH;EACD,oBACE;IAAK,SAAS,YAAKrB,SAAS,SAAO;IAAC,WAAW,EAAEe,eAAgB;IAAA,UAC9DK;EAAG,EACA;AAEV,CAAC;AAAC,eAEatB,OAAO;AAAA;AAAA"
+  "mappings": "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"
 }

package/package.json

@@ -1,23 +1,11 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.19.3",
+  "version": "3.19.5",
   "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>",
   "main": "lib/index.js",
   "module": "esm/index.js",
-  "scripts": {
-    "css:build": "compile-less -d src -o esm",
-    "css:watch": "compile-less -d src -o esm --watch",
-    "css:build:dist": "compile-less -d src --combine markdown-editor.css --rm-global",
-    "bundle": "ncc build src/index.tsx --target web --filename mdeditor",
-    "bundle:watch": "ncc watch src/index.tsx --target web --filename mdeditor",
-    "bundle:min": "ncc build src/index.tsx --target web --filename mdeditor --minify",
-    "watch": "tsbb watch & npm run css:watch",
-    "build": "tsbb build && npm run css:build && npm run css:build:dist",
-    "test": "tsbb test --env=jsdom",
-    "coverage": "tsbb test --env=jsdom --coverage --bail"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uiwjs/react-md-editor"
@@ -36,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "^4.1.4",
+    "@uiw/react-markdown-preview": "^4.1.5",
     "rehype": "~12.0.1"
   },
   "keywords": [
@@ -52,10 +40,5 @@
     "uiw",
     "uiwjs",
     "code"
-  ],
-  "jest": {
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/?!(.*)"
-    ]
-  }
-}
+  ]
+}

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>
   );