mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-19 22:25:02 +02:00
Three new heading icons, Fix heading button bugs
This commit is contained in:
parent
8311c8431b
commit
db6d381d1c
|
@ -106,6 +106,9 @@ italic | toggleItalic | fa fa-italic | Italic (Ctrl+I)
|
|||
heading | toggleHeadingSmaller | fa fa-header | Heading (Ctrl+H)
|
||||
heading-smaller | toggleHeadingSmaller | fa fa-header | Smaller Heading (Ctrl+H)
|
||||
heading-bigger | toggleHeadingBigger | fa fa-lg fa-header | Bigger Heading (Shift+Ctrl+H)
|
||||
heading-1 | toggleHeading1 | fa fa-header fa-header-x fa-header-1 | Big Heading
|
||||
heading-2 | toggleHeading2 | fa fa-header fa-header-x fa-header-2 | Medium Heading
|
||||
heading-3 | toggleHeading3 | fa fa-header fa-header-x fa-header-3 | Small Heading
|
||||
code | toggleCodeBlock | fa fa-code | Code (Ctrl+Alt+C)
|
||||
quote | toggleBlockquote | fa fa-quote-left | Quote (Ctrl+')
|
||||
unordered-list | toggleUnorderedList | fa fa-list-ul | Generic List (Ctrl+L)
|
||||
|
|
|
@ -104,9 +104,24 @@
|
|||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.editor-toolbar a.icon-fullscreen {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
.editor-toolbar a.fa-header-x:after {
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 65%;
|
||||
vertical-align: text-bottom;
|
||||
position:relative;
|
||||
top:2px;
|
||||
}
|
||||
|
||||
.editor-toolbar a.fa-header-1:after {
|
||||
content: "1";
|
||||
}
|
||||
|
||||
.editor-toolbar a.fa-header-2:after {
|
||||
content: "2";
|
||||
}
|
||||
|
||||
.editor-toolbar a.fa-header-3:after {
|
||||
content: "3";
|
||||
}
|
||||
|
||||
.editor-toolbar.disabled-for-preview a:not(.fa-eye):not(.fa-arrows-alt) {
|
||||
|
|
|
@ -168,6 +168,30 @@ function toggleHeadingBigger(editor) {
|
|||
_toggleHeading(cm, 'bigger');
|
||||
}
|
||||
|
||||
/**
|
||||
* Action for toggling heading size 1
|
||||
*/
|
||||
function toggleHeading1(editor) {
|
||||
var cm = editor.codemirror;
|
||||
_toggleHeading(cm, undefined, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action for toggling heading size 2
|
||||
*/
|
||||
function toggleHeading2(editor) {
|
||||
var cm = editor.codemirror;
|
||||
_toggleHeading(cm, undefined, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Action for toggling heading size 3
|
||||
*/
|
||||
function toggleHeading3(editor) {
|
||||
var cm = editor.codemirror;
|
||||
_toggleHeading(cm, undefined, 3);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Action for toggling ul.
|
||||
|
@ -299,7 +323,7 @@ function _replaceSelection(cm, active, start, end) {
|
|||
}
|
||||
|
||||
|
||||
function _toggleHeading(cm, direction) {
|
||||
function _toggleHeading(cm, direction, size) {
|
||||
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
||||
return;
|
||||
|
||||
|
@ -309,21 +333,62 @@ function _toggleHeading(cm, direction) {
|
|||
(function(i) {
|
||||
var text = cm.getLine(i);
|
||||
var currHeadingLevel = text.search(/[^#]/);
|
||||
if (currHeadingLevel <= 0) {
|
||||
if (direction == 'bigger') {
|
||||
text = '###### ' + text;
|
||||
|
||||
if(direction !== undefined){
|
||||
if (currHeadingLevel <= 0) {
|
||||
if (direction == 'bigger') {
|
||||
text = '###### ' + text;
|
||||
} else {
|
||||
text = '# ' + text;
|
||||
}
|
||||
} else if (currHeadingLevel == 6 && direction == 'smaller') {
|
||||
text = text.substr(7);
|
||||
} else if (currHeadingLevel == 1 && direction == 'bigger') {
|
||||
text = text.substr(2);
|
||||
} else {
|
||||
text = '# ' + text;
|
||||
}
|
||||
} else if ((currHeadingLevel == 6 && direction == 'smaller') || (currHeadingLevel == 1 && direction == 'bigger')) {
|
||||
text = text.substr(7);
|
||||
} else {
|
||||
if (direction == 'bigger') {
|
||||
text = text.substr(1);
|
||||
} else {
|
||||
text = '#' + text;
|
||||
if (direction == 'bigger') {
|
||||
text = text.substr(1);
|
||||
} else {
|
||||
text = '#' + text;
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(size == 1){
|
||||
if (currHeadingLevel <= 0) {
|
||||
text = '# ' + text;
|
||||
}
|
||||
else if(currHeadingLevel == size){
|
||||
text = text.substr(currHeadingLevel + 1);
|
||||
}
|
||||
else{
|
||||
text = '# ' + text.substr(currHeadingLevel + 1);
|
||||
}
|
||||
}
|
||||
else if(size == 2){
|
||||
if (currHeadingLevel <= 0) {
|
||||
text = '## ' + text;
|
||||
}
|
||||
else if(currHeadingLevel == size){
|
||||
text = text.substr(currHeadingLevel + 1);
|
||||
}
|
||||
else{
|
||||
text = '## ' + text.substr(currHeadingLevel + 1);
|
||||
}
|
||||
}
|
||||
else{
|
||||
if (currHeadingLevel <= 0) {
|
||||
text = '### ' + text;
|
||||
}
|
||||
else if(currHeadingLevel == size){
|
||||
text = text.substr(currHeadingLevel + 1);
|
||||
}
|
||||
else{
|
||||
text = '### ' + text.substr(currHeadingLevel + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
cm.replaceRange(text, {
|
||||
line: i,
|
||||
ch: 0
|
||||
|
@ -483,6 +548,24 @@ var toolbarBuiltInButtons = {
|
|||
className: "fa fa-lg fa-header",
|
||||
title: "Bigger Heading (Shift+Ctrl+H)",
|
||||
},
|
||||
"heading-1": {
|
||||
name: "heading-1",
|
||||
action: toggleHeading1,
|
||||
className: "fa fa-header fa-header-x fa-header-1",
|
||||
title: "Big Heading",
|
||||
},
|
||||
"heading-2": {
|
||||
name: "heading-2",
|
||||
action: toggleHeading2,
|
||||
className: "fa fa-header fa-header-x fa-header-2",
|
||||
title: "Medium Heading",
|
||||
},
|
||||
"heading-3": {
|
||||
name: "heading-3",
|
||||
action: toggleHeading3,
|
||||
className: "fa fa-header fa-header-x fa-header-3",
|
||||
title: "Small Heading",
|
||||
},
|
||||
"code": {
|
||||
name: "code",
|
||||
action: toggleCodeBlock,
|
||||
|
@ -545,7 +628,7 @@ var toolbarBuiltInButtons = {
|
|||
}
|
||||
};
|
||||
|
||||
var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "fullscreen", "guide"];
|
||||
var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "fullscreen", "guide"];
|
||||
|
||||
/**
|
||||
* Interface of SimpleMDE.
|
||||
|
@ -857,6 +940,9 @@ SimpleMDE.toggleItalic = toggleItalic;
|
|||
SimpleMDE.toggleBlockquote = toggleBlockquote;
|
||||
SimpleMDE.toggleHeadingSmaller = toggleHeadingSmaller;
|
||||
SimpleMDE.toggleHeadingBigger = toggleHeadingBigger;
|
||||
SimpleMDE.toggleHeading1 = toggleHeading1;
|
||||
SimpleMDE.toggleHeading2 = toggleHeading2;
|
||||
SimpleMDE.toggleHeading3 = toggleHeading3;
|
||||
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
|
||||
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
|
||||
SimpleMDE.toggleOrderedList = toggleOrderedList;
|
||||
|
@ -886,6 +972,15 @@ SimpleMDE.prototype.toggleHeadingSmaller = function() {
|
|||
SimpleMDE.prototype.toggleHeadingBigger = function() {
|
||||
toggleHeadingBigger(this);
|
||||
};
|
||||
SimpleMDE.prototype.toggleHeading1 = function() {
|
||||
toggleHeading1(this);
|
||||
};
|
||||
SimpleMDE.prototype.toggleHeading2 = function() {
|
||||
toggleHeading2(this);
|
||||
};
|
||||
SimpleMDE.prototype.toggleHeading3 = function() {
|
||||
toggleHeading3(this);
|
||||
};
|
||||
SimpleMDE.prototype.toggleCodeBlock = function() {
|
||||
toggleCodeBlock(this);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue