feat: code folding + diagram folding

client/components/editor/editor-markdown.vue

@@ -217,6 +217,10 @@ import 'codemirror/addon/display/fullscreen.css'
 import 'codemirror/addon/selection/mark-selection.js'
 import 'codemirror/addon/search/searchcursor.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
 import MarkdownIt from 'markdown-it'
@@ -685,7 +689,9 @@ export default {
       viewportMargin: 50,
       inputStyle: 'contenteditable',
       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.on('change', c => {
@@ -769,9 +775,11 @@ export default {
           })
           break
         case 'DIAGRAM':
+          const foldLine = this.cm.getCursor().line
           this.insertAtCursor({
             content: '```diagram\n' + opts.text + '\n```'
           })
+          this.cm.foldCode(foldLine)
           break
       }
     })

client/components/editor/markdown/fold.js

+// 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)
+  }
+})

client/scss/components/codemirror.scss

@@ -77,3 +77,13 @@
   text-decoration: underline;
   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;
+}