mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
9a0b72071d
refs https://github.com/TryGhost/Ghost/issues/8106, https://github.com/TryGhost/Ghost/issues/7429, requires https://github.com/TryGhost/Ghost/pull/8137 -Adds new "card" menus - Navigation with keyboard in both axis. - Search with keyboard in both menus. - Adds a "+" Menu for cards - Adds a "/" Menu for cards - if the block has content and it becomes a markdown or HTML Embed card then the content is included into the card. - Image and HR cards appear below the current section - Adds new toolbar with both inline and block styling. - Adds a new 'divider' card.
269 lines
9.0 KiB
JavaScript
269 lines
9.0 KiB
JavaScript
import set from 'ember-metal/set';
|
|
|
|
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.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) => {
|
|
let card = postEditor.builder.createCardSection('image-card', {pos: 'top'});
|
|
postEditor.insertSection(card);
|
|
|
|
});
|
|
},
|
|
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 card = postEditor.builder.createCardSection('html-card', {pos: 'top', html: editor.range.headSection.text});
|
|
postEditor.replaceSection(section || editor.range.headSection, card);
|
|
});
|
|
},
|
|
checkElements() {
|
|
|
|
}
|
|
},
|
|
{
|
|
name: 'hr',
|
|
label: 'Divider',
|
|
selected: false,
|
|
type: 'card',
|
|
icon: 'line.svg',
|
|
visibility: 'primary',
|
|
order: 4,
|
|
cardMenu: true,
|
|
onClick: (editor) => {
|
|
editor.run((postEditor) => {
|
|
let card = postEditor.builder.createCardSection('hr-card', {pos: 'top'});
|
|
postEditor.insertSection(card);
|
|
});
|
|
},
|
|
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 card = postEditor.builder.createCardSection('markdown-card', {pos: 'top', markdown: editor.range.headSection.text});
|
|
postEditor.replaceSection(section || editor.range.headSection, card);
|
|
});
|
|
},
|
|
checkElements() {
|
|
|
|
}
|
|
}
|
|
];
|
|
}
|