Allow to specify which Font Awesome version to use

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Added
 - `inputStyle` and `nativeSpellcheck` options to manage the native language of the browser (Thanks to [@firm1], [#143]).
+- `fontAwesomeVersion` option to specify which Font Awesome version to use (Thanks to [@Situphen], [#145]).
 ### Changed
 - Delay before assuming that submit of the form as failed is `autosave.submit_delay` instead of `autosave.delay` (Thanks to [@Situphen], [#139]).
 

README.md

@@ -127,6 +127,7 @@ easyMDE.value('New input for **EasyMDE**');
   - **code**: Can be set to  ```` ``` ```` or `~~~`.  Defaults to ```` ``` ````.
   - **italic**: Can be set to `*` or `_`. Defaults to `*`.
 - **element**: The DOM element for the TextArea to use. Defaults to the first TextArea on the page.
+- **fontAwesomeVersion**: Allow to specify which Font Awesome version to use (for instance, `v5.12.0`). Defaults to Font Awesome 4.7.0 (`v4`).
 - **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.
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
@@ -211,6 +212,7 @@ var editor = new EasyMDE({
 		italic: "_",
 	},
 	element: document.getElementById("MyID"),
+	fontAwesomeVersion: 'v5.12.0',
 	forceSync: true,
 	hideIcons: ["guide", "heading"],
 	indentWithTabs: false,

src/js/easymde.js

@@ -1472,6 +1472,60 @@ var errorMessages = {
     importError: 'Something went wrong when uploading the image #image_name#.',
 };
 
+/**
+ * Download Font Awesome
+ */
+
+function downloadFontAwesome(options) {
+    if (options.autoDownloadFontAwesome === false) {
+        return;
+    }
+
+    var version = options.fontAwesomeVersion;
+    if (!version.startsWith('v5')) {
+        version = 'v4';
+    }
+
+    if (options.autoDownloadFontAwesome !== true) {
+        if (version === 'v4') {
+            var styleSheets = document.styleSheets;
+            for (var sheet in styleSheets) {
+                if (!sheet.href)
+                    continue;
+
+                if (sheet.href.indexOf('//maxcdn.bootstrapcdn.com/font-awesome/') > -1) {
+                    return;
+                }
+            }
+        } else {
+            var scripts = document.scripts;
+            for (var script in scripts) {
+                if (!script.src)
+                    continue;
+
+                if (script.src.indexOf('//use.fontawesome.com/releases/' + version) > -1) {
+                    return;
+                }
+            }
+        }
+    }
+
+    if (version === 'v4') {
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css';
+        document.getElementsByTagName('head')[0].appendChild(link);
+    } else {
+        var script_ = document.createElement('script');
+        script_.src = 'https://use.fontawesome.com/releases/' + version + '/js/all.js';
+        document.getElementsByTagName('head')[0].appendChild(script_);
+
+        script_ = document.createElement('script');
+        script_.src = 'https://use.fontawesome.com/releases/' + version + '/js/v4-shims.js';
+        document.getElementsByTagName('head')[0].appendChild(script_);
+    }
+}
+
 /**
  * Interface of EasyMDE.
  */
@@ -1482,32 +1536,7 @@ function EasyMDE(options) {
     // Used later to refer to it"s parent
     options.parent = this;
 
-    // Check if Font Awesome needs to be auto downloaded
+    downloadFontAwesome(options);
-    var autoDownloadFA = true;
-
-    if (options.autoDownloadFontAwesome === false) {
-        autoDownloadFA = false;
-    }
-
-    if (options.autoDownloadFontAwesome !== true) {
-        var styleSheets = document.styleSheets;
-        for (var i = 0; i < styleSheets.length; i++) {
-            if (!styleSheets[i].href)
-                continue;
-
-            if (styleSheets[i].href.indexOf('//maxcdn.bootstrapcdn.com/font-awesome/') > -1) {
-                autoDownloadFA = false;
-            }
-        }
-    }
-
-    if (autoDownloadFA) {
-        var link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css';
-        document.getElementsByTagName('head')[0].appendChild(link);
-    }
-
 
     // Find the textarea to use
     if (options.element) {

types/easymde.d.ts

@@ -117,6 +117,7 @@ declare namespace EasyMDE {
         autosave?: AutoSaveOptions;
         blockStyles?: BlockStyleOptions;
         element?: HTMLElement;
+        fontAwesomeVersion?: string;
         forceSync?: boolean;
         hideIcons?: ReadonlyArray<string>;
         indentWithTabs?: boolean;