@uiw/react-md-editor 3.19.4 → 3.19.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/mdeditor.js +2 -2
  2. package/dist/mdeditor.min.js +1 -1
  3. package/esm/components/DragBar/index.js +30 -7
  4. package/esm/components/DragBar/index.js.map +9 -5
  5. package/lib/components/DragBar/index.js +30 -7
  6. package/lib/components/DragBar/index.js.map +11 -7
  7. package/package.json +1 -1
  8. package/src/components/DragBar/index.tsx +23 -9
package/esm/components/DragBar/index.js CHANGED
@@ -6,33 +6,56 @@ var DragBar = props => {
6
6
  prefixCls,
7
7
  onChange
8
8
  } = props || {};
9
+ var $dom = useRef(null);
9
10
  var dragRef = useRef();
10
11
  function handleMouseMove(event) {
11
12
  if (dragRef.current) {
12
- var newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;
13
+ var _changedTouches$;
14
+ var clientY = event.clientY || ((_changedTouches$ = event.changedTouches[0]) == null ? void 0 : _changedTouches$.clientY);
15
+ var newHeight = dragRef.current.height + clientY - dragRef.current.dragY;
13
16
  if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {
14
- onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));
17
+ onChange && onChange(dragRef.current.height + (clientY - dragRef.current.dragY));
15
18
  }
16
19
  }
17
20
  }
18
21
  function handleMouseUp() {
22
+ var _$dom$current, _$dom$current2;
19
23
  dragRef.current = undefined;
24
+ document.removeEventListener('mousemove', handleMouseMove);
25
+ document.removeEventListener('mouseup', handleMouseUp);
26
+ (_$dom$current = $dom.current) == null ? void 0 : _$dom$current.removeEventListener('touchmove', handleMouseMove);
27
+ (_$dom$current2 = $dom.current) == null ? void 0 : _$dom$current2.removeEventListener('touchend', handleMouseUp);
20
28
  }
21
29
  function handleMouseDown(event) {
30
+ var _changedTouches$2, _$dom$current3, _$dom$current4;
31
+ event.preventDefault();
32
+ var clientY = event.clientY || ((_changedTouches$2 = event.changedTouches[0]) == null ? void 0 : _changedTouches$2.clientY);
22
33
  dragRef.current = {
23
34
  height: props.height,
24
- dragY: event.clientY
35
+ dragY: clientY
25
36
  };
37
+ document.addEventListener('mousemove', handleMouseMove);
38
+ document.addEventListener('mouseup', handleMouseUp);
39
+ (_$dom$current3 = $dom.current) == null ? void 0 : _$dom$current3.addEventListener('touchmove', handleMouseMove, {
40
+ passive: false
41
+ });
42
+ (_$dom$current4 = $dom.current) == null ? void 0 : _$dom$current4.addEventListener('touchend', handleMouseUp, {
43
+ passive: false
44
+ });
26
45
  }
27
46
  useEffect(() => {
28
47
  if (document) {
29
- document.addEventListener('mousemove', handleMouseMove);
30
- document.addEventListener('mouseup', handleMouseUp);
48
+ var _$dom$current5, _$dom$current6;
49
+ (_$dom$current5 = $dom.current) == null ? void 0 : _$dom$current5.addEventListener('touchstart', handleMouseDown, {
50
+ passive: false
51
+ });
52
+ (_$dom$current6 = $dom.current) == null ? void 0 : _$dom$current6.addEventListener('mousedown', handleMouseDown);
31
53
  }
32
54
  return () => {
33
55
  if (document) {
56
+ var _$dom$current7;
57
+ (_$dom$current7 = $dom.current) == null ? void 0 : _$dom$current7.removeEventListener('touchstart', handleMouseDown);
34
58
  document.removeEventListener('mousemove', handleMouseMove);
35
- document.removeEventListener('mouseup', handleMouseUp);
36
59
  }
37
60
  };
38
61
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -47,7 +70,7 @@ var DragBar = props => {
47
70
  }), []);
48
71
  return /*#__PURE__*/_jsx("div", {
49
72
  className: prefixCls + "-bar",
50
- onMouseDown: handleMouseDown,
73
+ ref: $dom,
51
74
  children: svg
52
75
  });
53
76
  };
package/esm/components/DragBar/index.js.map CHANGED
@@ -9,29 +9,33 @@
9
9
  "props",
10
10
  "prefixCls",
11
11
  "onChange",
12
+ "$dom",
12
13
  "dragRef",
13
14
  "handleMouseMove",
14
15
  "event",
15
16
  "current",
17
+ "clientY",
18
+ "changedTouches",
16
19
  "newHeight",
17
20
  "height",
18
- "clientY",
19
21
  "dragY",
20
22
  "minHeight",
21
23
  "maxHeight",
22
24
  "handleMouseUp",
