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 @@
///
///
+interface ArrayOneOrMore extends Array {
+ 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;
+ 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;
styleSelectedText?: boolean;
tabSize?: number;
- toolbar?: boolean | ReadonlyArray<'|' | ToolbarIcon>;
+ toolbar?: boolean | ReadonlyArray<'|' | ToolbarButton | ToolbarIcon | ToolbarDropdownIcon>;
toolbarTips?: boolean;
onToggleFullScreen?: (goingIntoFullScreen: boolean) => void;
theme?: string;