mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
3d341e2dd6
refs https://github.com/TryGhost/Ghost/issues/9311 Koenig is being fully rebooted, first port of call is to focus on getting the rich-text only aspect of mobiledoc-kit working with our popup toolbar. - renames old koenig implementation (used for reference, will eventually be deleted) - new `{{koenig-editor}}` mobiledoc-kit component implementation based on ember-mobiledoc-editor - markdown text expansions - new `{{gh-koenig-edtor}}` that wraps our title+editor and handles keyboard navigation between the two - clicks below content will focus the editor - new `{{koenig-toolbar}}` component for the popup formatting toolbar with improved behaviour and simplified code
309 lines
11 KiB
JavaScript
309 lines
11 KiB
JavaScript
import {set} from '@ember/object';
|
|
|
|
export default function (editor, toolbar) {
|
|
return [
|
|
{
|
|
name: 'H1',
|
|
class: 'h1',
|
|
icon: '',
|
|
label: 'Heading One',
|
|
visibility: 'primary',
|
|
selected: false,
|
|
type: 'block',
|
|
toolbar: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('h1');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'h1').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'H2',
|
|
class: 'h2',
|
|
label: 'Heading Two',
|
|
icon: '',
|
|
selected: false,
|
|
type: 'block',
|
|
visibility: 'primary',
|
|
toolbar: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('h2');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'h2').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'H3',
|
|
label: 'Heading Three',
|
|
icon: '',
|
|
selected: false,
|
|
type: 'block',
|
|
visibility: 'primary',
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('h3');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'h3').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'p',
|
|
label: 'Text',
|
|
icon: 'text.svg',
|
|
selected: false,
|
|
type: 'block',
|
|
order: 0,
|
|
cardMenu: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('p');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'p').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: '“',
|
|
label: 'Quote',
|
|
class: 'quote',
|
|
icon: 'quote.svg',
|
|
selected: false,
|
|
type: 'block',
|
|
toolbar: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('blockquote');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'blockquote').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'ul',
|
|
label: 'Bullet List',
|
|
icon: 'list-bullet.svg',
|
|
selected: false,
|
|
type: 'block',
|
|
order: 5,
|
|
cardMenu: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('ul');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'ul').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'ol',
|
|
label: 'Number List',
|
|
icon: 'list-number.svg',
|
|
selected: false,
|
|
type: 'block',
|
|
order: 6,
|
|
cardMenu: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleSection('ol');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'ol').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'B',
|
|
label: 'Bold',
|
|
class: 'bold',
|
|
icon: 'bold.svg',
|
|
selected: false,
|
|
type: 'markup',
|
|
visibility: 'primary',
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleMarkup('strong');
|
|
});
|
|
},
|
|
checkElements(/* elements */) {
|
|
set(this, 'selected', true);
|
|
// set(this, 'selected', elements.filter((element) => element.tagName === 'strong').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'I',
|
|
label: 'Italic',
|
|
class: 'italic',
|
|
icon: 'italic.svg',
|
|
selected: false,
|
|
type: 'markup',
|
|
visibility: 'primary',
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleMarkup('em');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'em').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'S',
|
|
label: 'Strike',
|
|
class: 'strike',
|
|
icon: 'strikethrough.svg',
|
|
selected: false,
|
|
type: 'markup',
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
postEditor.toggleMarkup('s');
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 's').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M14.5 12.5l.086.086c.781.781 2.047.781 2.828 0l3.965-3.964c1.166-1.167 1.166-3.075 0-4.243l-1.758-1.757c-1.166-1.167-3.076-1.167-4.242 0l-3.965 3.964c-.781.781-.781 2.047 0 2.829l.086.085M9.5 11.5l-.086-.085c-.781-.781-2.047-.781-2.828 0l-3.965 3.964c-1.166 1.167-1.166 3.076 0 4.243l1.758 1.757c1.166 1.167 3.076 1.167 4.242 0l3.965-3.964c.781-.781.781-2.047 0-2.829l-.086-.086M8.111 15.889l7.778-7.778"/></g></svg>',
|
|
label: 'Link',
|
|
class: 'link',
|
|
icon: 'link.svg',
|
|
selected: false,
|
|
type: 'markup',
|
|
visibility: 'primary',
|
|
onClick: (editor) => {
|
|
toolbar.send('doLink', editor.range);
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'a').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'img',
|
|
label: 'Image',
|
|
selected: false,
|
|
type: 'card',
|
|
icon: 'photos.svg',
|
|
visibility: 'primary',
|
|
order: 2,
|
|
cardMenu: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor, section) => {
|
|
let thisSection = section || editor.range.headSection;
|
|
let card = postEditor.builder.createCardSection('card-image', {pos: 'top', newlyCreated: true});
|
|
if (thisSection.text.length) {
|
|
postEditor.insertSection(card);
|
|
} else {
|
|
postEditor.replaceSection(thisSection, card);
|
|
}
|
|
// insert empty paragraph after card if it's the last element.
|
|
if (!thisSection.next) {
|
|
let newSection = editor.builder.createMarkupSection('p');
|
|
postEditor.insertSectionAtEnd(newSection);
|
|
}
|
|
});
|
|
},
|
|
checkElements(elements) {
|
|
set(this, 'selected', elements.filter(element => element.tagName === 'sup').length > 0);
|
|
}
|
|
},
|
|
{
|
|
name: 'html',
|
|
label: 'Embed',
|
|
selected: false,
|
|
type: 'card',
|
|
icon: 'brackets.svg',
|
|
visibility: 'primary',
|
|
order: 3,
|
|
cardMenu: true,
|
|
onClick: (editor, section) => {
|
|
editor.run((postEditor) => {
|
|
let thisSection = section || editor.range.headSection;
|
|
let card = postEditor.builder.createCardSection('card-html', {pos: 'top', html: thisSection.text, newlyCreated: true});
|
|
// we can't replace a list item so we insert a card after it and then delete it.
|
|
if (thisSection.isListItem) {
|
|
editor.insertCard('card-html');
|
|
} else {
|
|
postEditor.replaceSection(thisSection, card);
|
|
}
|
|
|
|
if (!thisSection.next) {
|
|
let newSection = editor.builder.createMarkupSection('p');
|
|
postEditor.insertSectionAtEnd(newSection);
|
|
}
|
|
});
|
|
},
|
|
checkElements() {
|
|
|
|
}
|
|
},
|
|
{
|
|
name: 'hr',
|
|
label: 'Divider',
|
|
selected: false,
|
|
type: 'card',
|
|
icon: 'line.svg',
|
|
visibility: 'primary',
|
|
order: 4,
|
|
cardMenu: true,
|
|
onClick: (editor, section) => {
|
|
editor.run((postEditor) => {
|
|
let thisSection = section || editor.range.headSection;
|
|
let card = postEditor.builder.createCardSection('card-hr', {pos: 'top', newlyCreated: true});
|
|
if (thisSection.text.length) {
|
|
postEditor.insertSection(card);
|
|
} else {
|
|
postEditor.replaceSection(thisSection, card);
|
|
}
|
|
|
|
if (!thisSection.next) {
|
|
let newSection = editor.builder.createMarkupSection('p');
|
|
postEditor.insertSectionAtEnd(newSection);
|
|
}
|
|
});
|
|
},
|
|
checkElements() {
|
|
}
|
|
},
|
|
{
|
|
name: 'md',
|
|
label: 'Markdown',
|
|
selected: false,
|
|
type: 'card',
|
|
visibility: 'primary',
|
|
icon: 'markdown.svg',
|
|
order: 1,
|
|
cardMenu: true,
|
|
onClick: (editor, section) => {
|
|
editor.run((postEditor) => {
|
|
let thisSection = section || editor.range.headSection;
|
|
let card = postEditor.builder.createCardSection('card-markdown', {pos: 'top', markdown: thisSection.text, newlyCreated: true});
|
|
// we can't replace a list item so we insert a card after it and then delete it.
|
|
if (thisSection.isListItem) {
|
|
editor.insertCard('card-markdown');
|
|
} else {
|
|
postEditor.replaceSection(thisSection, card);
|
|
}
|
|
// if this is the last element then insert a paragraph after the card
|
|
if (!thisSection.next) {
|
|
let newSection = editor.builder.createMarkupSection('p');
|
|
postEditor.insertSectionAtEnd(newSection);
|
|
}
|
|
});
|
|
},
|
|
checkElements() {
|
|
|
|
}
|
|
}
|
|
];
|
|
}
|