Koenig - (+) card/list selection menu
refs https://github.com/TryGhost/Ghost/issues/9311 - re-implement the (+) card/list selection menu from the old Koenig alpha with improved positioning and event handling - buttons work for the currently available cards - `<hr>` and `markdown`
@ -200,10 +200,172 @@
|
||||
|
||||
/* ⨁ menu ------------------------------------------------------------------ */
|
||||
|
||||
.koenig-plus-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: var(--midgrey) 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.koenig-plus-menu-button svg path {
|
||||
stroke: var(--midgrey);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.koenig-plus-menu-button {
|
||||
right:10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Slash shortcut menu ------------------------------------------------------ */
|
||||
|
||||
/* Menu items --------------------------------------------------------------- */
|
||||
|
||||
/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
|
||||
.koenig-cardmenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 12px 15px;
|
||||
width: 350px;
|
||||
max-height: 460px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08);
|
||||
text-transform: none;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
z-index: 9999999; /* have to compete with codemirror */
|
||||
}
|
||||
|
||||
.koenig-cardmenu-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: var(--midgrey) 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-button svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-button svg path {
|
||||
stroke: var(--midgrey);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.koenig-cardmenu-button {
|
||||
right:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.koenig-cardmenu-search {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: 40px;
|
||||
margin: -12px -15px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-search svg {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
width: 20px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-search-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
font-size: 1.4rem;
|
||||
line-height: 40px;
|
||||
padding: 10px 0 10px 40px;
|
||||
border: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.koenig-cardmenu-icon svg {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
fill: var(--darkgrey);
|
||||
}
|
||||
|
||||
.koenig-cardmenu-label {
|
||||
margin: 7px 0 0 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--midgrey);
|
||||
letter-spacing: 0.2px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
|
||||
cursor: pointer;
|
||||
background: color(var(--lightgrey) l(+3%) s(-10%));
|
||||
}
|
||||
.koenig-cardmenu-card:hover .koenig-cardmenu-label, .koenig-cardmenu-card.selected .koenig-cardmenu-label {
|
||||
color: var(--darkgrey);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.koenig-cardmenu-divider {
|
||||
top: -12px;
|
||||
width: 350px;
|
||||
padding: 5px 0;
|
||||
margin: 12px -15px;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
background: color(var(--lightgrey) l(+3%) s(-10%));
|
||||
}
|
||||
|
||||
|
||||
/* Cards -------------------------------------------------------------------- */
|
||||
|
||||
textarea.koenig-card-markdown {
|
||||
|
@ -0,0 +1,168 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../templates/components/koenig-plus-menu';
|
||||
import {computed} from '@ember/object';
|
||||
import {htmlSafe} from '@ember/string';
|
||||
import {run} from '@ember/runloop';
|
||||
|
||||
// clicking on anything in the menu will change the selection because the click
|
||||
// event propagates, this then closes the menu
|
||||
|
||||
// focusing the search input removes the selection in the editor, again closing
|
||||
// the menu
|
||||
|
||||
// when the menu is open we want to:
|
||||
// - close if clicked outside the menu
|
||||
// - keep the selected range around in case it gets changed
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
|
||||
// public attrs
|
||||
classNames: 'koenig-plus-menu',
|
||||
attributeBindings: ['style'],
|
||||
editor: null,
|
||||
editorRange: null,
|
||||
|
||||
// internal properties
|
||||
showButton: false,
|
||||
showMenu: false,
|
||||
top: 0,
|
||||
|
||||
style: computed('top', function () {
|
||||
return htmlSafe(`top: ${this.get('top')}px`);
|
||||
}),
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (!this.get('showMenu')) {
|
||||
let editorRange = this.get('editorRange');
|
||||
|
||||
if (!editorRange) {
|
||||
this.set('showButton', false);
|
||||
this._hideMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
let {head: {section}} = editorRange;
|
||||
|
||||
// show the button if the cursor is at the beginning of a blank paragraph
|
||||
if (editorRange && editorRange.isCollapsed && section && !section.isListItem && (section.isBlank || section.text === '')) {
|
||||
// find the "top" position by grabbing the current sections
|
||||
// render node and querying it's bounding rect. Setting "top"
|
||||
// positions the button+menu container element .koenig-plus-menu
|
||||
let containerRect = this.element.parentNode.getBoundingClientRect();
|
||||
let selectedElement = editorRange.head.section.renderNode.element;
|
||||
let selectedElementRect = selectedElement.getBoundingClientRect();
|
||||
let top = selectedElementRect.top - containerRect.top;
|
||||
|
||||
this.set('top', top);
|
||||
this.set('showButton', true);
|
||||
this._hideMenu();
|
||||
} else {
|
||||
this.set('showButton', false);
|
||||
this._hideMenu();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
window.removeEventListener('mousedown', this._bodyMousedownHandler);
|
||||
},
|
||||
|
||||
actions: {
|
||||
openMenu() {
|
||||
this._showMenu();
|
||||
},
|
||||
|
||||
closeMenu() {
|
||||
this._hideMenu();
|
||||
},
|
||||
|
||||
replaceWithCardSection(cardName) {
|
||||
let editor = this.get('editor');
|
||||
let range = this._editorRange;
|
||||
let {head: {section}} = range;
|
||||
|
||||
editor.run((postEditor) => {
|
||||
let {builder} = postEditor;
|
||||
let card = builder.createCardSection(cardName);
|
||||
let needsTrailingParagraph = !section.next;
|
||||
|
||||
postEditor.replaceSection(section, card);
|
||||
|
||||
if (needsTrailingParagraph) {
|
||||
let newSection = postEditor.builder.createMarkupSection('p');
|
||||
postEditor.insertSectionAtEnd(newSection);
|
||||
postEditor.setRange(newSection.tailPosition());
|
||||
}
|
||||
|
||||
this._hideMenu();
|
||||
});
|
||||
},
|
||||
|
||||
replaceWithListSection(listType) {
|
||||
let editor = this.get('editor');
|
||||
let range = this._editorRange;
|
||||
let {head: {section}} = range;
|
||||
|
||||
editor.run((postEditor) => {
|
||||
let {builder} = postEditor;
|
||||
let item = builder.createListItem();
|
||||
let listSection = builder.createListSection(listType, [item]);
|
||||
|
||||
postEditor.replaceSection(section, listSection);
|
||||
postEditor.setRange(listSection.headPosition());
|
||||
this._hideMenu();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
_showMenu() {
|
||||
this.set('showMenu', true);
|
||||
|
||||
// focus the search immediately so that you can filter immediately
|
||||
run.schedule('afterRender', this, function () {
|
||||
this._focusSearch();
|
||||
});
|
||||
|
||||
// watch the window for mousedown events so that we can close the menu
|
||||
// when we detect a click outside
|
||||
this._bodyMousedownHandler = run.bind(this, (event) => {
|
||||
this._handleBodyMousedown(event);
|
||||
});
|
||||
window.addEventListener('mousedown', this._bodyMousedownHandler);
|
||||
|
||||
// store a reference to our range because it will change underneath
|
||||
// us as editor focus is lost
|
||||
this._editorRange = this.get('editorRange');
|
||||
},
|
||||
|
||||
_hideMenu() {
|
||||
if (this.get('showMenu')) {
|
||||
// reset our cached editorRange
|
||||
this._editorRange = null;
|
||||
|
||||
// stop watching the body for clicks
|
||||
window.removeEventListener('mousedown', this._bodyMousedownHandler);
|
||||
|
||||
// hide the menu
|
||||
this.set('showMenu', false);
|
||||
}
|
||||
},
|
||||
|
||||
_focusSearch() {
|
||||
let search = this.element.querySelector('input');
|
||||
if (search) {
|
||||
search.focus();
|
||||
}
|
||||
},
|
||||
|
||||
_handleBodyMousedown(event) {
|
||||
if (!event.target.closest(`#${this.elementId}`)) {
|
||||
this._hideMenu();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
@ -21,7 +21,7 @@ export default Component.extend({
|
||||
// public attrs
|
||||
classNames: ['koenig-toolbar'],
|
||||
classNameBindings: ['showToolbar:koenig-toolbar--visible'],
|
||||
selectedRange: null,
|
||||
editorRange: null,
|
||||
|
||||
// internal properties
|
||||
showToolbar: false,
|
||||
|
@ -66,6 +66,12 @@
|
||||
</button>
|
||||
{{/koenig-toolbar}}
|
||||
|
||||
{{!-- (+) icon and pop-up menu --}}
|
||||
{{koenig-plus-menu
|
||||
editorRange=selectedRange
|
||||
editor=editor
|
||||
}}
|
||||
|
||||
{{#each componentCards as |card|}}
|
||||
{{!--
|
||||
TODO: move to the public {{in-element}} API when it's available
|
||||
|
@ -0,0 +1,43 @@
|
||||
{{#if showButton}}
|
||||
<button class="koenig-plus-menu-button" {{action "openMenu"}}>{{inline-svg "plus"}}</button>
|
||||
{{/if}}
|
||||
|
||||
{{#if showMenu}}
|
||||
<div class="koenig-cardmenu">
|
||||
<div class="koenig-cardmenu-search">
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.854 23.146l-9.009-9.009A8.455 8.455 0 0 0 17 8.5C17 3.813 13.187 0 8.5 0S0 3.813 0 8.5 3.813 17 8.5 17a8.45 8.45 0 0 0 5.637-2.156l9.009 9.009a.5.5 0 1 0 .708-.707zM1 8.5C1 4.364 4.364 1 8.5 1S16 4.364 16 8.5 12.636 16 8.5 16 1 12.636 1 8.5z"></path></svg>
|
||||
<input type="text" placeholder="Search for a card..." class="gh-input koenig-cardmenu-search-input">
|
||||
</div>
|
||||
<div class="koenig-cardmenu-divider">
|
||||
Primary
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "closeMenu" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.979 22.5l-7-20.5L2 22.5m2.383-7h9.207M.5 22.5h3.021m10.958 0H17.5m5.001 0L17.903 9.035l-2.36 6.932M16.92 17.5h3.768m.828 5H23.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"></path></svg></div>
|
||||
<div class="koenig-cardmenu-label">Text</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "koenig-card-markdown" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon"><svg viewBox="0 0 43 34" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#000" stroke-width="2" x="2" y="2" width="39" height="30" rx="2"></rect><path fill="#000" d="M19.566 12.613l-.049-.01L14.917 24h-1.279l-4.6-11.387-.048.01.195 5.752v4.121l1.592.274V24H5.669v-1.23l1.592-.274V11.295L5.67 11.02v-1.24h4.053l4.531 11.553h.059l4.521-11.553h4.063v1.24l-1.592.274v11.201l1.592.274V24h-5.107v-1.23l1.591-.274v-4.121z"></path><path d="M36.077 18.501l-5.039 5.039L26 18.5m5.038 5.039v-13.1" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></div>
|
||||
<div class="koenig-cardmenu-label">Markdown</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card">
|
||||
<div class="koenig-cardmenu-icon"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 18.5v-17a.5.5 0 0 0-.5-.5h-17a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h17a.5.5 0 0 0 .5-.5zM18 2v13h-2.161l-2.874-7.186a.5.5 0 0 0-.453-.314.529.529 0 0 0-.467.293l-2.17 4.775-1.99-2.389a.502.502 0 0 0-.813.063L4.217 15H2V2h16zm-3.238 13H5.383l2.183-3.639 2.049 2.46a.5.5 0 0 0 .839-.114l2.016-4.434L14.762 15zM2 18v-2h16v2H2zM22.884 7.242a.5.5 0 0 0-.339-.178l-1.992-.181a.5.5 0 0 0-.09.996l1.494.135-1.272 13.942-14.44-1.317a.502.502 0 0 0-.09.997l14.937 1.363.045.001a.501.501 0 0 0 .498-.455l1.363-14.939a.497.497 0 0 0-.114-.364zM6 8c1.103 0 2-.897 2-2s-.897-2-2-2-2 .897-2 2 .897 2 2 2zm0-3c.551 0 1 .449 1 1s-.449 1-1 1-1-.449-1-1 .449-1 1-1z"></path></svg></div>
|
||||
<div class="koenig-cardmenu-label">Image</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card">
|
||||
<div class="koenig-cardmenu-icon"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.354 3.147a.5.5 0 0 0-.707 0l-8.5 8.5a.5.5 0 0 0 0 .707l8.5 8.5a.498.498 0 0 0 .707 0 .5.5 0 0 0 0-.707L1.207 12l8.147-8.146a.5.5 0 0 0 0-.707zm14.5 8.499l-8.5-8.5a.5.5 0 0 0-.707.707L22.793 12l-8.146 8.146a.5.5 0 0 0 .707.708l8.5-8.5a.502.502 0 0 0 0-.708z"></path></svg></div>
|
||||
<div class="koenig-cardmenu-label">Embed</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "koenig-card-hr" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon"><svg viewBox="0 0 42 4" xmlns="http://www.w3.org/2000/svg"><path d="M1 2h40" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"></path></svg></div>
|
||||
<div class="koenig-cardmenu-label">Divider</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithListSection" "ul" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><circle cx="2.5" cy="4.5" r="2"></circle><path d="M8.569 4.428H23.5"></path><circle cx="2.5" cy="12.5" r="2"></circle><path d="M8.569 12.428H23.5"></path><circle cx="2.5" cy="20.5" r="2"></circle><path d="M8.569 20.427H23.5"></path></g></svg></div>
|
||||
<div class="koenig-cardmenu-label">Bullet list</div>
|
||||
</div>
|
||||
<div class="koenig-cardmenu-card" {{action "replaceWithListSection" "ol" on="click"}}>
|
||||
<div class="koenig-cardmenu-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 4.5h17m-17 8h17m-17 8h17M2 6.5V2.573L.5 4.037M2.569 14.5H.5c1.48-2 2-1.836 2-2.963a.986.986 0 0 0-1-.982.948.948 0 0 0-.965.974M.5 18.5h1.931l-1 1.537c.826 0 1 .481 1 .981s-.174.982-1 .982H.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"></path></svg></div>
|
||||
<div class="koenig-cardmenu-label">Number list</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
@ -0,0 +1 @@
|
||||
export {default} from 'koenig-editor/components/koenig-plus-menu';
|
1
ghost/admin/lib/koenig-editor/public/tools/bold.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.007 11.184c1.787-1.041 2.993-2.972 2.993-5.184 0-3.309-2.691-6-6-6h-9.5c-.276 0-.5.224-.5.5s.224.5.5.5h2.5v22h-2.5c-.276 0-.5.224-.5.5s.224.5.5.5h11c3.584 0 6.5-2.916 6.5-6.5 0-3.064-2.134-5.634-4.993-6.316zm-3.007-10.184c2.757 0 5 2.243 5 5s-2.243 5-5 5h-6v-10h6zm1.5 22h-7.5v-11h7.5c3.032 0 5.5 2.468 5.5 5.5s-2.468 5.5-5.5 5.5z"/></svg>
|
After Width: | Height: | Size: 447 B |
1
ghost/admin/lib/koenig-editor/public/tools/close.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.707 12l11.147-11.146c.195-.195.195-.512 0-.707s-.512-.195-.707 0l-11.147 11.146-11.146-11.147c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l11.146 11.147-11.147 11.146c-.195.195-.195.512 0 .707.098.098.226.147.354.147s.256-.049.354-.146l11.146-11.147 11.146 11.146c.098.098.226.147.354.147s.256-.049.354-.146c.195-.195.195-.512 0-.707l-11.147-11.147z"/></svg>
|
After Width: | Height: | Size: 466 B |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M17.961 6.308l-.108-.162-5.999-5.999-.162-.108-.192-.039h-11c-.276 0-.5.224-.5.5v23c0 .276.224.5.5.5h17c.276 0 .5-.224.5-.5v-17l-.039-.192zm-5.961-4.601l4.293 4.293h-4.293v-4.293zm-11 21.293v-22h10v5.5c0 .276.224.5.5.5h5.5v16h-16zM11.854 10.146c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l3.647 3.646-3.647 3.646c-.195.195-.195.512 0 .707.097.099.225.148.353.148s.256-.049.354-.146l4-4c.195-.195.195-.512 0-.707l-4-4.001zM6.853 10.146c-.195-.195-.512-.195-.707 0l-4 4c-.195.195-.195.512 0 .707l4 4c.098.098.226.147.354.147s.256-.049.353-.146c.195-.195.195-.512 0-.707l-3.646-3.647 3.646-3.646c.196-.196.196-.512 0-.708z"/></g></svg>
|
After Width: | Height: | Size: 740 B |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M6.103 8.411c-.195-.195-.512-.195-.707 0l-2.77 2.77c-.195.195-.195.512 0 .707l2.77 2.769c.098.098.226.147.353.147s.256-.049.353-.147c.195-.195.195-.512 0-.707l-2.416-2.416 2.416-2.416c.197-.195.197-.512.001-.707zM8.857 14.657c.098.098.226.147.354.147.128 0 .256-.049.354-.147l2.769-2.769c.195-.195.195-.512 0-.707l-2.769-2.77c-.195-.195-.512-.195-.707 0-.195.195-.195.512 0 .707l2.416 2.416-2.417 2.416c-.195.196-.195.512 0 .707zM23.855 13.646l-2.5-2.5c-.195-.195-.512-.195-.707 0l-7.502 7.501c-.057.057-.092.125-.116.197l-.011.019-1 3.5c-.05.175-.002.363.127.491.095.094.223.146.354.146l.138-.02 3.5-1 .019-.011c.072-.024.14-.059.197-.116l7.502-7.501c.094-.094.147-.221.147-.354-.001-.132-.054-.259-.148-.352zm-7.855 7.147l-1.793-1.793 4.795-4.794 1.793 1.793-4.795 4.794zm-2.253-.839l1.298 1.298-1.818.52.52-1.818zm7.755-4.662l-1.793-1.793 1.293-1.293 1.793 1.793-1.293 1.293zM1 1h10v4.5c0 .276.224.5.5.5h4.498l-.018 6.032 1 .004.02-6.534v-.001l-.02-.098-.019-.095-.108-.162-4.999-4.999-.162-.108-.192-.039h-11c-.276 0-.5.224-.5.5v21c0 .276.224.5.5.5h10.5v-1h-10v-20zm11 .707l3.293 3.293h-3.293v-3.293z"/></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M17.486 11c-3.584 0-6.5 2.916-6.5 6.5s2.916 6.5 6.5 6.5 6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5zm0 12c-3.032 0-5.5-2.467-5.5-5.5s2.468-5.5 5.5-5.5 5.5 2.467 5.5 5.5-2.467 5.5-5.5 5.5zM20.213 17h-2.227v-2.227c0-.276-.224-.5-.5-.5s-.5.224-.5.5v2.227h-2.227c-.276 0-.5.224-.5.5s.224.5.5.5h2.227v2.228c0 .276.224.5.5.5s.5-.224.5-.5v-2.228h2.227c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM7.647 14.854c.111.111.269.165.425.142.156-.022.292-.117.367-.256l2.498-4.58.463 1.122c.104.256.399.377.652.272.255-.105.377-.397.271-.653l-.861-2.091c-.073-.178-.242-.298-.435-.309-.224-.02-.374.091-.466.26l-2.681 4.913-1.527-1.527c-.113-.114-.275-.166-.434-.14-.158.026-.295.127-.367.27l-2.5 5c-.077.155-.069.339.021.486.093.147.254.237.427.237h5.46c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4.651l1.828-3.656 1.51 1.51zM5 9c1.102 0 2-.897 2-2s-.898-2-2-2-2 .897-2 2 .898 2 2 2zm0-3c.552 0 1 .449 1 1s-.448 1-1 1-1-.449-1-1 .448-1 1-1zM1 1h10v4.5c0 .276.224.5.5.5h4.5v4h1v-4.5l-.039-.192-.108-.162-4.999-4.999-.162-.108-.192-.039h-11c-.276 0-.5.224-.5.5v21c0 .276.224.5.5.5h10.5v-1h-10v-20zm11 .707l3.293 3.293h-3.293v-3.293z"/></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
1
ghost/admin/lib/koenig-editor/public/tools/font-size.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M17.5 22h-1.163l-6.884-20.161c-.069-.203-.26-.339-.474-.339-.214 0-.404.137-.474.339l-6.863 20.161h-1.142c-.276 0-.5.224-.5.5s.224.5.5.5h3.02c.276 0 .5-.224.5-.5s-.223-.5-.5-.5h-.821l2.043-6h8.49l2.049 6h-.801c-.276 0-.5.224-.5.5s.224.5.5.5h3.02c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-12.418-7l3.899-11.45 3.909 11.45h-7.808zM23.5 22h-.641l-4.482-13.126c-.069-.203-.26-.339-.474-.339-.214 0-.404.137-.474.339l-2.36 6.932c-.089.262.051.546.312.635.261.086.545-.051.635-.312l1.888-5.544 2.191 6.415h-3.175c-.276 0-.5.224-.5.5s.224.5.5.5h3.516l1.365 4h-.286c-.276 0-.5.224-.5.5s.224.5.5.5h1.985c.276 0 .5-.224.5-.5s-.224-.5-.5-.5z"/></g></svg>
|
After Width: | Height: | Size: 745 B |
1
ghost/admin/lib/koenig-editor/public/tools/html-five.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M23.879.174c-.095-.11-.233-.174-.379-.174h-23c-.146 0-.284.064-.379.174-.095.11-.137.256-.115.4l3 20c.027.183.153.336.328.398l8.5 3 .166.028.166-.028 8.5-3c.175-.062.301-.214.328-.398l3-20c.022-.144-.02-.29-.115-.4zm-3.829 19.954l-8.05 2.842-8.05-2.841-2.869-19.129h21.838l-2.869 19.128zM7.5 11h8.424l-.873 6.108-3.051.872-3.055-.873-.412-2.684c-.042-.272-.29-.459-.57-.418-.273.042-.46.297-.418.57l.461 3c.029.193.169.351.356.405l3.5 1 .138.02.138-.019 3.5-1c.189-.054.329-.215.357-.41l1-7c.021-.144-.022-.289-.117-.398-.095-.11-.233-.173-.378-.173h-8.576l-.834-5h10.41c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-11c-.148 0-.286.064-.382.177-.095.112-.136.26-.111.405l1 6c.04.241.249.418.493.418z"/></g></svg>
|
After Width: | Height: | Size: 810 B |
1
ghost/admin/lib/koenig-editor/public/tools/italic.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.5 0h-8c-.276 0-.5.224-.5.5s.224.5.5.5h3.077l-14.348 22h-3.729c-.276 0-.5.224-.5.5s.224.5.5.5h8c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3.077l14.348-22h3.729c.276 0 .5-.224.5-.5s-.224-.5-.5-.5z"/></svg>
|
After Width: | Height: | Size: 305 B |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M6.065 5.431c.098.098.226.146.354.146.128 0 .256-.049.353-.146.195-.195.195-.512 0-.707l-2-2c-.195-.195-.512-.195-.707 0-.195.195-.195.512 0 .707l2 2zM9.487 4.5c.276 0 .5-.224.5-.5v-2.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v2.5c0 .276.223.5.5.5zM2.893 9h2.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-2.5c-.276 0-.5.224-.5.5s.224.5.5.5zM10.565 18.724l-3.403 3.401c-1.128 1.128-3.114 1.128-4.242 0l-1.061-1.06c-.564-.564-.874-1.317-.874-2.122 0-.804.31-1.557.874-2.121l3.402-3.403c.195-.195.195-.512 0-.707-.195-.195-.512-.195-.707 0l-3.402 3.403c-.753.753-1.168 1.757-1.168 2.828s.414 2.076 1.168 2.829l1.06 1.06c.753.753 1.758 1.168 2.829 1.168s2.075-.415 2.828-1.168l3.403-3.401c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0zM19.893 8h-4.5c-.276 0-.5.224-.5.5s.224.5.5.5h4.5c1.663 0 3.123 1.438 3.123 3.077v2c0 1.585-1.441 2.923-3.147 2.923h-4.476c-.276 0-.5.224-.5.5s.224.5.5.5h4.476c2.248 0 4.147-1.796 4.147-3.923v-2c0-2.172-1.927-4.077-4.123-4.077z"/></g></svg>
|
After Width: | Height: | Size: 1.0 KiB |
1
ghost/admin/lib/koenig-editor/public/tools/link.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M21.732 4.025l-1.758-1.757c-1.316-1.317-3.633-1.317-4.949 0l-3.965 3.964c-.975.975-.975 2.561.001 3.537l.086.085c.197.195.513.194.707-.002.195-.196.194-.512-.002-.707l-.085-.085c-.585-.585-.585-1.537 0-2.122l3.965-3.964c.939-.94 2.596-.94 3.535 0l1.757 1.757c.974.975.974 2.561 0 3.536l-3.965 3.964c-.585.585-1.536.585-2.121 0l-.086-.086c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l.086.086c.489.489 1.129.732 1.769.732.64 0 1.28-.244 1.768-.731l3.965-3.964c1.363-1.364 1.363-3.584-.001-4.95zM12.854 14.146c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l.086.086c.585.585.585 1.537 0 2.122l-3.965 3.964c-.939.94-2.595.94-3.535 0l-1.758-1.757c-.974-.975-.974-2.561 0-3.536l3.965-3.964c.585-.585 1.537-.584 2.122.001l.086.085c.197.195.513.194.707-.002.195-.196.194-.512-.002-.707l-.085-.085c-.975-.975-2.561-.975-3.535 0l-3.965 3.964c-1.363 1.365-1.363 3.585 0 4.95l1.757 1.757c.659.659 1.538 1.022 2.475 1.022s1.816-.363 2.475-1.022l3.965-3.964c.975-.975.975-2.561 0-3.536l-.086-.085zM7.758 16.243c.098.098.226.146.354.146.128 0 .256-.049.353-.146l7.777-7.778c.195-.195.195-.512 0-.707-.195-.195-.512-.195-.707 0l-7.777 7.778c-.196.195-.196.511 0 .707z"/></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M8.5 5h15c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-15c-.276 0-.5.224-.5.5s.224.5.5.5zM23.5 12h-15c-.276 0-.5.224-.5.5s.224.5.5.5h15c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM23.5 20h-15c-.276 0-.5.224-.5.5s.224.5.5.5h15c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM4.5 2h-4c-.276 0-.5.224-.5.5v4c0 .276.224.5.5.5h4c.276 0 .5-.224.5-.5v-4c0-.276-.224-.5-.5-.5zm-.5 4h-3v-3h3v3zM4.5 10h-4c-.276 0-.5.224-.5.5v4c0 .276.224.5.5.5h4c.276 0 .5-.224.5-.5v-4c0-.276-.224-.5-.5-.5zm-.5 4h-3v-3h3v3zM4.5 18h-4c-.276 0-.5.224-.5.5v4c0 .276.224.5.5.5h4c.276 0 .5-.224.5-.5v-4c0-.276-.224-.5-.5-.5zm-.5 4h-3v-3h3v3z"/></g></svg>
|
After Width: | Height: | Size: 702 B |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M6.5 5h17c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-17c-.276 0-.5.224-.5.5s.224.5.5.5zM23.5 12h-17c-.276 0-.5.224-.5.5s.224.5.5.5h17c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM23.5 20h-17c-.276 0-.5.224-.5.5s.224.5.5.5h17c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM.85 4.394l.65-.634v2.74c0 .276.224.5.5.5s.5-.224.5-.5v-3.927c0-.201-.12-.383-.306-.461-.184-.077-.399-.038-.544.104l-1.5 1.464c-.197.192-.201.509-.008.707.193.196.509.202.708.007zM2.569 14h-1.036c.254-.298.465-.521.64-.703.515-.541.827-.868.827-1.76 0-.817-.673-1.482-1.5-1.482-.821 0-1.465.647-1.465 1.474 0 .276.224.5.5.5s.5-.224.5-.5c0-.279.191-.474.465-.474.28 0 .5.212.5.482 0 .491-.084.58-.551 1.07-.321.336-.761.798-1.352 1.595-.112.152-.129.354-.044.523.086.169.259.275.447.275h2.069c.276 0 .5-.224.5-.5s-.223-.5-.5-.5zM2.24 19.71l.609-.938c.101-.153.108-.35.02-.511-.086-.16-.255-.261-.438-.261h-1.931c-.276 0-.5.224-.5.5s.224.5.5.5h1.009l-.497.765c-.101.153-.108.35-.021.511.087.161.256.262.439.262.428 0 .5.12.5.482 0 .361-.072.481-.5.481h-.93c-.276-.001-.5.223-.5.499s.224.5.5.5h.931c.953 0 1.5-.54 1.5-1.481 0-.629-.244-1.079-.691-1.309z"/></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
1
ghost/admin/lib/koenig-editor/public/tools/paragraph.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.5 0h-17c-3.584 0-6.5 2.916-6.5 6.5s2.916 6.5 6.5 6.5h3.5v10.5c0 .276.224.5.5.5s.5-.224.5-.5v-22.5h6v22.5c0 .276.224.5.5.5s.5-.224.5-.5v-22.5h5.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-13.5 12h-3.5c-3.032 0-5.5-2.468-5.5-5.5s2.468-5.5 5.5-5.5h3.5v11z"/></svg>
|
After Width: | Height: | Size: 364 B |
1
ghost/admin/lib/koenig-editor/public/tools/pullquote.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M11 3c-6.065 0-11 4.935-11 11v1.5c0 3.032 2.468 5.5 5.5 5.5s5.5-2.468 5.5-5.5-2.468-5.5-5.5-5.5c-1.748 0-3.305.823-4.313 2.099.891-4.607 4.95-8.099 9.813-8.099.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-5.5 8c2.481 0 4.5 2.019 4.5 4.5s-2.019 4.5-4.5 4.5-4.5-2.019-4.5-4.5 2.019-4.5 4.5-4.5zM23.5 3c-6.065 0-11 4.935-11 11v1.5c0 3.032 2.468 5.5 5.5 5.5s5.5-2.468 5.5-5.5-2.468-5.5-5.5-5.5c-1.748 0-3.305.823-4.314 2.099.892-4.607 4.951-8.099 9.814-8.099.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-5.5 8c2.481 0 4.5 2.019 4.5 4.5s-2.019 4.5-4.5 4.5-4.5-2.019-4.5-4.5 2.019-4.5 4.5-4.5z"/></g></svg>
|
After Width: | Height: | Size: 689 B |
1
ghost/admin/lib/koenig-editor/public/tools/quote.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M18.5 3c-3.032 0-5.5 2.468-5.5 5.5s2.468 5.5 5.5 5.5c1.748 0 3.305-.823 4.313-2.099-.891 4.607-4.95 8.099-9.813 8.099-.276 0-.5.224-.5.5s.224.5.5.5c6.065 0 11-4.935 11-11v-1.5c0-3.032-2.468-5.5-5.5-5.5zm0 10c-2.481 0-4.5-2.019-4.5-4.5s2.019-4.5 4.5-4.5 4.5 2.019 4.5 4.5-2.019 4.5-4.5 4.5zM6 3c-3.032 0-5.5 2.468-5.5 5.5s2.468 5.5 5.5 5.5c1.748 0 3.305-.823 4.314-2.099-.892 4.607-4.951 8.099-9.814 8.099-.276 0-.5.224-.5.5s.224.5.5.5c6.065 0 11-4.935 11-11v-1.5c0-3.032-2.468-5.5-5.5-5.5zm0 10c-2.481 0-4.5-2.019-4.5-4.5s2.019-4.5 4.5-4.5 4.5 2.019 4.5 4.5-2.019 4.5-4.5 4.5z"/></g></svg>
|
After Width: | Height: | Size: 696 B |
1
ghost/admin/lib/koenig-editor/public/tools/rich-text.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.979 22.5l-7-20.5L2 22.5m2.383-7h9.207M.5 22.5h3.021m10.958 0H17.5m5.001 0L17.903 9.035l-2.36 6.932M16.92 17.5h3.768m.828 5H23.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"></path></svg>
|
After Width: | Height: | Size: 312 B |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.5 13h-10.28c-.823-.61-1.728-1.166-2.623-1.715-2.621-1.607-5.097-3.125-5.097-5.785 0-3.248 3.444-3.5 4.5-3.5 3.988 0 4.5 1.603 4.5 3v1c0 .276.224.5.5.5s.5-.224.5-.5v-1c0-2.654-1.851-4-5.5-4-3.393 0-5.5 1.725-5.5 4.5 0 3.22 2.833 4.957 5.573 6.638.469.288.932.573 1.381.862h-10.954c-.276 0-.5.224-.5.5s.224.5.5.5h12.383c1.523 1.182 2.617 2.546 2.617 4.5 0 3.317-2.841 4.5-5.5 4.5-2.509 0-5.5-.694-5.5-4v-1c0-.276-.224-.5-.5-.5s-.5.224-.5.5v1c0 3.225 2.309 5 6.5 5 3.948 0 6.5-2.159 6.5-5.5 0-1.912-.853-3.326-2.085-4.5h9.085c.276 0 .5-.224.5-.5s-.224-.5-.5-.5z"/></svg>
|
After Width: | Height: | Size: 675 B |
1
ghost/admin/lib/koenig-editor/public/tools/subscript.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M17.885.147c-.195-.195-.512-.195-.707 0l-7.647 7.646-7.646-7.646c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l7.646 7.646-7.646 7.646c-.195.195-.195.512 0 .707.097.098.225.147.353.147.128 0 .256-.049.354-.146l7.646-7.647 7.646 7.647c.098.097.226.146.354.146.128 0 .256-.049.354-.146.195-.195.195-.512 0-.707l-7.647-7.647 7.646-7.647c.196-.195.196-.511.001-.706zM22.484 23h-1.52l1.711-2.443c.09-.132.325-.48.325-1.008 0-.957-.78-1.736-1.74-1.736-.937 0-1.701.73-1.74 1.664-.011.275.203.509.479.521.283.004.509-.204.521-.48.016-.395.342-.705.74-.705.408 0 .74.33.74.736 0 .205-.075.333-.147.441l-2.258 3.224c-.107.153-.12.352-.034.518.086.166.257.27.443.27h2.48c.276 0 .5-.224.5-.5s-.223-.502-.5-.502z"/></g></svg>
|
After Width: | Height: | Size: 819 B |
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M17.854 7.147c-.195-.195-.512-.195-.707 0l-7.647 7.646-7.646-7.646c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l7.646 7.646-7.647 7.646c-.195.195-.195.512 0 .707.098.098.226.147.354.147s.256-.049.354-.146l7.646-7.647 7.646 7.646c.098.098.226.147.354.147s.256-.049.354-.146c.195-.195.195-.512 0-.707l-7.647-7.647 7.647-7.647c.195-.195.195-.511 0-.706zM22.494 6.053h-1.521l1.709-2.441c.141-.204.326-.53.326-1.01 0-.957-.78-1.736-1.74-1.736-.936 0-1.701.731-1.74 1.665-.011.275.203.509.479.521.283-.003.509-.204.521-.48.016-.395.342-.706.74-.706.408 0 .74.33.74.736 0 .207-.078.339-.147.44l-2.258 3.224c-.107.153-.12.353-.034.518.086.166.257.27.443.27h2.482c.276 0 .5-.224.5-.5 0-.278-.223-.501-.5-.501z"/></g></svg>
|
After Width: | Height: | Size: 820 B |
1
ghost/admin/lib/koenig-editor/public/tools/underline.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M23.5 23h-23c-.276 0-.5.224-.5.5s.224.5.5.5h23c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zM1.5 1h2.5v11c0 4.411 3.589 8 8 8s8-3.589 8-8v-11h2.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-6c-.276 0-.5.224-.5.5s.224.5.5.5h2.5v11c0 3.859-3.141 7-7 7s-7-3.141-7-7v-11h2.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-6c-.276 0-.5.224-.5.5s.224.5.5.5z"/></g></svg>
|
After Width: | Height: | Size: 442 B |
@ -0,0 +1,24 @@
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import {describe, it} from 'mocha';
|
||||
import {expect} from 'chai';
|
||||
import {setupComponentTest} from 'ember-mocha';
|
||||
|
||||
describe('Integration: Component: koenig-plus-menu', function () {
|
||||
setupComponentTest('koenig-plus-menu', {
|
||||
integration: true
|
||||
});
|
||||
|
||||
it('renders', function () {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.on('myAction', function(val) { ... });
|
||||
// Template block usage:
|
||||
// this.render(hbs`
|
||||
// {{#koenig-plus-menu}}
|
||||
// template content
|
||||
// {{/koenig-plus-menu}}
|
||||
// `);
|
||||
|
||||
this.render(hbs`{{koenig-plus-menu}}`);
|
||||
expect(this.$()).to.have.length(1);
|
||||
});
|
||||
});
|