General Editor UI improvements. (#630)

refs TryGhost/Ghost#8248
refs TryGhost/Ghost#8194
closes TryGhost/Ghost#8192

Miscellaneous editor reliability and usability fixes. 
- Improve the reliability of selection.
- Ensure that the + menu appears even if there is a blank document (which meant the events weren't firing from mobiledoc itself)
- When cards are added they are automatically selected and if possible go straight into edit mode (only works on the markdown card).
- Fixes issues in Safari desktop, Safari mobile, and Firefox.
- Tries to position UI on screen at all times.
- Removes fastclick.

app/components/gh-editor-title.js

@@ -145,8 +145,12 @@ export default Component.extend({
         }
     },
     editorKeyDown(event) {
-        let editor = this.get('editor');
+        // if the editor has a menu open then we don't want to capture inputs.
+        if (this.get('editorMenuIsOpen')) {
+            return;
+        }
 
+        let editor = this.get('editor');
         if (event.keyCode === 38) { // up arrow
             let selection = window.getSelection();
             if (!selection.rangeCount) {

app/mixins/editor-base-controller.js

@@ -52,7 +52,7 @@ export default Mixin.create({
     apiRoot: ghostPaths().apiRoot,
     assetPath: ghostPaths().assetRoot,
     editor: null,
-    title: null,
+    editorMenuIsOpen: false,
     init() {
         this._super(...arguments);
         window.onbeforeunload = () => {
@@ -567,6 +567,12 @@ export default Mixin.create({
 
         setEditor(editor) {
             this.set('editor', editor);
+        },
+        editorMenuIsOpen() {
+            this.set('editorMenuIsOpen', true);
+        },
+        editorMenuIsClosed() {
+            this.set('editorMenuIsOpen', false);
         }
     }
 });

app/styles/addons/gh-koenig/gh-koenig.css

@@ -21,12 +21,38 @@
     resize: none;
     font-weight: 200;
     letter-spacing: 0.1px;
+    -webkit-user-select: text;
+    user-select: text;
+    line-height: normal;
 }
 
+/*.__mobiledoc-editor *,
+.__mobiledoc-editor *:before,
+.__mobiledoc-editor *:after {
+    box-sizing:unset;
+}*/
+
 .kg-card {
     position: relative;
-    display: block;
+    display: inline-block; /* even though we hide the cursors there is still a 
+                            zero width divider character on either side of this card, 
+                            we need them to sit inline around this block otherwise we have
+                            a line at the top and bottom of the card. */
+    width:100%;
     outline:none;
+    user-select: none;
+    cursor: pointer;
+    z-index: 110; /* the title has a z-index of 100, this makes it sit above it. */
+}
+
+.kg-card * {
+    user-select: none;
+    cursor: pointer;
+}
+
+.kg-card .is-editing * {
+    user-select: auto;
+    cursor: auto;
 }
 
 .kg-card:hover,
@@ -40,9 +66,9 @@
     position: absolute;
     left: 0px;
     top: 0px;
-    margin-top: -56px;
-    height: 46px;
+    height: 10px;
     width:100%;
+    overflow: visible;
     display: none;
 }
 .button-group {
@@ -54,38 +80,30 @@
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-radius:5px;
-
+    margin-top:-56px;
     height:46px;
     display:flex;
     box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
 }
 
-/* keeps the hover when the cursor is moving from the card to the toolbar */
-.button-group:before {
-    display: block;
-    content: "";
-    position: absolute;
-    bottom:-9px;
-    width: 100%;
-    height: 8px;
-}
-
 .button-group:after {
     display: block;
     content: "";
     position: absolute;
-    bottom:-9px;
+    bottom:11px;
     left: 50%;
     margin-left: -10px;
-
+    
     width: 0;
     height: 0;
     border-left: transparent 10px solid;
     border-right: transparent 10px solid;
     border-top: color(var(--darkgrey) l(-10%)) 8px solid;
 }
 
-
+.kg-card {
+    min-height: 100px;
+}
 .kg-card.selected .kg-card-toolbar {
     display: flex;
     align-items: stretch;
@@ -98,14 +116,15 @@
     font-size: 1.3rem;
     line-height: 46px;
     text-align:center;
+    justify-content: center;
     vertical-align: middle;
     font-weight: bold;
     padding:0 18px;
 }
 
 
 .kg-card .kg-card-toolbar button {
-    display: flex;
+    /*display: flex;*/
     justify-content: center;
     align-items: center;
     height: 46px;
@@ -120,6 +139,8 @@
     line-height: 46px;
     width:70px;
     text-align:center;
+    justify-content: center;
+    align-items: center;
     vertical-align: middle;
     padding:0;
 }
@@ -129,6 +150,8 @@
     height:30px;
     width:60px;
     text-align:center;
+    justify-content: center;
+    align-items: center;
     vertical-align: middle;
     margin:8px;
 
@@ -155,6 +178,7 @@
     outline: none;
     border: none;
     resize: none;
+
 }
 
 .kg-card-toolbar button:hover {
@@ -220,11 +244,7 @@ textarea.ed_code {
     border-radius: 3px;
 }
 
-
-/**
- * HTML Card
- */
-
- .kg-card-html {
-     border: #ddd 1px solid;
- }
+/* markdown card */
+.kg-card-markdown textarea {
+    resize: vertical;
+}

app/styles/addons/gh-koenig/koenig-toolbar.css

@@ -6,13 +6,16 @@
     display: flex;
     align-items: center;
     text-align: center;
+    user-select: none;
+    cursor: pointer;
     color: color(var(--lightgrey) l(-10%));
     background: linear-gradient(
         color(var(--darkgrey) l(-3%)),
         color(var(--darkgrey) l(-8%))
     );
     border-radius: 5px;
     box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
+    z-index:110; /* places it above the title */
 }
 
 .gh-toolbar:after {
@@ -28,6 +31,21 @@
     border-right: transparent 10px solid;
     border-top: color(var(--darkgrey) l(-10%)) 8px solid;
 }
+.gh-toolbar.tick-above:after {
+    border: none;
+}
+.gh-toolbar.tick-full-left:after {
+    left: 25%;
+}
+.gh-toolbar.tick-half-left:after {
+    left: 40%;
+}
+.gh-toolbar.tick-full-right:after {
+    left: 75%;
+}
+.gh-toolbar.tick-half-right:after {
+    left: 60%;
+}
 
 .gh-toolbar.is-link {
     width: 263px;

app/styles/patterns/global.css

@@ -88,9 +88,11 @@
 /* Layout
 /* ---------------------------------------------------------- */
 
-*,
-*:before,
-*:after {
+
+/*Exclude the editor*/
+*:not(.__mobiledoc-editor),
+*:not(.__mobiledoc-editor):before,
+*:not(.__mobiledoc-editor):after {
     box-sizing: border-box;
 }
 

app/templates/components/gh-editor-title.hbs

@@ -1 +1 @@
-<div contenteditable="true" data-placeholder="Your Post Title" class="gh-editor-title" tabindex={{tabindex}}></div>
+<div contenteditable="true" data-placeholder="Your Post Title" class="gh-editor-title needsclick" tabindex={{tabindex}}></div>

app/templates/editor/edit.hbs

@@ -32,7 +32,7 @@
             </button>
         </section>
     </header>
-    <div class="gh-editor-container">
+    <div class="gh-editor-container needsclick">
         <div class="gh-editor-inner">
             {{gh-editor-title
                 val=(readonly model.titleScratch)
@@ -43,6 +43,7 @@
                 update=(action (perform updateTitle))
                 id="gh-editor-title"
                 koenigEditor=(readonly editor)
+                editorMenuIsOpen=editorMenuIsOpen
             }}
             {{#if scheduleCountdown}}
                 <time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule">
@@ -60,6 +61,8 @@
                 tabindex="2"
 		        containerSelector=".gh-editor-container"
                 setEditor=(action "setEditor")
+                menuIsOpen=(action "editorMenuIsOpen")
+                menuIsClosed=(action "editorMenuIsClosed")
             }}
         </div>
     </div>

bower.json

@@ -3,7 +3,6 @@
   "dependencies": {
     "devicejs": "0.2.7",
     "Faker": "3.1.0",
-    "fastclick": "1.0.6",
     "google-caja": "6005.0.0",
     "jquery-file-upload": "9.12.3",
     "jquery-ui": "1.11.4",

lib/gh-koenig/addon/cards/card-hr_dom.js

@@ -3,6 +3,7 @@ export default {
     label: 'Divider',
     icon: '',
     genus: 'ember',
+    launchMode: 'preview',
     buttons: {
     }
 };

lib/gh-koenig/addon/cards/card-html_dom.js

@@ -3,6 +3,7 @@ export default {
     label: 'Embed',
     icon: '',
     genus: 'ember',
+    launchMode: 'preview',
     buttons: {
         edit: true
     }

lib/gh-koenig/addon/cards/card-image_dom.js

@@ -2,5 +2,6 @@ export default {
     name: 'card-image',
     label: 'Image',
     icon: '',
-    genus: 'ember'
+    genus: 'ember',
+    launchMode: 'preview'
 };

lib/gh-koenig/addon/cards/card-markdown_dom.js

@@ -3,5 +3,6 @@ export default {
     label: 'Markdown',
     icon: '',
     genus: 'ember',
+    launchMode: 'edit',
     buttons: {edit: true}
 };

lib/gh-koenig/addon/components/cards/card-html.js

@@ -24,9 +24,6 @@ export default Component.extend({
 
     init() {
         this._super(...arguments);
-        let payload = this.get('payload');
-        this.isEditing = !payload.hasOwnProperty('html');
-        this.isEditing = true;
     },
     actions: {
         selectCard() {