Update JS dependencies and misc tweaks (#13741)

* Update JS dependencies and misc tweaks

- Update all JS dependencies minus webpack
- Adapt CodeMirrors styling to new CSS parent introduced by EasyMDE
- Set eslint parser to latest and add new eslint 7.14 rule
- Speed up npm install by disabling audit and fund checks
- Move fomantic-ui to optional dependencies to further speed up npm
- Enable syntax highlighting on GH for .eslintrc and .stylelintrc
- Makefile cleanups

* disable audit in npmrc

* add missing dash

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

.eslintrc

@@ -9,7 +9,7 @@ ignorePatterns:
 
 parserOptions:
   sourceType: module
-  ecmaVersion: 2020
+  ecmaVersion: 2021
 
 plugins:
   - eslint-plugin-unicorn
@@ -235,6 +235,7 @@ rules:
   no-new-symbol: [2]
   no-new-wrappers: [2]
   no-new: [0]
+  no-nonoctal-decimal-escape: [2]
   no-obj-calls: [2]
   no-octal-escape: [2]
   no-octal: [2]

.gitattributes

@@ -2,3 +2,5 @@
 /vendor/** -text -eol linguist-vendored
 /public/vendor/** -text -eol linguist-vendored
 /templates/**/*.tmpl linguist-language=Handlebars
+/.eslintrc linguist-language=YAML
+/.stylelintrc linguist-language=YAML

.npmrc

@@ -1,2 +1,4 @@
+audit=false
+fund=false
 package-lock=true
 save-exact=true

Makefile

@@ -255,7 +255,7 @@ swagger-check: generate-swagger
 		echo "Please run 'make generate-swagger' and commit the result:"; \
 		echo "$${diff}"; \
 		exit 1; \
-	fi;
+	fi
 
 .PHONY: swagger-validate
 swagger-validate:
@@ -296,7 +296,7 @@ fmt-check:
 		echo "Please run 'make fmt' and commit the result:"; \
 		echo "$${diff}"; \
 		exit 1; \
-	fi;
+	fi
 
 .PHONY: checks
 checks: checks-frontend checks-backend
@@ -348,7 +348,7 @@ test-check:
 		echo "You should change the tests to create these files in a temporary directory."; \
 		echo "Do not simply add these files to .gitignore"; \
 		exit 1; \
-	fi;
+	fi
 
 .PHONY: test\#%
 test\#%:
@@ -373,7 +373,7 @@ test-vendor: vendor
 		echo "Please run 'make vendor' and commit the result:"; \
 		echo "$${diff}"; \
 		exit 1; \
-	fi;
+	fi
 
 generate-ini-sqlite:
 	sed -e 's|{{REPO_TEST_DIR}}|${REPO_TEST_DIR}|g' \
@@ -623,7 +623,7 @@ docs:
 	cd docs; make trans-copy clean build-offline;
 
 node_modules: package-lock.json
-	npm install --no-save
+	npm install --no-save --no-optional
 	@touch node_modules
 
 .PHONY: npm-update
@@ -637,6 +637,9 @@ npm-update: node-check | node_modules
 fomantic: $(FOMANTIC_DEST)
 
 $(FOMANTIC_DEST): $(FOMANTIC_CONFIGS) | node_modules
+	@if [ ! -d node_modules/fomantic-ui ]; then \
+		npm install --no-save; \
+	fi
 	rm -rf $(FOMANTIC_DEST_DIR)
 	cp -f web_src/fomantic/theme.config.less node_modules/fomantic-ui/src/theme.config
 	cp -rf web_src/fomantic/_site/* node_modules/fomantic-ui/src/_site/
@@ -664,7 +667,7 @@ svg-check: svg
 		echo "Please run 'make svg' and 'git add $(SVG_DEST_DIR)' and commit the result:"; \
 		echo "$${diff}"; \
 		exit 1; \
-	fi;
+	fi
 
 .PHONY: update-translations
 update-translations:

package.json

@@ -5,39 +5,38 @@
     "node": ">= 10.13.0"
   },
   "dependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "7.12.9",
     "@babel/plugin-transform-runtime": "7.12.1",
-    "@babel/preset-env": "7.12.1",
+    "@babel/preset-env": "7.12.7",
     "@babel/runtime": "7.12.5",
     "@claviska/jquery-minicolors": "2.3.5",
-    "@primer/octicons": "11.0.0",
+    "@primer/octicons": "11.1.0",
     "add-asset-webpack-plugin": "1.0.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.2",
     "clipboard": "2.0.6",
-    "codemirror": "5.58.2",
-    "core-js": "3.7.0",
+    "codemirror": "5.58.3",
+    "core-js": "3.8.0",
     "css-loader": "5.0.1",
     "css-minimizer-webpack-plugin": "1.1.5",
     "dropzone": "5.7.2",
-    "easymde": "2.12.1",
+    "easymde": "2.13.0",
     "escape-goat": "3.0.0",
     "fast-glob": "3.2.4",
     "file-loader": "6.2.0",
-    "fomantic-ui": "2.8.7",
     "font-awesome": "4.7.0",
     "jquery": "3.5.1",
     "jquery.are-you-sure": "1.9.0",
     "less": "3.12.2",
-    "less-loader": "7.0.2",
+    "less-loader": "7.1.0",
     "license-webpack-plugin": "2.3.1",
     "mermaid": "8.8.3",
-    "mini-css-extract-plugin": "1.3.0",
+    "mini-css-extract-plugin": "1.3.1",
     "monaco-editor": "0.21.2",
     "monaco-editor-webpack-plugin": "2.0.0",
-    "postcss": "8.1.6",
+    "postcss": "8.1.10",
     "raw-loader": "4.0.2",
     "sortablejs": "1.12.0",
-    "swagger-ui": "3.36.2",
+    "swagger-ui": "3.37.2",
     "terser-webpack-plugin": "4.2.3",
     "tributejs": "5.1.3",
     "vue": "2.6.12",
@@ -53,13 +52,16 @@
     "worker-loader": "3.0.5",
     "wrap-ansi": "7.0.0"
   },
+  "optionalDependencies": {
+    "fomantic-ui": "2.8.7"
+  },
   "devDependencies": {
-    "eslint": "7.13.0",
+    "eslint": "7.14.0",
     "eslint-plugin-html": "6.1.1",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-unicorn": "23.0.0",
     "eslint-plugin-vue": "7.1.0",
-    "stylelint": "13.7.2",
+    "stylelint": "13.8.0",
     "stylelint-config-standard": "20.0.0",
     "svgo": "1.3.2",
     "updates": "11.4.0"

public/img/svg/octicon-container.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-container" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10.41.24l4.711 2.774A1.767 1.767 0 0116 4.54v5.01a1.77 1.77 0 01-.88 1.53l-7.753 4.521-.002.001a1.767 1.767 0 01-1.774 0H5.59L.873 12.85A1.762 1.762 0 010 11.327V6.292c0-.304.078-.598.22-.855l.004-.005.01-.019c.15-.262.369-.486.64-.643L8.641.239a1.75 1.75 0 011.765 0l.002.001zM9.397 1.534a.25.25 0 01.252 0l4.115 2.422-7.152 4.148a.267.267 0 01-.269 0L2.227 5.716l7.17-4.182zM7.365 9.402L8.73 8.61v4.46l-1.5.875V9.473a1.77 1.77 0 00.136-.071zm2.864 2.794V7.741l1.521-.882v4.45l-1.521.887zm3.021-1.762l1.115-.65h.002a.268.268 0 00.133-.232V5.264l-1.25.725v4.445zm-11.621 1.12l4.1 2.393V9.474a1.77 1.77 0 01-.138-.072L1.5 7.029v4.298c0 .095.05.181.129.227z"/></svg>

web_src/less/_editor.less

@@ -1,6 +1,13 @@
-.CodeMirror {
+.EasyMDEContainer .CodeMirror {
+  color: var(--color-input-text);
+  background-color: var(--color-input-background);
+  border-color: var(--color-secondary);
   font: 14px var(--fonts-monospace);
 
+  .CodeMirror-cursor {
+    border-left: 1px solid var(--color-input-text);
+  }
+
   &.cm-s-default {
     border-radius: 3px;
     padding: 0 !important;
@@ -27,6 +34,7 @@
 
 .editor-toolbar {
   opacity: 1 !important;
+  border-color: var(--color-secondary);
 }
 
 .editor-toolbar button:not(:hover) {

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

@@ -1267,19 +1267,6 @@ a.blob-excerpt:hover {
 /* code mirror dark theme */
 
 .CodeMirror {
-  color: #9daccc;
-  background-color: #2e323e;
-  border-color: var(--color-secondary);
-  border-top: 0;
-
-  div.CodeMirror-cursor {
-    border-left: 1px solid var(--color-secondary-dark-6);
-  }
-
-  .CodeMirror-gutters {
-    background-color: #2e323e;
-  }
-
   &.cm-s-default,
   &.cm-s-paper {
     .cm-property {