Merge pull request #501 from metabrainz/replace-simplemde

Replace SimpleMDE library with EasyMDE

critiquebrainz/frontend/static/scripts/wysiwyg-editor.js

@@ -1,2 +1,3 @@
-var SimpleMDE = require('simplemde');
-window.SimpleMDE = SimpleMDE;
+import '../../../../node_modules/easymde/dist/easymde.min.css';
+var EasyMDE = require('easymde');
+window.EasyMDE = EasyMDE;

critiquebrainz/frontend/templates/common.html

@@ -1,5 +1,5 @@
 {% set rating_script %}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"/>
+<link rel="stylesheet" href="{{ get_static_path('wysiwyg-editor.css') }}"/>
 <script>
     $(document).ready(function () {
         $("#ratestars").click(function (e) {

critiquebrainz/frontend/templates/review/entity/comments.html

@@ -13,7 +13,7 @@
             </a>
             <button class="comment-edit-button btn btn-primary btn-xs"
                     title="{{ _('Edit this comment') }}">
-              <span class="glyphicon glyphicon-edit"></span>  
+              <span class="glyphicon glyphicon-edit"></span>
             </button>
           {% endif %}
           <span style="float:right;">
@@ -48,12 +48,12 @@
 
 
 {% block scripts %}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"/>
+<link rel="stylesheet" href="{{ get_static_path('wysiwyg-editor.css') }}"/>
   <script src="{{ get_static_path('wysiwyg-editor.js') }}"></script>
   <script>
     $(document).ready(function() {
       commentMdes = {};
-      commentMdes["commentAddForm"] = new SimpleMDE({
+      commentMdes["commentAddForm"] = new EasyMDE({
         element: $("#comment-add-form").find(".comment-text")[0],
         spellChecker: false
       });
@@ -92,8 +92,8 @@
         commentContentDiv.toggle();
 
         if (!commentMdes[commentDivId]) {
-          // if no simplemde object is created for this comment, create it
-          commentMdes[commentDivId] = new SimpleMDE({
+          // if no EasyMDE object is created for this comment, create it
+          commentMdes[commentDivId] = new EasyMDE({
             element: commentText,
             spellChecker: false
           });

critiquebrainz/frontend/templates/review/modify/base.html

@@ -60,11 +60,11 @@
 
 {% block scripts %}
   {{ super() }}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"/>
+  <link rel="stylesheet" href="{{ get_static_path('wysiwyg-editor.css') }}"/>
   <script src="{{ get_static_path('wysiwyg-editor.js') }}"></script>
   <script>
     $(document).ready(function() {
-      reviewContentEditor = new SimpleMDE({
+      reviewContentEditor = new EasyMDE({
         element: $('#review-content')[0],
         spellChecker: false
       });
@@ -84,7 +84,7 @@
       oldReviewLength = reviewContentEditor.value().length
       languageSelector = $('#review-language')[0]
       // Detect the language of the review on change
-      // codemirror is the underlying editor behind SimpleMDE.
+      // codemirror is the underlying editor behind EasyMDE.
       reviewContentEditor.codemirror.on("change", function() {
         const MIN_DIFFERENCE = 10
 

package.json

@@ -13,11 +13,11 @@
   "dependencies": {
     "bootstrap": "^3.4.1",
     "bootstrap-rating-input": "javiertoledo/bootstrap-rating-input#0a4ebb7d",
+    "easymde": "^2.18.0",
     "jquery": "3.5.1",
     "leaflet": "1.1.0",
     "path": "0.12.7",
-    "popper.js": "^1.14.1",
-    "simplemde": "^1.11.2"
+    "popper.js": "^1.14.1"
   },
   "private": true,
   "devDependencies": {

webpack.config.js

@@ -34,7 +34,7 @@ module.exports = (env, argv) => {
         ]
       },
       {
-        test: /\.less$/,
+        test: /\.(le|c)ss$/,
         use: [
           {
             loader: 'style-loader'