Revert "Multi line title (#575)"

This reverts commit b5a7fef.

app/styles/app.css

@@ -31,7 +31,7 @@
 @import "components/selectize.css";
 @import "components/power-select.css";
 @import "components/publishmenu.css";
-@import "components/title.css";
+
 
 /* Layouts: Groups of Components
 /* ---------------------------------------------------------- */

app/styles/layouts/main.css

@@ -489,6 +489,7 @@ body > .ember-view:not(.default-liquid-destination) {
     margin: 0;
     padding: 0;
     text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: 2rem;
     line-height: 1.2em;
     font-weight: 400;

app/templates/editor/edit.hbs

@@ -34,29 +34,8 @@
     </header>
     <div class="gh-editor-container">
         <div class="gh-editor-inner">
-
             {{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}}
-                {{gh-title 
-                    value=(readonly model.titleScratch)
-                    onChange=(action (mut model.titleScratch)) 
-                    tabindex="1" 
-                    shouldFocus=shouldFocusTitle 
-                    focus-out="updateTitle" 
-                    update=(action (perform updateTitle)) 
-                    keyDown=(action "titleKeyDown")
-                    id='gh-title'
-                }}
-                <!--{ {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-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">
@@ -72,7 +51,6 @@
                 apiRoot=apiRoot
                 assetPath=assetPath
                 tabindex=2
-                titleQuery='#gh-title div'
                 containerSelector='.gh-editor-container'
             }}
         </div>

lib/gh-koenig/addon/components/gh-koenig.js

@@ -7,7 +7,6 @@ import {MOBILEDOC_VERSION} from 'mobiledoc-kit/renderers/mobiledoc';
 import createCardFactory from '../lib/card-factory';
 import defaultCommands from '../options/default-commands';
 import editorCards  from '../cards/index';
-import $ from 'jquery';
 // import { VALID_MARKUP_SECTION_TAGNAMES } from 'mobiledoc-kit/models/markup-section'; //the block elements supported by mobile-doc
 
 export const BLANK_DOC = {
@@ -118,30 +117,6 @@ export default Component.extend({
 
         this.editor.cursorDidChange(() => this.cursorMoved());
 
-        // hack to track key up to focus back on the title when the up key is pressed
-        this.editor.element.addEventListener('keydown', (event) => {
-            if (event.keyCode === 38) {
-                let range = window.getSelection().getRangeAt(0); // get the actual range within the DOM.
-                let cursorPositionOnScreen = range.getBoundingClientRect();
-                let topOfEditor = this.editor.element.getBoundingClientRect().top;
-                if (cursorPositionOnScreen.top < topOfEditor + 33) {
-                    let $title = $(this.titleQuery);
-
-                    // let offset = findCursorPositionFromPixel($title[0].firstChild,  cursorPositionOnScreen.left);
-
-                    // let newRange = document.createRange();
-                    // newRange.collapse(true);
-                    // newRange.setStart($title[0].firstChild, offset);
-                    // newRange.setEnd($title[0].firstChild, offset);
-                    // updateCursor(newRange);
-
-                    $title[0].focus();
-
-                    return false;
-                }
-            }
-        });
-
     },
 
     // drag and drop images onto the editor
@@ -174,33 +149,3 @@ export default Component.extend({
     }
 
 });
-
-// // code for moving the cursor into the correct position of the title: (is buggy)
-
-// // find the cursor position based on a pixel offset of an element.
-// // used to move the cursor vertically into the title.
-// function findCursorPositionFromPixel(el, horizontal_offset) {
-//     let len = el.textContent.length;
-//     let range = document.createRange();
-//     for(let i = len -1; i > -1; i--) {
-//         range.setStart(el, i);
-//         range.setEnd(el, i + 1);
-//         let rect = range.getBoundingClientRect();
-//         if (rect.top === rect.bottom) {
-//             continue;
-//         }
-//         if(rect.left <= horizontal_offset && rect.right >= horizontal_offset) {
-//             return  i + (horizontal_offset >= (rect.left + rect.right) / 2 ? 1 : 0);    // if the horizontal_offset is on the left hand side of the
-//                                                                                         // character then return `i`, if it's on the right return `i + 1`
-//         }
-//     }
-
-//     return el.length;
-// }
-
-// // update the cursor position.
-// function updateCursor(range) {
-//     let selection = window.getSelection();
-//      selection.removeAllRanges();
-//     selection.addRange(range);
-// }

tests/acceptance/editor-test.js

@@ -12,7 +12,7 @@ import {invalidateSession, authenticateSession} from 'ghost-admin/tests/helpers/
 import Mirage from 'ember-cli-mirage';
 import sinon from 'sinon';
 import testSelector from 'ember-test-selectors';
-import {titleRendered} from '../helpers/editor-helpers';
+
 describe('Acceptance: Editor', function() {
     let application;
 
@@ -25,7 +25,7 @@ describe('Acceptance: Editor', function() {
     });
 
     it('redirects to signin when not authenticated', function () {
-        server.create('user'); // necesary for post-author association
+        server.create('user'); // necessray for post-author association
         server.create('post');
 
         invalidateSession(application);
@@ -397,18 +397,10 @@ describe('Acceptance: Editor', function() {
                     .to.equal('/editor/1');
             });
 
-            andThen(() => {
-                titleRendered();
-            });
-
-            andThen(() => {
-                let title = find('#gh-title div');
-                title.html(Array(160).join('a'));
-            });
-
-            andThen(() => {
-                click('.gh-btn.gh-btn-sm.js-publish-button');
-            });
+            // Test title validation
+            fillIn('input[id="entry-title"]', Array(160).join('a'));
+            triggerEvent('input[id="entry-title"]', 'blur');
+            click('.gh-btn.gh-btn-sm.js-publish-button');
 
             andThen(() => {
                 expect(

tests/helpers/editor-helpers.js

@@ -15,21 +15,6 @@ export function editorRendered() {
     });
 }
 
-// polls the title until it's started.
-export function titleRendered() {
-    return Ember.Test.promise(function (resolve) { // eslint-disable-line
-        function checkTitle() {
-            let title = $('#gh-title div');
-            if (title[0]) {
-                return resolve();
-            } else {
-                window.requestAnimationFrame(checkTitle);
-            }
-        }
-        checkTitle();
-    });
-}
-
 // simulates text inputs into the editor, unfortunately the helper Ember helper functions
 // don't work on content editable so we have to manipuate the text input event manager
 // in mobiledoc-kit directly. This is a private API.