From 5f99b300249ec2238ae894df51404a0d6712e828 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sun, 12 Jul 2020 14:32:53 -0400
Subject: [PATCH] feat: code folding + diagram folding

---
 client/components/editor/editor-markdown.vue | 10 +++-
 client/components/editor/markdown/fold.js    | 62 ++++++++++++++++++++
 client/scss/components/codemirror.scss       | 10 ++++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 client/components/editor/markdown/fold.js

diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 286fad7f..39cec289 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/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
       }
     })
diff --git a/client/components/editor/markdown/fold.js b/client/components/editor/markdown/fold.js
new file mode 100644
index 00000000..1bc56ef5
--- /dev/null
+++ b/client/components/editor/markdown/fold.js
@@ -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)
+  }
+})
diff --git a/client/scss/components/codemirror.scss b/client/scss/components/codemirror.scss
index 89a9470f..407cda56 100644
--- a/client/scss/components/codemirror.scss
+++ b/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;
+}