Merge 49e57330cfe1e5964dc4d4efe263fd2d7139f056 into c81e7466fdafabd942606456f7b0e045cac3e54e

README.md

@@ -128,6 +128,9 @@ easyMDE.value('New input for **EasyMDE**');
 - **element**: The DOM element for the TextArea to use. Defaults to the first TextArea on the page.
 - **forceSync**: If set to `true`, force text changes made in EasyMDE to be immediately stored in original text area. Defaults to `false`.
 - **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
+- **iconsSet**: the icons set to use. Currently supported icons set are:
+  - `fa`: [Font-Awesome icons](https://fontawesome.com/icons) (default);
+  - `material`: [Material Design icons](https://material.io/tools/icons).
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
 - **initialValue**: If set, will customize the initial value of the editor.
 - **insertTexts**: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: `["[", "](http://)"]`.

src/css/easymde.css

@@ -151,29 +151,38 @@
 
 .editor-toolbar button:after {
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-    font-size: 65%;
     vertical-align: text-bottom;
     position: relative;
+}
+
+.editor-toolbar button.fa:after {
+    font-size: 75%;
     top: 2px;
 }
 
-.editor-toolbar button.heading-1:after {
+.editor-toolbar button.material-icons:after {
+    font-size: 50%;
+    top: -2px;
+    margin-left: -8px;
+}
+
+.editor-toolbar button.header-1:after {
     content: "1";
 }
 
-.editor-toolbar button.heading-2:after {
+.editor-toolbar button.header-2:after {
     content: "2";
 }
 
-.editor-toolbar button.heading-3:after {
+.editor-toolbar button.header-3:after {
     content: "3";
 }
 
-.editor-toolbar button.heading-bigger:after {
+.editor-toolbar button.header-bigger:after {
     content: "▲";
 }
 
-.editor-toolbar button.heading-smaller:after {
+.editor-toolbar button.header-smaller:after {
     content: "▼";
 }
 

src/js/easymde.js

@@ -115,7 +115,7 @@ function fixShortcut(name) {
 /**
  * Create icon element for toolbar.
  */
-function createIcon(options, enableTooltips, shortcuts) {
+function createIcon(options, enableTooltips, shortcuts, iconsSet) {
     options = options || {};
     var el = document.createElement('button');
     el.className = options.name;
@@ -143,7 +143,10 @@ function createIcon(options, enableTooltips, shortcuts) {
 
     // Create icon element and append as a child to the button
     var icon = document.createElement('i');
-    icon.className = options.className;
+    el.className = options.className[iconsSet || 'fa'];
+    if(options.textContent) {
+        el.textContent = options.textContent[iconsSet || 'fa'];
+    }
     el.appendChild(icon);
 
     return el;
@@ -1145,58 +1148,114 @@ var toolbarBuiltInButtons = {
     'bold': {
         name: 'bold',
         action: toggleBold,
-        className: 'fa fa-bold',
+        className: {
+            fa: 'fa fa-bold',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'format_bold'
+        },
         title: 'Bold',
         default: true
     },
     'italic': {
         name: 'italic',
         action: toggleItalic,
-        className: 'fa fa-italic',
+        className: {
+            fa: 'fa fa-italic',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'format_italic'
+        },
         title: 'Italic',
         default: true
     },
     'strikethrough': {
         name: 'strikethrough',
         action: toggleStrikethrough,
-        className: 'fa fa-strikethrough',
+        className: {
+            fa: 'fa fa-strikethrough',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'format_strikethrough'
+        },
         title: 'Strikethrough'
     },
     'heading': {
         name: 'heading',
         action: toggleHeadingSmaller,
-        className: 'fa fa-header fa-heading',
+        className: {
+            // We use both fa-header and fa-heading to keep compatibility with FontAwesome 4
+            // See https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#name-changes
+            fa: 'fa fa-header fa-heading',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'title'
+        },
         title: 'Heading',
         default: true
     },
     'heading-smaller': {
         name: 'heading-smaller',
         action: toggleHeadingSmaller,
-        className: 'fa fa-header fa-heading header-smaller',
+        className: {
+            fa: 'fa fa-header fa-heading header-smaller',
+            material: 'material-icons header-smaller'
+        },
+        textContent: {
+            material: 'title'
+        },
         title: 'Smaller Heading'
     },
     'heading-bigger': {
         name: 'heading-bigger',
         action: toggleHeadingBigger,
-        className: 'fa fa-header fa-heading header-bigger',
+        className: {
+            fa: 'fa fa-header fa-heading header-bigger',
+            material: 'material-icons header-bigger'
+        },
+        textContent: {
+            material: 'title'
+        },
         title: 'Bigger Heading'
     },
     'heading-1': {
         name: 'heading-1',
         action: toggleHeading1,
-        className: 'fa fa-header fa-heading header-1',
+        className: {
+            fa: 'fa fa-header fa-heading header-1',
+            material: 'material-icons header-1'
+        },
+        textContent: {
+            material: 'title'
+        },
         title: 'Big Heading'
     },
     'heading-2': {
         name: 'heading-2',
         action: toggleHeading2,
-        className: 'fa fa-header fa-heading header-2',
+        className: {
+            fa: 'fa fa-header fa-heading header-2',
+            material: 'material-icons header-2'
+        },
+        textContent: {
+            material: 'title'
+        },
         title: 'Medium Heading'
     },
     'heading-3': {
         name: 'heading-3',
         action: toggleHeading3,
-        className: 'fa fa-header fa-heading header-3',
+        className: {
+            fa: 'fa fa-header fa-heading header-3',
+            material: 'material-icons header-3'
+        },
+        textContent: {
+            material: 'title'
+        },
         title: 'Small Heading'
     },
     'separator-1': {
@@ -1205,34 +1264,64 @@ var toolbarBuiltInButtons = {
     'code': {
         name: 'code',
         action: toggleCodeBlock,
-        className: 'fa fa-code',
+        className: {
+            fa: 'fa fa-code',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'code'
+        },
         title: 'Code'
     },
     'quote': {
         name: 'quote',
         action: toggleBlockquote,
-        className: 'fa fa-quote-left',
+        className: {
+            fa: 'fa fa-quote-left',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'format_quote'
+        },
         title: 'Quote',
         default: true
     },
     'unordered-list': {
         name: 'unordered-list',
         action: toggleUnorderedList,
-        className: 'fa fa-list-ul',
+        className: {
+            fa: 'fa fa-list-ul',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'format_list_bulleted'
+        },
         title: 'Generic List',
         default: true
     },
     'ordered-list': {
         name: 'ordered-list',
         action: toggleOrderedList,
-        className: 'fa fa-list-ol',
+        className: {
+            fa: 'fa fa-list-ol',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'format_list_numbered'
+        },
         title: 'Numbered List',
         default: true
     },
     'clean-block': {
         name: 'clean-block',
         action: cleanBlock,
-        className: 'fa fa-eraser',
+        className: {
+            fa: 'fa fa-eraser',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'backspace'
+        },
         title: 'Clean block'
     },
     'separator-2': {
@@ -1241,27 +1330,51 @@ var toolbarBuiltInButtons = {
     'link': {
         name: 'link',
         action: drawLink,
-        className: 'fa fa-link',
+        className: {
+            fa: 'fa fa-link',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'insert_link'
+        },
         title: 'Create Link',
         default: true
     },
     'image': {
         name: 'image',
         action: drawImage,
-        className: 'fa fa-image',
+        className: {
+            fa: 'fa fa-image',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'insert_photo'
+        },
         title: 'Insert Image',
         default: true
     },
     'table': {
         name: 'table',
         action: drawTable,
-        className: 'fa fa-table',
+        className: {
+            fa: 'fa fa-table',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'table_chart'
+        },
         title: 'Insert Table'
     },
     'horizontal-rule': {
         name: 'horizontal-rule',
         action: drawHorizontalRule,
-        className: 'fa fa-minus',
+        className: {
+            fa: 'fa fa-minus',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'power_input'
+        },
         title: 'Insert Horizontal Line'
     },
     'separator-3': {
@@ -1270,7 +1383,13 @@ var toolbarBuiltInButtons = {
     'preview': {
         name: 'preview',
         action: togglePreview,
-        className: 'fa fa-eye',
+        className: {
+            fa: 'fa fa-eye',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'remove_red_eye'
+        },
         noDisable: true,
         title: 'Toggle Preview',
         default: true
@@ -1278,7 +1397,13 @@ var toolbarBuiltInButtons = {
     'side-by-side': {
         name: 'side-by-side',
         action: toggleSideBySide,
-        className: 'fa fa-columns',
+        className: {
+            fa: 'fa fa-columns',
+            material: 'material-icons no-disable no-mobile'
+        },
+        textContent: {
+            material: 'vertical_split'
+        },
         noDisable: true,
         noMobile: true,
         title: 'Toggle Side by Side',
@@ -1287,7 +1412,13 @@ var toolbarBuiltInButtons = {
     'fullscreen': {
         name: 'fullscreen',
         action: toggleFullScreen,
-        className: 'fa fa-arrows-alt',
+        className: {
+            fa: 'fa fa-arrows-alt',
+            material: 'material-icons no-disable no-mobile'
+        },
+        textContent: {
+            material: 'fullscreen'
+        },
         noDisable: true,
         noMobile: true,
         title: 'Toggle Fullscreen',
@@ -1299,7 +1430,13 @@ var toolbarBuiltInButtons = {
     'guide': {
         name: 'guide',
         action: 'https://www.markdownguide.org/basic-syntax/',
-        className: 'fa fa-question-circle',
+        className: {
+            fa: 'fa fa-question-circle',
+            material: 'material-icons'
+        },
+        textContent: {
+            material: 'help'
+        },
         noDisable: true,
         title: 'Markdown Guide',
         default: true
@@ -1310,14 +1447,26 @@ var toolbarBuiltInButtons = {
     'undo': {
         name: 'undo',
         action: undo,
-        className: 'fa fa-undo',
+        className: {
+            fa: 'fa fa-undo',
+            material: 'material-icons no-disable'
+        },
+        textContent: {
+            material: 'undo'
+        },
         noDisable: true,
         title: 'Undo'
     },
     'redo': {
         name: 'redo',
         action: redo,
-        className: 'fa fa-repeat fa-redo',
+        className: {
+            fa: 'fa fa-repeat fa-redo',
+            material: 'material-icons no-disable'
+        },
+        textContent: {
+            material: 'redo'
+        },
         noDisable: true,
         title: 'Redo'
     }
@@ -1824,7 +1973,7 @@ EasyMDE.prototype.createToolbar = function (items) {
             if (item === '|') {
                 el = createSep();
             } else {
-                el = createIcon(item, self.options.toolbarTips, self.options.shortcuts);
+                el = createIcon(item, self.options.toolbarTips, self.options.shortcuts, self.options.iconsSet);
             }
 
             // bind events, special for info