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>
go-gitea · Nov 10, 2020 · 13b8c0b · 13b8c0b
1 parent 21d4963
commit 13b8c0b
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/public/vendor/plugins/simplemde/LICENSE b/public/vendor/plugins/simplemde/LICENSE
diff --git a/public/vendor/plugins/simplemde/simplemde.min.css b/public/vendor/plugins/simplemde/simplemde.min.css
diff --git a/public/vendor/plugins/simplemde/simplemde.min.js b/public/vendor/plugins/simplemde/simplemde.min.js
diff --git a/templates/base/footer.tmpl b/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>

diff --git a/templates/base/head.tmpl b/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>

diff --git a/web_src/js/easymde.js b/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;
+
diff --git a/web_src/less/_editor.less b/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;
 }
 

diff --git a/web_src/less/themes/theme-arc-green.less b/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;
 }

diff --git a/webpack.config.js b/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,