feat: add enableScroll props.

Author: jaywcjlove

README.md

@@ -246,6 +246,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
   /** Preview expanded width @default `50%` */
   previewWidth?: string;
+  /** Whether to enable scrolling */
+  enableScroll?: boolean;
   /** Tool display settings. */
   toolbars?: IToolBarProps['toolbars'];
   /** The tool on the right shows the settings. */

package.json

@@ -43,8 +43,9 @@
   "dependencies": {
     "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/language-data": "^6.1.0",
-    "@uiw/codemirror-themes": "^4.10.4",
-    "@uiw/react-codemirror": "^4.10.4",
+    "@uiw/codemirror-extensions-events": "^4.12.3",
+    "@uiw/codemirror-themes": "^4.12.3",
+    "@uiw/react-codemirror": "^4.12.3",
     "@uiw/react-markdown-preview": "^4.0.20"
   },
   "devDependencies": {

src/commands/todo.tsx

@@ -5,8 +5,14 @@ export const todo: ICommand = {
   keyCommand: 'todo',
   button: { 'aria-label': 'Add todo List' },
   icon: (
-    <svg fill="currentColor" viewBox="0 0 512 512" height="14" width="14">
-      <path d="M152.1 38.16c9.8 8.87 10.6 24.04 1.7 33.9L81.84 152.1c-4.41 4.8-10.63 7.7-17.21 7-6.58 1.1-12.94-1.5-17.6-7l-40.001-40c-9.372-8.5-9.372-23.7 0-33.07 9.371-9.37 24.571-9.37 33.941 0l22.11 22.07 55.12-61.16c8.8-9.85 24-10.65 33.9-1.78zm0 160.04c9.8 8.8 10.6 24 1.7 33.9l-71.96 80c-4.41 4.8-10.63 7.7-17.21 7-6.58 1.1-12.94-1.5-17.6-7l-40.001-40c-9.372-8.5-9.372-23.7 0-33.1 9.371-9.3 24.571-9.3 33.941 0l22.11 22.1 55.12-61.2c8.8-9.8 24-10.6 33.9-1.7zM224 96c0-17.67 14.3-32 32-32h224c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm-64 160c0-17.7 14.3-32 32-32h288c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM0 416c0-26.5 21.49-48 48-48s48 21.5 48 48-21.49 48-48 48-48-21.5-48-48z" />
+    <svg viewBox="0 0 48 48" fill="none" height="15" width="15">
+      <path
+        d="m5 10 3 3 6-6M5 24l3 3 6-6M5 38l3 3 6-6m7-11h22M21 38h22M21 10h22"
+        stroke="currentColor"
+        strokeWidth="5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   ),
   execute: ({ state, view }) => {

src/index.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useRef, useImperativeHandle, Fragment } from 'react';
+import React, { useState, useRef, useImperativeHandle, Fragment, useEffect, useCallback } from 'react';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import { EditorView, ViewUpdate } from '@codemirror/view';
+import * as events from '@uiw/codemirror-extensions-events';
 import CodeMirror, { ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import ToolBar, { IToolBarProps } from './components/ToolBar';
@@ -32,6 +33,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
   /** Preview expanded width @default `50%` */
   previewWidth?: string;
+  /** Whether to enable scrolling */
+  enableScroll?: boolean;
   /** Tool display settings. */
   toolbars?: IToolBarProps['toolbars'];
   /** The tool on the right shows the settings. */
@@ -86,6 +89,7 @@ function MarkdownEditorInternal(
     visibleEditor = true,
     hideToolbar = true,
     toolbarBottom = false,
+    enableScroll = true,
     previewProps = {},
     extensions = [],
     previewWidth = '50%',
@@ -97,6 +101,7 @@ function MarkdownEditorInternal(
   const container = useRef<HTMLDivElement>(null);
   const containerEditor = useRef<HTMLDivElement>(null);
   const preview = useRef<HTMLDivElement>(null);
+  const active = useRef<'editor' | 'preview'>('editor');
 
   useImperativeHandle(
     ref,
@@ -115,9 +120,51 @@ function MarkdownEditorInternal(
     editorProps: { ...props, previewWidth },
   };
   const height = typeof codemirrorProps.height === 'number' ? `${codemirrorProps.height}px` : codemirrorProps.height;
-  const extensionsData: IMarkdownEditor['extensions'] = reExtensions
+
+  const previewScrollHandle = useCallback(
+    (event: Event) => {
+      if (!enableScroll) return;
+      const target = event.target as HTMLDivElement;
+      const percent = target.scrollTop / target.scrollHeight;
+      if (active.current === 'editor' && preview.current) {
+        const previewHeihgt = preview.current?.scrollHeight || 0;
+        preview.current!.scrollTop = previewHeihgt * percent;
+      } else if (codeMirror.current && codeMirror.current.view) {
+        const editorScrollDom = codeMirror.current.view.scrollDOM;
+        const editorScrollHeihgt = codeMirror.current.view.scrollDOM.scrollHeight || 0;
+        editorScrollDom.scrollTop = editorScrollHeihgt * percent;
+      }
+    },
+    [enableScroll],
+  );
+  const mouseoverHandle = () => (active.current = 'preview');
+  const mouseleaveHandle = () => (active.current = 'editor');
+  useEffect(() => {
+    const $preview = preview.current;
+    if ($preview && enableScroll) {
+      $preview.addEventListener('mouseover', mouseoverHandle, false);
+      $preview.addEventListener('mouseleave', mouseleaveHandle, false);
+      $preview.addEventListener('scroll', previewScrollHandle, false);
+    }
+    return () => {
+      if ($preview && enableScroll) {
+        $preview.removeEventListener('mouseover', mouseoverHandle);
+        $preview.removeEventListener('mouseleave', mouseoverHandle);
+        $preview.addEventListener('mouseleave', previewScrollHandle, false);
+      }
+    };
+  }, [preview, enableScroll, previewScrollHandle]);
+
+  const scrollExtensions = events.scroll({
+    scroll: previewScrollHandle,
+  });
+
+  let extensionsData: IMarkdownEditor['extensions'] = reExtensions
     ? reExtensions
     : [markdown({ base: markdownLanguage, codeLanguages: languages }), scrollerStyle, ...extensions];
+  if (enableScroll) {
+    extensionsData.push(scrollExtensions);
+  }
   const clsPreview = `${prefixCls}-preview`;
   const cls = [prefixCls, 'wmde-markdown-var', className].filter(Boolean).join(' ');
   previewProps['source'] = value;

website/Example.tsx

@@ -11,12 +11,14 @@ export function Example() {
   const [mdstr, setMdstr] = useState<string>(DocumentStrSource);
   const [hideToolbar, setHideToolbar] = useState(true);
   const [toolbarBottom, setToolbarBottom] = useState(false);
+  const [enableScroll, setEnableScroll] = useState(true);
   return (
     <div className={styles.editor}>
       <MarkdownEditor
         visible={visible}
         height="500px"
         value={mdstr}
+        enableScroll={enableScroll}
         hideToolbar={hideToolbar}
         toolbarBottom={toolbarBottom}
       />
@@ -33,6 +35,10 @@ export function Example() {
           <input type="checkbox" checked={hideToolbar} onChange={(evn) => setHideToolbar(evn.target.checked)} />
           hideToolbar
         </label>
+        <label>
+          <input type="checkbox" checked={enableScroll} onChange={(evn) => setEnableScroll(evn.target.checked)} />
+          enableScroll
+        </label>
         <label>
           <input type="checkbox" checked={toolbarBottom} onChange={(evn) => setToolbarBottom(evn.target.checked)} />
           toolbarBottom