Move initial state into a help block

customize.dist/src/less2/include/ckeditor-fix.less

@@ -3,28 +3,9 @@
     .cke_reset_all * {
         color: inherit;
     }
-    #cke_editor1 .cke_inner {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        display: flex;
-        flex-flow: column;
-    }
     .cke_toolbox_main {
         display: inline-block;
     }
-    #cke_1_contents {
-        flex: 1;
-        margin-top: -1px;
-        display: flex;
-        overflow: visible;
-        iframe {
-            min-height: 100%;
-            width: 100%;
-        }
-    }
     .cke_toolbox .cp-toolbar-history {
         input.gotoInput { // TODO
             padding: 3px 3px;

customize.dist/src/less2/include/toolbar.less

@@ -255,6 +255,38 @@
             &.cp-markdown-help { float: right; }
         }
     }
+
+    // TODO put in a different less file
+    .cp-help-container {
+        position: relative;
+        background-color: lighten(@bg-color, 15%);
+        &.cp-help-hidden {
+            display: none;
+        }
+
+        .cp-help-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        .cp-help-text {
+            color: @color;
+            margin: 0;
+            padding: 15px;
+            h1 {
+                font-size: 20px;
+            }
+            h2 {
+                font-size: 18px;
+            }
+            h3 {
+                font-size: 16px;
+            }
+            ul, ol, p { margin: 0; }
+        }
+    }
+
+
     .cp-toolbar-userlist-drawer {
         background-color: @bg-color;
         color: @color;