diff --git a/src/css/easymde.css b/src/css/easymde.css
index 20a60fc..92cf821 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;
diff --git a/src/js/easymde.js b/src/js/easymde.js
index 642dcb5..761f604 100644
--- a/src/js/easymde.js
+++ b/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);
diff --git a/types/easymde-test.ts b/types/easymde-test.ts
index cc08210..63cfb1d 100644
--- a/types/easymde-test.ts
+++ b/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'
+ },
+ ]
}
]
});
diff --git a/types/easymde.d.ts b/types/easymde.d.ts
index 9391416..0ef9e53 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;
@@ -87,6 +110,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);
@@ -139,7 +171,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;