Merge branch 'master' into support/make-app-monorepo

.github/workflows/release.yml

@@ -104,8 +104,9 @@ jobs:
       uses: actions/cache@v2
       with:
         path: /tmp/.buildx-cache
-        key: ${{ runner.os }}-buildx-app-${{ github.sha }}
+        key: ${{ runner.os }}-buildx-app-${{ matrix.flavor }}-${{ github.sha }}
         restore-keys: |
+          ${{ runner.os }}-buildx-app-${{ matrix.flavor }}-
           ${{ runner.os }}-buildx-app-
 
     - name: Build and push
@@ -137,7 +138,7 @@ jobs:
       with:
         channel: '#release'
         url: ${{ secrets.SLACK_WEBHOOK_URL }}
-        created_tag: 'v${{ needs.github-release.outputs.RELEASE_VERSION }}${{ env.SUFFIX }}'
+        created_tag: 'v${{ needs.github-release.outputs.RELEASE_VERSION }}${{ steps.suffix.outputs.SUFFIX }}'
 
     - name: Check whether workspace is clean
       run: |

CHANGES.md

@@ -1,17 +1,28 @@
 # CHANGES
 
-## v4.3.2-RC
+## v4.3.3-RC
 
 * Update libs
     * @slack/web-api
     * morgan
 * 
 
+## v4.3.2
+
+* Feature: Hufflpuff theme
+* Improvement: CodeMirror header styles
+* Improvement: CodeMirror syntax-highlighting fenced code blocks
+* Improvement: Slack Integration Settings
+    * Error behavior when getting connection statuses
+    * Add links to docs
+* Improvement: /_api/v3/recent can be accessed with access token
+* Support: Using http-errors
+
 ## v4.3.1
 
 * Fix: Build script for production
 
-## v4.3.0-RC
+## v4.3.0
 
 ### BREAKING CHANGES
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "4.3.2-RC",
+  "version": "4.3.3-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -54,8 +54,36 @@ require('codemirror/addon/fold/foldgutter.css');
 require('codemirror/addon/fold/markdown-fold');
 require('codemirror/addon/fold/brace-fold');
 require('codemirror/addon/display/placeholder');
-require('codemirror/mode/gfm/gfm');
 require('../../util/codemirror/autorefresh.ext');
+require('../../util/codemirror/gfm-growi.mode');
+// import modes to highlight
+require('codemirror/mode/clike/clike');
+require('codemirror/mode/css/css');
+require('codemirror/mode/django/django');
+require('codemirror/mode/erlang/erlang');
+require('codemirror/mode/gfm/gfm');
+require('codemirror/mode/go/go');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/mode/jsx/jsx');
+require('codemirror/mode/mathematica/mathematica');
+require('codemirror/mode/nginx/nginx');
+require('codemirror/mode/perl/perl');
+require('codemirror/mode/php/php');
+require('codemirror/mode/python/python');
+require('codemirror/mode/r/r');
+require('codemirror/mode/ruby/ruby');
+require('codemirror/mode/rust/rust');
+require('codemirror/mode/sass/sass');
+require('codemirror/mode/shell/shell');
+require('codemirror/mode/sql/sql');
+require('codemirror/mode/stex/stex');
+require('codemirror/mode/stylus/stylus');
+require('codemirror/mode/swift/swift');
+require('codemirror/mode/toml/toml');
+require('codemirror/mode/vb/vb');
+require('codemirror/mode/vue/vue');
+require('codemirror/mode/xml/xml');
+require('codemirror/mode/yaml/yaml');
 
 
 const MARKDOWN_TABLE_ACTIVATED_CLASS = 'markdown-table-activated';
