diff --git a/README.md b/README.md
index e50c377..208e940 100644
--- a/README.md
+++ b/README.md
@@ -355,7 +355,7 @@ const easyMDE = new EasyMDE({
});
```
-All information and/or add your own icons
+All information and/or add your own icons or text
```js
const easyMDE = new EasyMDE({
@@ -373,6 +373,7 @@ const easyMDE = new EasyMDE({
// Add your own code
},
className: "fa fa-star",
+ text: "Starred",
title: "Custom Button",
attributes: { // for custom attributes
id: "custom-id",
@@ -446,6 +447,12 @@ Shortcut (Windows / Linux) | Shortcut (macOS) | Action
Shift-Ctrl-H | Shift-Cmd-H | "toggleHeadingBigger"
F9 | F9 | "toggleSideBySide"
F11 | F11 | "toggleFullScreen"
+Ctrl-Alt-1 | Cmd-Alt-1 | "toggleHeading1"
+Ctrl-Alt-2 | Cmd-Alt-2 | "toggleHeading2"
+Ctrl-Alt-3 | Cmd-Alt-3 | "toggleHeading3"
+Ctrl-Alt-4 | Cmd-Alt-4 | "toggleHeading4"
+Ctrl-Alt-5 | Cmd-Alt-5 | "toggleHeading5"
+Ctrl-Alt-6 | Cmd-Alt-6 | "toggleHeading6"
Here is how you can change a few, while leaving others untouched:
diff --git a/src/css/easymde.css b/src/css/easymde.css
index d7a3249..3f4f0ce 100644
--- a/src/css/easymde.css
+++ b/src/css/easymde.css
@@ -15,7 +15,7 @@
.EasyMDEContainer .CodeMirror {
box-sizing: border-box;
height: auto;
- border: 1px solid #ddd;
+ border: 1px solid #ced4da;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 10px;
@@ -68,9 +68,9 @@
-o-user-select: none;
user-select: none;
padding: 9px 10px;
- border-top: 1px solid #bbb;
- border-left: 1px solid #bbb;
- border-right: 1px solid #bbb;
+ border-top: 1px solid #ced4da;
+ border-left: 1px solid #ced4da;
+ border-right: 1px solid #ced4da;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
@@ -140,7 +140,10 @@
}
.editor-toolbar button {
- width: 30px;
+ font-weight: bold;
+ min-width: 30px;
+ padding: 0 6px;
+ white-space: nowrap;
}
.editor-toolbar button.active,
@@ -300,23 +303,37 @@
}
.cm-s-easymde .cm-header-1 {
- font-size: 200%;
- line-height: 200%;
+ font-size: calc(1.375rem + 1.5vw);
}
.cm-s-easymde .cm-header-2 {
- font-size: 160%;
- line-height: 160%;
+ font-size: calc(1.325rem + .9vw);
}
.cm-s-easymde .cm-header-3 {
- font-size: 125%;
- line-height: 125%;
+ font-size: calc(1.3rem + .6vw);
}
.cm-s-easymde .cm-header-4 {
- font-size: 110%;
- line-height: 110%;
+ font-size: calc(1.275rem + .3vw);
+}
+
+.cm-s-easymde .cm-header-5 {
+ font-size: 1.25rem;
+}
+
+.cm-s-easymde .cm-header-6 {
+ font-size: 1rem;
+}
+
+.cm-s-easymde .cm-header-1,
+.cm-s-easymde .cm-header-2,
+.cm-s-easymde .cm-header-3,
+.cm-s-easymde .cm-header-4,
+.cm-s-easymde .cm-header-5,
+.cm-s-easymde .cm-header-6 {
+ margin-bottom: .5rem;
+ line-height: 1.2;
}
.cm-s-easymde .cm-comment {
@@ -365,6 +382,10 @@
visibility: visible;
}
+.easymde-dropdown-content button {
+ display: block;
+}
+
span[data-img-src]::after {
content: '';
/*noinspection CssUnresolvedCustomProperty, added through JS*/
diff --git a/src/js/easymde.js b/src/js/easymde.js
index 4ff14a2..ce280b6 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -54,6 +54,12 @@ var shortcuts = {
'drawLink': 'Cmd-K',
'toggleHeadingSmaller': 'Cmd-H',
'toggleHeadingBigger': 'Shift-Cmd-H',
+ 'toggleHeading1': 'Ctrl+Alt+1',
+ 'toggleHeading2': 'Ctrl+Alt+2',
+ 'toggleHeading3': 'Ctrl+Alt+3',
+ 'toggleHeading4': 'Ctrl+Alt+4',
+ 'toggleHeading5': 'Ctrl+Alt+5',
+ 'toggleHeading6': 'Ctrl+Alt+6',
'cleanBlock': 'Cmd-E',
'drawImage': 'Cmd-Alt-I',
'toggleBlockquote': 'Cmd-\'',
@@ -235,7 +241,11 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts,
el.setAttribute('type', markup);
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
- // Properly hande custom shortcuts
+ if (options.text) {
+ el.innerText = options.text;
+ }
+
+ // Properly handle custom shortcuts
if (options.name && options.name in shortcuts) {
bindings[options.name] = options.action;
}
@@ -282,13 +292,15 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts,
el.tabIndex = -1;
- // Create icon element and append as a child to the button
- var icon = document.createElement('i');
- for (var iconClassIndex = 0; iconClassIndex < iconClasses.length; iconClassIndex++) {
- var iconClass = iconClasses[iconClassIndex];
- icon.classList.add(iconClass);
+ if (iconClasses.length > 0) {
+ // Create icon element and append as a child to the button
+ var icon = document.createElement('i');
+ for (var iconClassIndex = 0; iconClassIndex < iconClasses.length; iconClassIndex++) {
+ var iconClass = iconClasses[iconClassIndex];
+ icon.classList.add(iconClass);
+ }
+ el.appendChild(icon);
}
- el.appendChild(icon);
// If there is a custom icon markup set, use that
if (typeof options.icon !== 'undefined') {
@@ -2167,6 +2179,7 @@ EasyMDE.prototype.render = function (el) {
// to use with sideBySideFullscreen option.
var easyMDEContainer = document.createElement('div');
easyMDEContainer.classList.add('EasyMDEContainer');
+ easyMDEContainer.setAttribute('role', 'application');
var cmWrapper = this.codemirror.getWrapperElement();
cmWrapper.parentNode.insertBefore(easyMDEContainer, cmWrapper);
easyMDEContainer.appendChild(cmWrapper);