feat: code folding + diagram folding

This commit is contained in:
NGPixel 2020-07-12 14:32:53 -04:00
parent d209a4158f
commit 5f99b30024
3 changed files with 81 additions and 1 deletions

View File

@ -217,6 +217,10 @@ import 'codemirror/addon/display/fullscreen.css'
import 'codemirror/addon/selection/mark-selection.js' import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/searchcursor.js' import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/hint/show-hint.js' import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/foldgutter.css'
import './markdown/fold'
// Markdown-it // Markdown-it
import MarkdownIt from 'markdown-it' import MarkdownIt from 'markdown-it'
@ -685,7 +689,9 @@ export default {
viewportMargin: 50, viewportMargin: 50,
inputStyle: 'contenteditable', inputStyle: 'contenteditable',
allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif'], allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif'],
direction: siteConfig.rtl ? 'rtl' : 'ltr' direction: siteConfig.rtl ? 'rtl' : 'ltr',
foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
}) })
this.cm.setValue(this.$store.get('editor/content')) this.cm.setValue(this.$store.get('editor/content'))
this.cm.on('change', c => { this.cm.on('change', c => {
@ -769,9 +775,11 @@ export default {
}) })
break break
case 'DIAGRAM': case 'DIAGRAM':
const foldLine = this.cm.getCursor().line
this.insertAtCursor({ this.insertAtCursor({
content: '```diagram\n' + opts.text + '\n```' content: '```diagram\n' + opts.text + '\n```'
}) })
this.cm.foldCode(foldLine)
break break
} }
}) })

View File

@ -0,0 +1,62 @@
// Header matching code by CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
import CodeMirror from 'codemirror'
const maxDepth = 100
const codeBlockStartMatch = /^`{3}[a-zA-Z0-9]+$/
const codeBlockEndMatch = /^`{3}$/
CodeMirror.registerHelper('fold', 'markdown', function (cm, start) {
const firstLine = cm.getLine(start.line)
const lastLineNo = cm.lastLine()
let end
function isHeader(lineNo) {
const tokentype = cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0))
return tokentype && /\bheader\b/.test(tokentype)
}
function headerLevel(lineNo, line, nextLine) {
let match = line && line.match(/^#+/)
if (match && isHeader(lineNo)) return match[0].length
match = nextLine && nextLine.match(/^[=-]+\s*$/)
if (match && isHeader(lineNo + 1)) return nextLine[0] === '=' ? 1 : 2
return maxDepth
}
// -> CODE BLOCK
if (codeBlockStartMatch.test(cm.getLine(start.line))) {
end = start.line
let nextNextLine = cm.getLine(end + 1)
while (end < lastLineNo) {
if (codeBlockEndMatch.test(nextNextLine)) {
end++
break
}
end++
nextNextLine = cm.getLine(end + 1)
}
} else {
// -> HEADER
let nextLine = cm.getLine(start.line + 1)
const level = headerLevel(start.line, firstLine, nextLine)
if (level === maxDepth) return undefined
end = start.line
let nextNextLine = cm.getLine(end + 2)
while (end < lastLineNo) {
if (headerLevel(end + 1, nextLine, nextNextLine) <= level) break
++end
nextLine = nextNextLine
nextNextLine = cm.getLine(end + 2)
}
}
return {
from: CodeMirror.Pos(start.line, firstLine.length),
to: CodeMirror.Pos(end, cm.getLine(end).length)
}
})

View File

@ -77,3 +77,13 @@
text-decoration: underline; text-decoration: underline;
color: white !important; color: white !important;
} }
.cm-s-wikijs-dark .CodeMirror-foldmarker {
margin-left: 10px;
display: inline-block;
background-color: rgba(mc('amber', '800'), .3);
padding: 8px 5px;
color: mc('amber', '500');
border-radius: 5px;
text-shadow: none;
}