Update EasyMDE for Bludit v4

bl-plugins/easymde/css/bludit.css

@@ -1,5 +1,4 @@
-.editor-toolbar { background: #f1f1f1; border-radius: 0 !important; font-size: 1.5em;}
+.editor-toolbar { background: #f1f1f1; font-size: 1.2em; padding: 5px; border-color: #ddd;}
 .editor-toolbar::before { margin-bottom: 2px !important }
 .editor-toolbar::after { margin-top: 2px !important }
-.CodeMirror, .CodeMirror-scroll { flex:1; border-radius: 0 !important; }
+.CodeMirror, .CodeMirror-scroll { flex-grow: 1!important }
-.editor-toolbar .fa { color: #555;}

bl-plugins/easymde/metadata.json

@@ -2,9 +2,10 @@
 	"author": "EasyMDE",
 	"email": "",
 	"website": "https://easymde.tk",
-	"version": "2.12.0",
+	"version": "2.14.0",
-	"releaseDate": "2020-09-29",
+	"releaseDate": "2021-02-14",
 	"license": "MIT",
-	"compatible": "3.13.1",
+	"compatible": "4.0",
-	"notes": ""
+	"type": "editor",
-}
+	"notes": "EasyMDE use Font-Awesome for icons and Bludit use Bootstrap icons so you need to do some search and replace fa fa- for bi bi-."
+}

bl-plugins/easymde/plugin.php

@@ -1,11 +1,9 @@
 <?php
 
-class plugineasyMDE extends Plugin {
+class pluginEasyMDE extends Plugin {
 
-	// The plugin is going to be loaded in this views
 	private $loadOnViews = array(
-		'new-content',
+		'editor' // Load this plugin only in the Editor view
-		'edit-content'
 	);
 
 	public function init()
@@ -21,19 +19,19 @@ class plugineasyMDE extends Plugin {
 	{
 		global $L;
 
-		$html  = '<div>';
+		$html  = '<div class="mb-3">';
-		$html .= '<label>'.$L->get('toolbar').'</label>';
+		$html .= '<label class="form-label" for="toolbar">'.$L->get('toolbar').'</label>';
-		$html .= '<input name="toolbar" id="jstoolbar" type="text" value="'.$this->getValue('toolbar').'">';
+		$html .= '<input class="form-control" name="toolbar" id="toolbar" type="text" value="'.$this->getValue('toolbar').'">';
 		$html .= '</div>';
 
-		$html .= '<div>';
+		$html .= '<div class="mb-3">';
-		$html .= '<label>'.$L->get('tab-size').'</label>';
+		$html .= '<label class="form-label" for="tabSize">'.$L->get('tab-size').'</label>';
-		$html .= '<input name="tabSize" id="jstabSize" type="text" value="'.$this->getValue('tabSize').'">';
+		$html .= '<input class="form-control" name="tabSize" id="tabSize" type="text" value="'.$this->getValue('tabSize').'">';
 		$html .= '</div>';
 
-		$html .= '<div>';
+		$html .= '<div class="mb-3">';
-		$html .= '<label>'.$L->get('spell-checker').'</label>';
+		$html .= '<label class="form-label" for="spellChecker">'.$L->get('spell-checker').'</label>';
-		$html .= '<select name="spellChecker">';
+		$html .= '<select class="form-control" name="spellChecker">';
 		$html .= '<option value="true" '.($this->getValue('spellChecker')===true?'selected':'').'>'.$L->get('enabled').'</option>';
 		$html .= '<option value="false" '.($this->getValue('spellChecker')===false?'selected':'').'>'.$L->get('disabled').'</option>';
 		$html .= '</select>';
@@ -44,92 +42,79 @@ class plugineasyMDE extends Plugin {
 
 	public function adminHead()
 	{
+		// Load the plugin only in the controllers setted in $this->loadOnController
 		if (!in_array($GLOBALS['ADMIN_VIEW'], $this->loadOnViews)) {
 			return false;
 		}
 
-		// Include plugin's CSS files
 		$html  = $this->includeCSS('easymde.min.css');
 		$html .= $this->includeCSS('bludit.css');
+		$html .= $this->includeJS('easymde.min.js');
 		return $html;
 	}
 
 	public function adminBodyEnd()
 	{
+		global $L;
+
+		// Load the plugin only in the controllers setted in $this->loadOnController
 		if (!in_array($GLOBALS['ADMIN_VIEW'], $this->loadOnViews)) {
 			return false;
 		}
 
-		// Language
-		global $L;
 		$langImage = $L->g('Image description');
-
 		$spellCheckerEnable = $this->getValue('spellChecker')?'true':'false';
 		$tabSize = $this->getValue('tabSize');
 		$toolbar = Sanitize::htmlDecode($this->getValue('toolbar'));
 		$pageBreak = PAGE_BREAK;
 
-		// Javascript path and file
+		return <<<EOF
-		$jsEasyMDE = $this->domainPath().'js/easymde.min.js?version='.BLUDIT_VERSION;
+		<script>
+			// Function required for Bludit
+			// Returns the content of the editor
+			function editorGetContent() {
+				return easymde.value();
+			}
 
-return <<<EOF
+			// Function required for Bludit
-<script charset="utf-8" src="$jsEasyMDE"></script>
+			// Insert HTML content at the cursor position
-<script>
+			function editorInsertContent(html, type='') {
-	var easymde = null;
+				var text = easymde.value();
+				if (type == 'image') {
+					easymde.value(text + "![$langImage]("+filename+")" + "\\n");
+				} else {
+					easymde.value(html + "\\n");
+				}
+				easymde.codemirror.refresh();
+			}
 
-	// Insert an image in the editor at the cursor position
+			var easymde = new EasyMDE({
-	// Function required for Bludit
+				element: document.getElementById("editor"),
-	function editorInsertMedia(filename) {
+				status: false,
-		var text = easymde.value();
+				toolbarTips: true,
-		easymde.value(text + "![$langImage]("+filename+")" + "\\n");
+				toolbarGuideIcon: true,
-		easymde.codemirror.refresh();
+				autofocus: false,
-	}
+				placeholder: "",
+				lineWrapping: true,
+				autoDownloadFontAwesome: false,
+				indentWithTabs: true,
+				tabSize: $tabSize,
+				spellChecker: $spellCheckerEnable,
+				toolbar: [$toolbar,
+					"|",
+					{
+					name: "pageBreak",
+					action: function addPageBreak(editor){
+						var cm = editor.codemirror;
+						output = "$pageBreak";
+						cm.replaceSelection(output);
+						},
+					className: "bi-crop",
+					title: "Page break",
+					}]
+			});
 
-	// Returns the content of the editor
+		</script>
-	// Function required for Bludit
+		EOF;
-	function editorGetContent() {
-		return easymde.value();
-	}
-
-	// Insert HTML content at the cursor position
-	// Function required for Bludit
-	function editorInsertContent(html, type='') {
-		var text = easymde.value();
-		if (type == 'image') {
-			easymde.value(text + "![$langImage]("+filename+")" + "\\n");
-		} else {
-			easymde.value(html + "\\n");
-		}
-		easymde.codemirror.refresh();
-	}
-
-	easymde = new EasyMDE({
-		element: document.getElementById("jseditor"),
-		status: false,
-		toolbarTips: true,
-		toolbarGuideIcon: true,
-		autofocus: false,
-		placeholder: "",
-		lineWrapping: true,
-		autoDownloadFontAwesome: false,
-		indentWithTabs: true,
-		tabSize: $tabSize,
-		spellChecker: $spellCheckerEnable,
-		toolbar: [$toolbar,
-			"|",
-			{
-			name: "pageBreak",
-			action: function addPageBreak(editor){
-				var cm = editor.codemirror;
-				output = "$pageBreak";
-				cm.replaceSelection(output);
-				},
-			className: "bi-crop",
-			title: "Page break",
-			}]
-	});
-
-</script>
-EOF;
 	}
 }