feat: markdown editor for indicators description

src/assets/sass/editor.scss

@@ -0,0 +1,30 @@
+.editor {
+  height: 100%;
+  min-height: 50px;
+
+  .monaco-editor {
+    #app.-light & {
+      --vscode-editor-background: var(--theme-background-100);
+      --vscode-editorStickyScroll-background: var(--theme-background-100);
+      --vscode-editorStickyScrollHover-background: var(--theme-background-100);
+      --vscode-editorGutter-background: var(--theme-background-100);
+    }
+
+    .minimap-shadow-visible {
+      box-shadow: rgb(0 0 0 / 10%) -6px 0 6px -6px inset;
+    }
+
+    .scroll-decoration {
+      box-shadow: rgb(0 0 0 / 10%) 0 6px 6px -6px inset;
+    }
+
+    .view-overlays .current-line {
+      border-color: var(--theme-background-100);
+    }
+
+    .minimap {
+      left: auto !important;
+      right: 0 !important;
+    }
+  }
+}

src/components/chart/buildUtils.ts

@@ -831,7 +831,8 @@ function parseReferences(
           references.push({
             indicatorId,
             serieId,
-            plotIndex
+            plotIndex,
+            plotType: 'unknown'
           })
         }
 

src/components/chart/chart.d.ts

