New editor layout (#355)

- the title is now part of the content
- new ways to navigate from the title to the content
- the new editor contains updated toolbar behavior
- the new editor contains markdown like commands

app/mixins/editor-base-controller.js

@@ -16,6 +16,8 @@ import PostModel from 'ghost-admin/models/post';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import {isVersionMismatchError} from 'ghost-admin/services/ajax';
 import {isInvalidError} from 'ember-ajax/errors';
+import $ from 'jquery';
+import ghostPaths from 'ghost-admin/utils/ghost-paths';
 
 const {resolve} = RSVP;
 
@@ -40,6 +42,12 @@ export default Mixin.create({
     clock: injectService(),
     slugGenerator: injectService(),
 
+    cards: [], // for apps
+    atoms: [], // for apps
+    toolbar: [], // for apps
+    apiRoot: ghostPaths().apiRoot,
+    assetPath: ghostPaths().assetRoot,
+
     init() {
         this._super(...arguments);
         window.onbeforeunload = () => {
@@ -543,6 +551,13 @@ export default Mixin.create({
 
         toggleReAuthenticateModal() {
             this.toggleProperty('showReAuthenticateModal');
+        },
+
+        titleKeyDown(event) {
+            if (event.keyCode === 13 || event.keyCode === 40) {
+                // if the enter key or down key are pressed then focus on the editor
+                $('.__mobiledoc-editor').focus();
+            }
         }
     }
 });

app/routes/editor/edit.js

@@ -3,7 +3,6 @@ import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 import base from 'ghost-admin/mixins/editor-base-route';
 import isNumber from 'ghost-admin/utils/isNumber';
 import isFinite from 'ghost-admin/utils/isFinite';
-import ghostPaths from 'ghost-admin/utils/ghost-paths';
 
 export default AuthenticatedRoute.extend(base, {
     titleToken: 'Editor',
@@ -53,13 +52,7 @@ export default AuthenticatedRoute.extend(base, {
 
     setupController(controller) {
         this._super(...arguments);
-
         controller.set('shouldFocusEditor', this.get('_transitionedFromNew'));
-        controller.set('cards' , []);
-        controller.set('atoms' , []);
-        controller.set('toolbar' , []);
-        controller.set('apiRoot', ghostPaths().apiRoot);
-        controller.set('assetPath', ghostPaths().assetRoot);
     },
 
     actions: {

app/styles/layouts/editor.css

@@ -7,6 +7,7 @@
 
 .gh-editor-title {
     flex-grow: 1;
+    margin-bottom: 2vw;
 }
 
 .gh-editor-title input {
@@ -16,7 +17,7 @@
     border: 0;
     background: transparent;
     color: var(--darkgrey);
-    font-size: 2.6rem;
+    font-size: 3.2rem;
     font-weight: bold;
 }
 
@@ -400,3 +401,32 @@
 .modal-markdown-help-table th {
     text-align: left;
 }
+
+
+/* NEW editor
+/* ---------------------------------------------------------- */
+
+.gh-editor-header {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    height: 65px;
+}
+
+.gh-editor-container {
+    position: relative;
+    overflow-y: auto;
+    padding: 100px 4vw 40px;
+    width: 100%;
+}
+
+.gh-editor-inner {
+    margin: 0 auto;
+    max-width: 700px;
+}

app/styles/patterns/global.css

@@ -57,7 +57,6 @@
 *:before,
 *:after {
     box-sizing: border-box;
-    user-select: none;
 }
 
 html {

app/templates/editor/edit.hbs

@@ -1,13 +1,16 @@
 <section class="gh-view">
-    <header class="view-header">
-        {{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}}
-            {{gh-trim-focus-input model.titleScratch type="text" id="entry-title" placeholder="Your Post Title" tabindex="1" shouldFocus=shouldFocusTitle focus-out="updateTitle" update=(action (perform updateTitle))}}
-        {{/gh-view-title}}
-        {{#if scheduleCountdown}}
-            <time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule">
-                Post will be published {{scheduleCountdown}}.
-            </time>
+
+    <header class="gh-editor-header">
+        <div class="gh-editor-status">
+        {{#if model.isPublished}}
+            Published
+        {{else if model.isScheduled}}
+            Scheduled
+        {{else}}
+            Draft
         {{/if}}
+
+        </div>
         <section class="view-actions">
             <button type="button" class="post-settings" title="Post Settings" {{action "openSettingsMenu"}}>
                 <i class="icon-settings"></i>
@@ -29,15 +32,28 @@
             }}
         </section>
     </header>
-    {{ghost-editor
-        value=(readonly model.scratch)
-        onChange=(action (mut model.scratch))
-        onFirstChange=(action "autoSaveNew")
-        onTeardown=(action "cancelTimers")
-        shouldFocusEditor=shouldFocusEditor
-        apiRoot=apiRoot
-        assetPath=assetPath
-    }}
+    <div class="gh-editor-container">
+        <div class="gh-editor-inner">
+            {{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}}
+                {{gh-trim-focus-input model.titleScratch type="text" id="entry-title" placeholder="Your Post Title" tabindex="1" shouldFocus=shouldFocusTitle focus-out="updateTitle" update=(action (perform updateTitle)) keyDown=(action "titleKeyDown")}}
+            {{/gh-view-title}}
+            {{#if scheduleCountdown}}
+                <time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule">
+                    Post will be published {{scheduleCountdown}}.
+                </time>
+            {{/if}}
+            {{ghost-editor
+                value=(readonly model.scratch)
+                onChange=(action (mut model.scratch))
+                onFirstChange=(action "autoSaveNew")
+                onTeardown=(action "cancelTimers")
+                shouldFocusEditor=shouldFocusEditor
+                apiRoot=apiRoot
+                assetPath=assetPath
+                tabindex=2
+            }}
+        </div>
+    </div>
 </section>
 
 {{#if showDeletePostModal}}

package.json

@@ -74,7 +74,7 @@
     "ember-wormhole": "0.5.0",
     "emberx-file-input": "1.1.0",
     "fs-extra": "0.30.0",
-    "ghost-editor": "0.0.11",
+    "ghost-editor": "0.0.14",
     "glob": "7.1.1",
     "grunt": "1.0.1",
     "grunt-bg-shell": "2.3.3",