From cdee31b2fdc7008a86df9a88f565f87a2234e6a5 Mon Sep 17 00:00:00 2001
From: Zimo <peter.zimon@gmail.com>
Date: Wed, 16 May 2018 17:24:41 +0200
Subject: [PATCH] Koenig - Added Code Block card to (+) and / menus

refs https://github.com/TryGhost/Ghost/issues/9623
- added code block card to (+) and / menus
- changed card row length to 3
- swapped html icon for code icon and added new html icon
---
 lib/koenig-editor/addon/components/koenig-slash-menu.js  | 9 ++++++++-
 .../addon/templates/components/koenig-plus-menu.hbs      | 4 ++++
 lib/koenig-editor/public/icons/koenig/code-block.svg     | 6 ++++++
 lib/koenig-editor/public/icons/koenig/html.svg           | 2 +-
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 lib/koenig-editor/public/icons/koenig/code-block.svg

diff --git a/lib/koenig-editor/addon/components/koenig-slash-menu.js b/lib/koenig-editor/addon/components/koenig-slash-menu.js
index 4405857cc8..154b9d62e5 100644
--- a/lib/koenig-editor/addon/components/koenig-slash-menu.js
+++ b/lib/koenig-editor/addon/components/koenig-slash-menu.js
@@ -6,7 +6,7 @@ import {htmlSafe} from '@ember/string';
 import {run} from '@ember/runloop';
 import {set} from '@ember/object';
 
-const ROW_LENGTH = 4;
+const ROW_LENGTH = 3;
 
 const ITEM_MAP = [
     {
@@ -30,6 +30,13 @@ const ITEM_MAP = [
         type: 'card',
         replaceArg: 'html'
     },
+    {
+        label: 'Code Block',
+        icon: 'koenig/code-block',
+        matches: ['embed', 'code'],
+        type: 'card',
+        replaceArg: 'code'
+    },
     {
         label: 'Divider',
         icon: 'koenig/divider',
diff --git a/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs b/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
index 50e56bee3c..59c92af3cd 100644
--- a/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
+++ b/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
@@ -23,6 +23,10 @@
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/html" class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">HTML</div>
         </div>
+        <div class="{{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "code" on="click"}} data-kg="cardmenu-card">
+            <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/code-block" class="w8 h8 stroke-midgrey"}}</div>
+            <div class="{{kg-style "cardmenu-label"}}">Code Block</div>
+        </div>
         <div class="{{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "hr" on="click"}} data-kg="cardmenu-card">
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/divider" class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">Divider</div>
diff --git a/lib/koenig-editor/public/icons/koenig/code-block.svg b/lib/koenig-editor/public/icons/koenig/code-block.svg
new file mode 100644
index 0000000000..0496a8eb3e
--- /dev/null
+++ b/lib/koenig-editor/public/icons/koenig/code-block.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M2 2h19l9 9v19H2z"/>
+        <path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M11 21l-3-3 3-3M21 21l3-3-3-3M14 21l4-6M21.041 2.137v8.913h8.904"/>
+    </g>
+</svg>
diff --git a/lib/koenig-editor/public/icons/koenig/html.svg b/lib/koenig-editor/public/icons/koenig/html.svg
index 0496a8eb3e..e3ef10ff33 100644
--- a/lib/koenig-editor/public/icons/koenig/html.svg
+++ b/lib/koenig-editor/public/icons/koenig/html.svg
@@ -1,6 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd">
         <path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M2 2h19l9 9v19H2z"/>
-        <path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M11 21l-3-3 3-3M21 21l3-3-3-3M14 21l4-6M21.041 2.137v8.913h8.904"/>
+        <path stroke="#738A94" stroke-linecap="round" stroke-linejoin="round" d="M21.041 2.137v8.913h8.904M6 19.667V15m3.188 4.667V15M6 17.333h3.188m11.303 2.334V15l-2.123 3.333L16.245 15v4.667m10.456 0h-3.188V15m-10.766 4.667V15m-1.596 0h3.188"/>
     </g>
 </svg>