23
25
  "undefined",
24
- "handleMouseDown",
25
26
  "document",
26
- "addEventListener",
27
27
  "removeEventListener",
28
+ "handleMouseDown",
29
+ "preventDefault",
30
+ "addEventListener",
31
+ "passive",
28
32
  "svg"
29
33
  ],
30
34
  "sources": [
31
35
  "../../../src/components/DragBar/index.tsx"
32
36
  ],
33
37
  "sourcesContent": [
34
- "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"
38
+ "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"
35
39
  ],
36
- "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"
40
+ "mappings": "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"
37
41
  }
package/lib/components/DragBar/index.js CHANGED
@@ -11,33 +11,56 @@ var DragBar = function DragBar(props) {
11
11
  var _ref = props || {},
12
12
  prefixCls = _ref.prefixCls,
13
13
  onChange = _ref.onChange;
14
+ var $dom = (0, _react.useRef)(null);
14
15
  var dragRef = (0, _react.useRef)();
15
16
  function handleMouseMove(event) {
16
17
  if (dragRef.current) {
17
- var newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;
18
+ var _changedTouches$;
19
+ var clientY = event.clientY || ((_changedTouches$ = event.changedTouches[0]) === null || _changedTouches$ === void 0 ? void 0 : _changedTouches$.clientY);
20
+ var newHeight = dragRef.current.height + clientY - dragRef.current.dragY;
18
21
  if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {
19
- onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));
22
+ onChange && onChange(dragRef.current.height + (clientY - dragRef.current.dragY));
20
23
  }
21
24
  }
22
25
  }
23
26
  function handleMouseUp() {
27
+ var _$dom$current, _$dom$current2;
24
28
  dragRef.current = undefined;
29
+ document.removeEventListener('mousemove', handleMouseMove);
30
+ document.removeEventListener('mouseup', handleMouseUp);
31
+ (_$dom$current = $dom.current) === null || _$dom$current === void 0 ? void 0 : _$dom$current.removeEventListener('touchmove', handleMouseMove);
32
+ (_$dom$current2 = $dom.current) === null || _$dom$current2 === void 0 ? void 0 : _$dom$current2.removeEventListener('touchend', handleMouseUp);
25
33
  }
26
34
  function handleMouseDown(event) {
35
+ var _changedTouches$2, _$dom$current3, _$dom$current4;
36
+ event.preventDefault();
37
+ var clientY = event.clientY || ((_changedTouches$2 = event.changedTouches[0]) === null || _changedTouches$2 === void 0 ? void 0 : _changedTouches$2.clientY);
27
38
  dragRef.current = {
28
39
  height: props.height,
29
- dragY: event.clientY
40
+ dragY: clientY
30
41
  };
42
+ document.addEventListener('mousemove', handleMouseMove);
43
+ document.addEventListener('mouseup', handleMouseUp);
44
+ (_$dom$current3 = $dom.current) === null || _$dom$current3 === void 0 ? void 0 : _$dom$current3.addEventListener('touchmove', handleMouseMove, {
45
+ passive: false
46
+ });
47
+ (_$dom$current4 = $dom.current) === null || _$dom$current4 === void 0 ? void 0 : _$dom$current4.addEventListener('touchend', handleMouseUp, {
48
+ passive: false
49
+ });
31
50
  }
32
51
  (0, _react.useEffect)(function () {
33
52
  if (document) {
34
- document.addEventListener('mousemove', handleMouseMove);
35
- document.addEventListener('mouseup', handleMouseUp);
53
+ var _$dom$current5, _$dom$current6;
54
+ (_$dom$current5 = $dom.current) === null || _$dom$current5 === void 0 ? void 0 : _$dom$current5.addEventListener('touchstart', handleMouseDown, {
55
+ passive: false
56
+ });
57
+ (_$dom$current6 = $dom.current) === null || _$dom$current6 === void 0 ? void 0 : _$dom$current6.addEventListener('mousedown', handleMouseDown);
36
58
  }
37
59
  return function () {
38
60
  if (document) {
61
+ var _$dom$current7;
62
+ (_$dom$current7 = $dom.current) === null || _$dom$current7 === void 0 ? void 0 : _$dom$current7.removeEventListener('touchstart', handleMouseDown);
39
63
  document.removeEventListener('mousemove', handleMouseMove);
40
- document.removeEventListener('mouseup', handleMouseUp);
41
64
  }
42
65
  };
43
66
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,7 +77,7 @@ var DragBar = function DragBar(props) {
54
77
  }, []);
55
78
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
56
79
  className: "".concat(prefixCls, "-bar"),
57
- onMouseDown: handleMouseDown,
80
+ ref: $dom,
58
81
  children: svg
59
82
  });
60
83
  };
package/lib/components/DragBar/index.js.map CHANGED
@@ -5,24 +5,28 @@
5
5
  "props",
