|
|
@@ -141,6 +141,21 @@ const md = new MarkdownIt({
|
|
|
.use(mdMark)
|
|
|
.use(mdImsize)
|
|
|
|
|
|
+// Inject line numbers for preview scroll sync
|
|
|
+let linesMap = []
|
|
|
+function injectLineNumbers (tokens, idx, options, env, slf) {
|
|
|
+ let line
|
|
|
+ if (tokens[idx].map && tokens[idx].level === 0) {
|
|
|
+ line = tokens[idx].map[0]
|
|
|
+ tokens[idx].attrJoin('class', 'line')
|
|
|
+ tokens[idx].attrSet('data-line', String(line))
|
|
|
+ linesMap.push(line)
|
|
|
+ }
|
|
|
+ return slf.renderToken(tokens, idx, options, env, slf)
|
|
|
+}
|
|
|
+md.renderer.rules.paragraph_open = injectLineNumbers
|
|
|
+md.renderer.rules.heading_open = injectLineNumbers
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
codemirror
|
|
|
@@ -192,13 +207,34 @@ export default {
|
|
|
self.$parent.save()
|
|
|
}
|
|
|
})
|
|
|
+ cm.on('cursorActivity', this.scrollSync)
|
|
|
this.onCmInput(this.code)
|
|
|
},
|
|
|
onCmInput: _.debounce(function (newContent) {
|
|
|
+ linesMap = []
|
|
|
this.previewHTML = md.render(newContent)
|
|
|
- this.$nextTick(function() {
|
|
|
+ this.$nextTick(() => {
|
|
|
Prism.highlightAllUnder(this.$refs.editorPreview)
|
|
|
+ this.scrollSync(this.cm)
|
|
|
})
|
|
|
+ }, 500),
|
|
|
+ /**
|
|
|
+ * Update scroll sync
|
|
|
+ */
|
|
|
+ scrollSync: _.debounce(function (cm) {
|
|
|
+ if (cm.somethingSelected()) { return }
|
|
|
+ let currentLine = cm.getCursor().line
|
|
|
+ if (currentLine < 3) {
|
|
|
+ this.Velocity(this.$refs.editorPreview, 'stop', true)
|
|
|
+ this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreview })
|
|
|
+ } else {
|
|
|
+ let closestLine = _.findLast(linesMap, n => n <= currentLine)
|
|
|
+ let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
|
|
|
+ if (destElm) {
|
|
|
+ this.Velocity(this.$refs.editorPreview, 'stop', true)
|
|
|
+ this.Velocity(destElm, 'scroll', { offset: '-100', duration: 1000, container: this.$refs.editorPreview })
|
|
|
+ }
|
|
|
+ }
|
|
|
}, 500)
|
|
|
}
|
|
|
}
|
|
|
@@ -212,9 +248,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
&-editor {
|
|
|
+ background-color: darken(mc('grey', '900'), 4.5%);
|
|
|
flex: 1 1 50%;
|
|
|
display: block;
|
|
|
- min-height: calc(100vh - 100px);
|
|
|
+ height: calc(100vh - 100px);
|
|
|
position: relative;
|
|
|
|
|
|
&-title {
|
|
|
@@ -229,7 +266,7 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 7;
|
|
|
text-transform: uppercase;
|
|
|
font-size: .7rem;
|
|
|
|
|
|
@@ -243,14 +280,28 @@ export default {
|
|
|
flex: 1 1 50%;
|
|
|
background-color: mc('grey', '100');
|
|
|
position: relative;
|
|
|
- padding: 30px 1rem 1rem 1rem;
|
|
|
+ height: calc(100vh - 100px);
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
@include until($tablet) {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
+ &-content {
|
|
|
+ height: calc(100vh - 100px);
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding: 30px 1rem 1rem 1rem;
|
|
|
+ width: calc(100% + 1rem + 17px)
|
|
|
+ // -ms-overflow-style: none;
|
|
|
+
|
|
|
+ // &::-webkit-scrollbar {
|
|
|
+ // width: 0px;
|
|
|
+ // background: transparent;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
&-title {
|
|
|
- background-color: mc('blue', '100');
|
|
|
+ background-color: rgba(mc('blue', '100'), .75);
|
|
|
border-bottom-right-radius: 5px;
|
|
|
display: inline-flex;
|
|
|
height: 30px;
|
|
|
@@ -318,6 +369,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // Fix FAB revealing under codemirror
|
|
|
+ .speed-dial--fixed {
|
|
|
+ z-index: 5;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.CodeMirror {
|
NGPixel