@@ -108,6 +108,7 @@ export interface IndicatorReference {
   indicatorId: string
   serieId?: string
   plotIndex: number
+  plotType: string
 }
 export interface Renderer {
   minLength: number

src/components/chart/chart.ts

@@ -1400,9 +1400,11 @@ export default class Chart {
                 this.incrementRendererBar(temporaryRenderer)
 
                 for (const id in computedSeries) {
-                  computedSeries[id].push({
-                    time: temporaryRenderer.localTimestamp
-                  })
+                  if (this.seriesIndicatorsMap[id].plotType !== 'broken-area') {
+                    computedSeries[id].push({
+                      time: temporaryRenderer.localTimestamp
+                    })
+                  }
                 }
 
                 barCount++
@@ -1475,7 +1477,7 @@ export default class Chart {
     }
   }
 
-  createIndicatorSeries(indicator) {
+  createIndicatorSeries(indicator: LoadedIndicator) {
     if (!indicator.model) {
       return
     }
@@ -1501,7 +1503,8 @@ export default class Chart {
 
       this.seriesIndicatorsMap[plot.id] = {
         indicatorId: indicator.id,
-        plotIndex: i
+        plotIndex: i,
+        plotType: plot.type
       }
       series.push(plot.id)
 

src/components/framework/Dialog.vue

@@ -183,7 +183,7 @@ export default class Dialog extends Vue {
 
   handleDrag(event) {
     if (
-      this._handleTranslateRelease || 
+      this._handleTranslateRelease ||
       event.button === 2 ||
       event.target.classList.contains('-no-grab') ||
       event.target.parentElement.classList.contains('-no-grab')
@@ -338,9 +338,15 @@ export default class Dialog extends Vue {
     }
 
     if (savePosition) {
-      this.savePosition(position)
+      if (
+        typeof position.w === 'number' &&
+        typeof position.h === 'number' &&
+        (position.w !== this.position?.w || position.h !== this.position?.h)
+      ) {
+        this.$emit('resize')
+      }
 
-      this.$emit('resize')
+      this.savePosition(position)
     }
 
     if (this._persistTimeout) {

src/components/framework/PromptDialog.vue

@@ -1,12 +1,31 @@
 <template>
-  <Dialog @clickOutside="close" size="small" :resizable="false">
+  <Dialog
+    @clickOutside="close"
+    size="small"
+    :resizable="tag === 'editor'"
+    @resize="resizeEditor"
+  >
     <template v-slot:header>
       <div class="dialog__title">{{ action }}</div>
     </template>
     <p class="mt0 mb8 -nl" v-if="question">{{ question }}</p>
-    <form ref="form" @submit.prevent="submit">
-      <div class="form-group">
-        <label v-if="label">{{ label }}</label>
+    <form
+      ref="form"
+      class="flex-grow-1 d-flex -column"
+      @submit.prevent="submit"
+    >
+      <div class="form-group flex-grow-1 d-flex -column">
+        <div class="d-flex mb8">
+          <label class="mr8 mt4 mb4">{{ label }}</label>
+
+          <label
+            v-if="tag === 'editor'"
+            class="checkbox-control -small mlauto mr0"
+          >
+            <input type="checkbox" class="form-control" v-model="showPreview" />
+            <div v-tippy title="Show preview"></div>
+          </label>
+        </div>
         <input
           v-if="tag === 'input'"
           type="text"
@@ -16,6 +35,15 @@
           v-autofocus
           v-on:keyup.enter="submit"
         />
+        <MarkdownEditor
+          v-else-if="tag === 'editor'"
+          class="w-100 flex-grow-1"
+          ref="editor"
+          v-model="value"
+          :show-preview="showPreview"
+          minimal
+          autofocus
+        />
         <textarea
           v-else
           type="text"
@@ -42,6 +70,10 @@
 import DialogMixin from '@/mixins/dialogMixin'
 
 export default {
+  components: {
+    MarkdownEditor: () =>
+      import('@/components/framework/editor/MarkdownEditor.vue')
+  },
   props: {
     tag: {
       type: String,
@@ -73,7 +105,8 @@ export default {
   },
   mixins: [DialogMixin],
   data: () => ({
-    value: ''
+    value: '',
+    showPreview: false
   }),
   mounted() {
     if (this.input && this.input.length) {
@@ -83,6 +116,11 @@ export default {
   methods: {
     submit() {
       this.close(this.value)
+    },
+    resizeEditor() {
+      if (this.$refs.editor && this.$refs.editor.resize) {
+        this.$refs.editor.resize()
+      }
     }
   }
 }

src/components/framework/editor/Editor.vue

@@ -60,8 +60,6 @@ export default class Editor extends Vue {
       }
     }
 
-    this.createTheme()
-
     this.createEditor()
   }
 
@@ -109,45 +107,6 @@ export default class Editor extends Vue {
     window.addEventListener('beforeunload', this._beforeUnloadHandler)
   }
 
-  createTheme() {
-    const lsLight = this.$store.state.settings.theme === 'light'
-    const style = getComputedStyle(document.documentElement)
-    const backgroundColor = splitColorCode(
-      style.getPropertyValue('--theme-background-base')
-    )
-    const backgroundColor100 = splitColorCode(
-      style.getPropertyValue('--theme-background-100')
-    )
-    const backgroundColor150 = splitColorCode(
-      style.getPropertyValue('--theme-background-150')
-    )
-
-    if (lsLight) {
-      monaco.defineTheme('my-light', {
-        base: 'vs',
-        inherit: true,
-        rules: [],
-        colors: {
-          'minimap.background': rgbToHex(backgroundColor150),
-          'editor.background': rgbToHex(backgroundColor100),
-          'editor.lineHighlightBackground': rgbToHex(backgroundColor),
-          'editor.lineHighlightBorder': rgbToHex(backgroundColor)
-        }
-      })
-    } else {
-      monaco.defineTheme('my-dark', {
-        base: 'vs-dark',
-        inherit: true,
-        rules: [],
-        colors: {
-          'editor.background': rgbToHex(backgroundColor100),
-          'editor.lineHighlightBackground': rgbToHex(backgroundColor),
-          'editor.lineHighlightBorder': rgbToHex(backgroundColor)
-        }
-      })
-    }
-  }
-
   async createEditor() {
     this.editorInstance = monaco.create(this.$el as HTMLElement, {
       value: this.value,
@@ -162,8 +121,7 @@ export default class Editor extends Vue {
       overviewRulerLanes: 0,
       overviewRulerBorder: false,
       contextmenu: false,
-      theme:
-        this.$store.state.settings.theme === 'light' ? 'my-light' : 'my-dark'
+      theme: 'aggr'
     })
 
     this.editorInstance.getDomNode().addEventListener('mousedown', () => {