6
6
  "prefixCls",
7
7
  "onChange",
8
- "dragRef",
8
+ "$dom",
9
9
  "useRef",
10
+ "dragRef",
10
11
  "handleMouseMove",
11
12
  "event",
12
13
  "current",
14
+ "clientY",
15
+ "changedTouches",
13
16
  "newHeight",
14
17
  "height",
15
- "clientY",
16
18
  "dragY",
17
19
  "minHeight",
18
20
  "maxHeight",
19
21
  "handleMouseUp",
20
22
  "undefined",
21
- "handleMouseDown",
22
- "useEffect",
23
23
  "document",
24
- "addEventListener",
25
24
  "removeEventListener",
25
+ "handleMouseDown",
26
+ "preventDefault",
27
+ "addEventListener",
28
+ "passive",
29
+ "useEffect",
26
30
  "svg",
27
31
  "useMemo"
28
32
  ],
@@ -30,7 +34,7 @@
30
34
  "../../../src/components/DragBar/index.tsx"
31
35
  ],
32
36
  "sourcesContent": [
33
- "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"
37
+ "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"
34
38
  ],
35
- "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"
39
+ "mappings": "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"
36
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-md-editor",
3
- "version": "3.19.4",
3
+ "version": "3.19.5",
4
4
  "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
5
5
  "homepage": "https://uiwjs.github.io/react-md-editor/",
6
6
  "author": "kenny wang <wowohoo@qq.com>",
package/src/components/DragBar/index.tsx CHANGED
@@ -11,34 +11,48 @@ export interface IDragBarProps extends IProps {
11
11
 
12
12
  const DragBar: React.FC<IDragBarProps> = (props) => {
13
13
  const { prefixCls, onChange } = props || {};
14
+ const $dom = useRef<HTMLDivElement>(null);
14
15
  const dragRef = useRef<{ height: number; dragY: number }>();
15
- function handleMouseMove(event: MouseEvent) {
16
+ function handleMouseMove(event: Event) {
16
17
  if (dragRef.current) {
17
- const newHeight = dragRef.current.height + event.clientY - dragRef.current.dragY;
18
+ const clientY =
19
+ (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;
20
+ const newHeight = dragRef.current.height + clientY - dragRef.current.dragY;
18
21
  if (newHeight >= props.minHeight && newHeight <= props.maxHeight) {
19
- onChange && onChange(dragRef.current.height + (event.clientY - dragRef.current.dragY));
22
+ onChange && onChange(dragRef.current.height + (clientY - dragRef.current.dragY));
20
23
  }
21
24
  }
22
25
  }
23
26
  function handleMouseUp() {
24
27
  dragRef.current = undefined;
28
+ document.removeEventListener('mousemove', handleMouseMove);
29
+ document.removeEventListener('mouseup', handleMouseUp);
30
+ $dom.current?.removeEventListener('touchmove', handleMouseMove);
31
+ $dom.current?.removeEventListener('touchend', handleMouseUp);
25
32
  }
26
- function handleMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
33
+ function handleMouseDown(event: Event) {
34
+ event.preventDefault();
35
+ const clientY =
36
+ (event as unknown as MouseEvent).clientY || (event as unknown as TouchEvent).changedTouches[0]?.clientY;
27
37
  dragRef.current = {
28
38
  height: props.height,
29
- dragY: event.clientY,
39
+ dragY: clientY,
30
40
  };
41
+ document.addEventListener('mousemove', handleMouseMove);
42
+ document.addEventListener('mouseup', handleMouseUp);
43
+ $dom.current?.addEventListener('touchmove', handleMouseMove, { passive: false });
44
+ $dom.current?.addEventListener('touchend', handleMouseUp, { passive: false });
31
45
  }
32
46
 
33
47
  useEffect(() => {
34
48
  if (document) {
35
- document.addEventListener('mousemove', handleMouseMove);
36
- document.addEventListener('mouseup', handleMouseUp);
49
+ $dom.current?.addEventListener('touchstart', handleMouseDown, { passive: false });
50
+ $dom.current?.addEventListener('mousedown', handleMouseDown);
37
51
  }
38
52
  return () => {
39
53
  if (document) {
54
+ $dom.current?.removeEventListener('touchstart', handleMouseDown);
40
55
  document.removeEventListener('mousemove', handleMouseMove);
41
- document.removeEventListener('mouseup', handleMouseUp);
42
56
  }
43
57
  };
44
58
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,7 +69,7 @@ const DragBar: React.FC<IDragBarProps> = (props) => {
55
69
  [],
56
70
  );
57
71
  return (
58
- <div className={`${prefixCls}-bar`} onMouseDown={handleMouseDown}>
72
+ <div className={`${prefixCls}-bar`} ref={$dom}>
59
73
  {svg}
60
74
  </div>
61
75
  );