Change editor from ACE to Monaco (#340)

migrate to monaco editor

dist-server/index.js

@@ -0,0 +1,11 @@
+const express = require('express')
+const path = require('node:path')
+const { config } = require('dotenv')
+config()
+const app = express()
+const PORT = process.env.DIST_SERVER_PORT || 8060
+app.use(express.static(path.join(__dirname, '..', 'dist')))
+app.get("*", (req, res) => {
+    res.sendFile(path.join(__diname, '..', 'dist', 'index.html'))
+})
+app.listen(PORT, () => { console.log(`aggr dist server started on ${PORT}`) })

package.json

@@ -12,20 +12,20 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "clean": "rm -rf node_modules && npm cache clean -f",
-    "deploy": "node scripts/gh-pages-deploy.mjs",
-    "serve:dist": "node ./dist-server/index.mjs"
+    "serve:dist": "node ./dist-server/index.mjs",
+    "deploy": "node scripts/gh-pages-deploy.mjs"
   },
   "dependencies": {
     "@mdi/font": "^5.6.55",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "ace-builds": "^1.13.1",
     "axios": "^1.4.0",
     "color-fns": "^0.1.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eventemitter3": "^4.0.7",
     "idb": "^6.0.0",
     "lightweight-charts": "git+https://github.com/Tucsky/lightweight-charts.git#a36ce5589f82e3d40f36ffcf08bdd1d67956f15a",
     "lodash.merge": "^4.6.2",
+    "monaco-editor": "0.41.0",
     "pako": "^1.0.6",
     "tunajs": "^1.0.13",
     "vite": "^4.4.9",
@@ -62,6 +62,7 @@
     "ttf2woff": "^3.0.0",
     "typescript": "~3.9.3",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-pwa": "^0.15.1",
     "vite-plugin-vue2-svg": "^0.4.0",
     "vite-svg-loader": "^4.0.0",

src/components/chart/IndicatorControl.vue

@@ -113,7 +113,7 @@ export default class IndicatorControl extends Vue {
   color: var(--theme-color-100);
 
   i {
-    line-height: 1.35;
+    vertical-align: bottom;
   }
 
   &.-error {

src/components/chart/IndicatorDialog.vue

@@ -355,7 +355,7 @@ const ignoredOptionsKeys = [
 import ToggableSection from '@/components/framework/ToggableSection.vue'
 import IndicatorOption from '@/components/chart/IndicatorOption.vue'
 import DropdownButton from '@/components/framework/DropdownButton.vue'
-import Editor from '@/components/framework/Editor.vue'
+import Editor from '@/components/framework/editor/Editor.vue'
 import { Preset } from '@/types/types'
 export default {
   components: {
@@ -866,6 +866,7 @@ hr.-vertical {
 .indicator-dialog {
   ::v-deep .dialog__content {
     width: 755px;
+    overflow: visible;
 
     .dialog__body {
       padding: 0;
@@ -891,7 +892,8 @@ hr.-vertical {
   }
 
   &__action {
-    .dialog--small & span {
+    .dialog--small & span,
+    .dialog--medium & span {
       display: none;
     }
   }

src/components/framework/Editable.vue

@@ -151,8 +151,8 @@ export default class Editable extends Vue {
       return
     }
 
-    const max = typeof this.max === 'undefined' ? Infinity : this.max
-    const min = typeof this.min === 'undefined' ? -Infinity : this.min
+    const max = typeof this.max !== 'number' ? Infinity : this.max
+    const min = typeof this.min !== 'number' ? -Infinity : this.min
     const precision = countDecimals(text)
     const step = 1 / Math.pow(10, precision)
     const change = step * direction * -1