From 3f1e5b9fa927319fe549928d4d8ad805967e4a4b Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 15 Feb 2018 15:57:44 +0000
Subject: [PATCH] Koenig - Update {{koenig-card-html}} to use new
 {{koenig-card}} container

refs https://github.com/TryGhost/Ghost/issues/9311
- wraps embed card in same container as the markdown card to handle mouse selection/edit toggles etc
- add render mode to embed card
- autofocus CodeMirror editor when switching to edit mode
- fix incorrect pointer on cards
---
 ghost/admin/app/components/gh-cm-editor.js    |  1 +
 ghost/admin/app/styles/components/koenig.css  |  2 +-
 .../addon/components/koenig-card-html.js      |  6 +++++-
 .../templates/components/koenig-card-html.hbs | 19 ++++++++++++++++---
 .../components/koenig-card-markdown.hbs       |  1 -
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ghost/admin/app/components/gh-cm-editor.js b/ghost/admin/app/components/gh-cm-editor.js
index 921bd8a652..5155b4f277 100644
--- a/ghost/admin/app/components/gh-cm-editor.js
+++ b/ghost/admin/app/components/gh-cm-editor.js
@@ -21,6 +21,7 @@ const CmEditorComponent = Component.extend(InvokeActionMixin, {
     indentUnit: 4,
     mode: 'htmlmixed',
     theme: 'xq-light',
+    autofocus: false,
 
     _editor: null, // reference to CodeMirror editor
     _value: boundOneWay('value'), // make sure a value exists
diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index 74f1773a20..75aa102fbb 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -384,7 +384,7 @@
     width: calc(100% + 60px);
     margin-left: -50px;
     max-width: none;
-    cursor: pointer;
+    cursor: default;
     caret-color: auto; /* override hidden cursors around cards */
 }
 
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js
index a4b52e5fa3..f0789a47d4 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js
@@ -3,10 +3,14 @@ import layout from '../templates/components/koenig-card-html';
 import {set} from '@ember/object';
 
 export default Component.extend({
-    tagName: '',
     layout,
 
+    // attrs
     payload: null,
+    isSelected: false,
+    isEditing: false,
+
+    // closure actions
     saveCard: null,
 
     init() {
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
index f218b5f097..bff7bd0afa 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
@@ -1,4 +1,17 @@
-{{gh-cm-editor payload.html
-    class="koenig-card-html--editor"
-    update=(action "updateHtml")
+{{#koenig-card
+    icon="koenig/embed"
+    isSelected=isSelected
+    isEditing=isEditing
+    selectCard=(action selectCard)
+    editCard=(action editCard)
 }}
+    {{#if isEditing}}
+        {{gh-cm-editor payload.html
+            class="koenig-card-html--editor"
+            autofocus=true
+            update=(action "updateHtml")
+        }}
+    {{else}}
+        {{{payload.html}}}
+    {{/if}}
+{{/koenig-card}}
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
index 4c7c8cea6e..df60439927 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
@@ -1,6 +1,5 @@
 {{#koenig-card
     icon="koenig/markdown"
-    toolbar=toolbar
     isSelected=isSelected
     isEditing=isEditing
     onEnterEdit=(action "enterEditMode")