refactor: move scroll sync to bytemd

Author: pd4d10

packages/bytemd/README.md

@@ -172,7 +172,6 @@ The 2,5,7 steps are designed for user customization via ByteMD plugin API.
 | [@bytemd/plugin-math-ssr](./packages/plugin-math-ssr) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-math-ssr.svg)](https://npm.im/@bytemd/plugin-math-ssr) [![gzip size](https://img.badgesize.io/https://unpkg.com/@bytemd/plugin-math-ssr/dist/index.min.js?compression=gzip)](https://unpkg.com/@bytemd/plugin-math-ssr) | Support math equation (SSR compatible) |
 | [@bytemd/plugin-medium-zoom](./packages/plugin-medium-zoom) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-medium-zoom.svg)](https://npm.im/@bytemd/plugin-medium-zoom) [![gzip size](https://img.badgesize.io/https://unpkg.com/@bytemd/plugin-medium-zoom/dist/index.min.js?compression=gzip)](https://unpkg.com/@bytemd/plugin-medium-zoom) | Zoom images like Medium |
 | [@bytemd/plugin-mermaid](./packages/plugin-mermaid) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-mermaid.svg)](https://npm.im/@bytemd/plugin-mermaid) [![gzip size](https://img.badgesize.io/https://unpkg.com/@bytemd/plugin-mermaid/dist/index.min.js?compression=gzip)](https://unpkg.com/@bytemd/plugin-mermaid) | Support Mermaid diagram and flowchart |
-| [@bytemd/plugin-scroll-sync](./packages/plugin-scroll-sync) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-scroll-sync.svg)](https://npm.im/@bytemd/plugin-scroll-sync) [![gzip size](https://img.badgesize.io/https://unpkg.com/@bytemd/plugin-scroll-sync/dist/index.min.js?compression=gzip)](https://unpkg.com/@bytemd/plugin-scroll-sync) | Sync scroll position of edit and preview area |
 | [@bytemd/plugin-vega](./packages/plugin-vega) | [![npm](https://img.shields.io/npm/v/@bytemd/plugin-vega.svg)](https://npm.im/@bytemd/plugin-vega) [![gzip size](https://img.badgesize.io/https://unpkg.com/@bytemd/plugin-vega/dist/index.min.js?compression=gzip)](https://unpkg.com/@bytemd/plugin-vega) | Support vega charts |
 
 ## Write a plugin

packages/bytemd/src/editor.svelte

@@ -14,6 +14,7 @@
   export let toolbar: EditorProps['toolbar'];
 
   let el: HTMLElement;
+  let previewEl: HTMLElement;
   let viewerProps: ViewerProps = {
     value,
     plugins,
@@ -87,6 +88,20 @@
     editor.on('change', (doc, change) => {
       dispatch('change', { value: editor.getValue() });
     });
+
+    // Scroll sync
+    editor.on('scroll', () => {
+      requestAnimationFrame(() => {
+        const editorInfo = editor.getScrollInfo();
+        const ratio =
+          editorInfo.top / (editorInfo.height - editorInfo.clientHeight);
+        previewEl.scrollTo(
+          0,
+          ratio * (previewEl.scrollHeight - previewEl.clientHeight)
+        );
+      });
+    });
+
     // No need to call `on` because cm instance would change once after init
   });
   onDestroy(off);
@@ -109,6 +124,7 @@
       <textarea bind:this={textarea} style="display:none" />
     </div>
     <div
+      bind:this={previewEl}
       class="bytemd-preview"
       style={mode === 'tab' && activeTab === 0 ? 'display:none' : undefined}>
       <Viewer {...viewerProps} />