👷🏻‍♀️🚧👷 Ghost-Editor integration.

Integrated Ghost-Editor as an in-repo addon.
Moved CSS to /app/styles/addons/ghost-editor/

Still a WIP.

app/app.js

@@ -1,3 +1,4 @@
+//noinspection JSAnnotator
 import Ember from 'ember';
 import Application from 'ember-application';
 import Resolver from './resolver';

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

@@ -0,0 +1,150 @@
+@import "ghost-toolbar.css";
+@import "ghost-toolbar-blockitem.css";
+@import "slash-menu.css";
+
+.editor-holder {
+    height: 100%;
+}
+.ghost-editor {
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+}
+
+.__mobiledoc-editor {
+    width: 100%;
+    min-height: 100%;
+    outline: none;
+    font-family: var(--font-family);
+    font-size: 1.7rem;
+    resize: none;
+}
+
+.dropper-bottom {
+    border-bottom: 66px solid #5ba4e5;
+}
+
+.dropper-top {
+    border-top: 66px solid #5ba4e5;
+}
+
+.dropper-left {
+    border-left: 66px solid #5ba4e5;
+}
+
+.dropper-right {
+    border-right: 66px solid #5ba4e5;
+}
+
+.__mobiledoc-card {
+    border: 1px solid #5ba4e5;
+    min-height: 100px;
+    display: inline-block;
+    width:calc(100% - 4px);
+    margin:2px;
+    padding:0;
+}
+.__mobiledoc-card .ghost-card {
+    position: relative;
+}
+
+.__mobiledoc-card .card-handle {
+    position: absolute;
+    right:0px;
+    top:0px;
+    margin-top:-25px;
+    height:20px;
+    display:none;
+}
+
+.__mobiledoc-card:hover .card-handle {
+    display:block;
+}
+
+.__mobiledoc-card .card-handle label {
+    font-size:10px;
+}
+
+
+.__mobiledoc-card .card-handle button {
+    background-color: var(--lightgrey);
+    border:1px solid var(--grey);
+    font-size:10px;
+    min-width: 80px;
+}
+
+.__mobiledoc-card textarea {
+    min-height:333px;
+    max-width:900px;
+    outline:none;
+    border:none;
+    resize: none;
+}
+
+.card-handle button:hover {
+    background-color: #718087;
+    color: #fff;
+}
+
+.card-handle button.confirm {
+    animation-duration: 1s;
+    animation-name: rotate;
+    background-color: red;
+    color: #e9e8dd;
+}
+
+.card-handle button.move {
+    background-image: url('http://localhost:4200/assets/move.png');
+    background-color: #9fbb58;
+    margin-left: -10px;
+    margin-right: 20px;
+
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+}
+
+
+
+textarea.ed_code {
+    width:100%;
+    height:100%;
+    border:none;
+}
+
+
+
+/**
+ * Tooltip
+ */
+
+
+@keyframes tooltip-fadein {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+.__mobiledoc-tooltip {
+    white-space: nowrap;
+    position: absolute;
+    background-color: #5ba4e5;
+    border-radius: 3px;
+    padding:5px 10px 5px 10px;
+    color: #FFF;
+    -webkit-animation: tooltip-fadein 0.333s;
+    animation: tooltip-fadein 0.333s;
+}
+.__mobiledoc-tooltip a {
+    color: #FFF;
+}
+.__mobiledoc-tooltip:before {
+    content: '';
+    position: absolute;
+
+    left: 50%;
+    top: -9px;
+
+    margin-left: -10px;
+
+    border-bottom: 10px solid #5ba4e5;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+}

app/styles/addons/ghost-editor/ghost-toolbar-blockitem.css

@@ -0,0 +1,122 @@
+
+
+.toolbar-block {
+    position: absolute;
+    margin: 0;
+    background-color: #fff;
+    border:1px var(--lightgrey) solid;
+    transition: margin-left 0.1s;
+}
+
+
+.toolbar-block ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.toolbar-block ul li {
+    margin:0;
+    padding: 0;
+    width:0;
+    opacity:0;
+    overflow:hidden;
+    transition: width 0.3s;
+    float:left;
+}
+
+.toolbar-block ul li:first-child {
+    display:block;
+    width:32px;
+    opacity:0.3;
+}
+
+.toolbar-block:hover ul li {
+    display:block;
+    width:32px;
+    opacity:0.3;
+    animation-delay: 2s;
+    transition: width 0.3s;
+}
+
+.toolbar-block ul li.selected {
+    display:block;
+    opacity:0.1;
+    width:32px;
+}
+
+
+.toolbar-block:hover ul li.selected {
+    opacity:1;
+}
+
+
+.toolbar-block ul li button {
+    border-radius: 2px;
+    font-family: var(--font-family);
+    font-size: 10px;
+    line-height: 15px;
+    text-transform: uppercase;
+    padding:0;
+    margin:0;
+    height:32px;
+    min-width:32px;
+    color: var(--darkgrey);
+    background-color: #fff;
+    border: none;
+    transition: 0.3s;
+}
+
+.toolbar-block ul li.primary button {
+    opacity:1;
+}
+
+.toolbar-block ul li:hover {
+    opacity:1;
+}
+
+.toolbar-block ul li:hover button, .toolbar-block ul li.selected button {
+    background-color: var(--lightgrey);
+    color: var(--darkgrey);
+    transition: 0.3s;
+}
+
+.toolbar-block ul li button img {
+    width:20px;
+    height:20px;
+}
+
+/**flag **/
+.toolbar-block ul li button label {
+    display:none;
+}
+
+.toolbar-block ul li:hover button:hover label {
+    display:block;
+    position:absolute;
+    margin-top:20px;
+    transform:translateX(calc(-50% + 16px));
+
+    white-space: nowrap;
+    background-color: #5ba4e5;
+    border-radius: 3px;
+    padding:5px 10px 5px 10px;
+    color: #FFF;
+    -webkit-animation: fade-in 0.333s;
+    animation: fade-in 0.333s;
+
+}
+.toolbar-block ul li button:hover label:before {
+    content: '';
+    position: absolute;
+
+    left: 50%;
+    top: -9px;
+
+    margin-left: -10px;
+
+    border-bottom: 10px solid #5ba4e5;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+}
+

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

@@ -0,0 +1,107 @@
+/* Variables
+/* ---------------------------------------------------------- */
+
+:root {
+
+    --button-size-selection: 48px;
+    --button-size-newline:32px;
+}
+
+
+.toolbar {
+    position: absolute;
+    margin: 0;
+    padding:5px;
+    -webkit-border-radius:var(--border-radius);
+    -moz-border-radius:var(--border-radius);
+    border-radius:var(--border-radius);
+    background-color: var(--lightgrey);
+    border:1px var(--lightgrey) solid;
+}
+
+
+.toolbar.is-visible {
+ /*   animation: toolbar-fadein 111ms;*/
+}
+
+.toolbar input {
+    height: 64px;
+    width: 180px;
+    outline: none;
+}
+
+.toolbar ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.toolbar ul li {
+    float: left;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    display: block;
+    width: var(--button-size-selection);
+}
+
+
+.toolbar ul li button {
+    border-radius: 2px;
+    font-family: var(--font-family);
+    font-size: 10px;
+    line-height: 15px;
+    text-transform: uppercase;
+    padding:0;
+    margin:0;
+    height:var(--button-size-selection);
+    min-width:var(--button-size-selection);
+    color: var(--darkgrey);
+    background-color: var(--lightgrey);
+    border: none;
+}
+
+.toolbar ul li button label {
+    display:none;
+}
+
+.toolbar ul li:hover button, .toolbar ul li.selected button {
+    background-color: var(--darkgrey);
+    color: var(--darkgrey);
+    transition: 300ms;
+}
+
+.toolbar ul li button img {
+    width:20px;
+    height:20px;
+}
+
+
+
+    /* tick */
+
+.toolbar:after {
+    content: "";
+    border-top: 13px solid var(--lightgrey);
+    border-top-color: inherit;
+    border-left: 13px solid transparent;
+    border-right: 13px solid transparent;
+    left: 50px;
+    left: calc(50% - 13px);
+    top:100%;
+    position:absolute;
+}
+
+
+
+@keyframes toolbar-fadein {
+    from {
+        opacity: 0;
+        /*transform: translateY(-13px);*/
+    }
+    to   {
+        opacity: 1;
+        /*transform: translateY(0px);*/
+    }
+}