enable to switch cheatsheets for on-edit and comment-form

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -472,43 +472,72 @@ export default class CodeMirrorEditor extends AbstractEditor {
     };
 
     return (
-      <div className="overlay overlay-gfm-cheatsheat mr-5 mb-2">
-        <span style={style} className="overlay-content">
+      <div className="mr-5 mb-2">
+        <div className="overlay overlay-gfm-cheatsheat cheatsheet-1">
+          <span style={style} className="overlay-content">
+            <p className="markdown-help">Markdown Help</p>
+            <div>
+              <ul>
+                <li># 見出し1</li>
+                <li>## 見出し2</li>
+                <li>### 見出し3</li>
+                <li>#### 見出し4</li>
+              </ul>
+              <ul>
+                <li>text[&nbsp;][&nbsp;](スペース2つで改行)</li>
+                <li>text</li>
+              </ul>
+              <ul>
+                <li>- リスト1</li>
+                <li>[&nbsp;]- リスト1_1</li>
+                <li>[&nbsp;][&nbsp;]- リスト1_1_1</li>
+              </ul>
+              <ul>
+                <li>これは <i> *italic* </i>です</li>
+                <li>これは <b> **ボールド** </b>です</li>
+              </ul>
+              <ul>
+                <li>| Left align | Right align | Center align |</li>
+                <li>|:------------|--------------:|:--------------:|</li>
+                <li>|column 1&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp; &nbsp;column 2|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
+                <li>|column 1&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp; &nbsp;column 2|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
+              </ul>
+            </div>
+          </span>
+        </div>
+
 
+        <div className="overlay cheatsheet-2 overlay-gfm-cheatsheat">
+          <span style={style} className="overlay-content">
             <p className="markdown-help">Markdown Help</p>
-              <div>
-                <ul>
-                  <li># 見出し1</li>
-                  <li>## 見出し2</li>
-                  <li>### 見出し3</li>
-                  <li>#### 見出し4</li>
-                </ul>
-                <ul>
-                  <li>text[&nbsp;][&nbsp;](スペース2つで改行)</li>
-                  <li>text</li>
-                </ul>
-                <ul>
-                  <li>- リスト1</li>
-                  <li>[&nbsp;]- リスト1_1</li>
-                  <li>[&nbsp;][&nbsp;]- リスト1_1_1</li>
-                </ul>
-                <ul>
-                  <li>これは <i> *italic* </i>です</li>
-                  <li>これは <b> **ボールド** </b>です</li>
-                </ul>
-
-                <ul>
-                  <li>| Left align | Right align | Center align |</li>
-                  <li>|:------------|--------------:|:--------------:|</li>
-                  <li>|column 1&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp; &nbsp;column 2|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
-                  <li>|column 1&nbsp;&nbsp;&nbsp;|&nbsp; &nbsp; &nbsp;column 2|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
-                </ul>
-
-          </div>
-        </span>
-        <div>
+            <div>
+              <ul>
+                <li># 見出し1</li>
+                <li>## 見出し2</li>
+                <li>### 見出し3</li>
+                <li>#### 見出し4</li>
+              </ul>
+              <ul>
+                <li>text[&nbsp;][&nbsp;](スペース2つで改行)</li>
+                <li>text</li>
+              </ul>
+              <ul>
+                <li>- リスト1</li>
+                <li>[&nbsp;]- リスト1_1</li>
+                <li>[&nbsp;][&nbsp;]- リスト1_1_1</li>
+              </ul>
+              <ul>
+                <li>これは <i> *italic* </i>です</li>
+                <li>これは <b> **ボールド** </b>です</li>
+              </ul>
+
+            </div>
+          </span>
         </div>
+
+
       </div>
+
     );
   }
 

resource/styles/scss/_comment_growi.scss

@@ -94,9 +94,12 @@
   }
 
   .comment-form {
-    .overlay {
-      visibility: hidden;
+    .cheatsheet-1 {
+        display: none;
     }
+
+
+
     position: relative;
     margin-top: 2em;
     // user icon

resource/styles/scss/_on-edit.scss

@@ -238,6 +238,9 @@ body.on-edit {
       }
     }
 
+      .cheatsheet-2 {
+          display: none;
+      }
   } // .builtin-editor .tab-pane#edit