👯 ♥️ ♣️ ♦️ ♠️ New editor card menu (#580)

refs TryGhost/Ghost#8106, TryGhost/Ghost#7429, requires TryGhost/Ghost#8137

-Adds new "card" menus
  - Navigation with keyboard in both axis.
  - Search with keyboard in both menus.
  - Adds a "+" Menu for cards
  - Adds a "/" Menu for cards
    - if the block has content and it becomes a markdown or HTML Embed card then the content is included into the card.
    - Image and HR cards appear below the current section
- Adds new toolbar with both inline and block styling.
- Adds a new 'divider' card.

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

@@ -1,6 +1,5 @@
 @import "koenig-toolbar.css";
 @import "koenig-menu.css";
-/* TODO: move/rename to match koenig naming */
 @import "../ghost-editor/cardmenu.css";
 
 .editor-holder {
@@ -39,13 +38,16 @@
     border-right: 66px solid #5ba4e5;
 }
 
+.__mobiledoc-editor div {
+
+}
+
 .__mobiledoc-card {
-    display: block;
+    display: inline-block; /* required for cursor movement around card */
     border: 1px solid;
-}
-.__mobiledoc-card .koenig-card {
-    position: relative;
-}
+    width: calc(100% - 20px); /* required for obvious cursor placmenet around card */
+    margin:5px;
+ }
 
 .__mobiledoc-card .card-handle {
     position: absolute;

app/styles/addons/ghost-editor/cardmenu.css

@@ -14,7 +14,24 @@
     text-transform: none;
     font-size: 1.4rem;
     font-weight: normal;
+    position: absolute;
+    z-index: 9999999; /* have to compete with codemirror */
+}
+
+#gh-cardmenu-button {
+    position:absolute;
+    width: 40px;
+    height: 40px;
+    background-color:pink;
+    font-size:40px;
+    line-height: 40px;
+    color: powderblue;
+    font-family: "Comic Sans MS", cursive, sans-serif;
 }
+#gh-cardmenu-button:hover {
+    background-color:red;
+    color: yellow;
+} 
 
 .gh-cardmenu-search {
     position: relative;
@@ -74,11 +91,11 @@
     font-weight: 200;
 }
 
-.gh-cardmenu-card:hover {
+.gh-cardmenu-card:hover, .gh-cardmenu-card.selected {
     cursor: pointer;
     background: color(var(--lightgrey) l(+3%) s(-10%));
 }
-.gh-cardmenu-card:hover .gh-cardmenu-label {
+.gh-cardmenu-card:hover .gh-cardmenu-label, .gh-cardmenu-card.selected .gh-cardmenu-label {
     color: var(--darkgrey);
     font-weight: 300;
 }

app/templates/editor/edit.hbs

@@ -51,6 +51,7 @@
                 apiRoot=apiRoot
                 assetPath=assetPath
                 tabindex=2
+                containerSelector='.gh-editor-container'
             }}
         </div>
     </div>

lib/gh-koenig/addon/cards/hr-card_dom.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'hr-card',
+    label: 'HR Card',
+    icon: '',
+    genus: 'ember',
+    buttons: {
+    }
+};

lib/gh-koenig/addon/cards/index.js

@@ -1,10 +1,11 @@
 import htmlCard from 'gh-koenig/cards/html-card_dom';
 import imageCard from 'gh-koenig/cards/image-card_dom';
 import markdownCard from 'gh-koenig/cards/markdown-card_dom';
+import hrCard from 'gh-koenig/cards/hr-card_dom';
 
 let cards = [];
 
-[htmlCard, imageCard, markdownCard].forEach((_card) => {
+[htmlCard, imageCard, markdownCard, hrCard].forEach((_card) => {
     _card.type = 'dom';
     cards.push(_card);
 });

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

@@ -0,0 +1,5 @@
+import Component from 'ember-component';
+import layout from '../../templates/components/hr-card';
+export default Component.extend({
+    layout
+});

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

@@ -26,6 +26,7 @@ export default Component.extend({
         this._super(...arguments);
         let payload = this.get('payload');
         this.isEditing = !payload.hasOwnProperty('html');
+        this.isEditing = true;
     },
 
     didRender() {

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

@@ -1,28 +1,23 @@
 import Component from 'ember-component';
 import layout from '../templates/components/koenig-menu-item';
+import Range from 'mobiledoc-kit/utils/cursor/range';
 
 export default Component.extend({
     layout,
-    tagName: 'li',
-
+    tagName: 'div',
+    classNames: ['gh-cardmenu-card'],
+    classNameBindings: ['selected'],
     init() {
         this._super(...arguments);
+        this.set('selected', this.get('tool').selected);
     },
+    click: function () { // eslint-disable-line
+        let {section} = this.get('range');
+        let editor = this.get('editor');
 
-    actions: {
-        select() {
-            let {section/* , startOffset, endOffset */} = this.get('range');
-            window.getSelection().removeAllRanges();
-
-            let range = document.createRange();
-
-            range.setStart(section.renderNode._element, 0); // startOffset-1); // todo
-            range.setEnd(section.renderNode._element, 0); // endOffset-1);
-
-            let selection = window.getSelection();
-            selection.addRange(range);
+        editor.range = Range.create(section, 0, section, 0);
 
-            this.get('tool').onClick(this.get('editor'));
-        }
+        this.get('tool').onClick(editor, section);
+        this.sendAction('clicked');
     }
 });