mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
867cb4101d
refs https://github.com/TryGhost/Ghost/issues/8157 Currently mobiledoc-kit doesn't allow the inserting or replacing of a list item with a card. There is a solution that works toggling the section to a `p` then replacing the section, however there are issues with the mobiledoc range object becoming out of sync and the workarounds for that are too hacky. We need to update mobiledoc to deal with this usecase (although the way that ranges are handled during undo might also be an option worth exploring), but for now we'll simply insert a card at the bottom of the list which is unfortunately different behaviour from any other block.
281 lines
9.7 KiB
JavaScript
281 lines
9.7 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});
|
|
// we can't replace a list item so we insert a card after it and then delete it.
|
|
if (editor.range.headSection.isListItem) {
|
|
// postEditor.toggleSection('p');
|
|
// postEditor.insertSection(card);
|
|
// postEditor.removeSection(editor.range.head.section);
|
|
editor.insertCard('html-card');
|
|
} else {
|
|
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});
|
|
// we can't replace a list item so we insert a card after it and then delete it.
|
|
if (editor.range.headSection.isListItem) {
|
|
editor.insertCard('markdown-card');
|
|
} else {
|
|
postEditor.replaceSection(section || editor.range.headSection, card);
|
|
}
|
|
});
|
|
},
|
|
checkElements() {
|
|
|
|
}
|
|
}
|
|
];
|
|
}
|