Add button shortcuts and typings

src/css/easymde.css

@@ -320,7 +320,7 @@
 .editor-toolbar .easymde-dropdown {
     position: relative;
     background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
-    border-radius: 0px;
+    border-radius: 0;
     border: 1px solid #fff;
 }
 
@@ -332,7 +332,7 @@
     display: none;
     position: absolute;
     background-color: #f9f9f9;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     padding: 8px;
     z-index: 2;
     top: 30px;

src/js/easymde.js

@@ -119,8 +119,17 @@ function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
     var content = document.createElement('div');
     content.className = 'easymde-dropdown-content';
     for (var childrenIndex = 0; childrenIndex < options.children.length; childrenIndex++) {
-        var child = createToolbarButton(options.children[childrenIndex], true, enableTooltips, shortcuts, 'button', parent);
-        content.appendChild(child);
+
+        var child = options.children[childrenIndex];
+        var childElement;
+
+        if (typeof child === 'string' && child in toolbarBuiltInButtons) {
+            childElement = createToolbarButton(toolbarBuiltInButtons[child], true, enableTooltips, shortcuts, 'button', parent);
+        } else {
+            childElement = createToolbarButton(child, true, enableTooltips, shortcuts, 'button', parent);
+        }
+
+        content.appendChild(childElement);
     }
     el.appendChild(content);
     return el;
@@ -1791,7 +1800,7 @@ EasyMDE.prototype.markdown = function (text) {
 
         // Convert the markdown to HTML
         var htmlText = marked(text);
-        
+
         // Sanitize HTML
         if (this.options.renderingConfig && typeof this.options.renderingConfig.sanitizerFunction === 'function') {
             htmlText = this.options.renderingConfig.sanitizerFunction.call(this, htmlText);

types/easymde-test.ts

@@ -43,18 +43,18 @@ const editor2 = new EasyMDE({
         {
             name: 'bold',
             action: EasyMDE.toggleBold,
-            className: 'fa fa-bolt',
+            className: 'fa fas fa-bolt',
             title: 'Bold'
         },
         '|',
+        'undo',
         {
-            // Separator
             name: 'alert',
             action: (editor: EasyMDE) => {
                 alert('This is from a custom button action!');
                 // Custom functions have access to the `editor` instance.
             },
-            className: 'fa fa-star',
+            className: 'fa fas fa-star',
             title: 'A Custom Button',
             noDisable: undefined,
             noMobile: false
@@ -67,6 +67,29 @@ const editor2 = new EasyMDE({
             title: 'A Custom Link',
             noDisable: true,
             noMobile: true
+        },
+        'preview',
+        {
+            name: 'links',
+            className: 'fa fas fa-arrow-down',
+            title: 'A Custom Link',
+            children: [
+                {
+                    name: 'link',
+                    action: 'https://github.com/Ionaru/easy-markdown-editor',
+                    className: 'fa fab fa-github',
+                    title: 'A Custom Link',
+                    noDisable: true,
+                    noMobile: true
+                },
+                'preview',
+                {
+                    name: 'bold',
+                    action: EasyMDE.toggleBold,
+                    className: 'fa fas fa-bold',
+                    title: 'Bold'
+                },
+            ]
         }
     ]
 });

types/easymde.d.ts

@@ -22,6 +22,29 @@
 /// <reference types="codemirror"/>
 /// <reference types="marked"/>
 
+interface ArrayOneOrMore<T> extends Array<T> {
+    0: T
+}
+
+type ToolbarButton =
+    'strikethrough'
+    | 'code'
+    | 'table'
+    | 'redo'
+    | 'heading'
+    | 'undo'
+    | 'heading-bigger'
+    | 'heading-smaller'
+    | 'heading-1'
+    | 'heading-2'
+    | 'heading-3'
+    | 'clean-block'
+    | 'horizontal-rule'
+    | 'preview'
+    | 'side-by-side'
+    | 'fullscreen'
+    | 'guide';
+
 declare namespace EasyMDE {
     interface AutoSaveOptions {
         enabled?: boolean;
@@ -87,6 +110,15 @@ declare namespace EasyMDE {
         onUpdate: (element: HTMLElement) => void;
     }
 
+    interface ToolbarDropdownIcon {
+        name: string;
+        children: ArrayOneOrMore<ToolbarIcon | ToolbarButton>;
+        className: string;
+        title: string;
+        noDisable?: boolean;
+        noMobile?: boolean;
+    }
+
     interface ToolbarIcon {
         name: string;
         action: string | ((editor: EasyMDE) => void);
@@ -139,7 +171,7 @@ declare namespace EasyMDE {
         status?: boolean | ReadonlyArray<string | StatusBarItem>;
         styleSelectedText?: boolean;
         tabSize?: number;
-        toolbar?: boolean | ReadonlyArray<'|' | ToolbarIcon>;
+        toolbar?: boolean | ReadonlyArray<'|' | ToolbarButton | ToolbarIcon | ToolbarDropdownIcon>;
         toolbarTips?: boolean;
         onToggleFullScreen?: (goingIntoFullScreen: boolean) => void;
         theme?: string;