Editor Buttons can now specify which modes they should apply to

This commit is contained in:
Djamil Legato
2016-03-02 14:37:47 -08:00
parent c77a947bf8
commit 5c83abc13c
2 changed files with 19 additions and 4 deletions

View File

@@ -90,6 +90,10 @@ export default class EditorField {
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', themeCSS));
}
if (options.mode === 'yaml') {
Object.assign(options.extraKeys, { Tab: function(cm) { cm.replaceSelection(' ', 'end'); }});
}
let editor = codemirror.fromTextArea(textarea.get(0), options);
textarea.data('codemirror', editor);
textarea.data('toolbar', new Toolbar(textarea));
@@ -148,8 +152,9 @@ export class Toolbar {
this.ui.navigation.find('.grav-editor-actions').empty().append('<ul />');
Buttons.navigation.forEach((button) => {
Object.keys(button).forEach((key) => {
if (!~this.codemirror.options.ignore.indexOf(key)) {
let obj = button[key];
let obj = button[key];
if (!obj.modes) { obj.modes = []; }
if (!~this.codemirror.options.ignore.indexOf(key) && (!obj.modes.length || obj.modes.indexOf(this.codemirror.options.mode) > -1)) {
let element = $(`<li class="grav-editor-button-${key}"><a class="hint--top" data-hint="${obj.title}" title="${obj.title}">${obj.label}</a></li>`);
this.ui.navigation.find('.grav-editor-actions ul').append(element);
@@ -166,8 +171,9 @@ export class Toolbar {
this.ui.navigation.find('.grav-editor-modes').empty().append('<ul />');
Buttons.states.forEach((button) => {
Object.keys(button).forEach((key) => {
if (!~this.codemirror.options.ignore.indexOf(key)) {
let obj = button[key];
let obj = button[key];
if (!obj.modes) { obj.modes = []; }
if (!~this.codemirror.options.ignore.indexOf(key) && (!obj.modes.length || obj.modes.indexOf(this.codemirror.options.mode) > -1)) {
let element = $(`<li class="grav-editor-button-${key}"><a class="hint--top" data-hint="${obj.title}" title="${obj.title}">${obj.label}</a></li>`);
this.ui.navigation.find('.grav-editor-modes ul').append(element);

View File

@@ -73,6 +73,7 @@ export default {
identifier: 'bold',
title: 'Bold',
label: '<i class="fa fa-fw fa-bold"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'bold', replace: '**$1$cur**', codemirror, button });
}
@@ -82,6 +83,7 @@ export default {
identifier: 'italic',
title: 'Italic',
label: '<i class="fa fa-fw fa-italic"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'italic', replace: '_$1$cur_', codemirror, button });
}
@@ -91,6 +93,7 @@ export default {
identifier: 'strike',
title: 'Strikethrough',
label: '<i class="fa fa-fw fa-strikethrough"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'strike', replace: '~~$1$cur~~', codemirror, button });
}
@@ -100,6 +103,7 @@ export default {
identifier: 'link',
title: 'Link',
label: '<i class="fa fa-fw fa-link"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'link', replace: '[$1](http://$cur)', codemirror, button });
}
@@ -109,6 +113,7 @@ export default {
identifier: 'image',
title: 'Image',
label: '<i class="fa fa-fw fa-picture-o"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'image', replace: '![$1](http://$cur)', codemirror, button });
}
@@ -118,6 +123,7 @@ export default {
identifier: 'blockquote',
title: 'Blockquote',
label: '<i class="fa fa-fw fa-quote-right"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'blockquote', replace: '> $1', codemirror, button, mode: 'replaceLine' });
}
@@ -127,6 +133,7 @@ export default {
identifier: 'listUl',
title: 'Unordered List',
label: '<i class="fa fa-fw fa-list-ul"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({ name: 'listUl', replace: '* $1', codemirror, button, mode: 'replaceLine' });
}
@@ -136,6 +143,7 @@ export default {
identifier: 'listOl',
title: 'Ordered List',
label: '<i class="fa fa-fw fa-list-ol"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea }) {
replacer({
name: 'listOl',
@@ -186,6 +194,7 @@ export default {
identifier: 'preview',
title: 'Preview',
label: '<i class="fa fa-fw fa-eye"></i>',
modes: ['gfm', 'markdown'],
action({ codemirror, button, textarea, ui }) {
if (textarea.data('grav-editor-mode') === 'preview') {
button.addClass('editor-active');