Scroll sync (#15)

* scroll sync

* move InjectLnParser into MarkdownPalettes.vue

* add scroll animation for editor scroll sync

* deal img become bigger after loaded

* add scrollsync button on toolbar

Author: TitanSnow

src/components/ContentParserFactory.js

@@ -1,9 +1,11 @@
-import { MarkdownParser } from './plugin/MarkdownParser'
+import MarkdownIt from 'markdown-it'
 
 function contentParserFactory (parsers) {
-    return content => {
-        return MarkdownParser(content, parsers)
-    }
+    let converter = MarkdownIt()
+    parsers.forEach(parser => {
+        converter = converter.use(parser)
+    })
+    return content => converter.render(content)
 }
 
 export { contentParserFactory }

src/components/DefaultConfig.js

@@ -27,7 +27,8 @@ export const defaultConfig = {
         mode: 'markdown',
         lineNumbers: true,
         lineWrapping: true
-    }
+    },
+    scrollSync: true
 }
 
 export function getConfig (config) {

src/components/InputArea.vue

@@ -35,6 +35,7 @@
 <script>
 import {codemirror} from 'vue-codemirror-lite'
 import 'codemirror/mode/markdown/markdown.js'
+import _ from 'lodash'
 
 export default {
     name: 'input-area',
@@ -47,6 +48,9 @@ export default {
         },
         insertCode: {
             default: null
+        },
+        scrollSync: {
+            type: Boolean
         }
     },
     computed: {
@@ -83,19 +87,104 @@ export default {
     },
     data: function () {
         return {
-            code: ''
+            code: '',
+            scrollSynced: false,
+            scrollAnimation: null
         }
     },
     components: {
         codemirror
     },
     mounted: function () {
         this.code = this.value
+
+        const debouncedEmitScrollSync = _.debounce(this.emitScrollSync, 50, { maxWait: 50 })
+        const scrollSync = () => {
+            if (this.scrollSynced) {
+                this.scrollSynced = false
+            } else {
+                debouncedEmitScrollSync()
+                if (this.scrollAnimation) {
+                    this.scrollAnimation.cancel()
+                }
+            }
+        }
+        this.editor.on('cursorActivity', scrollSync)
+        this.editor.on('scroll', scrollSync)
     },
     methods: {
         updateCode (code) {
             this.$emit('input', code)
+        },
+
+        emitScrollSync () {
+            if (!this.scrollSync) return
+            const cursorLine = this.editor.getCursor().line
+            const scrollInfo = this.editor.getScrollInfo('local')
+            const viewport = {
+                from: this.editor.lineAtHeight(scrollInfo.top, 'local'),
+                to: this.editor.lineAtHeight(scrollInfo.top + scrollInfo.clientHeight, 'local') + 1
+            }
+            const linesOffset = []
+            for (let line = viewport.from; line < viewport.to; ++line) {
+                const coords = this.editor.cursorCoords({ line, ch: 0 }, 'local')
+                linesOffset[line] = {
+                    top: coords.top - scrollInfo.top,
+                    bottom: coords.bottom - scrollInfo.top
+                }
+            }
+            const event = {
+                cursorLine, scrollInfo, viewport, linesOffset
+            }
+            this.$emit('scroll-sync', event)
+        },
+        updateScrollSync ({ scrollInfo, linesOffset }) {
+            if (!linesOffset.length) {
+                return
+            }
+            const scrollMid = scrollInfo.height / 2
+            let syncLine
+            linesOffset.forEach(({ top }, line) => {
+                if (typeof syncLine === 'undefined' || Math.abs(top - scrollMid) < Math.abs(linesOffset[syncLine].top - scrollMid)) {
+                    syncLine = line
+                }
+            })
+            const scrollTop = this.editor.getScrollInfo().top
+            const editorLineOffset = this.editor.heightAtLine(syncLine, 'local') - scrollTop
+            if (this.scrollAnimation) {
+                this.scrollAnimation.cancel()
+            }
+            let animationCancelled = false
+            let animationSkipFrame = false
+            const animationFrom = scrollTop
+            const animationTo = scrollTop + editorLineOffset - linesOffset[syncLine].top
+            const animationStartTime = Date.now()
+            const animationDuration = 200
+            const animationFrameCallback = () => {
+                if (animationSkipFrame) {
+                    // skip frame so that user can scroll to interrupt animation
+                    requestAnimationFrame(animationFrameCallback)
+                    animationSkipFrame = false
+                } else if (!animationCancelled) {
+                    const currentTime = Date.now()
+                    const precent = (currentTime - animationStartTime) / animationDuration
+                    this.scrollSynced = true
+                    if (precent >= 1) {
+                        this.editor.scrollTo(null, animationTo)
+                    } else {
+                        this.editor.scrollTo(null, (animationTo - animationFrom) * precent + animationFrom)
+                        requestAnimationFrame(animationFrameCallback)
+                        animationSkipFrame = true
+                    }
+                }
+            }
+            animationFrameCallback()
+            this.scrollAnimation = {
+                cancel () {
+                    animationCancelled = true
+                }
+            }
         }
     }
 }
-</script>
+</script>

src/components/MarkdownPalettes.vue

@@ -13,14 +13,18 @@
                             ref="inputArea"
                             @input="updateCode"
                             @finish="insertCode = null"
+                            @scroll-sync="doScrollSync('editor', $event)"
                             :insertCode="insertCode"
-                            :editorOption="editorConfig.editorOption"></input-area>
+                            :editorOption="editorConfig.editorOption"
+                            :scrollSync="scrollSync"></input-area>
             </div>
             <div id="mp-editor-preview-area" class="mp-editor-area mp-preview-area" :class="{
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-hide': this.config.previewDisplay === 'hide'
                 }">
-                <preview-area v-model="code" :parser="contentParser" ref="previewArea"></preview-area>
+                <preview-area v-model="code" :parser="contentParser" ref="previewArea"
+                              @scroll-sync="doScrollSync('preview', $event)"
+                              :scrollSync="scrollSync"></preview-area>
             </div>
         </div>
         <div id="mp-editor-dialog">
@@ -89,6 +93,7 @@ import EditorDialog from './Dialog.vue'
 
 import { defaultConfig, getConfig } from './DefaultConfig'
 import { contentParserFactory } from './ContentParserFactory'
+import InjectLnParser from './plugins/InjectLnParser.js'
 
 export default {
     name: 'markdown-palettes',
@@ -113,7 +118,8 @@ export default {
             editorConfig: config,
             editorHeight: '500px',
             fullScreen: config.fullScreen,
-            contentParser: contentParserFactory(config.parsers)
+            contentParser: contentParserFactory([...config.parsers, InjectLnParser]),
+            scrollSync: config.scrollSync
         }
     },
     mounted () {
@@ -159,6 +165,16 @@ export default {
                     this.fullScreen = false
                 }
             }
+            if (operation === 'scrollSync') {
+                this.scrollSync = !this.scrollSync
+            }
+        },
+        doScrollSync (emitter, info) {
+            if (emitter === 'editor') {
+                this.$refs.previewArea.updateScrollSync(info)
+            } else if (emitter === 'preview') {
+                this.$refs.inputArea.updateScrollSync(info)
+            }
         }
     },
     watch: {
@@ -168,4 +184,4 @@ export default {
         }
     }
 }
-</script>
+</script>