From 35861c3dabad78cf2bd5c850d3f538cbfc70767f Mon Sep 17 00:00:00 2001
From: Jeroen Akkerman <Jeroen_akkerman1@hotmail.com>
Date: Wed, 29 Jan 2020 15:57:28 +0100
Subject: [PATCH] Edits and things to try with the dropdown PR

---
 src/css/easymde.css   |  9 +++++++--
 src/js/easymde.js     | 17 +++++++++++++++--
 types/easymde-test.ts | 18 ++++++++++++++++++
 types/easymde.d.ts    | 34 +++++++++++++++++++++++++++++++++-
 4 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/src/css/easymde.css b/src/css/easymde.css
index 20a60fc..f02c6b2 100644
--- a/src/css/easymde.css
+++ b/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;
@@ -342,3 +342,8 @@
 .easymde-dropdown:focus .easymde-dropdown-content {
     display: block;
 }
+
+.editor-toolbar.disabled-for-preview button:not(.no-disable) {
+    opacity: .6;
+    pointer-events: none;
+}
diff --git a/src/js/easymde.js b/src/js/easymde.js
index c93786e..209fb24 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -119,8 +119,21 @@ 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') {
+            if (child === '|') {
+                childElement = createSep();
+            } else if (toolbarBuiltInButtons[child]) {
+                childElement = createToolbarButton(toolbarBuiltInButtons[child], true, enableTooltips, shortcuts, 'button', parent);
+            }
+        } else {
+            childElement = createToolbarButton(options.children[childrenIndex], true, enableTooltips, shortcuts, 'button', parent);
+        }
+
+        content.appendChild(childElement);
     }
     el.appendChild(content);
     return el;
diff --git a/types/easymde-test.ts b/types/easymde-test.ts
index cc08210..1606581 100644
--- a/types/easymde-test.ts
+++ b/types/easymde-test.ts
@@ -47,6 +47,7 @@ const editor2 = new EasyMDE({
             title: 'Bold'
         },
         '|',
+        'undo',
         {
             // Separator
             name: 'alert',
@@ -67,6 +68,23 @@ const editor2 = new EasyMDE({
             title: 'A Custom Link',
             noDisable: true,
             noMobile: true
+        },
+        'preview',
+        {
+            name: 'links',
+            className: 'fa fab 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'
+            ]
         }
     ]
 });
diff --git a/types/easymde.d.ts b/types/easymde.d.ts
index 8fef851..4d60643 100644
--- a/types/easymde.d.ts
+++ b/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;
@@ -86,6 +109,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);
@@ -138,7 +170,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;