@uiw/react-md-editor 4.1.7 → 4.2.0

package/esm/Editor.factory.js

@@ -234,12 +234,15 @@ export function createMDEditor(options) {
         initScroll.current = true;
       }
       if (textareaDom && previewDom) {
-        var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
-        if (e.target === textareaDom && active.current === 'text') {
-          previewDom.scrollTop = textareaDom.scrollTop / scale;
-        }
-        if (e.target === previewDom && active.current === 'preview') {
-          textareaDom.scrollTop = previewDom.scrollTop * scale;
+        var inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
+        var previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
+        if (inputRange > 0 && previewRange > 0) {
+          if (e.target === textareaDom && active.current === 'text') {
+            previewDom.scrollTop = textareaDom.scrollTop / inputRange * previewRange;
+          }
+          if (e.target === previewDom && active.current === 'preview') {
+            textareaDom.scrollTop = previewDom.scrollTop / previewRange * inputRange;
+          }
         }
         var scrollTop = 0;
         if (active.current === 'text') {
@@ -259,9 +262,9 @@ export function createMDEditor(options) {
     var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
       ref: previewRef,
       className: previewClassName,
+      onScroll: handlePreviewScroll,
       children: /*#__PURE__*/_jsx(TimedPreview, _extends({}, previewOptions, {
         renderMsRef: previewRenderMs,
-        onScroll: handlePreviewScroll,
         source: previewMarkdown
       }))
     }), [previewClassName, previewOptions, previewMarkdown]);

package/lib/Editor.factory.js

@@ -279,12 +279,15 @@ function createMDEditor(options) {
         initScroll.current = true;
       }
       if (textareaDom && previewDom) {
-        var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
-        if (e.target === textareaDom && active.current === 'text') {
-          previewDom.scrollTop = textareaDom.scrollTop / scale;
-        }
-        if (e.target === previewDom && active.current === 'preview') {
-          textareaDom.scrollTop = previewDom.scrollTop * scale;
+        var inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
+        var previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
+        if (inputRange > 0 && previewRange > 0) {
+          if (e.target === textareaDom && active.current === 'text') {
+            previewDom.scrollTop = textareaDom.scrollTop / inputRange * previewRange;
+          }
+          if (e.target === previewDom && active.current === 'preview') {
+            textareaDom.scrollTop = previewDom.scrollTop / previewRange * inputRange;
+          }
         }
         var scrollTop = 0;
         if (active.current === 'text') {
@@ -307,9 +310,9 @@ function createMDEditor(options) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: previewRef,
         className: previewClassName,
+        onScroll: handlePreviewScroll,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TimedPreview, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
           renderMsRef: previewRenderMs,
-          onScroll: handlePreviewScroll,
           source: previewMarkdown
         }))
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "4.1.7",
+  "version": "4.2.0",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "funding": "https://jaywcjlove.github.io/#/sponsor",

package/src/Editor.factory.tsx

@@ -232,13 +232,15 @@ export function createMDEditor<
           initScroll.current = true;
         }
         if (textareaDom && previewDom) {
-          const scale =
-            (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
-          if (e.target === textareaDom && active.current === 'text') {
-            previewDom.scrollTop = textareaDom.scrollTop / scale;
-          }
-          if (e.target === previewDom && active.current === 'preview') {
-            textareaDom.scrollTop = previewDom.scrollTop * scale;
+          const inputRange = Math.max(0, textareaDom.scrollHeight - textareaDom.offsetHeight);
+          const previewRange = Math.max(0, previewDom.scrollHeight - previewDom.offsetHeight);
+          if (inputRange > 0 && previewRange > 0) {
+            if (e.target === textareaDom && active.current === 'text') {
+              previewDom.scrollTop = (textareaDom.scrollTop / inputRange) * previewRange;
+            }
+            if (e.target === previewDom && active.current === 'preview') {
+              textareaDom.scrollTop = (previewDom.scrollTop / previewRange) * inputRange;
+            }
           }
           let scrollTop = 0;
           if (active.current === 'text') {
@@ -256,13 +258,8 @@ export function createMDEditor<
       const previewMarkdown = useDeferredValue(usePreviewSource(state.markdown || '', previewRenderMs));
       let mdPreview = useMemo(
         () => (
-          <div ref={previewRef} className={previewClassName}>
-            <TimedPreview
-              {...previewOptions}
-              renderMsRef={previewRenderMs}
-              onScroll={handlePreviewScroll}
-              source={previewMarkdown}
-            />
+          <div ref={previewRef} className={previewClassName} onScroll={handlePreviewScroll}>
+            <TimedPreview {...previewOptions} renderMsRef={previewRenderMs} source={previewMarkdown} />
           </div>
         ),
         [previewClassName, previewOptions, previewMarkdown],