feat(jsbattle-webpage): add code folding

jamro · Dec 11, 2019 · 573e33a · 573e33a
1 parent cec42e5
commit 573e33a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/jsbattle-webpage/build/libs.json b/packages/jsbattle-webpage/build/libs.json
@@ -13,6 +13,7 @@
   {"from": "/node_modules/codemirror/lib/**/*",                 "to": "/dist/vendor/codemirror/lib"},
   {"from": "/node_modules/codemirror/mode/javascript/**/*",     "to": "/dist/vendor/codemirror/mode"},
   {"from": "/node_modules/codemirror/addon/hint/**/*",          "to": "/dist/vendor/codemirror/addon/hint"},
+  {"from": "/node_modules/codemirror/addon/fold/**/*",          "to": "/dist/vendor/codemirror/addon/fold"},
   {"from": "/node_modules/codemirror/theme/ambiance.css",       "to": "/dist/vendor/codemirror/theme"},
   {"from": "/node_modules/popper.js/dist/umd/**/*",             "to": "/dist/vendor/popperjs"},
   {"from": "/node_modules/@fortawesome/fontawesome-free/**/*",  "to": "/dist/vendor/fontawesome"}

diff --git a/packages/jsbattle-webpage/src/components/common/editor/CodeArea.js b/packages/jsbattle-webpage/src/components/common/editor/CodeArea.js
@@ -133,7 +133,9 @@ export default class CodeArea extends React.Component {
       mode: "javascript",
       theme: 'ambiance',
       tabSize: 2,
-      viewportMargin: Infinity
+      viewportMargin: Infinity,
+      foldGutter: true,
+      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
     });
     this.codeMirror.on('change', () => {
       this.props.onChange(this.codeMirror.getValue());

diff --git a/packages/jsbattle-webpage/static/index.html b/packages/jsbattle-webpage/static/index.html
@@ -26,6 +26,7 @@
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet">
     <link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet">
+    <link href="vendor/codemirror/addon/fold/foldgutter.css" rel="stylesheet">
     <link href="vendor/codemirror/theme/ambiance.css" rel="stylesheet">
     <link href="vendor/fontawesome/css/all.min.css" rel="stylesheet">
     <link href="css/jsbattle.css" rel="stylesheet">
@@ -56,6 +57,9 @@
     <script type="text/javascript" src="vendor/codemirror/mode/javascript.js"></script>
     <script type="text/javascript" src="vendor/codemirror/addon/hint/show-hint.js"></script>
     <script type="text/javascript" src="vendor/codemirror/addon/hint/javascript-hint.js"></script>
+    <script type="text/javascript" src="vendor/codemirror/addon/fold/foldcode.js"></script>
+    <script type="text/javascript" src="vendor/codemirror/addon/fold/foldgutter.js"></script>
+    <script type="text/javascript" src="vendor/codemirror/addon/fold/brace-fold.js"></script>
     <script type="text/javascript" src="vendor/clipboard.min.js"></script>
     <script type="text/javascript" src="vendor/ajv.min.js"></script>
     <script type="text/javascript" src="js/highlight.pack.js"></script>