@@ -820,7 +848,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   render() {
-    const mode = this.state.isGfmMode ? 'gfm' : undefined;
+    const mode = this.state.isGfmMode ? 'gfm-growi' : undefined;
     const additionalClasses = Array.from(this.state.additionalClassSet).join(' ');
 
     const placeholder = this.state.isGfmMode ? 'Input with Markdown..' : 'Input with Plane Text..';
@@ -857,8 +885,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
             gutters: this.props.lineNumbers ? ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'] : [],
             // match-highlighter, matchesonscrollbar, annotatescrollbar options
             highlightSelectionMatches: { annotateScrollbar: true },
-            // markdown mode options
-            highlightFormatting: true,
             // continuelist, indentlist
             extraKeys: {
               Enter: this.handleEnterKey,

packages/app/src/styles/_override-codemirror.scss

@@ -1,22 +1,38 @@
 .CodeMirror {
-  .cm-header-1 {
-    font-size: 1.8em;
-  }
-  .cm-header-2 {
-    font-size: 1.4em;
-  }
-  .cm-header-3 {
-    font-size: 1.2em;
-  }
-  .cm-header-4 {
-    font-size: 1.1em;
-  }
-  .cm-header-5 {
-    font-size: 1.05em;
+  pre.CodeMirror-line.grw-cm-header-line {
+    padding-top: 0.16em;
+    padding-bottom: 0.08em;
+    font-family: $font-family-monospace;
+
+    // '#'
+    .cm-formatting-header {
+      font-style: italic;
+      font-weight: bold;
+      opacity: 0.5;
+    }
+
+    .cm-header-1 {
+      font-size: 1.9em;
+    }
+    .cm-header-2 {
+      font-size: 1.6em;
+    }
+    .cm-header-3 {
+      font-size: 1.4em;
+    }
+    .cm-header-4 {
+      font-size: 1.35em;
+    }
+    .cm-header-5 {
+      font-size: 1.25em;
+    }
+    .cm-header-6 {
+      font-size: 1.2em;
+    }
   }
 
   .cm-matchhighlight {
-    color: $gray-900;
+    color: $gray-900 !important;
     background-color: cyan;
   }
 
@@ -28,9 +44,4 @@
   pre.CodeMirror-placeholder {
     color: $text-muted;
   }
-
-  // overwrite .CodeMirror pre
-  pre.CodeMirror-line {
-    font-family: $font-family-monospace;
-  }
 }

packages/app/src/styles/_wiki.scss

@@ -8,6 +8,15 @@ div.body {
 }
 
 .wiki {
+  @mixin add-left-border($width) {
+    &:before {
+      margin-right: 0.4em;
+      content: '';
+      border-left: $width solid;
+      opacity: 0.2;
+    }
+  }
+
   @extend .text-break;
 
   font-size: 15px;
@@ -29,29 +38,40 @@ div.body {
   h1 {
     padding: 0.5em 0;
     margin-top: 2em;
-    font-size: 1.8em;
+    font-size: 1.9em;
     line-height: 1.1em;
+    // style
     border-bottom: solid 1px transparent;
   }
   h2 {
-    // padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    font-size: 1.4em;
+    padding-bottom: 0.3em;
+    font-size: 1.6em;
     font-weight: bold;
     line-height: 1.225;
-    border-bottom: 1px solid transparent;
+    // style
+    border-bottom: solid 1px transparent;
   }
   h3 {
-    font-size: 1.2em;
+    font-size: 1.4em;
     font-weight: bold;
   }
   h4 {
-    font-size: 1.1em;
+    font-size: 1.35em;
     font-weight: normal;
+    // style
+    @include add-left-border(6px);
   }
   h5 {
-    font-size: 1.05em;
+    font-size: 1.25em;
+    font-weight: normal;
+    // style
+    @include add-left-border(4px);
+  }
+  h6 {
+    font-size: 1.2em;
     font-weight: normal;
+    // style
+    @include add-left-border(2px);
   }
 
   p {

packages/app/src/util/codemirror/gfm-growi.mode.js

@@ -0,0 +1,19 @@
+// https://discuss.codemirror.net/t/cm-header-margin-padding-height/75/5
+window.CodeMirror.defineMode('gfm-growi', (cmConfig, modeCfg) => {
+  // based on Markdown (GitHub-flavour) mode
+  // https://codemirror.net/doc/manual.html#option_mode
+  // https://codemirror.net/mode/index.html
+  modeCfg.name = 'gfm';
+  modeCfg.highlightFormatting = true;
+  const mode = window.CodeMirror.getMode(cmConfig, modeCfg);
+
+  const origToken = mode.token;
+  mode.token = function(stream, state) {
+    let classes = origToken(stream, state) || '';
+    // https://regex101.com/r/Fep0w2/1
+    classes = classes.replace(/(^| )header(\S*)/g, '$1header$2 line-grw-cm-header-line');
+    return /^\s*$/.test(classes) ? null : classes;
+  };
+
+  return mode;
+});