Switch from SimpleMDE to EasyMDE (#13333)

* Switch from SimpleMDE to EasyMDE

Signed-off-by: Andrew Thornton <art27@cantab.net>

* use webpack to webpack the easymde css

Signed-off-by: Andrew Thornton <art27@cantab.net>

* move css to only css

Signed-off-by: Andrew Thornton <art27@cantab.net>

* move loading codemirror modes and addons back in to footer.tmpl

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Fix arc-green

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

* reinstall codemirror

Signed-off-by: Andrew Thornton <art27@cantab.net>

Co-authored-by: Lauris BH <lauris@nix.lv>

package-lock.json

@@ -3005,6 +3005,19 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codemirror": {
+      "version": "5.58.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.58.2.tgz",
+      "integrity": "sha512-K/hOh24cCwRutd1Mk3uLtjWzNISOkm4fvXiMO7LucCrqbh6aJDdtqUziim3MZUI6wOY0rvY1SlL1Ork01uMy6w=="
+    },
+    "codemirror-spell-checker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
+      "integrity": "sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=",
+      "requires": {
+        "typo-js": "*"
+      }
+    },
     "collapse-white-space": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
@@ -4507,6 +4520,16 @@
         }
       }
     },
+    "easymde": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.12.1.tgz",
+      "integrity": "sha512-4cYP+tK/vU9/KuiUskKnF9EM+DTvBe77EKduEu+HDa+nfRVVphZM76gfz2BjrWv8vbTJLOFcwlJ/NJ6+SzMApQ==",
+      "requires": {
+        "codemirror": "^5.58.1",
+        "codemirror-spell-checker": "1.1.2",
+        "marked": "^1.2.0"
+      }
+    },
     "editions": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz",
@@ -9051,6 +9074,11 @@
         "repeat-string": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.2.tgz",
+      "integrity": "sha512-5jjKHVl/FPo0Z6ocP3zYhKiJLzkwJAw4CZoLjv57FkvbUuwOX4LIBBGGcXjAY6ATcd1q9B8UTj5T9Umauj0QYQ=="
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -14547,6 +14575,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typo-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.1.0.tgz",
+      "integrity": "sha512-W3kLbx+ML9PBl5Bzso/lTvVxk4BCveSNAtQeht59FEtxCdGThmn6wSHA4Xq3eQYAK24NHdisMM4JmsK0GFy/pg=="
+    },
     "ua-parser-js": {
       "version": "0.7.22",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",

package.json

@@ -14,10 +14,12 @@
     "add-asset-webpack-plugin": "1.0.0",
     "babel-loader": "8.1.0",
     "clipboard": "2.0.6",
+    "codemirror": "5.58.2",
     "core-js": "3.7.0",
     "css-loader": "5.0.1",
     "css-minimizer-webpack-plugin": "1.1.5",
     "dropzone": "5.7.2",
+    "easymde": "2.12.1",
     "escape-goat": "3.0.0",
     "fast-glob": "3.2.4",
     "file-loader": "6.2.0",

public/vendor/plugins/simplemde/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Next Step Webs, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

templates/base/footer.tmpl

@@ -12,7 +12,7 @@
 
 	{{template "base/footer_content" .}}
 {{if .RequireSimpleMDE}}
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/js/easymde.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>
 	<script>

templates/base/head.tmpl

@@ -64,7 +64,7 @@
 	<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
 	<link rel="fluid-icon" href="{{StaticUrlPrefix}}/img/gitea-lg.png" title="{{AppName}}">
 {{if .RequireSimpleMDE}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
 {{end}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
 	<noscript>

web_src/js/easymde.js

@@ -0,0 +1,8 @@
+import EasyMDE from 'easymde';
+
+import CodeMirror from 'codemirror/lib/codemirror.js';
+
+window.EasyMDE = EasyMDE;
+window.SimpleMDE = EasyMDE;
+window.CodeMirror = CodeMirror;
+

web_src/less/_editor.less

@@ -29,7 +29,7 @@
   opacity: 1 !important;
 }
 
-.editor-toolbar a:not(:hover) {
+.editor-toolbar button:not(:hover) {
   background-color: transparent !important;
 }
 

web_src/less/themes/theme-arc-green.less

@@ -1784,12 +1784,12 @@ a.ui.labels .label:hover {
   border-right-color: var(--color-secondary) !important;
 }
 
-.editor-toolbar a {
+.editor-toolbar button {
   color: #87ab63 !important;
 }
 
-.editor-toolbar a.active,
-.editor-toolbar a:hover {
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
   background: #2a2e3a;
   border-color: transparent;
 }

webpack.config.js

@@ -57,6 +57,10 @@ module.exports = {
     'eventsource.sharedworker': [
       resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
     ],
+    'easymde': [
+      resolve(__dirname, 'web_src/js/easymde.js'),
+      resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
+    ],
     ...themes,
   },
   devtool: false,