✨ Koenig Editor Beta Release

refs TryGhost/Ghost#9505
- see https://forum.ghost.org/t/koenig-beta-release/1284 for full details
- moved Koenig editor checkbox from experimental to Beta
- added info message support in editor screen
- removed alert when opening markdown-incompatible post with Koenig disabled

app/controllers/editor.js

@@ -94,6 +94,7 @@ export default Controller.extend({
 
     /* public properties -----------------------------------------------------*/
 
+    infoMessage: null,
     leaveEditorTransition: null,
     shouldFocusEditor: false,
     showDeletePostModal: false,
@@ -512,12 +513,6 @@ export default Controller.extend({
         let postIsMarkdownCompatible = post.isCompatibleWithMarkdownEditor();
         if (koenigEnabled || !postIsMarkdownCompatible) {
             this.set('useKoenig', true);
-
-            // display an alert if koenig is disabled but we use it anyway
-            // because the post is incompatible with the markdown editor
-            if (!koenigEnabled) {
-                alert('This post will be opened with the Koenig editor because it\'s not compatible with the markdown editor');
-            }
         } else {
             this.set('useKoenig', false);
         }
@@ -534,6 +529,12 @@ export default Controller.extend({
 
         this.set('post', post);
 
+        // display an info message if Koenig is disabled by we had to use it
+        // for post compatibility
+        if (!koenigEnabled && this.useKoenig) {
+            // this.set('infoMessage', 'This post can only be edited with the Koenig editor.');
+        }
+
         // autofocus the editor if we have a new post
         this.set('shouldFocusEditor', post.get('isNew'));
 
@@ -629,6 +630,7 @@ export default Controller.extend({
         this.set('hasDirtyAttributes', false);
         this.set('shouldFocusEditor', false);
         this.set('leaveEditorTransition', null);
+        this.set('infoMessage', null);
 
         // remove the onbeforeunload handler as it's only relevant whilst on
         // the editor route

app/styles/components/settings-menu.css

@@ -239,3 +239,10 @@
 .mobile-menu-expanded .content-cover {
     transform: translate3d(205px, 0px, 0px);
 }
+
+
+/* Badges
+/* ---------------------------------------------------------- */
+.gh-setting-title .gh-badge {
+    font-size: 13px;
+}

app/styles/layouts/editor.css

@@ -64,7 +64,7 @@
     position: relative;
     z-index: 1000;
     display: inline-block;
-    padding: 15px 0 15px 15px;
+    padding: 10px;
     color: var(--midgrey);
     line-height: 0;
     transition: all 0.15s ease-out 0s;
@@ -286,11 +286,15 @@
     right: 0;
     left: 0;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    height: 80px;
-    padding: 0 30px;
+    height: 36px;
+    padding: 0;
+    margin: 24px;
+    z-index: 799;
 }
+
 @media (max-width: 750px) {
     .gh-editor-header {
         padding: 0 4vw;
@@ -304,6 +308,8 @@
     padding-left: 15px;
     border-bottom: var(--lightgrey) 1px solid;
     background-color: #fff;
+    margin: 0;
+    border-radius: 0;
 }
 
 .gh-editor-header-small .gh-publishmenu {
@@ -314,6 +320,15 @@
     padding: 13px 15px;
 }
 
+.gh-editor-header-small .gh-koenig-info {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 0 8px;
+}
+
 .gh-editor-status {
     color: var(--midgrey);
     font-size: 1.3rem;

app/styles/layouts/main.css

@@ -347,9 +347,9 @@
 .gh-menu-toggle {
     display: block;
     position: absolute;
-    top: 25px;
+    top: 24px;
     right: -8px;
-    height: 34px;
+    height: 36px;
     width: 25px;
     border: color-mod(var(--lightgrey) l(+4%)) 5px solid;
     border-radius: 4px;
@@ -638,10 +638,6 @@
     align-items: center;
 }
 
-.view-actions .gh-btn {
-    margin-left: 8px;
-}
-
 .view-container,
 .view-content {
     position: relative;

app/templates/editor.hbs

@@ -5,19 +5,34 @@
         navIsClosed=navIsClosed
         as |editor|
     }}
-        <header class="gh-editor-header {{editor.headerClass}}">
-            <div class="gh-editor-status">
-                {{gh-editor-post-status
-                    post=post
-                    isSaving=(or autosave.isRunning saveTasks.isRunning)
-                }}
+        <header class="gh-editor-header br2 {{editor.headerClass}} {{if infoMessage "bg-white-90"}}">
+            <div class="flex items-center br2 h9 pa2 pl4 pr4 {{unless infoMessage "bg-white-90"}}">
+                <div class="gh-editor-status">
+                    {{gh-editor-post-status
+                        post=post
+                        isSaving=(or autosave.isRunning saveTasks.isRunning)
+                    }}
+                </div>
+                {{#gh-scheduled-post-countdown post=post as |post countdown|}}
+                    <time datetime="{{post.publishedAtUTC}}" class="green f8 nudge-bottom--1 ml3" data-test-schedule-countdown>
+                        Post will go live {{countdown}}.
+                    </time>
+                {{/gh-scheduled-post-countdown}}
+            </div>
+
+            {{#if infoMessage}}
+            <div class="gh-koenig-info miw88 flex flex-auto justify-center">
+                <div class="midgrey inline-flex tracked-1 center pa1 pl4 pr4 br3 justify-center items-start {{if (eq editor.headerClass "gh-editor-header-small") "bg-white-90"}}">
+                    {{svg-jar "idea" class="w7 h7 fill-blue"}}
+                    <p class="ma0 pa0 ml1 nudge-top--2">
+                        {{infoMessage}}
+                        <button type="button" class="blue fw5" {{action (mut infoMessage "")}}>Got it</button>
+                    </p>
+                </div>
             </div>
-            {{#gh-scheduled-post-countdown post=post as |post countdown|}}
-                <time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule" data-test-schedule-countdown>
-                    Post will be published {{countdown}}.
-                </time>
-            {{/gh-scheduled-post-countdown}}
-            <section class="view-actions">
+            {{/if}}
+
+            <section class="view-actions br2 {{unless infoMessage "bg-white-90"}}">
                 {{#unless post.isNew}}
                     {{#if session.user.isContributor}}
                         {{gh-task-button "Save"

app/templates/settings/labs.hbs

@@ -82,6 +82,15 @@
         </div>
 
         <div class="gh-setting-header">Beta features</div>
+        <div class="gh-setting">
+            <div class="gh-setting-content">
+                <div class="gh-setting-title flex items-center">Koenig editor <span class="gh-badge gh-badge-green ml1">New</span></div>
+                <div class="gh-setting-desc">Participate in our new rich text editor beta! We’d love <a href="https://forum.ghost.org/t/koenig-beta-release/1284" target="_blank" rel="noopener">your feedback</a></div>
+            </div>
+            <div class="gh-setting-action">
+                <div class="for-checkbox">{{gh-feature-flag "koenigEditor"}}</div>
+            </div>
+        </div>
         <div class="gh-setting">
             <div class="gh-setting-content">
                 <div class="gh-setting-title">Public API</div>
@@ -155,19 +164,6 @@
             {{/gh-uploader}}
         </div>
 
-        <div class="gh-setting-header">⚠️ Developer-only Feature Testing ⚠️</div>
-        <div class="gh-setting">
-            <div class="gh-setting-content">
-                <div class="gh-setting-title">Koenig Editor</div>
-                <div class="gh-setting-desc">
-                    Highly experimental (i.e. broken) editor. For developer use only.<br>
-                    <strong>Warning:</strong> Stories created or edited with Koenig will no longer be compatible with the old markdown editor.</div>
-            </div>
-            <div class="gh-setting-action">
-                <div class="for-checkbox">{{gh-feature-flag "koenigEditor"}}</div>
-            </div>
-        </div>
-
     </section>
 </section>