Merge branch 'Ionaru:master' into patch-2

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
 <kbd>Shift</kbd>-<kbd>Ctrl</kbd>-<kbd>H</kbd> | <kbd>Shift</kbd>-<kbd>Cmd</kbd>-<kbd>H</kbd> | "toggleHeadingBigger"
 <kbd>F9</kbd> | <kbd>F9</kbd> | "toggleSideBySide"
 <kbd>F11</kbd> | <kbd>F11</kbd> | "toggleFullScreen"
+<kbd>Ctrl</kbd>-<kbd>Alt</kbd>-<kbd>1</kbd> | <kbd>Cmd</kbd>-<kbd>Alt</kbd>-<kbd>1</kbd> | "toggleHeading1"
+<kbd>Ctrl</kbd>-<kbd>Alt</kbd>-<kbd>2</kbd> | <kbd>Cmd</kbd>-<kbd>Alt</kbd>-<kbd>2</kbd> | "toggleHeading2"
+<kbd>Ctrl</kbd>-<kbd>Alt</kbd>-<kbd>3</kbd> | <kbd>Cmd</kbd>-<kbd>Alt</kbd>-<kbd>3</kbd> | "toggleHeading3"
+<kbd>Ctrl</kbd>-<kbd>Alt</kbd>-<kbd>4</kbd> | <kbd>Cmd</kbd>-<kbd>Alt</kbd>-<kbd>4</kbd> | "toggleHeading4"
+<kbd>Ctrl</kbd>-<kbd>Alt</kbd>-<kbd>5</kbd> | <kbd>Cmd</kbd>-<kbd>Alt</kbd>-<kbd>5</kbd> | "toggleHeading5"
+<kbd>Ctrl</kbd>-<kbd>Alt</kbd>-<kbd>6</kbd> | <kbd>Cmd</kbd>-<kbd>Alt</kbd>-<kbd>6</kbd> | "toggleHeading6"
 
 Here is how you can change a few, while leaving others untouched:
 

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*/

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);