Switch from SimpleMDE to EasyMDE (#13333)

* Switch from SimpleMDE to EasyMDE

Signed-off-by: Andrew Thornton <[email protected]>

* use webpack to webpack the easymde css

Signed-off-by: Andrew Thornton <[email protected]>

* move css to only css

Signed-off-by: Andrew Thornton <[email protected]>

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

Signed-off-by: Andrew Thornton <[email protected]>

* Fix arc-green

Signed-off-by: Andrew Thornton <[email protected]>

* as per @silverwind

* reinstall codemirror

Signed-off-by: Andrew Thornton <[email protected]>

Co-authored-by: Lauris BH <[email protected]>

Author: zeripath

package-lock.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",

package.json

@@ -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>

public/vendor/plugins/simplemde/LICENSE

@@ -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>

public/vendor/plugins/simplemde/simplemde.min.css

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

public/vendor/plugins/simplemde/simplemde.min.js

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

templates/base/footer.tmpl

@@ -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;
 }

templates/base/head.tmpl

@@ -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,